Styling different post types within the same loop in WordPress

Originally posted on the GuRuStu Group Blog ( post link )

Now that WordPress has finished up the internal API for custom post types we can begin taking advantage of all the cool new ways one can organize content within it.

To learn more about custom post types check out Justin Tadlock’s great custom post type article.

During a recent company project I had to work out how to output unique HTML for different post types in the search results. The solution was surprisingly easy thanks to the new template function get_template_part(). This technique can also be transferred to the main loop if you are going output different post types together. In the case of search results, if you set your new post type as search-able it will show up together with your posts and pages.

get_template_part() is located in wp-includes/general-template.php and accepts two arguments, slug and name. It uses these two arguments to locate a template file of your choosing. What is cool about the way it works is how the slug acts as a fallback when it can’t find the template file specified by the second argument name.

From the functions self documentation

Load a template part into a template

Makes it easy for a theme to reuse sections of code in a easy to overload way for child themes.

Includes the named template part for a theme or if a name is specified then a specialised part will be included. If the theme contains no {slug}.php file then no template will be included.

The template is included using require, not require_once, so you may include the same template part multiple times.

For the parameter, if the file is called “{slug}-special.php” then specify “special”.

@uses locate_template()
@since 3.0.0
@uses do_action() Calls ‘get_template_part{$slug}’ action.

@param string $slug The slug name for the generic template.
@param string $name The name of the specialised template.

The new default WordPress theme Tweny Ten uses this function to allow for child themes to overwrite the theme’s loop file. We however will be re-purposing it for a slightly different use. Post type conditional html loading!

Alright lets get started.

Note: If you’ve started using get_template_part() for loops in your themes or are creating a child theme for Twenty Ten ( or any other theme using a loop.php file similarly to how Twenty Ten does ) you can probably copy a lot of this code without much worry.

Create a new file called loop-search.php and copy over the current contents of loop.php from your theme.

In the loop-seach.php file, find the actual post loop and cut and paste the insides of the post loop ( what is withing the while( have_posts() ) ) and paste it into a new file called post-layout.php. Mine looks like this:

Now replace what you just cut from loop-search.php with something that looks like this:

Do a test search on your blog to make sure nothing has changed visually. If you find you theme is spitting errors make sure you haven’t made any syntax errors.

What does this code do?

Now when you search for some­thing and your new custom post type is listed as search­able Word­Press will look for a file called post-layout-{custom_post_type_here}.php when looping through the search results. If it can’t find that particular file it will fallback on the new post-layout.php template file we created.

Now whenever you create a new post type create a new file called post-layout-{your_custom_post_type_here}.php and put in any custom html you may need to output for that particular type.

For example here is the post-layout-profiles.php file we used in the company project to output a “Company Profile” for the Client.

As you can see this custom post type output uses featured thumbnails, custom taxonomies for outputting the current profile’s company title, as well as post meta that stores that profiles contact information. This file is also used for outputting the complete profile on a individual profile page by detecting whether we are viewing an archive or search view of the profile.

So what are you waiting for? Start creating new post templates for your own custom post types right now!