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.

How to Control Your RSS Feeds Footer in WordPress

Do you want to customize the RSS feed footer in WordPress? This allows you to add custom text, links, or even advertisements below your post content in the RSS feed. In this article, we will show you how to easily control your RSS feed footer in WordPress, and how to add custom feed only content to your posts.

Control RSS feed footer in WordPress

Why Add Content to RSS Feed Footer in WordPress?

RSS feeds offer an easier way for users to read your blog posts in their favorite feed reader apps such as Feedly.

However, RSS feeds can also be used by content scrapers to automatically steal your blog posts as soon as they are published. Sometimes these content scrapers end up ranking higher than your original post in search engines. To learn more, see our guide on how to prevent blog content scraping in WordPress.

Adding additional content to your RSS feed footer allows you to add backlinks to your main site and the original post at the end of each article. This allows you to rank higher for your posts even if they are copied by content scrapers.

By manipulating your RSS feed footer, you can also encourage readers to visit your website from time to time.

Having said that, let’s take a look at how to easily control your RSS feed footer in WordPress.

Method 1. Add Content to RSS Feed Footer Using Yoast SEO

This method is easier and recommended for all users. It uses the Yoast SEO plugin, which is the most popular WordPress SEO plugin.

First you need to install and activate the Yoast SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit SEO » Dashboard page and click on the ‘Features’ tab. Next, scroll down to the ‘Advanced settings pages’ section and make sure this option is ‘Enabled’.

Enable advanced settings pages in Yoast SEO

Don’t forget to save your changes to reload the plugin. After that, you will be able to see more options under the SEO menu.

Next, you need to visit SEO » Advanced page and click on the RSS tab.

Add content you want to show in RSS feed footer

Under the RSS feed settings, the first box allows you to add content before each post. The second box allows you to add content to the post footer.

Yoast SEO automatically adds credit text with backlink to your website in the RSS feed footer. You can either use the text as-is, or you can add your own content.

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

You can now view your RSS feed to see the changes. At the end of each article, you will be able to see content you added to your RSS feed footer.

Footer text in WordPress RSS feed

Method 2: Manually Add Content to RSS Feed Footer in WordPress

This method requires you to add code to your WordPress files. If you haven’t done this before, then check out our guide on how to copy and paste code in WordPress.

You’ll need to copy and paste the following code in your theme’s functions.php file or a site-specific plugin.

function wpb_feed_filter($query) {
if ($query->is_feed) {
add_filter('the_content','wpb_feed_content_filter');
add_filter('the_excerpt_rss','wpb_feed_content_filter');
}
return $query;
}
add_filter('pre_get_posts','wpb_feed_filter'); function wpb_feed_content_filter($content) {
// Content you want to show goes here $content .= '<p>Thanks for reading, check out <a href="'. get_bloginfo('url') .'">'. get_bloginfo('name') .'</a> for more awesome stuff.</p>';
return $content;
}

This code simply checks if the page requested is an RSS feed, and then filters the content to display your message in the RSS feed footer.

We hope this article helped you learn how to control RSS feed footer in WordPress. You may also want to see these helpful tips to optimize your WordPress RSS feed and get more traffic.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.