WordPress Custom Post Type Loop

Custom Post Types are incredibly useful for setting up data structures in the best way possible for any project and they help keep the admin area organized and easy to update. When it comes to displaying your custom post type loop though, it has some differences compared to the default post loop. Seeing as a lot of people don’t even touch the default post loop code because it generally works as needed out of the box, the custom post type loop code may be even more foreign. So I am to show the creation of a custom post type, and then we’ll go over how to loop through it on it’s own archive page. I’ll provide all the code that will allow you to implement it really easily, but the loop can always be customized as well to suit any specific needs.

Creating a Custom Post Type

The below example sets up a custom post type for “Office Locations”. This code snippet can be dropped right into your functions.php file and the only changes you’ll need to make are changing the labeling to match whatever your custom post type is for. Take note of the register_post_type functions first parameter. This will be the slug used in your custom post type archive page URL, single post page URLs, and will be used later when we make the custom post type loop query.

/* Office Locations custom post type
/********************************************************/
function vc_custom_post_types() {
	$labels = array(
		'name'               => 'Office Locations',
		'singular_name'      => 'Office Location',
		'menu_name'          => 'Office Locations',
		'name_admin_bar'     => 'Office Locations',
		'add_new'            => 'Add New',
		'add_new_item'       => 'Add New Office Location',
		'new_item'           => 'New Office Location',
		'edit_item'          => 'Edit Office Location',
		'view_item'          => 'View Office Location',
		'all_items'          => 'All Office Locations',
		'search_items'       => 'Search Office Locations',
		'parent_item_colon'  => 'Parent Office Locations:',
		'not_found'          => 'No Office Locations found.',
		'not_found_in_trash' => 'No Office Locations found in Trash.'
	);

	$args = array( 
		'public'      => true, 
		'labels'      => $labels,
        	'has_archive' => true,
		'description' => 'Office Locations are made with this post type.'
	);
    register_post_type( 'office-locations', $args );
}
add_action( 'init', 'vc_custom_post_types' );

Custom Post Type Loop

Now that we have a custom post type setup, we may want to loop through it . For this example, I’ll be setting up an archive page that is similar to a standard blog page where we loop through all the results with the general post name, image, and an excerpt. Though the same concepts can be used to loop through the output on any page you want to make. We will want to name the archive page based on the chosen slug. For an archive page the format is “archive-YOURSLUGHERE”, so for our example we would name the page “archive-office-locations” and save it as a php file.

You can then use the base archive page template from your theme, but replace the existing output loop with the below code snippet and just modify it to match your specific custom post type slug. The existing loop that you need to replace on standard themes will begin with an “if” statement like end with endif; ?>, but other theme frameworks can differ. We will be looping in a very similar way, but we will just be using a new WP_Query that is specifically pulling the data for our custom post type loop.

The Query:

<?php $query = new WP_Query( array( 'post_type' => 'office-locations', 'posts_per_page' => -1, 'order' => 'DESC', 'orderby' => 'date' ) ); ?>

The Loop:

<?php // Make sure $query is not empty. if ( $query->have_posts() ) {

// Loop over the results.
while ( $query->have_posts() ) {
$query->the_post();
?>


<article id="post-<?php the_ID(); ?>" >
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'thumbnail' );?>
</a>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
<?php the_excerpt(); ?>
</article>


<?php } } //reset global $post wp_reset_postdata(); ?>

That’s all there is to it! Now there are plenty of customization options for the custom post type loop, but those are are totally reliant on the needs of the site. You can display completely different information inside of the loop by changing the output inside the loop, or you can change the WP_Query itself to change the amount of results, the sort order, what it is sorted by, etc. The important part is to know that you can pull results just from your custom post type by setting the ‘post_type’ argument in the query.

Here is the full custom post type archive page template put together:

<?php get_header(); ?>

	
<section id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
		
        <?php $query = new WP_Query( array( 'post_type' => 'office-locations', 'posts_per_page' => -1, 'order' => 'DESC', 'orderby' => 'date' ) ); ?>
        
		<?php // Make sure $query is not empty. if ( $query->have_posts() ) {
		 
			// Loop over the results.
			while ( $query->have_posts() ) {
				$query->the_post();
				?>
		 
				
<article id="post-<?php the_ID(); ?>" >
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
						<?php the_post_thumbnail( 'thumbnail' );?>
					</a>
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
						<?php the_title(); ?>
					</a>
					<?php the_excerpt(); ?>
				</article>

		 
				<?php } } //reset global $post wp_reset_postdata(); ?>

		</main><!-- .site-main -->
	</section>

<!-- .content-area -->

<?php get_footer(); ?>