Have you ever met a website that publishes its articles on the blog differently?
Some websites have featured articles highlighted with a custom background while others may have each category post with a unique look. If you've ever wanted to learn how to customize every WordPress post, you've come to the right place.
In this tutorial, we will show you how to shape each WordPress post differently.
But, if you've never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
Please note:: This tutorial requires you to add custom CSS to WordPress. You will also need to use the Inspect tool. Some CSS and HTML knowledge is required.
Individual styling on WordPress posts
WordPress adds default CSS classes to various elements of your website. A WordPress theme standard compatible must have code required by WordPress to add CSS classes for body, posts, pages, widgets, menus and more.
Also discover our guide on Permalink: How to customize your blog links
A core WordPress function called “ post_class () is used by themes to tell WordPress where to add these default CSS classes on posts.
If you visit your website and use the Inspect tool on your browser, you will be able to see these classes added for each post.
Here are the CSS classes added by default depending on the page viewed by a user.
- .post-id
- .to post
- .attachment
- .sticky
- .hentry
- .category ID
- .category-name
- .tag-name
- .format-{format-name}
- {.type- post-type-name}
- .has post-thumbnail
- .post-password-required
- .protected-by-a-password
An example poster would look like this:
You can customize each WordPress post differently using the respective CSS classes.
Read also: How to improve your WordPress blog this weekend
For example, if you want to edit an individual post, you can use the post-id class in your custom CSS.
.post-412 { background-color: #FF0303; color:#FFFFFF; }
Don't forget to change the post ID to match your post ID.
Let's take a look at another example.
This time, we will cover all articles posted in a specific category called “news”.
Discover our guide on How to add custom CSS to your WordPress blog
We can do this by adding the following custom CSS to our theme.
.category-news { font-size: 18px; font-style: italic; }
This CSS will affect all articles categorized as " Topicality ».
The post_class() function
Theme developers use the function post_class () to tell WordPress where to add post classes. Usually it is in the “article” tag.
The function of post_class () not only loads WordPress generated CSS classes by default, but also allows you to add your own classes.
Discover more How to protect your blog from content scrapers
According to your WordPress theme, you will find the post_class() function in your single.php file or in the template files. Normally the code will look like this:
" >
You can add your own custom CSS class with an attribute like this:
" >
The post_class class will print the respective default CSS classes with your custom CSS class.
If you want to add multiple CSS classes, you can define them as an array and then use them in the post-class() function.
" >
Display articles with a different style according to the authors
The default CSS classes generated by the posts_class function do not include the author's name as a CSS class.
If you want to style each post based on the author, you must first add the author's name as a CSS class.
Read also : How to add CSS animations on WordPress
You can do this using the following snippet:
" >
This code will add the username as a CSS class. The username is a URL compatible name used by WordPress. It has no spaces and all characters are lowercase, which makes it perfect for use as a CSS class.
See also our guide on How to add custom CSS to your WordPress blog
The above code will probably look like this:
Now you can use ".peter" in your custom CSS to change all posts by that particular author to display differently.
.peter { background-color:#EEE; border:1px solid #CCC; }
Customize the display of articles based on comments
You may have seen websites with widgets having popular articles which are sometimes ranked based on comments. In this example, we'll show you how to create a different style using the number of comments.
So much to see... 10 premium WordPress plugins to manage your comments
First, we need to get the number of comments and associate a class.
To get the comment count you need to add the following code in your files WordPress theme. This code goes into the WordPress loop, you can add it just before the tag .
approved; if ($my_comment_count <10) { $my_comment_count = 'new'; } elseif ($my_comment_count >= 10 && $my_comment_count <20) { $my_comment_count = 'ermerging'; } elseif ($my_comment_count >= 20) { $my_comment_count = 'popular'; } ?>
This code checks the number of comments for the displayed post and assigns them a value based on the count. For example, posts with less than 10 comments get a class called “ new ", less than 20 are called " emery ', and anything with more than 20 comments is ' popular ».
Next, you need to add the CSS class to the post_class function.
" >
This will add new, emerging, and popular CSS classes to all posts based on the number of comments each post has.
We also invite you to read our article on the 6 WordPress plugins for signing documents online
You can also add custom CSS to style posts based on popularity:
.new {border: 1px solid #FFFF00;} .emerging {border: 1px dashed #FF9933;} .popular {border: 1px dashed #CC0000;}
We're just adding borders, but you can add any CSS rules you want.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the connection to your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Ultimate Membership Pro
Ultimate Membership Pro is a great WordPress Plugin subscription premium and content restriction. It allows users to be managed according to their package (free or paid) by creating exclusive access levels.
It will therefore be possible to protect all the content of your website, or just a part of it. It will be for example a course, a lesson, a page, a product, a category, an image, etc ...
Read also our article on 4 premium WordPress plugins to create thumbnails
Its main functions are among others: content protection, multiple access levels, support for multiple payment gateways - PayPal, Authorize.net, Stripe, 2CheckOut, Bank Transfer-, partial protection of content, And much more…
Download | Demo | Web hosting
2. How Slider for Facebook
How Slider for Facebook is a WordPress Plugin premium that offers visitors the option to leave comments on your website. With this modern and non-intrusive comment box, this WordPress Plugin provides Like Box and Fan Page Wall feature which will extend your website integration with Facebook social network.
The plugin also provides various functionalities to extend the capacities of your website: It has for example a Like section (“Like Box”) or a page dedicated to fans (“Fan Page Wall).
See also How to gradually load Facebook and Disqus comments
You don't need to embed "Like" and "Share" buttons on posts or pages, because Facebook Comment Slider already has them and they can appear on any post or page. Visitors will find the "Like" button, the "Share" button and the Facebook slider comments box. They will obviously use their Facebook accounts.
Besides, you can turn on, off and set the time of the shake effect.
Download | Demo | Web hosting
3. Login Ninja
This premium WordPress plugin allows you to customize your login page. It's more than just customizing your login form. You can customize the entire page, by changing the color of the page, adding a background image, adding a logo and more.
Its other features are: protection of login and registration forms with captcha, automatic and manual banning of IPs that attack you by brute force, a detailed log of all connection activities, user redirection based on roles and user names, receiving email notifications for all connection events, an easy-to-use graphical interface, detailed documentation and more.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- 9 WordPress plugins to manage PayPal payments on his Blog
- 10 essential WordPress plugins to install on your blog
- 10 WordPress plugins to use to manage advertising
- 10 WordPress plugins to create attributes for your variable products
Conclusion
So ! That's all for this tutorial, I hope it will allow you to customize the display of articles on your WordPress blog. If you have any concerns or suggestions in this area, let's find ourselves in the comments section to discuss.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
