Welcome to our second part of Pinboard Theme’s Documentation. This documentation is part of a series of tutorials so if you haven’t read our previous tutorials make sure to check them below:
- Day 1: How to customize the Site Header
- Day 2: How to customize the Content Area
Today we will teach you how to customize the site’s content area. You will learn how to set featured images to posts, how to change the number of leading posts in archives, how to select the number of columns you want your content to appear in, to choose how post thumbnails are cropped and how to customize the posts navigation. Continue to find out how you can master all these features:
Set Featured Images to Posts
Since this theme is intended for media presentation we can probably all agree it looks pretty unfinished with just text. To make them more loving we’ll add a featured image to each of them.
Featured Images are a standard feature of WordPress. They are added when editing posts, by clicking the “Set Featured Image” link in the right column (which opens the media manager), selecting the desired image and clicking the “Set Featured Image” button, as seen in the screenshot below:
On the front page posts should now look like this:
Change Number of Leading Posts
Now let’s populate the website with posts:
You can see the first two posts are displayed full width and the rest in a 3 column masonry layout. The two full width posts are only available on the front page; if you visit an archive page you’ll see there are no leading posts and all display uniformly. This behavior can be changed from theme options, where you can select how many leading articles you want to display on the front page, on portfolio pages, on archive pages and on secondary pages, as seen in the screenshot below:
For example, if we change the full posts to display on the front page to 0, we’ll have a consistent layout of posts on 3 columns:
Change the Number of Content Columns
By default the content displays on 3 columns, but the theme’s grid system allows content to be displayed full width or in 2, 3 or 4 columns. You can change the number of columns on which the content displays from Appearance > Theme Options > Layout, as seen in the screenshot below:
If we set the content columns option to 4, posts will display in 4 columns:
If the Sidebar is active, then it will account for one column from the layout, so for the option of 4 content columns the posts will display on 3 columns and the sidebar on one column:
Change Post Thumbnails Crop Flag
By default featured images are scaled to proportions when resized. This allows the visitor to see all the image’s details while the Masonry grid makes sure posts are evenly aligned. If you’d rather want to keep featured images at fixed dimensions and have a grid of identically shaped posts you can force a hard crop on post thumbnails which will crop all images at the exact dimensions of 302×205, regardless of their proportions.
To do this first you have to enable the option “Hard crop post thumbnails” in Theme Options:
Changing this option will automatically crop thumbnails for any images you upload in the future, however images already in the Media Library will retain their existing thumbnails. To adjust the new setting for all thumbnails we will use the plugin AJAX Thumbnail Rebuild. After installing and activating this plugin, go to Tools > Rebuild Thumbnails and select the thumbnails you want to rebuild. Thumbs with the name blog-thumb and teaser-thumb are the only ones you need to rebuild if you’re cropping featured images. Additionally you should check “Only rebuild featured images” to accelerate the process as they are the only images we need to rebuild:
If you want to revert to thumbnails scaled to proportions all you have to do is disable the “Hard Crop Post Thumbnails” option and rebuild your thumbnails with the AJAX Thumbnail Rebuild plugin.
Choose Post Pagination
The Pinboard Theme has 3 ways in which post archives can be paginated: Infinite Scroll, AJAX Links and Static Links. Infinite Scroll automatically loads the next set of posts when the page scroll has reached the last row of posts, AJAX links load the next set of posts without refreshing the page and static links displays the classic Next Posts / Previous Posts set of links.
The default option is infinite scroll which makes posts load the fastest with minimum user interaction, however it can become inconvenient if you have important content to show to your visitors in the footer. If that’s the case you can choose to display either AJAX or static links from Theme Options:
Static or AJAX links require user interaction, so your footer content will always be visible:
If you use Static Links the classic Next Posts/Previous Posts set of links appears. Because of WordPress’ way of displaying posts in reverse-chronological order, a slight confusion may appear whether the Next/Previous posts refers to the post’s chronology or location in the archives. To clear confusion the theme allows you to select what label you want the pagination links to have:
That’s all you need to know to customize the content. We hope you found our tutorial useful and expect your feedback in the comments section. Stay tuned for our next tutorial where we will show you how to use post formats.