Pinboard Theme Documentation Day 2: Customizing the Content Area

Our second part of Pinboard Theme’s Documentation where we will show 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 …

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:

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:

Pinboard Set Featured Image

On the front page posts should now look like this:

Pinboard Featured Image

Change Number of Leading Posts

Now let’s populate the website with posts:

Pinboard Blog Full Width

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:

Pinboard Grid Posts Options

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:

Pinboard No Leading Articles

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:

Pinboard Content Columns

If we set the content columns option to 4, posts will display in 4 columns:

Pinboard Blog 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:

Pinboard Blog Right Sidebar

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:

Pinboard Crop Post Thumbnails

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:

Pinboard Rebuild Thumbnails
You should now see the post in an even grid:

Pinboard Cropped Thumbnails

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:

Pinboard Posts Navigation

Static or AJAX links require user interaction, so your footer content will always be visible:

Pinboard AJAX Links

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:

Pinboard Posts Navigation Labels

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.

40 thoughts on “Pinboard Theme Documentation Day 2: Customizing the Content Area

  1. 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?

    1. 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.

      1. 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.

        1. 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 called pinboard_excerpt_length() which filters this length. You can edit it to adapt to your needs.

          1. 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.

  2. 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. 😉

    1. 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.

  3. 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!

          1. 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.

  4. 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!

  5. Hi. Can anyone tell me what a “Boxes sidebar” is? Daniel mentions it above but Google seems stymied.

    Thanks.

    Don

    1. 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.

  6. 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.

  7. 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

  8. 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.

  9. 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?

  10. 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

      1. 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

  11. 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!

  12. 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!

  13. 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 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *