How to Style Each WordPress Post Differently

Have you ever come across a site that style their blog posts differently? Some sites have sticky posts highlighted with a custom background whereas others may have each category post styled with a unique look. If you ever wanted to learn how to style each WordPress posts differently, then you’re in the right place. In this article, we will show you how to style each WordPress post differently.






Note: This tutorial requires you to add custom CSS in WordPress. You will also need to be able to use the Inspect tool. Some basic CSS and HTML knowledge is required.

Styling Individual Posts in WordPress

WordPress adds default CSS classes to various elements on your website. A standard compliant WordPress theme must have the code required by WordPress to add CSS classes for body, posts, pages, widgets, menus, and more.

A core WordPress function called post_class() is used by themes to tell WordPress where to add those default CSS classes for posts.

If you visit your website and use the Inspect tool in your browser, then you will be able to see those classes added for each post.






Following are the CSS classes added by default based on what page a user is viewing.

  • .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

An example output would look like this:

1 <article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

You can style each WordPress post differently using the respective CSS classes.

For example, if you wanted to style an individual post, then you can use the post-id class in your custom CSS.

1 .post-412 {
2 background-color#FF0303;
3 color:#FFFFFF;
4 }

Don’t forget to change the post ID to match your own.

Let’s take a look at another example.

This time we will style all posts filed under a specific category called news.

We can do this by adding the following custom CSS to our theme”

1 .category-news {
2     font-size18px;
3     font-styleitalic;
4 }

This CSS will affect all posts filed under news category.

The Post Class Function

Theme developers use the post_class function to tell WordPress where to add the post classes. Usually it is in the <article> tag.

The post class function not only loads the default WordPress generated CSS classes, it also allows you to add your own classes.

Depending on your theme, you’ll find the post_class function in your single.php file or in the content template files. Normally, the code will look something like this:

1 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

You can add your own custom CSS class with an attribute like this:

1 <article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>

The post_class will print out respective default CSS classes along with your custom CSS class.

If you want to add multiple CSS classes, then you can define them as an array and then call them in the post_class function.

1 <?php
2 $custom_classes array(






3         'longform-article',
4         'featured-story',
5         'interactive',
6     );
7 ?>
8 <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>

Style Posts Differently Based on Authors

The default CSS classes generated by the_posts function does not include author name as a CSS class.

If you want to customize the style of each post based on author, then you will need to first add the author name as a CSS class.

You can do this by using the following snippet:

1 <?php $author = get_the_author_meta('user_nicename'); ?>
2 <article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>

This code will add the user’s nicename as a CSS class. Nicename is a URL friendly name used by WordPress. It does not have spaces, and all characters are in lowercase which makes it perfect to use as a CSS class.

The above code will give you an output like this:

1 <article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">

Now you can use .peter in your custom CSS to style all posts by this particular author to look different.

1 .peter {
2 background-color:#EEE;
3 border:1px solid #CCC;
4 }

Style Posts Based on Popularity using Comment Count

You may have seen sites with popular posts widgets which are sometimes based on comment counts. In this example, we will show you how to style posts differently using the comment count.

First, we need to get the comment count and associate a class with it.

To get the comment count, you’ll need to add the following code in your theme files. This code goes inside the WordPress loop, so you can add it just before the <article> tag as well.

