Jonnie Grieve Digital Media: Blog

Blog: Starting a new design for my blog – Part 6 (More Posts)

In this growing blog series, I’ve worked through various stages of making a WordPress theme. Mainly because I wanted to delve into some bugs with Code syntax highlighting. The blog has grown since then.

• I started by making a new plan and created the template files needed for a new WordPress theme. The WordPress Loop gets all the content from WordPress Posts, or Pages depending on the page template used and displays all its contents.
• In the second part, I talked about how to bring content dynamically into your posts and pages with the Loop.
• In part 3 I talked about how I created and styled a single.php template.
• In part 4, I focused on the secondary content area and added and finalised some of the most common WordPress widgets.
• I’ll walk readers through the process of using pagination methods to group together related pages of posts.

Now in this part, I want to deep dive into category methods and talk work together with WordPress’s category, and archive templates.  Category methods work best in the archive.php,  date.php, and category.php but they can also be used well with single.php templates.

In order to use these templates and differentiate them from the homepage templates I copied some of the markup from the single.php template although they can take on any design you see fit.

Once we’ve done that we can start looking at the category and archive templates and what HTML they give us. And that’s what I’m going to do now. I’ll focus on single.php, to begin with.

wp_list_categories()

This method is used to list every category that’s in the theme.

<!-- Full list of categories -->
<h3>
<?php
    wp_list_categories( " - ");
?>
</h3>

Let’s say for example you added the following categories in the WordPress admin area.

• Web Design
• Web Design News and Comment
• News
• Learning Journal

This would output something like the following HTML.

<li class="categories">Categories <ul>

    <li class="cat-item cat-item-6"><a href="#">Web Design</a></li>
    <li class="cat-item cat-item-1"><a href="#">News</a></li>
    <li class="cat-item cat-item-10"><a href="#">Learning Journal</a></li>
    . . . 
    </ul>

</li>

What it gives us is one list item that has inside it a complete unordered list. This makes it easier for styling according to your design as you can use the container class to select only the child list item <li> elements.

And here’s an example of this in CSS Styling, where I switch off the bullet points and use CSS to add some separators after each category item.

// wp_list_categories_list()

    .categories {                   

        list-style: none;                  
        ul {                      

            /* border-bottom: red 3px solid; */                      

            li.cat-item { 
                display: inline-block;                          

                &::after {     

                    content: ">>";
                    color: black;                              

                    &:last-child {
                        content: "";
                    }

                }                                                      

                a {

                    color: darkred;
                }
          }
     }    
}

wp_get_archives()

This method simply returns a grouped collection of all WordPress posts by the month and year they were published.

<h4>Blog Post Archives</h4>

<ul>
    <li> <?php wp_get_archives(''); ?> </li>
</ul>

Which renders text like this to the browser as clickable hyperlinks. You want to make sure your theme has a date.php so the correct archived posts will come up.

February 2023
January 2023
December 2022
...

And this is what is returned in the output HTML. It returns a clickable list of archives by month by default for WordPress core posts. In one of the links, aria-current is an attribute that WordPress adds in to let it know when it’s on a specific archive page. By default, the method adds the containing list item elements, however adding in your own HTML allows you to override it to author-level control and customise it with CSS.

<ul>

    <li> </li>
    <li><a href="" aria-current="page">February 2023</a></li>
    <li><a href="">January 2023</a>
    <li><a href="">December 2023</a>
</ul>

If you need to return a list of posts for a certain Custom Post Type (CPT), this uses the same method, but you have to include a string argument that tells WordPress to look for an existing CPT.

Clicking on any of these would take you to date.php again but for custom “blog post” instances.

<ul>

    <?php wp_get_archives('post_type=blog_posts'); ?>

</ul>

Above the wp_get_archives() method, I’ve applied a couple of date and time methods to indicate which set of posts are being returned in the archive.

