Authors can have their posts styled differently

While browsing through different websites, you may have encountered websites which have posts styled differently. While the posts can be styled based on different conditions (for example, you can change the looks of only the latest post in your blogroll), one popular way of styling your posts is based on authors.

On some websites, you might have seen that each author has his own post color, different bordure or a different link color. In a multi author environment, this might be a nice idea.

Your readers might find posts from their favorite authors more easily and everything can look really great if you don’t over-exaggerate the styling; you don’t want your blog to look like a circus… oh, well, who are we to judge, you can do whatever you want, of course.

Because of that, we’re not going to style your posts, but in the next few lines, we are about to show you the code which will execute the styles for you. So let’s begin.

Before you can style post differently, you need to tell your WordPress to find author’s first names.

Find authors’ names:

  1. Open index.php file or any that contains the loop
  2. Before the loop, you need to insert this line of code:
  3. <?php $author = get_the_author_meta('display_name'); ?>
    
  4. Save changes

Now, WordPress knows how to read author’s first name and you are ready for the next step. After you have created $author variable and told WordPress to place author’s first name in it (the name which will be placed in the variable is the first name which can be changed in user profile settings), you need to place the variable into post_class code.

This code should be inserted into the loop:

  1. Open index.php file or the file you have used in the previous steps
  2. Find DIV element which contains post-id in itself and replace that line with the following:
  3. <div id="blog-post-<?php the_ID(); ?>" <?php post_class($author); ?>>
    
  4. Save changes

OK, you are done preparing the turf for styling posts for your authors and the fun part can begin. It is time to open your CSS file and define CSS rules for each user. If you remember, we told WordPress to find author’s first name and use is as a class. That means that you need to name your classes accordingly. Be careful – first names are case sensitive so “John” won’t be the same as “john”.

If you have prepared the names, you can proceed.

Style posts:

  1. Open style.css file
  2. Add new classes with user first names. For example, if you have two authors, John and Jennifer, CSS code would look something like this:
  3. .John {
    color: blue;
    }
    
     
    
    .Jennifer {
    color: red;
    }
  4. Play around with your styling. In this example we have changed the color for their post, but as you should already know, CSS is a very powerful tool which allows you to do practically anything – from changing colors and sizes to even animating objects.
  5. Save changes

That’s it. You can now load your blogroll and see how the changes are taking effect. Please take your time and style posts nicely… oh, here we go again; you can style your posts the way you like it (but please make them beautiful).

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *