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:
You should now see the post in an even grid:
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.
Great post, Daniel! Thank you for the beautiful theme and ongoing documentation. I’m trying to create an even grid for posts on my category page (http://danduett.com/category/touring). My featured images are hard-cropped, but my excerpts vary in length from two to four lines long within the container. Your excerpts vary in line count as well, just not on the image you selected to show an even grid.
This happens because of variance in word length as well as hyphenation. How can I get a truly even grid? Customizing the container size via CSS resolves the issues on my category page, but makes containers unnecessarily large on my portfolio. Any ideas?
The only way I can think of is if you manipulate excerpt length so that they are all the same number of lines. You can’t make a grid like this look perfect without sacrificing content.
Got it—thanks, Daniel! Based on your knowledge of WordPress, would you recommend manually trimming each excerpt, or an automatic approach via PHP? I’d really love to set an automatic character limit for excerpts that doesn’t truncate words or end with a punctuation mark. I don’t have the knowledge of PHP to do this myself, but I’d pay for a ready-made solution.
There’s a filter for the number of words the excerpt returns called
'excerpt_length'. If you look in functions.php you’ll see there’s a function calledpinboard_excerpt_length()which filters this length. You can edit it to adapt to your needs.Thanks, Daniel! I’ve successfully altered excerpt *word* length before, but never character length. Because some words are longer than others (especially hyphenated words, which WP counts as one word), changing excerpt word length does not result in a uniform grid. Ideally, I’d like to limit the excerpt’s length in characters without truncating words or ending with a punctuation mark. This is more than an aesthetic preference; when we combine the uneven grid with infinite scroll, this actually messes up the displayed chronological order of my posts. Since I’m telling a serialized story, this is a problem I’d like to fix.
If you’re curious, you can see what I’m talking about here:
http://danduett.com/category/touring
Scroll down until the page expands and you might see what I’m talking about.
Amazing post! Looking forward to the next tutorial.
Your theme is great; I love it. Thank you very much.
I must say that DanimalXC is right, however. You cannot get an even grid with the method you describe above. Post excerpts vary in length and using the tag leaves you with something other than the typical “…”
Additionally, title lengths vary so that doesn’t work either.
All my images are exactly the same size so I don’t need to rebuild anything with the Ajax plugin. Anyway, it’s a very lovely theme and I will continue using it. I love it very much! Especially for the price which is very nice. 😉
Thank you for your kind words. The symmetry of the grid depends on the length of the post titles and the number of rows of the excerpts. All the theme can do is make sure the images are the same size. It can’t control the output of the content.
I was wondering if you could make a tutorial on how to make the most of using the Portfolio feature? Thanks.
It’s coming up, thank you fir your suggestion!
Thenk you for this theme because it’s beautiful and i love it.
I would like to know how to create thumbnails with 3 photos of three pages which should always be on the first page. I followed the advice in this tutorial but have not yet been able to create them.
thanks for the help and sorry if I have not been able to do this!
You can use the Boxes sidebar to display content in 3 columns and simply add 3 text widgets each containing the image’s code. We’ll cover this in a future tutorial.
Hi Daniel,
Great theme, can the boxes sidebar be set up so that it only displays on the Home page?
Thanks
Brian.
The Boxes sidebar appears by default only on the front page and on pages using the “Landing Page” template.
Ah ok, thanks…
Hi Daniel,
I have set the boxes up but they are appearing at the top of my blog page http://keyangel.co.uk/blog/
I tried changing the Template to “Blog, no Sidebars” but it hasn’t made any difference.
Any advice?
Thanks
Brian.
On top of the content area is exactly where the theme displays them by default. You’d have to move them manually if you want them displayed someplace else.
Thank you for this theme & tutorial; it works very nicely! I am still in the midst of trying some stuff out specially with the content. However, I am wondering, is there any way I can make a few posts static on the landing page, i.e. not updated with every new post that comes? I am using the template as a website for an educational centre. Thank you!
You can mark some posts as sticky and disable the slider. They will always appear on the front page.
Ok, I will try that out and see how it goes. Thanks much for your response!
Hi. Can anyone tell me what a “Boxes sidebar” is? Daniel mentions it above but Google seems stymied.
Thanks.
Don
It’s a sidebar that displays widgets in 3 columns each widget enclosed in a box and it displays only on the front page and on pages using the “Landing Page” template.
Hi Daniel,
I’m happy with the Boxes on the front page and on pages using the “Landing Page” template but I don’t want them to appear on the “Blog” page, could you advise on the best way to delete them?
Thanks
Brian.
Hi Daniel,
I’ve tried using the AJAX thumbnail re-builder as well as tried re-uploading my images, but every time the images become “cropped” on the portfolio page. Not sure why this is happening, any help would be appreciated.
Thanks,
Jess
Make sure you disable the “Hard crop post thumbnails” option in Theme Options.
Hi,
In Theme Options (Layout), I have selected the first option which is Content/Sidebar and I have chosen 4 content columns.
If I have a text based page, how do I get this to show in 3 columns of text plus the sidebar?
Thanks
Brian.
Layout options are for grid archives not individual pages.
I’ve used Divs and Floats to achieve the same thing…
Hello Daniel, have some problems to embedd Videos. The size will be “overlapping” the grid. I use for each post with video the right template, but since the last update from wordpress it was broken. Have you any idea to trim the video inside the grid?
That should be done automatically by the FitVids.js script. Make sure you don’t have any JavaScript errors on your page.
I love your theme (Pinboard) and OneDesigns.com, keep it up! A question: how can I add “Featured articles” on a article page, like:
http://demo.onedesigns.com/pinboard/?p=160
The same as “If you enjoyed this you may also like” on website page? Which results in some similar content or at least other content, so people will read more..
I hope a thumbnail can be included as well?
Thanks in advance!
Kind regards,
Melroy van den Berg
I’m using the Efficient Related Posts plugin for that. It doesn’t support thumbnails but there are some out there that do.
Thanks for your fast repose Daniel. Respect 🙂
One other small question: The esplanade theme has in comparison with the Pinboard theme no “percentage” for the layout dimensions. Meaning if I select Content Columns of ‘3’ within Pinboard theme.
The right sidebar I still to width for the menu. I try to play with the ‘sidebar’ ID in custom CSS field. As well as the ‘column’ and/or ‘threecol’ CSS classes.
However without luck 🙁
I would like to have the right sidebar a little smaller, so the content div box can be bigger (but still only two articles should be displayed side-by-side, meaning a numbers of columns of ‘3’ should be selected in the Theme editor).
Thanks in advance! I think you can help others with the same request as well.
Nevertheless thumbs up for your work!
Kind regards,
Melroy
Amazing theme. I just got the idea of blogging, spent 2 hours looking for themes and I was on the verge of giving up till I saw this treasure!
Hi,
How do I get my homepage to only display post excerpts? For some reason I am not able to figure this one out. I’ve tried editing the “read” function in settings and I don’t see anything that I haven’t already tried troubelshooting in the theme options. Help!
I’m not sure what you mean by only post excerpts. You can remove featured images and use the aside post format if you don’t want the title to display.
I can’t seem to mark posts as sticky. Where is this option supposed to be?
In the posts list click on “Quick Edit” and there you have “Make this post sticky”.
Hi,
is there any option to increase the number of full posts to display before grid higher than 5 ?
it doesnt accept any number above 5 🙁
The maximum number of full posts is the posts per page setting under Settings > Reading.