Have you ever come across a site that offers a different style for each item? Some sites have different articles « en avant Highlighted while others have each category with different colors, sometimes some may even have a very unique perspective.
Well, that's exactly what we're going to cover in this tutorial. We will share with you the different methods you can use to give a unique style to your articles on WordPress.
So what are we going to use? We will use a function called " post_class ". This function prints different classes on article containers (HTML tag), usually in index.php, single.php, and other files that display an " loop of articles " (With reference to " WordPress Loop ").
Please note:: This tutorial requires that you are familiar with the design of WordPress theme and master some HTML/CSS.
When you open your "index.php" file, or other file that has a loop, you will normally see " div "With classes" post- {id} ", but also probably the use of the function" post_class ".
" >
Adding this function in a tag " div », Each of your articles will have the following classes, added by WordPress. The following classes are added by default:
- .post-id
- .post
- .attachment
- .sticky
- .hentry (hAtom microformat pages)
- .category ID
- .category-name
- .tag-name
Here is an example of a tag with classes.
So if you open your "style.css" file and add the "category-dancing" class, you will be able to customize the display of articles in the "dancing" category.
.category-dancing {background: #97c3e1; Border: 1px solid #84aac4;}
The above will give articles in the "dancing" category to have a blue background. You can continue by adding another class for the "category-dance" class etc. You can use the same technique to give a unique look to items that have a specific label.
But for someone who really wants to customize the look of their site, they might need some extra controls in terms of classes. Well, you can specify the classes you want to use as follows:
But, how will it work on a dynamic platform like WordPress? So let's look at some examples on how to add classes to your articles on WordPress.
Style according to authors
Often times you will notice that some blogs use a different style depending on the authors. For these blogs, it is a good idea to give each article a unique style according to the authors. So in this example we are going to give each post its own style based on the author's name. So in your "index.php" file or another file (archive.php / category.php etc), we will retrieve the name of the author of the article:
The code above retrieves the "displayed" name of an author, and is assigning it to the $ author variable. Now that we have a value, we can add it in our post_class code like this:
Note: You don't have to keep class 1 and class 2. It's just if you want to add static classes.
Our example should look like this:
The name will be different on each article depending on the variable of the public name of an author. You can then add the style of your choice like this:
.Herve {border: 1px solid #000;} .Thierry {border: 1px solid #d88b3d;} .Franklin {border: 1px solid #4781a8;}
Then each item in the loop will have a different class and therefore will be applied a different style.
Style according to the number of comments
You have seen sites with popular articles in a widget, which are mainly based on the number of comments. Well, in this example we are going to show you how the style of the posts varies depending on the number of comments. The first thing we need to do is get the number of comments and associate a class with it. To get the number of comments, we need the following code in the loop:
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'; }?>
In the code above, we add classes according to a specific scale. If an article is less than 10 comments, then the class " new Will be added. If the article has more than 10 comments and less than 20 comments, then the class "ermergingWill be added. If the article has more than 20 comments, then the class "popular" will be added. You can change this scale based on your site's average rate of reviews.
So the article code will be similar to this:
Make sure you stick the code above in the loop. Then you will add the variable $ custom_values to post_class function.
.new {border: 1px solid #FFFF00;} .emerging {border: 1px dashed #FF9933;} .popular {border: 1px dashed #CC0000;}
This is by far the best way to customize the style of articles on WordPress. But sometimes, you want to have more control. CSS classes give you the ability to edit the preview, but not to change the structure.
That's it for this tutorial. I hope you'll manage to create specific styles for articles on WordPress.
