Blog: Developing my new blog in WordPress #7 (More Posts)
Introduction
By the end of the last blog, I had said that I’d started to see the end of the road to finishing development and that I’d felt that I might be able to publish within a week of the end of that blog. Circumstances meant that wasn’t possible and that was deferred for a week or two.
Before I get on, let me summarise again what I’ve achieved in the last couple of months.
I’ve written multiple custom queries on the homepage so that users can see the 6 most recently published blogs (i.e. the Slick Slider carousel) and some more information about the single most recent blog entry.
I implemented the vast majority of the single.php template. (post comments and styling remain)
I built most of the important components that make for a WordPress website (Menu areas, widget areas, enqueuing website assets etc…)
I’ve finished writing the blog filtering system using the page.php template. If no input checkboxes are selected, every blog entry is displayed. If one checkbox or more is selected, every entry is hidden except for those assigned to that input checkbox.
Lastly, I sorted out the archive and category templates.
With all that, the blog is really starting to come together. The last major items I really want to discuss are how to manage author templates in WordPress and how I managed the styling of the Comments Template.
Author Templates
With author templates, generally, there exists any number of author templates, depending on how many users you have on your website that want to contribute a blog entry.
author.php
author-jg_blogger.php
etc...The author.php is the catch-all template. But you can attach the username/slug id to the end of the template name for a template file that overrides it.
In an author template, you will want to be able to provide a list of any user who had contributed a blog post to your website by doing something like this…
<h2>List of authors:</h2>
<ul>
<?php wp_list_authors(); ?>
</ul>What this does is returns a simple list – in fact one list item for each user
<ul class="author_list">
<li>
<a href="http://url.com/username/" title="Posts by username">username</a>
</li>
<li>
<a href="http://url.com/username_2/" title="Posts by username_2">username_2</a></li>
</ul>
</div>The next thing to do is return a list of post titles and information that is relevant to that user; all inside a containing element. e.g.
<article class="author_post">
</article>Inside that argument, you define yet another WP Query.
<?php
$args = array(
'post_type' => 'blog_posts',
// 'supports' => array( 'comments' ),
'posts_per_page' => -1
);
// wp query
$author_jg = new WP_Query( $args );
?>And start writing out the loop.
<!-- The Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?>
<?php endif; ?>In my experience, sometimes you can get away without including the query variable in the loop so long as a WP Query has been defined. This is one occasion where you need to explicitly specify the reference variable to the query in the loop. otherwise, you’ll return authored WordPress Core posts and not the custom post type that you want.
<?php if ( $author_jg->have_posts() ) :
while ( $author_jg->have_posts() ) :
$author_jg->the_post(); ?>Now we just have to decide how we want to present this information. Let’s test this by using some code from the Codex.
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a>,
<?php the_time('d M Y'); ?> in <?php the_category('&');?>
</li>I styled this by making sure the list was centralised and applying one of my colour schemes to any of the hyperlinks inside the list items.
/* author.scss */
.author {
h2 {
text-align: center;
color: $col-primary;
}
.author_list {
li {
line-height: 1.1;
@extend %link-colscheme-2;
}
}
.author_post {
li {
line-height: 1.1;
color: $col-primary;
}
}
}Correctly linking to the author template
To load the author.php template, designate an author page with a unique “slug” identifier via the admin area e.g. /author-pagecolor.
There are several places where you will need to provide a link to the author of one of your posts. The method below returns a hyperlink. So it should not be a child of another link or put in a href attribute.
the_post_author_link();returns a hyperlink so it should not be a child of another link or put in a href attribute.
span {
color: $col-tertiary;
margin-right: 10px;
a {
color: $col-tertiary;
transition: color .3s;
&:hover {
color: $col-primary;
}
}
}Choosing a date format for post dates and metrics
To display the date and time of a post, WordPress uses a method called the_time() which takes a collection of letters and numbers as a string argument.
<li>
<a href="<?php the_permalink() ?>" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a>
<span class="metric"><?php the_time('d M Y'); ?></span> in
<span class="metric"><?php the_category('&');?></span>
</li>To do this let’s look at the Codex and the formatting options; where the metrics appear and what the best format string to use will be. Codex
I’ll look at this in the context of the author template.
You can use d for 0-31 days of the month. But I don’t like leading 0’s in the day of the month so I use jj as an alternative. e.g. the_time("j");
S allows us to use the date suffixes e.g. (th or st)
F allows us to specify the full month of the year
g and i specify the hour and minute the post was published.
So you might put that all together with something like this
the_time("jS F, Y - g:i");<span class="metric">
<?php the_time('jS F, Y - g:i'); ?></span> in
<span class="metric"><?php the_category('&');?>
</span>In the Blog Filter Page, I’d prefer to use the short date format with a 24 time format.
'j/n/Y h:ha'in single.php
'j/n/Y h:ha'in archive-blog_posts.php
'j/n/Y h:ha'The Comments Template
Let me now focus on the last major restructuring of my theme design to WordPress Standards which is the comment system for Posts and Pages. I created a system where each comment thread has its own background colour scheme. Starts with the base style colours of a dark brown and a complementary lighter shade of gray on mouse hover.
background: #1f1812
... :hover {
background: #2f241b; (hover)
}Each and every comment has its own background and starts its own comment thread,
<li class="comment">
<div id="" class="comment-body">
<div class="comment-author">
<img alt="">
. . .
</div>
</div>
</li>Some comment threads have replies and those replies can also have replies to them for 2 layers of threads or more.
To create these reply threads, WordPress creates an unordered list element with the class of “children”.
<ul class="children">
. . .
</ul>This maintains an opening background consistent with its parent, until the user hovers above it, making the child comment stand out so it can be easily identified. It has its own hover effect when you over the child comment.
<ul class="children">
<li class="comment"> . . . </li>
</ul>So what doe this all mean?
It is designed to make each layer of the comment threads stand out.
An opening background colour is applied when no mouse hover is triggered.
A background colour is applied when the top layer (mouse hover is triggered.
When a comment reply is triggered the top player hover colour is maintained and the first comment reply mouse hover is triggered. And this is maintained further down the comment tree.
li:hover {
background: #343434;
}Conclusion
With the author templates in place, all that remains now is to put the finishing touches in place. We can now work on optimising the script and stylesheet files and work towards transferring the theme over to the installation and unveiling the new blog to the world.