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 :

          //Default post list layout
          $this -> post_list_layout   = array(
                                          'content'           => 'span8',
                                          'thumb'             => 'span4',
                                          'show_thumb_first'  => false,
                                          'alternate'         => true
          );

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 :

//gets the filtered post list layout
        $layout                         = apply_filters( 'tc_post_list_layout', TC_init::$instance -> post_list_layout );

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

add_filter('tc_post_list_layout' , 'my_post_list_layout_options');
function my_post_list_layout_options($layout) {

	//extracts the array as variables
	extract($layout , EXTR_OVERWRITE );

	//set the custom layout parameters
	$content 			= 'span9';
	$thumb 				= 'span3'; //<= 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
	$show_thumb_first 	        = true;
	$alternate 			= wp_is_mobile() ? false : true;//<= this will desactivate the alternate thumbnail / content in mobile viewports
	
	//returns the recreated $layout array containing your custom variables values
	return compact("content" , "thumb" , "show_thumb_first" , "alternate" );
}

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

if ( !  is_category('my-category') )
   return $layout; //<= this basically says : if the currently displayed category is not the one with 'my-category' slug, then return the original $layout

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!