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

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 :




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!



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

Comments are closed.