WordPress loop for a custom post type

WordPress Code Snippet

This post has been updated with newer and better information. Please go here to see the updated version

We use custom post types on nearly every site we develop, from sliders to products, custom post types make it a lot easier to separate content so your client finds it easier to maintain their WordPress website.

Creating a WordPress loop for a custom post type is easy and just needs this simple snippet instead of the normal WordPress loop. It’s best to create a WordPress page template to put this code into as you typically don’t want it to be in the normal WordPress files such as index.php, page.php, single.php or archive.php. I would suggest creating a copy of your themes page.php and then save it as template-younamehere.php. You can then replace the normal WordPress loop with the following code and then assign this to a particular page you want the new post type to appear on. You will need to add a template header to the file first of course, you can find the code snippet for this by clicking here.

<?php
$loop = new WP_Query(
    array(
        'post_type' => 'yourposttypehere' // This is the name of your post type - change this as required,
        'posts_per_page' => 50 // This is the amount of posts per page you want to show
    )
);
while ( $loop->have_posts() ) : $loop->the_post();
// The content you want to loop goes in here:
?>

<div class="col-sm-4">
My column content
</div>

<?php endwhile;
wp_reset_postdata();
?>

To break this down into English, this is what is happening here:

  • The first variable called ‘$loop’ is setting up a WordPress query which is an optimised SQL query to the database. ‘$loop’ can be named anything you want, just make sure it represents what you are doing so it makes sense to any other developers who look at this query. For example, you might call this $productloop or $teamloop depending on the content you want to display. You also need to make sure that if you do change the variable name that it is also changed in the ‘>have posts()’ line.
  • The second section starts with the line with array written on it and it is an array of the things you want to filter the loop on. In this example, we are setting the post type name which is the slug of your post type, not the display name. You will need to change this to the post type name that you are using such as ‘products’. We are then stipulating how many posts should be displayed. 50 means display the most 50 recent posts from this post type. You can change this to be any number you wish, just make sure that you don’t set it to -1 as this will show all posts and is considered bad practice.
  • Next comes the typical WordPress loop only with your variable name at the start of each section. This is the line that begins with the word ‘while’. This is checking if the WP_Query we have run has any content to show and if it does then it runs a loop of whatever content you put into the section between this and the close of the loop.
  • We then add in the code that we want to loop through for each post type, this might consist of a div class and some content. Here we have added a simple column div with some text in between. If our post type has content within it stored in the database, then it will display this content for each item. i.e. if there are 50 posts then there will be 50 divs output onto the page with a class of ‘col-sm-4’ and the same piece of text content. Not that useful, but if you change this content to be a link to the post type page with the_permalink() function and the_title() function then you have a loop with titles of each post and links to each one.
  • Finally, we end the loop query and then add in a reset postdata to save it interfering with any other loop/queries you might have on the page.

Hope you find this WordPress snippet useful.