Skip to main content

Create templates for custom posts in WordPress

By Sue Johnson

To get started with creating custom posts, see this tutorial: https://suesdesign.co.uk/how-to-create-custom-posts-in-wordpress/

Once you have registered your custom posts, you will need to create template files to display the posts. You will probably need a page to display a list of the posts and a template for each separate post.

Display each single post

This will probably be similar to the template for displaying individual blog posts which is called single.php.

You can copy this file, amend it to your requirements and add a hyphen plus the name of your post to the end of the file, for example single-suesdesign_posts.php for custom posts named suesdesign_posts.

WordPress will automatically know that this is the template to display the custom post content. For more information, see Template Hierarchy on wordpress.org: https://developer.wordpress.org/themes/basics/template-hierarchy/

Alternatively you can place the file in the plugin and direct the plugin to display the custom posts on that template. You can see how to do this below.

Display a list of all the posts

You could create a custom template for this page to go in the theme. In the comments at the top you would put the template name:

<?php
/**
 * Template Name: Custom Posts Page
 */

?>

Then you can create a page to display the custom posts and select this template. For more information, see here: https://developer.wordpress.org/themes/template-files-section/page-template-files/

Unlike the single custom post page you will need to tell WordPress which custom posts to use.

Here is some example code which will select the post type of suesdesign_posts from the WP_Query object and output a link to each post using the standard WordPress loop.

<?php if ( have_posts () ) : ?>

    <?php  $args = array(
        'post_type' => 'suesdesign_posts'
    );?>

    <?php $suesdesign_posts = new WP_Query ( $args );

    while ( $suesdesign_posts->have_posts() ) : $suesdesign_posts->the_post(); ?>

   
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="custom-post-title"><?php the_title(); ?></a>

<?php endwhile; else :?>
<?php endif; ?>

You can optionally add a featured image linked to each post, an excerpt for each post or something similar, depending on what you want

Use the plugin to choose which template files to use

If the plugin is going to be distributed, you will need to include the template files within the plugin itself. It is useful to add an option to look in the theme files first for the appropriate template file so that the user can adapt the templates to their own theme and place the amended template in the theme folder.

This code will check to see if the page is called ‘custom-posts’ then look in the theme file for the template first before looking in the plugin for the template. You will need to have a page already in existence with a permalink something like this: ‘https://example.com/custom-posts’. If the page is a single post it will again look for the file in the theme otherwise use the template from the plugin.

function suesdesign_include_template_function( $template_path ) {
    if ( is_page('custom-posts') ) {
    // checks if the file exists in the theme first,
    // otherwise serve the file from the plugin
        if ( $theme_file = locate_template( array ( 'suesdesign_custom_posts-page.php' ) ) ) {
                $template_path = $theme_file;
            } else {
                $template_path = plugin_dir_path( __FILE__ ) . 'templates/suesdesign_custom_posts-page.php';
            }
    }

    else if ( is_singular( 'suesdesign_posts' ) ) {
        if ( $theme_file = locate_template( array ( 'single-suesdesign_posts.php' ) ) ) {
                $template_path = $theme_file;
            } else {
                $template_path = plugin_dir_path( __FILE__ ) . 'templates/single-suesdesign_posts.php';
            }
    }
    return $template_path;
}

add_filter( 'template_include', 'suesdesign_include_template_function', 1 );

The code for the complete plugin for both tutorials is on GitHub here: https://github.com/suesdesign/suesdesign-custom-posts

The plugin features a page listing all the custom posts with a link and a thumbnail linked to each individual post.

All comments will be held in a moderation queue. A selection will be published.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.