01 <?php
02     $postid = get_the_ID();
03     $total_comment_count = wp_count_comments($postid);
04         $my_comment_count $total_comment_count->approved;
05     if ($my_comment_count <10) {
06         $my_comment_count 'new';
07     elseif ($my_comment_count >= 10 && $my_comment_count<20) {
08         $my_comment_count 'emerging';
09     elseif ($my_comment_count >= 20) {
10         $my_comment_count 'popular';
11     }
12 ?>

This code checks comment count for the post being displayed 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 referred to as emerging, and anything over 20 comments is popular.

Next, you need to add the comment count CSS class to the post_class function.

1 <article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

This will add new, emerging, and popular CSS classes to all posts based on the number of comments each post has.

You can add custom CSS to style posts based on popularity:

1 .new {border1px solid #FFFF00;}
2 .emerging {border1px dashed #FF9933;}
3 .popular {border1px dashed #CC0000;}

We are just adding borders, you can add any CSS rules you want.

Style Posts Based on Custom Fields

Hardcoding CSS classes in your theme file limits you to only those specific CSS classes. What if you wanted to decide which CSS class to add to an article as you are writing it?

With custom fields, you can add CSS classes on the fly.

First you need to add a custom field to a post, so that you can test it out. Edit a post and scroll down to custom fields section.

Add post class as a custom field

Add post-class as the custom field name, and anything you want to use as CSS class in the value field.

Don’t forget to click on the ‘Add custom field’ button to store it and then save your post.

Next, edit your theme files to display your custom field as the post class.

1 <?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
2 <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

It will output the following HTML:

1 <article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">

You can now add custom CSS for the post_class you added using custom field.

1 .trending{
2 background-color:##ff0000;
3 }

Custom fields can have multiple values, so you can add multiple CSS classes using the same name.

There are many more ways to style WordPress posts individually. As your skills grow, you’ll keep discovering new ways to style posts using different conditions.

We hope this article helped you learn how to style each WordPress post differently. You may also want to see our ultimate list of the most wanted WordPress tips, tricks, and hacks.

How to Add Instant Search in WordPress with Algolia

Have you ever wanted to add an instant search feature in your WordPress site? The default WordPress search feature is quite limited which is why a lot of probloggers replace it with third-party tools and plugins. In this article, we will show you how to add instant search in WordPress with Algolia.

Why Add an Instant Search Feature in WordPress?

The default WordPress search is plain and often not relevant. This is why many WordPress users replace it with third-party search tools like Google Search, or WordPress plugins like SearchWP. See our list of 12 WordPress search plugins to improve your site search.






A search feature on your website can significantly improve user experience. It helps users find content, which increases your pageviews and the time users spend on your website.

Instant search feature helps users find content as quickly as they start typing. This helps users get to their desired content much quickly. Think of it as MacOS’s spotlight feature for your WordPress site.

Having said that, let’s take a look at how to add instant search to your WordPress site with Algolia.

What is Algolia?

Algolia is a cloud based search platform that allows you to build beautiful search experiences for your websites and applications.

Once activated, Algolia will index all content on your website and replace the default WordPress search with a more powerful cloud based search.

It comes with a built-in instant search feature which means your users can get to the content faster without even seeing a search results page.

Algolia offers a free plan with 10,000 records and 100,000 queries per month. Their paid plans start from $49 per month and come with a 14 day free trial.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

Adding Instant Search in WordPress with Algolia

First, you need to visit Algolia website and sign up for an account.






Next, you need to install and activate the Search by Algolia plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled Algolia to your WordPress menu. Clicking on it will take you to the plugin’s settings page.

 

You will be asked to provide application ID and API keys. You can obtain this information from your Algolia account dashboard.

Copy and paste the required keys in the plugin’s settings page and then click on the save changes button to store your settings.

Next, you will be asked to index your content. Indexing allows Algolia to crawl and create an index of your content, so that it can be searched quickly without slowing down your website.

You can begin indexing by visiting Algolia » Indexing page and select the content types you want to be indexed. Don’t forget to click on the save changes button.

Algolia will now start indexing your content. It may take a while depending on how much content you have on your website.

Next, you need to enable the autocomplete feature. Go to Algolia » Autocomplete and check the box next to ‘Enable autocomplete’ option. After that you need to scroll down and select the content types to include in your autocomplete results.

Don’t forget to click on the save changes button to store your settings.

Lastly, you need to replace the default WordPress search with the Algolia instant search. You can do this by going to Algolia » Search Page and select ‘Use Algolia in the backend’ option.

Selecting Algolia in the backend replaces your WordPress search with Algolia search.

Click on the save changes button to store your settings.

Adding Instant Search Box in WordPress

Now that you have successfully setup Algolia, let’s go ahead and add an instant search box on your website.






Algolia automatically replaces the default WordPress search form with an Algolia powered search.

If you have already added the search form to your WordPress site, then it will start showing results using Algolia automatically.

If you haven’t added a search form, then go to Appearance » Widgets page. Drag and drop the search widget to your sidebar. See our guide on how to add and use widgets in WordPress.

Please make sure to click on the save button to store your widget settings.

That’s all, you can now visit your website to see the instant search in action. Start by typing in the search box, and Algolia will start showing results as you type.

Preview of instant search in WordPress with Algolia

We hope this article helped you add instant search in WordPress with Algolia. You may also want to see our list of 24 must have WordPress plugins for business websites.

 

How to Add an Author’s Avatar Photo in WordPress

Do you want to add an author’s photo in WordPress? By default, most WordPress themes display an author’s gravatar image as their profile photo. But what if you wanted to replace the gravatar image with an actual author photo? In this article, we will show you how to easily add an author’s photo in WordPress.






When Do You Need Custom Author Photo in WordPress?

If you run a single author WordPress site, then you can just use an image widget to add your photo and an about page with more information.

On the other hand, if you run a multi-author WordPress site, then you may need to add an author bio box at the end of your articles. Author bio box typically shows an author’s profile photo, brief bio, and links to their website or social profiles.

By default, most WordPress themes display an author’s gravatar image as their author photo. However, sometimes an author may not have a gravatar image or they may not want to use it as an author image on your website.

Having said that, let’s see how to easily add author photo in WordPress and allow authors to upload a photo to their profile.

Video Tutorial







If you don’t like the video or need more instructions, then continue reading.

Adding an Author Photo in WordPress

First thing you need to do is install and activate the WP User Avatar plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled Avatars in your WordPress admin bar. Clicking on it will take you to the plugin’s settings page.

WP User Avatar settings

Here you can choose how you want to display the user avatars on your WordPress website.

By default, this plugin allows users with at least an Author role to upload their own profile photo. You can change that and allow contributors and subscribers as well.

It also allows you to completely disable Gravatar on your WordPress site and only use local avatars.

Once you are comfortable with the settings, go ahead and click on save changes button to save them.

Now you can go to Users page and click on the edit butt

Don’t forget to click on the ‘Update profile’ button to save your changes.

Similarly, users on your WordPress site will be able to upload their photos by editing their user profile.






Now you can visit your website to see the plugin in action.

It will start showing local avatar as author photo for the articles. If a user does not add an author photo, then it will show their gravatar image.

 

If a user doesn’t have an author photo or gravatar image, then it will fallback to the default gravatar image. You can add a branded custom gravatar image to be used as fallback image.

We hope this article helped you learn how to add an author’s photo in WordPress. You may also want to see our guide on how to allow users to submit posts to your WordPress site.

on below a username.

On the edit user screen, scroll down to the bottom, and you will see the Avatar section. You can click on the ‘Choose Image’ button to upload the user photo.