<h4 class="align-center">
    WordPress Post Archives for <?php the_time('F'); ?> in the year <?php the_time('Y'); ?>
</h4>

.align-center  {

    bordertop: solid red 1px;
    text-align: center;
}

. . .
<?php while ( have_posts() ) : the_post(); ?>

<div class="archive-entry">
    <h5> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h5>
    <p> <?php the_excerpt(); the_field( "article_blurb" ); ?> </p>
</div>
<?php endwhile; ?>
. . .

The CSS for this is below. Again, I wrapped the styles in a containing element. The selectors then match with what the markup says, but the main point of note here is I’ve taken the first item out of display; because WordPress renders it as an empty list item which makes it redundant.

.blog_posts_archive {

    border: solid red 1px;
    ul {                  

        font-size: 15pt;                   

        li:first-child {                      

            display: none;
        }         

        li {         

           list-style: none;                       

           a {  

               color: purple;

               &:hover {

                   text-decoration: none;
               }

         }

    }

}

the_category() – Category Templates and methods

Back in single.php, you can add the_category(); to list the categories that are assigned to a given blog post.  I’ve put the method in its own container element. It can also take a string argument where you can add a separator between each link that it generates.

<!-- categories for this post -->
<div class="the_category_list">

    <h3> the_category() - Categories related to this post </h3>

    <?php the_category(' - '); ?>
    <hr />

</div>

The method returns the following HTML.

<li><a href="#" rel="category tag">#100DaysOfCode</a></li>
<li><a href="#" rel="category tag">JGDM Feature</a></li>
<li><a href="#" rel="category tag">Learning Journal</a></li>
<li><a href="#" rel="category tag">Uncategorised</a></li>
<li><a href="#" rel="category tag">Web Design</a></li>

The styling for this is therefore quite straightforward. I can use the_category_list class to target only the links inside it with a short color transition.

.the_category_list {              

    a {
        color: green;
        transition: color .2s;                  

        &:hover {
            color: red;
         }
   }               

}

A clickable list of archives

There’s another way to get the list of categories for a blog post, but it’s a bit of a hack, it doesn’t by default provide a link to each category.

<h3> 
    <?php foreach( (get_the_category() ) as $category) {         
        echo $category->cat_name . " - ";
    } ?> 
</h3>

Lists the categories assigned to a blog post but contains no link. We can get this link with the following hack. Use PHP’s @foreach method to loop through each of the categories and echo links.

<h3>
<?php 

    foreach( (get_the_category() ) as $category) {  
        echo "<a href = '" .
            get_category_link( $category ) .
            "'> " .
            $category->cat_name
            . "</a>"; 

} ?> 
</h3>

Template Part

There are multiple categories and links. These categories could change or be removed or added to at any time. We can use methods to do this anywhere we want to in our templates. Or we can hard code them by writing the links ourselves.

This seems like a good use case for a template part.

Each category has its own template within the WordPress Template Hierarchy.

<span>Categories List => 
    <a href="#">Category Home</a> |
    <a href="#">News</a> | 
    <a href="#">JGDM Feature</a> |
</span>

e.g. https://domain.com/category/categoryName

category-list.php  – (PHP Template Part)

<a href=".../category/">Category Home</a> | 
<a href=".../category/news/">News</a> | 
<a href=".../category/hundred_days_code/">#100daysofcode</a> | 
<a href=".../category/jgdm_feature/">JGDM Feature</a> | 
<!-- add new categories -->

Where …/ is the domain and http(s) protocol

Conclusion

That about does it for category templates.

In this post, we’ve explored 4 category methods and how to use them.

• wp_list_categories(); – a list of every category created for your WordPress theme.
• the_category(‘ – ‘);  – Which is used to list the categories that are assigned to a particular blog post.
• wp_get_archives();  – a list of links for date archives.
• wp_get_archives( “post_type=blog_posts” ) to do the same thing for custom post types

Now to explore using Author templates and links in the next post.