How To Uniquely Style Different Categories In WordPress

Uniquely Style Different Categories In WordPress

The whole idea of writing a blog on WordPress is to make it accessible to readers. There are a lot of efforts that are been made to make this reading interesting and attractive.

Many of us have often come across a site that styles the reading content differently for different blogs. There are some of these sites that have sticky posts highlighted with custom background and there are others which show unique style of each of the blog category.

All this is to create a blog that shows readers a creative difference; it is well known that similar styled content can become boring to read after some time.

The styles of the blog make the same content look fresh and attractive. It keeps the readers engaged in the websites grows to many more views due to the creativity.

If you are wondering how this is done then you are at the right place. Simple steps and knowledge is required to create the content styles.

How to Style Different WordPress Categories?

The site developers often use different themes; they are an interesting way of creating unique content. This is mainly for visual appeal and user-experience.

There are free WordPress themes that work towards creating a unique reader’s experience. Using these themes is required but they are not the ones which will give you styling options.

You will have to additionally make efforts to involve styling as a part of your site. One can do this using the templates or by using CSS.

By default, WordPress has CSS classes added to the theme. Every WordPress themes that compiles the standards have a code which allows the addition of CSS class.

This allows pages, posts, body, menus, widgets and many more features to be enhanced with it. There is a core WordPress function which is known as post_class that is used by themes to show WordPress where the default CSS class posts can be added.

For simple understanding one can visit the website and check the Inspect tool in the browser, the classes added for such post are visible here. There is a long list of classes that can be added to the page.

.post-id
.post
.attachment
.sticky
.hentry (hAtom microformat pages)
.category-ID
.category-name
.tag-name
.format-{format-name}
.type-{post-type-name}
.has-post-thumbnail
.post-password-required
.post-password-protected

Each post can be styled differently while using any of these CSS classes. Use the correct post ID to ensure that the post matches to the right one.

All the posts under one category can be filled using these styles. Use the category-name and add the code all the posts under that category will from future use these styles.

The Post Class Functions

The article tag use post class functions. The theme developers use the post_class function which shows WordPress where to add the function. There are options for the users to add their own functions along with the default CSS classes.

The theme may decide the location of the function but commonly it is in the single.php file or the template file. One can add an array of function along with the default ones already mentioned.

Style the Post Based on the Authors

The default class function does not include the author name as the CSS class. This may have to be customized. This can simply be done by adding the author’s name as a class.

Use the code to add the author’s nickname as a class. The nickname is used as it can be created as a URL friendly name which is easy to be used by WordPress.

There are no spaces and the characters are all in lowercase which makes it perfect to be used by CSS class.

Style the Post by Comments

Most of the site owners use widgets that post popular posts above others. This is generally based on the comments count.

The style of each such post can be done differently using comment count. This is done by using the comment count and then associates the class with it.

The theme file should be added to the code to get the comment count. It is added just before the article tag and works in the WordPress loop. The code checks the comments count for the post and assign them a value. The values depend on the site owners.

Let’s say for example any post that has less than 10 comments will be put in the new category, between 10 and 20 can be categorized as emerging and anything above 20 may be categorized as popular. Based on the categories one can add function to the post.

Style Posts Based on Custom Fields

Most of the time adding a CSS class as a default setting or hard coding it will limit its use. If the user or the writer wants the flexibility to decide or think about the code while on the go then they will need custom fields.

This allows the writer to add the class while writing. The steps are a simple, firstly one needs to add the custom field to the post so that one can test it.

Check the post by editing and rolling down the fields section. One can start with a simple class and when they get a grip on it then many styles can be added based on the skills.

There are many cases that the category of the content uses the same theme. This is as WordPress is a popular platform and many online users pick the same theme.

Now if the website owners want to create a competitive edge then they should do something differently. The use of styling thus becomes important and they should be used to create a competitive advantage.

The small differences like fonts, color can put the whole content in a new light. These small differences can make big changes to the reader’s experience.

The content is still the king and these small changes will go a long way in supporting it to create a great website.

Related Post: 9 Types of Questions to Ask On Your FaceBook Page to Get More Comments

Sonnal S Sinha

Sonnal S Sinha shares exciting Web development, Web designing, HTML, CMS, WordPress themes, plugins and other WordPress related articles and news for our readers. He also posts selected WordPress developers interviews from time to time.