Create WordPress theme from scratch : Part 8 – Single Post, Single Page Templates

Welcome to Part 8 of the series Create WordPress theme from scratch. In this tutorial, we will create the single post and single page templates.

If you missed the Part 7 of this series, then check it out at the link below.

Create WordPress theme from scratch –7

Template single.php

The single template file displays a single post. Here is the code of our single.php template file

<?php get_header(); ?>

<div class="container">
    <div class="row">

        <div class="col-sm-8 content-area">
            <main class="site-main">
                <?php if ( have_posts() ) : ?>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <?php
                        get_template_part( 'template-parts/content', 'single' );
                        if ( comments_open() || get_comments_number() ) {
                            comments_template();
                        }
                        ?>
                    <?php endwhile; ?>
                    <?php the_posts_navigation(); ?>
                <?php else : ?>
                    <p><?php _e( 'Sorry, no posts found!', 'mytheme' ); ?></p>
                <?php endif; ?>
            </main>
        </div><!-- .col-sm-8 -->

        <div class="col-sm-4">
            <?php get_sidebar(); ?>
        </div><!-- .col-sm-4 -->

    </div><!-- .row -->
</div><!-- .container -->

<?php get_footer();

Something different is happening inside the loop this time. We are displaying the content using a new partial template file called content-single.php.

get_template_part( 'template-parts/content', 'single' );

This template file is not that different from the partial template file content.php. Create a new file named content-single.php in your template-parts directory. Paste the following lines of code in it

<article id="entry-<?php the_id() ?>" <?php post_class( 'entry' ) ?>>
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header>
    <footer class="entry-meta">
        <?php entry_meta(); ?>
    </footer>
    <div class="entry-thumb">
        <?php the_post_thumbnail( 'large' ); ?>
    </div>
    <div class="entry-content">
        <?php the_content() ?>
    </div>
    <?php
    the_tags( '<div class="entry-tags">' . __( 'Tags: ', 'mytheme' ), __( ', ', 'mytheme' ), '</div>' );
    wp_link_pages();
    the_post_navigation();
    ?>
</article>

The first thing that differs is that we have removed the anchor tag in the title. We did it because we are on the permalink page itself.

<header class="entry-header">
    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>

Moving on, we are showing the featured image using the_post_thumbnail template tag.

<div class="entry-thumb">
    <?php the_post_thumbnail( 'large' ); ?>
</div>

Next, we have replaced the excerpt with the post content using template tag the_content.

<div class="entry-content">
    <?php the_content(); ?>
</div>

After that, we are displaying tags associated with the post using the_tags template tag. This template tag won’t display anything if there are no tags associated with the post. This keeps the markup clean.

the_tags( '<div class="entry-tags">' . __( 'Tags: ', 'mytheme' ), __( ', ', 'mytheme' ), '</div>' );

Finally, we have two navigation template tags.

wp_link_pages();
the_post_navigation();

The wp_link_pages template tag is essential. Always include this in your single post template so that users can navigate multi-page articles. The other template tag the_post_navigation provides easy navigation for the next and the previous posts when available.

This takes care of the partial single page content file single-content.php. Back to single.php, right after importing our partial template file, we are displaying the comments template.

if (  comments_open() || get_comments_number() ) {
    comments_template();
}

We are checking whether comments are open or comments are closed but there are existing comments. If either of this two conditions are true, then we are loading the defaults comments template.

We will customize the comments template in the next part of the series.

Template page.php

The template file page.php renders a static page. This template file is normally a minimal version of single.php template file.

<?php get_header(); ?>

<div class="container">
    <div class="row">

        <div class="col-sm-8 content-area">
            <main class="site-main">
                <?php while ( have_posts() ) : the_post(); ?>
                    <?php
                    get_template_part( 'template-parts/content', 'page' );
                    if ( comments_open() || get_comments_number() ) {
                        comments_template();
                    }
                    ?>
                <?php endwhile; ?>
            </main>
        </div><!-- .col-sm-8 -->

        <div class="col-sm-4">
            <?php get_sidebar(); ?>
        </div><!-- .col-sm-4 -->

    </div><!-- .row -->
</div><!-- .container -->

<?php get_footer();

Looking at the template code, we can tell that the Loop has been modified.

<?php while ( have_posts() ) : the_post(); ?>
    <?php
    get_template_part( 'template-parts/content', 'page' );
    if ( comments_open() || get_comments_number() ) {
        comments_template();
    }
    ?>
<?php endwhile; ?>

We have removed the  conditional if check, the navigation links and the fallback notification message.

We are loading a different partial template for the page template. Create a new file named content-page.php in your template-parts directory. Paste the following lines of code in it

<article id="entry-<?php the_id(); ?>" <?php post_class( 'entry' ) ?>>
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
    <?php wp_link_pages(); ?>
</article>

Again, this template file is a minimal version of the partial template file content-single.php. A static page should not display information like author, publish date, update date, category, tags and navigation links to next and previous pages. So, we have discarded them.

The rest of the template file page.php is exactly the same as single.php template file.

Conclusion

This concludes the eighth part of the series Create WordPress theme from scratch. In the next part of the series, we will customize the comments template.

quoty

Next Article

Share selected text with Quoty Free WordPress Plugin