A Comprehensive Guide on Customizing WordPress Posts Styles

You may have stumbled across WordPress websites that style their posts in a different manner. While some sites contain posts added in the category section styled using a different color, a few others have posts with author’s comments that highlighted and so on. This is exactly what we’ll be covering up in this post. If you want to learn about ways to style your WordPress blogs in distinct ways, then this post will prove a helpful guide for you.

Well, it’s certain that almost every WordPress theme author will like to have better CSS control options, required for styling blog posts. This objective can be achieved with the help of a function called as post_class. And so, we’ll be using this function for helping you understand how you can style the posts of your WordPress site differently. But, before discussing about different ways of styling posts, you need to become familiar with the post_class function.

An Overview Of The “post_class” Function

The post_class is an important function that can’t be ignored when it comes to styling WordPress posts. It can be added to an index.php file, single.php file or any other functions file that includes hierarchical post listings and a loop. Usually, when you open up an index.php file, you will see a code that contains a div with a “post-id”. We’ll be adding the post_class function along with that div as follows:

Adding the function within the div ensures that each post includes some CSS classes, which helps in modifying the presentation of WordPress posts. Some of the CSS classes that get added to the posts are:

  • .post-id
  • .sticky
  • .category-ID
  • .category-name
  • .tag-name

Let us now take an example, containing a div with a post_class:

Now when you’ll open your CSS file (i.e. style.css), simply adding the class .category-recipes will help in making the posts belonging to the recipes category appear different compared to other category posts. For instance, you can choose all your recipes category posts feature a red background containing a black border using the following line of code:

So, if you need to customize how your WordPress site looks, you can choose to add more controls as classes:

Wondering how it will work on your WordPress site? Let us look at a few examples to see how adding classes can help in making your posts look different.

Styling Posts to Display Author’s Comments in Distinct Way

You may often come across blogs featuring author’s comments in a different manner than the comments posted by any reader. In case you’re running multi-author blogs, then highlighting your author’s posts differently seems a good idea. For this purpose, we’ll take an example to explore how you can change the style the posts on the basis of the author’s first name.

To begin with, open up your index.php or any other template file with post listings, and then you need to fetch the first name of your posts authors. For this, just add the below code prior to the loop in your template file:

The is helping you get an author’s name passed as an attribute to the “display_name” variable. Now let us add our newly created dynamic class value in our post_class using the code that looks something like:

Note: It is not necessary for you to use the name of the classes as cls1 and cls2, you can even change the name of your classes except in the case, when you need to use static classes.

Let us now view the output of the above code:

Jack is the dynamic name (i.e. author’s name) that will be added in the final output. And so, each post will contain different names based on the value passed to author’s display_name. Lastly, you can style, each class in your style.css file as shown in the lines of code below:

Now based on the above code, each of the post within the loop with the aforementioned authors will feature different styles in terms of background-color.

Do you wish to display the posts presented in the widgets section that gets maximum comments? Well, this means you wish to showcase the most popular posts in your WordPress site. In order to do so, you’ll have to count the number of comments that a post receives, which can be achieved using the WordPress default function: wp_count_comments(). All we’ve to do is to fetch the comment count and along with it add a class. For getting the comment count, simply paste the below code within the loop:

As you can see, in the above code we’re adding classes in terms of the comments a post has received. In case the post gets less than 15 comments, then it is associated with the class ‘new-posts’. And the posts getting comments more than 15 and less than 25, will get the class ’emerging-posts’ added to them. Lastly, the posts with over 25 comments will be associated with the class ‘most-popular-posts’.

Next, your post_class will be used in the code as follows:

Now, you can change the style of the posts in your style.css file, using the code that looks like:

In this example, we’re just changing the border color of the posts, however, you can add many other effects as you deem perfect.

Styling Posts With Custom Fields

At times, you may wish to setup additional tags (or you can say fields) to add unique designs to your posts. You can do so by applying WordPress custom field syntax to particular CSS classes.

For example, let’s say, you’re running a blog about mobile devices. And you have set up categories for each of your blog post (like “New Products”, “Reviews”, etc.), but now you also want to display the specifications of the mobile device as well. For this purpose, you just need to create a custom field with the name ‘post-class’ and assign it some value. “Phone_Specs” (or anything you like). After adding this custom field and saving your post, will store its value in the database. And, you can fetch the custom field from the loop using the following code:

Next, you’ll have to add the ‘$my_new_custom_values’ variable to the ‘post_class’ function.

That’s it! Now, just open up your style.css file and add the below given class:

This code will change the background image of the category ‘Phone_Specs’. Likewise, you can add any style to the CSS classes by applying a custom field to those classes.

Conclusion

You can make your WordPress posts feature different styles, such as the ones, we’ve discussed in this post. If you’re a blogger or a WordPress theme author, then reading this post can help you understand about the ways that helps in making your post style differently.

Leave a Reply