Create a Space theme for WordPress – 2021 – Part 7, Post blog Info – single.php

Introduction

The single.php template is used by an individual post. Each post usually has links for the author, tags and categories. There are a number of built-in functions that can be used to display this data.

A new template part needs to be created for the single.php template. add it in the includes folder and name it section-blogcontent.php. Change the single.php template so that it looks as below.

<?php get_header();?>
    <section class="page-wrap">
        <div class="container">
       <h1> <?php the_title()?></h1>
        <?php get_template_part('includes/section', 'blogcontent')?>
        </div>
    </section>
<?php get_footer();?>

Inside the section-blog-content.php template part paste the code below

<?php if (have_posts()): while(have_posts()): the_post();?>
<div class="alert alert-success">
   <p><span class="fas fa-calendar-day"></span> Date posted:  <?php echo get_the_date('d:m:Y');?></p> 
   
   <p><span class="fas fa-user"></span> Created by <?php echo the_author_posts_link();?></p>
</div>
<?php the_content();?>
<div class="alert alert-success">
    <span>Tags: </span>
    <?php
        $tags= get_the_tags();
        Tags: foreach ($tags as $tag):
        ?>
    <span class="badge badge-success">
        <a href="<?php echo get_tag_link($tag->term_id); ?>"> <?php echo $tag->name; ?></a>
    </span>
        <?php endforeach;?>
        <span>Categories: </span>
        <?php
        $categories= get_the_category();
        foreach ($categories as $cat):
        ?>
    <span class="badge badge-danger">
        <a href="<?php echo get_category_link($cat->term_id); ?>"> <?php echo $cat->name; ?></a>
    </span>
        <?php endforeach;?>

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

Include fontawesome icons

To use fontawesome icons in your theme you can enqueue a link in the functions.php file. Your load CSS function should then look as below.

// Load css
function load_css(){
    wp_register_style('bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', array(),false, 'all');
    wp_enqueue_style('bootstrap');

    wp_register_style('fontawesome','https://use.fontawesome.com/releases/v5.7.0/css/all.css', array(),false, 'all');
    wp_enqueue_style('fontawesome');

    wp_register_style('main', get_template_directory_uri() . '/css/main.css', array(),false, 'all');
    wp_enqueue_style('main');

}
add_action('wp_enqueue_scripts', 'load_css');

Author name and post date

Next follows a breakdown of the section-blogcontent.php file.

Firstly create a div with a Bootstrap class of alert alert-success, this will display as a green box with rounded corners and padding. Next, a span is added to include the fontawsome calendar icon. The WordPress get_the_date() function does the obvious. Similarly, the _author_posts_link() will display a link to the author’s other work.

......
<div class="alert alert-success">
   <p><span class="fas fa-calendar-day"></span> Date posted:  <?php echo get_the_date('d:m:Y');?></p> 
   
   <p><span class="fas fa-user"></span> Created by <?php echo the_author_posts_link();?></p>
</div>
..........

Tags code

The tags are displayed under the content. Inside a div with a class of alert the get_the_tags() function is assigned to a variable. Next, a foreach loop is used to loop through all the tags. The alert class creates a pill-shaped button.

........
<?php the_content();?>
<div class="alert alert-success">
    <span>Tags: </span>
    <?php
        $tags= get_the_tags();
        Tags: foreach ($tags as $tag):
        ?>
........

Category code

A similar process to the tags display method is used to loop through all the categories.

    .......
 <span>Categories: </span>
        <?php
        $categories= get_the_category();
        foreach ($categories as $cat):
        ?>
    <span class="badge badge-danger">
        <a href="<?php echo get_category_link($cat->term_id); ?>"> <?php echo $cat->name; ?></a>
    </span>
        <?php endforeach;?>
............

Tag and category links

There is a test post in the sample data (see part 2) named /edge-case-many-tags/ that has a large number of tags for testing purposes.

In part 8 wee look at the author page.