Blog: Starting a new design for my blog – part 7 (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 but the concept of the project grew since then.
- I started by making a plan of what I wanted from the theme and duly created the appropriate template files. 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 also walk readers through the process of using pagination methods to group together related pages of posts.
- Part 6 was a run-through of WordPress’ Category methods and how they work with category templated.
In this part, I’m concentrating on how to use author templates effectively. There are a number of methods you can use to do this.
- the_author_posts_link();
- wp_list_authors();
- the_author();
- get_the_author();
In addition, you can use PHP date and time methods to provide useful information about your content.
“Single Post” Templates
First, let’s lay in a bit of the groundwork. Just as we’ve done with the post lists, let’s wrap the single post content in a new containing element.
<div class="blog_post_single">
<h3> <?php the_title(); ?> </h3>
<p> <?php the_field( "article_content" ); the_content(); ?> </p>
</div>With that, I can add some styling that has a background, a border, and some margins. The blog post title at the top, a level 3 heading, will also be center-aligned creating a clear and eye-catching title for the post.
.blog_post_single {
background: #69e9cb;
border: solid red 1px;
border-radius: 5px;
padding: 15px;
margin: 5px auto;
h3 {
text-align: center;
margin-bottom: 10px;
margin-top: 3px;
}
}On these pages, it would be good to somehow give a post some authorship information, such as letting people know who owns the page and when the blog was published. In this theme, this information will appear at the bottom and the top of each post. They’re 2 pairs of links with a class attribute that have placeholder text that represents where the authorship information will go. The purpose, for now, is to prepare them stylistically.
<aside>
<a class="author-link" href="#">Author Name</a> |
<a class="author-link" href="#">Author Date</a>
</aside>For styling and placement, I applied Flexbox with as much spacing between the links as possible so they appear side by side within the aside elements.
aside {
display: flex;
background: #72f9ff;
justify-content: space-around;
margin: 3px auto;
border-radius: 10px;
font-size: 13px;
a {
color: black;
transition: .2s color;
&:hover {
color: red;
}
}WordPress author methods
Now let’s start looking at what WordPress author methods do and how to use them in the templates. I’ll start with the_author_posts_link();.
This method does what it says on the tin. It is simply a link with a title attribute that takes you to the author page for the given author – the relevant author for that post.
<p>Written by:
<?php the_author_posts_link(); ?></p>It outputs HTML to the page that looks like this.
<a href="http://localhost/jgdm_blog/author/authorname/"
title="Posts by [AuthorName]"
rel="author">[AuthorName</a>the_author() and get_the_author()
What happens though if you want a reference to a post author but you don’t want to put it in a link. There are a couple of ways you can do this. You can either use the_author(); or use echo get_the_author(); display that information. The second method requires that you use the echo keyword to use the author name.
<h3> <?php the_title(); ?> by <?php echo get_the_author(); ?> </h3>So that’s 3 simple ways that you WordPress code with PHP to identify a post author.
wp_list_authors();
You can get a complete list of every post author on your website by using the the_author();method. I like to put them in their own HTML Lists because by default the browser only wraps the returned text inside one list item. So the following code and styling should work for you.
<h4>Authors List </h4>
<div class="post_authors">
<ul>
<li><?php wp_list_authors(); ?></li>
</ul>
</div>CSS
.post_authors {
/* background: green; */
// list-style: none;
ul {
li:first-child {
}
li {
}
}How to use author methods in a posts homepage
Let’s now turn towards looking at which author methods you would want to use in a WordPress home page of posts (which is your home.php or index.php). In the first instance, I’ve added the name of the post author (using the_author()) inside each post entry letting users know who authored each post. You could also add an echo to get_the_author().
<div class="entry">
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a> by
<span> <?php the_author(); ?> </span>
</h3>
</div>Style the span element so that any child elements such as anchor elements will take on those styles rather than selecting just the links themselves.
h3 {
font-size: 13pt
span {
font-size: 10pt;
}
}You can also add the PHP date method to show the date and time the post was published. It takes in the usual character arguments with this example telling us the date, month, and a 4 digit number that represents the year.
<h3> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a>
<span> <br />
by <?php the_author(); ?>
on <?php the_date( "d M Y" ); ?>
</span>
</h3>However, using the date only outputs the first time within the WordPress loop leaving all other instances blank. This tells me that it’s probably best to use this in a single post template such as single.php rather than looping through multiple instances of content.
For home.php you can echo the get_the_author() method and every post entry will be displayed with the correct publish date.
<?php echo get_the_date( "d M Y" ); ?>Moving back to single.php; what if I wanted to have the same post author information in that template? I might try and write something like this.
<aside> Author Name - <a class="author-link" href="#">
<?php echo the_author_posts_link(); ?>
<?php //echo get_the_author(); ?>
</a> |
<a class="author-link" href="#">( <?php the_time('d M Y'); ?>)
</a>
</aside>The method I’ve used here is the the_author_posts_link();.
But there’s an issue. The method doesn’t work unless you put it in the loop
To fix this problem we can add <?php the_post(); ?> to the code. It can be added anywhere in your code. It helps WordPress identify the correct post to use and then gives access to all the author methods.
Here is an example of this in action.
<?php the_post(); ?>
<aside>
Author Name - <a class="author-link" href="#">
<?php echo the_author_posts_link(); ?>
. . . In summary
There are some things to think about when using date methods in these templates. You can use <?php the_date(); ?> or<?php get_the_date(); ?> posted for single post templates but in order to get the date posted and display them in a list of posts (home.php) you need to use the<?php get_the_post(); ?> method.
The effect of <?php the_date(); ?> and the_time(); is interchangeable. So you can use either to specify the publish time of posts in single.php.
<?php echo get_the_author(); ?> – outputs the text of the author of a post. It can be placed in a link but doesn’t link to the page for an author by default.
<?php echo the_author_posts_link(); ?> – outputs a link to the author page
<?php wp_list_authors() ?> – Outputs a list to the author archive for each user that had authored a post on your website.
<?php the_time(‘d M Y’); ?> – customise these with string arguments that you can find in the WordPress documentation.
There are some things to think about when using date methods in these templates. You can use <?php the_date(); ?> or<?php get_the_date(); ?> posted for single post templates but in order to get the date posted and display them in a list of posts (home.php) you need to use the<?php get_the_post(); ?> method.
The effect of the_date();and the_time();is interchangeable. So you can use either to specify the publish time of posts in single.php.