Just how to Style Each WordPress Post Differently

perhaps you have locate site that design their blog posts in a different way? Some websites have actually sticky articles highlighted with a custom back ground whereas others may have each category publish styled having unique appearance. Should you ever wished to discover ways to design each WordPress articles in a different way, then you’re into the right place. In this essay, we are going to show you how exactly to style each WordPress post differently.

type Each Post Differently

Note: This tutorial calls for you to add custom CSS in WordPress. You will also must be able to use the Inspect tool. Some basic CSS and HTML knowledge is needed.

Styling Individual Posts in WordPress

WordPress adds default CSS classes to different elements on your own site. A regular compliant WordPress theme must have the rule needed by WordPress to incorporate CSS classes for body, posts, pages, widgets, menus, and much more.

A core WordPress function called post_class() is used by themes to inform WordPress where you should include those default CSS classes for articles.

In the event that you see your internet site and make use of the Inspect device within web browser, then you will be able to see those classes added for every post.

Default CSS classes for WordPress post

Following would be the CSS classes included by default predicated on just what page a person 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

A good example output would look like this:

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

You’ll style each WordPress post differently utilizing the particular CSS classes.

As an example, if you desired to style a person post, then you can use the post-id class within customized CSS.

.post-412 { background-color: #FF0303;
color:#FFFFFF; } 

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

Styling a particular post in WordPress

Let’s take a good look at another instance.

This time we shall design all articles filed under a particular category called news.

We Could do this by the addition of the next custom CSS to your theme”

.category-news { font-size: 18px; font-style: italic;
} 

This CSS will influence all posts filed under news category.

The Post Class Function

Theme designers make use of the post_class function to share with WordPress where you can add the post classes. Usually it’s within the <article> label.

The post course function not only loads the standard WordPress generated CSS classes, in addition enables you to include your classes.

Dependent on your theme, you’ll find the post_class function inside single.php file or inside content template files. Ordinarily, the code will look something similar to this:

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

You can include your own personal customized CSS course having an characteristic like this:

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

The post_class will print away respective standard CSS classes with your custom CSS course.

If you wish to include multiple CSS classes, then you can determine them being an array after which phone them inside post_class function.

<?php $custom_classes = array( 'longform-article', 'featured-story', 'interactive', );
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>> 

Style Articles In A Different Way According To Writers

The standard CSS classes produced by the_posts function cannot consist of author title as being a CSS course.

If you would like customize the style of each post based on author, then you’ll definitely should first add the writer title as being a CSS class.

This can be done utilizing the following snippet:

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

This code will add the user’s nicename being a CSS course. Nicename is a URL friendly name employed by WordPress. It doesn’t have spaces, and all characters are in lowercase that makes it perfect to utilize being a CSS course.

The above mentioned code will give you an output such as this:

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

You can now utilize .peter in your customized CSS to create all posts by this particular writer to check different.

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

Type Articles Considering Popularity using Comment Count

You’ve probably seen sites with popular posts widgets which are often based on remark counts. In this example, we shall show you how exactly to style posts in a different way utilising the remark count.

First, we must obtain the remark count and associate a class with it.

For the comment count, you’ll need certainly to add these code within theme files. This rule goes inside the WordPress loop, in order to include it simply ahead of the <article> tag aswell.

<?php $postid = get_the_ID(); $total_comment_count = wp_count_comments($postid); $my_comment_count = $total_comment_count->approved; if ($my_comment_count <10) { $my_comment_count = 'new'; } elseif ($my_comment_count >= 10 && $my_comment_count <20) { $my_comment_count = 'emerging'; } elseif ($my_comment_count >= 20) { $my_comment_count = 'popular'; }
?>

This rule checks comment count the post being displayed and assigns them a value on the basis of the count. Including, posts with under 10 reviews get a class called brand new, significantly less than 20 are named growing, and such a thing over 20 opinions is popular.

Next, you’ll want to add the remark count CSS class to the post_class function.

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

This may add brand new, rising, and popular CSS classes to all or any posts on the basis of the number of commentary each post has.

You could add customized CSS to create articles considering appeal:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

We are just adding boundaries, you can include any CSS rules you would like.

Type Posts Predicated On Custom Fields

Hardcoding CSS classes inside theme file limits one to only those particular CSS classes. Let’s say you desired to determine which CSS class to increase articles when you are composing it?

With custom industries, you can add CSS classes regarding fly.

First you’ll want to put in a custom field up to a post, so that you can test that down. Edit a post and scroll right down to custom areas part.

Add post class being a customized field

Add post-class since the custom field name, and whatever you wish to utilize as CSS course in the value field.

Don’t forget to click the ‘Add custom industry’ switch to store it after which save your valuable post.

Next, edit your theme files to show your custom industry as the post course.

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

It’s going to output the following HTML:

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

You can now add customized CSS for the post_class you included using custom industry.

.trending{
background-color:ff0000;
}

Custom industries might have multiple values, in order to include multiple CSS classes utilizing the exact same name.

There are many more methods to design WordPress posts independently. As your abilities develop, you’ll keep discovering brand new approaches to style posts utilizing different conditions.

Develop this article aided you learn how to style each WordPress post differently. It’s also possible to desire to see our ultimate variety of probably the most desired WordPress guidelines, tricks, and cheats.

In the event that you liked this short article, then please donate to our YouTube Channel for WordPress video tutorials. You can also find united states on Twitter and Facebook.