How to Style Each Post Differently in WordPress

WordPress

Have you at any point run over a webpage that style their blog entries in an unexpected way? A few locales have sticky posts featured with a custom foundation though others may have every classification post styled with an interesting look. On the off chance that you at any point needed to figure out how to style each WordPress posts in an unexpected way, at that point you’re in the opportune place. In this article, we will demonstrate to you generally accepted methods to style each WordPress post in an unexpected way.

Style Each Post Differently

Note: This instructional exercise expects you to include custom CSS in WordPress. You will likewise should have the capacity to utilize the Inspect instrument. Some essential CSS and HTML learning is required.

 

Styling Individual Posts in WordPress

WordPress adds default CSS classes to different components on your site. A standard consistent WordPress topic must have the code required by WordPress to include CSS classes for body, posts, pages, gadgets, menus, and the sky is the limit from there.

A center WordPress work called post_class() is utilized by subjects to disclose to WordPress where to include those default CSS classes for posts. On the off chance that you visit your site and utilize the Inspect apparatus in your program, at that point you will have the capacity to see those classes included for each post.

 

Default CSS classes for WordPress post

Following are the CSS classes included of course based what page a client is seeing.

  • post-id
  • post
  • connection
  • sticky
  • hentry (hAtom microformat pages)
  • classification ID
  • classification name
  • tag-name
  • design {format-name}
  • sort {post-sort name}
  • has-post-thumbnail
  • post-secret key required
  • post-secret key ensured

An illustration yield would resemble 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 diversely utilizing the individual CSS classes. For instance, on the off chance that you needed to style an individual post, at that point you can utilize the post-id class in your custom CSS. Bear in mind to change the post ID to coordinate your own.

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

Styling a particular post in WordPress

How about we investigate another case. This time we will style all posts documented under a particular classification called news. We can do this by adding the accompanying custom CSS to our topic” This CSS will influence all posts recorded under news class.

1
2
3
4
.category-news {
    font-size: 18px;
    font-style: italic;
}

The Post Class Function

Subject designers utilize the post_class capacity to reveal to WordPress where to include the post classes. Generally it is in the <article> tag. The post class work not just loads the default WordPress produced CSS classes, it additionally enables you to include your own classes.

Contingent upon your subject, you’ll discover the post_class work in your single.php record or in the substance format documents. Typically, the code will look something like this:

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

You can include your own particular custom CSS class with a property like this:

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

The post_class will print out individual default CSS classes alongside your custom CSS class. On the off chance that you need to include different CSS classes, at that point you can characterize them as a cluster and afterward call them in the post_class work.

The default CSS classes created by the_posts work does exclude creator name as a CSS class.  On the off chance that you need to tweak the style of each post in light of creator, at that point you should first include the creator name as a CSS class.

You can do this by utilizing the accompanying bit:

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

 

This code will include the client’s nicename as a CSS class. Nicename is a URL agreeable name utilized by WordPress. It doesn’t have spaces, and all characters are in lowercase which influences it to impeccable to use as a CSS class.

 

The above code will give you a yield this way:

 

Presently you can utilize .dwindle in your custom CSS to style all posts by this specific creator to appear to be unique.

 

Style Posts Based on Popularity utilizing Comment Count

You may have seen destinations with well known posts gadgets which are some of the time in view of remark tallies. In this illustration, we will demonstrate to you best practices to style posts diversely utilizing the remark tally. To start with, we have to get the remark tally and connect a class with it.

To get the remark tally, you’ll have to include the accompanying code in your subject documents. This code goes inside the WordPress circle, so you can include it just before the <article> tag also. This code checks remark mean the post being shown and allocates them an esteem in view of the tally. For instance, posts with under 10 remarks get a class called new, under 20 are alluded to as rising, and anything more than 20 remarks is famous.

[ Further Reading: Business Website Design : An Investment in Experts and Expertise ]

Next, you have to include the remark check CSS class to the post_class work. This will include new, rising, and prominent CSS classes to all posts in light of the quantity of remarks each post has.

You can add custom CSS to style posts in view of prominence:

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

We are simply including fringes, you can include any CSS rules you need.

 

Style Posts Based on Custom Fields

Hardcoding CSS classes in your topic document limits you to just those particular CSS classes. Consider the possibility that you needed to choose which CSS class to add to an article as you are composing it.

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

With custom fields, you can include CSS classes the fly. To start with you have to add a custom field to a post, so you can test it out. Alter a post and look down to custom fields segment.

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

Include post class as a custom field

Include post-class as the custom field name, and anything you need to use as CSS class in the esteem field. Bear in mind to tap on the ‘Include custom field’ catch to store it and afterward spare your post. Next, alter your topic documents to show your custom field as the post class.

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

It will yield the accompanying HTML:

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

You would now be able to include custom CSS for the post_class you included utilizing custom field.

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

Custom fields can have various esteems, so you can include different CSS classes utilizing a similar name. There are numerous more approaches to style WordPress posts exclusively. As your aptitudes develop, you’ll continue finding better approaches to style posts utilizing distinctive conditions.

Leave a Reply

Your email address will not be published. Required fields are marked *