Customizing the post layout (content, thumbnail) in post lists


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Following the excellent javascript snippet from Rocco describing how to change the order of the content and the thumbnail, I’ll describe here the PHP way to hook into the property handling the post layout in post lists (archives, search results, …) and set new custom values, including mobile viewport detection.

 

By default, the post lists are displayed with an alternance of content and thumbnail as shown below :

post_list_layout_in_customizer_wordpress_theme1

 

 

1) Layout data and filter

In the Customizr theme, the default post layout in post lists is a property of class-fire-init.php declared as an array :

Then, it gets stored as a $layout php variable in the class-content-post_list.php, where it is also assigned to a WordPress filter as follow :

This filter (‘tc_post_list_layout’) will allow to alter this layout.

 

2) Hooking into the post layout property

Here we use the add_filter WordPress function to hook into the filter and define a callback function with 4 parameters, allowing us to modify the 4 entries of the post_list_layout array.

In the following example, a new value is set for all parameters. For the alternate parameter, a conditional statement is used to desactivate the alternance thumbnail/content only for mobile devices, using the wp_is_mobile WordPress function.

Note : the sum of content and thumb span suffixes (span[*]) must equal 12 otherwise the content and thumbnail blocks will no fit correctly in any viewport

 

You can narrow down the scope of this function by adding conditional tags at the beginning of it, like for example :

 

And that’s it. You now have a simple function to take control over your post layout in lists of posts.

Feel free of course to comment and share feedbacks on this implementation!

 

 


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



25 thoughts on “Customizing the post layout (content, thumbnail) in post lists

  • Christopher Kemmett

    I currently have my posts listed in a ‘box’ format on my home page. I would like to create a hook that lists certain posts with specific ‘tags’ in the original (span 9, span 3) list format [ON ANOTHER PAGE]. How can I do this?

    I actually haven’t figured out how to list my posts on more than one page without duplicating or manipulating the “featured page/posts” as described in this snippet http://presscustomizr.com/snippet/featuring-pages-another-page-post-home/

    Specifically I have a column on another page: http://www.therealstrategy.com/integrity

    Under Whistleblower News I would like the articles I write with the ‘tag’ “whistleblower” to appear here.

    Thanks to everyone for any help.

    • Giorgio25b

      Hi Christopher,
      try with this snippet here in your functions.php

  • TJ

    Hi,

    I managed to fix the layout to have all web images and text on the side I want (as a list on a category page), but I need to change how it appears on a mobile device. It appears as
    Post 1: Text then image
    Post 2: Image then Text
    Post 3: Text then Image

    How can I change it so it’s more consistent – Image then text for all the listing? Pls help

    many thanks

  • Rocco Aliberti

    Hi Lisa you can you use something like this:

    Hope this helps.

    • Nicolas Post author

      Hi Lisa,

      in the latest version of the theme (v3.3.9), you can set a grid layout for your blog posts. (see the documentation here )

      Category listing going to your page with shortcode instead of the actual category : there’s a way, it would be to create a redirection like this (paste it in your functions.php file) :

      Hope this helps !

      • Giorgio25b

        is it missing a parenthesis?

        • Giorgio25b

        • Rocco Aliberti

          Yes parenthesis’s missing but this is the correct code:

          But first check if your php version is >= 5.3.0

      • Lisa

        That is great. One more question, and I apologize if this has been answered. For some reason I am having troubles grasping the concept even though I know php, mysql, html, css…. I think I missed the chapter relating to => and -> !

        Anyways, how can I capture the category that was selected and use that in the variable. So it would be more like:

        if ( is_category( $this_category ) ){
        wp_redirect( ‘http://dev.johnbockin.com/’ . $this_category, 301 ); exit;

        I saw a query that was $cat= get_queried_object(); which returned an array, but couldn’t quite figure out how to pull the current category out of the array.

  • Arni

    Hi,
    I used this best theme more than one year on some sites. Now I try to use it with BuddyPress.
    I want remake layout of main page on 2 columns of different content – first for post list, second for list of BuddyPress messages.
    Is it possible? Thanks.

  • Tiffany Scott

    NEWBIE ALERT. Thank you for the amazing theme. My problem is: span9 & span3, when I edit the margins to look how I want per-page it messes the other page up, so I have been going in and changing the margins for .post-xxx and .archive .post-xxx etc, and when I do this for the posts list as it is alternates, every time I make a new post I have to go in and set the margins for each post all over again because they are opposite of where they were. I do like how they alternate however, if there is something I could do to not have to keep changing the margins whenever I make a new post that would be great, but I am just learning from experience here (about 2 weeks worth lol). I tried to put $alternate = false; and it is still alternating. I have also tried changing span9&span3 to span7&span5, which worked. Will see if that is any easier. Can you tell me what I am doing wrong in changing it from alternating to not alternating? and if you have a better solution or any ideas to my issue?

    • Giorgio25b

      Hi Tiffany,
      maybe moving this to the forum makes it easier, though a very brief answer could be this:
      in your child-theme style.css you are actually targeting sometimes the general span8 (line 475), sometimes the span9 (line 479) and sometimes you are targeting specific post id (line 367)… I also found other stuff at line 199.
      Bottom line is your style.css is bit confusing, never apply the post-id number to any css rule unless you need to target a specific post.
      If you make a rule that only apply to a post with id-345, when the next post with id-367 will come it will not be able to use that rule due to its very own specificity to the previous post.

      Hope it helps
      and keep on mind that takes time to get it right 😉

      • Giorgio Riccardi

        Thanks Nicolas, it did help a lot!
        Here is my snippet for different conditions: home, custom post types and default

        The only problem here is when you have a CPT that shares the categories with the default Posts taxonomy: when you have a category-archive that lists both Post and CPT, the list will show 2 different span combination.
        It can of course solved via css, but I’m wondering if there is a way to polish this code?

        G.

  • AM

    Hi Nicholas,

    Thank you for such a wonderful theme. I’m a novice to WP but I’ve found your theme very easy to follow and use to create a beautiful website.

    I have one q. The readers find it hard to follow the post display with the alt post display layout. I know you’ve explained it above but I’m new to this and it doesn’t make any sense to me.

    What shortcode can I use to change the post list display to image on left and text on the right for ALL the posts?
    And where do I insert this shortcode?

    Any help will be greatly appreciated!

    Many thanks

  • Rafal

    I’ve installed customizr on 2 separate WP and it is great.
    Is it possible to create grid layout in following way:

    1) I have blogs.php in child theme and it is being assigned to pages, after that I can filter out few categories, so I can create few blogsxxx.php and assign it to different pages.
    2) Create posts
    3) Create menu based on categories, so only specific categories are visible, I have done it through functions.php and query_post

    Till this point it works great, but what I would like to do here is to create blogsxxx.php with grid layouts, how can I do it? I’ve seen also possibility of CSS modifications to single page or posts, but in such case I will have to create each page manually.

    Is there any way of doing such layout which them will be assigned to blogsxxx.php?

Comments are closed.