Making a WordPress Theme: #4

The theme I’ve been building uses 3 main template files.

These are:

home.php – which we already have set up. it lists blogs that are generated as separate posts in the admin area. Additionally, the template can also be selected as blog template.
single.php – single blog template. This is the template that controls what a single blog post page looks like.
archive.php – which is a template file that WordPress sets aside as a template for a categorised list of blogs. Every time you set a blog category for your blog posts, it gets added as a clickable list of post categories.

Making a blog, a blog!

That’s all great, but when I last left the blog, the blog didn’t have the look of a WordPress blog about it. All it did was generate one blog post after the other… the whole blog for each blog post, and this isn’t necessarily what we’re after. It would be good to have a brief and more structured list of blogs for the blog listing page and some way for users to make comments on the page. What would also be good is to have a clickable title for each log listed on home.php that would take us to that blog post.

Thankfully, WordPress has a whole host of built-in functions that can accomplish this.

These functions are

  • the_excerpt()
  • get_avatar()
  • get_the_author_meta()
  • the_author_posts_link()
  • the_category()
  • the_date()
  • the_time()
  • the_post_thumbnail()
  • the_permalink();

So we could do something like…

<h1>
       <a href="<?php the_permalink ?>the_title();</a> 
</h1> 
<p><?php the_excerpt()  ?></p>

…just to make sure to make sure each title has a clickable link that would then take you to the appropriate blog. WordPress is then smart enough to know which page is supposed to link to which permalink.

the_excerpt(), cuts off display of text in a blog post at a certain point. This makes sure the blog listing page is consistent and has a nicer feel. One blog is likely to be much bigger than another and having this function in place is a great way to get around that.

wordpress-post-1

You can further customise when this cut off will take place on the blog index. By putting the following function in the functions.php file.

function wpt_excerpt_length($length) {
    return 16;
}
add_filter('excerpt_length', 'wpt_excerpt_length',999);

Simply edit the return value, which is stored as a single argument of the function.  The 999 number simply ensures the function doesn’t conflict with another in the file by changing its action priority so it runs at a certain point.

Next attention turns to identifying the post author. That is a glaring omission for any blog post. We get the blog author by using the following php function.

<?php echo get_avatar( get_the_author_meta('ID'), 24); ?>
get_the_author_meta()

This will display the author of the post to the screen. The retrieve the associated Gravatar you use the get_the_author_meta(‘ID’), 24) with the size of the retrieved image passed in as an argument.

Then to finish off the blog makeover, the list of categories associated with the blog post we simply use the function the_category().   In order to list the categories in a visually pleasing manner, we pass in a separator as a parameter.

And then we just have to find a way to structure it using markup and then of course, CSS. Using lists is a great way to do this. And, in just a few lines of code, we’ve successfully added WordPress blog elements to go along with the WordPress Loop.

<ul class="post-meta">
 
     <li>Posted by: <a href="">
          <?php echo get_avatar( get_the_author_meta('ID'), 24); ?></a> 
          <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?>
    </li>
    <li>
           With the following post categories: <?php the_category(', '); ?>
     </li>
 </ul>

 

wordpress-post-2

Finally you may have noticed the time function included with some strange-looking letters passed in as a parameter. These are date formatting arguments.  But doesn’t display a time. We could use the_date() function for this but the reason I opted for time is so that each post displays a date regardless of whether 2 or more blogs have been posted on the same day, so a post doesn’t look out-of-place.

And that’s it. We have a blog.

But there’s a few other “housekeeping” things I wanted to explain before I close the blog

Condition Statements.

Blog post templates are made more powerful when combined with condition statements. We could use one for example to check if a post has what is called a featured image. At the moment, I haven’t coded WordPress to show one

But if I wanted to I’d have to check one exists by using a simple statement like this.

<?php if (the_post_thumbnail() ) : ?>
   markup
<?php ?>;
   markup
<?php endif; ?>

The first line checks if featured images exist and then if it does displays it. If not, the else (the only alternative option in this condition statement is run instead. the_the_post_thumbnail() in the markup

 

using strip_tags()

In some cases it may be necessary to strip the front end of certain tags that WordPress might add. To do this you  simply pass the post content, as a parameter of the strip tags function.

<article class="post">
   
   <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
   <h2><?php strip_tags(the_excerpt() ); </h2>

</article>

Now any extra HTML elements that WordPress adds in will be stripped out, so you’ll have changes made via the Admin editor and elements coded in your template files but nothing else.

Checking Formatting styles for blog.

Now there was one more check I wanted to do.  I wanted to write some CSS for every possible formatting scenario that might exist when writing a blog post or new page.

So,  I added a new post with every possible formatting example the WYSIWYG editor on WordPress provides

wordpress-blog

Some of the formatting wasn’t picked up via the CSS because there were no CSS selectors for it. I had heading elements, list items and preformatted text that wasn’t picked up. No problem,  Now the confidence is there that the text will be used no matter what formatting is applied.

wordpress-blog-2

Conclusion

This concludes all of the deveolopment I wanted to cover for my WordPress theme.  It is a pretty standard theme and there is a lot more to learn, but this theme I think will serve me well as I can now write blog posts directly into my website, which means plenty of opportunities for great unique content.

There is much more that can be done with a WordPress theme. I could investigfate and use use a framework like Genesis for example. But this is for another day.

In my final blog post for this series I’ll cover how I transferrred the website from where it currently lives (on localhost) to my web domain.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s