How to add style to a single wordpress blog post

You probably at least once, but have come across sites on which the style of notes has been differently designed. From site to site you can observe the trend of “sticky” entries highlighted in a special color or, for example, each post from a separate category is made in a special style. You’ll ask how to achieve this, so that each post has its own CSS styling. I will disclose the details below.

Click here : Website Designing Services UAE

Unique style for every post in WordPress

Note: You will also need to make changes to the custom CSS file. To do this, you need to have basic skills and an understanding of how styles work in layout and programming.

Creating Style for Individual Individual Posts in Wordpress

WordPress adds default CSS classes to each individual item. A standard compatible WordPress theme must have the code required by WordPress to add CSS classes for the body tag, individual posts, pages, widgets, menus, etc.

The main WordPress function, called post_class ( ) , is used by themes to tell WordPress where to add these default CSS classes for posts.

If you visit your site and use the inspection tool in your browser, you can see that these classes are added for each post.

Default CSS Classes in Wordpress

Below I list the classes that WordPress adds to the page, depending on what the user is viewing:

. post - id

. post

. attachment

. sticky

. hentry (hAtom microformat)

. category - ID

. category - name

< span style = "font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;" > < span style = "font-size: 16px; background-color: #ffffff;" > . 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:

You can style your WordPress post differently using the appropriate CSS classes.

For example, if you want to create a separate post, then you can use the post - id class in your custom CSS.

.post-412 {

background-color: #FF0303;

color:#FFFFFF;

}

.post-412 {

background-color: #FF0303;

color:#FFFFFF;

}

Do not forget to override the container identifier on your own!

Adding style to a single post

Let's take a look at another example. Let's try adding styles to the posts, which are united by a category called news.

We can do this by adding this code to custom CSS:

.category-news {

font-size: 18px;

font-style: italic;

}

.category-news {

font-size: 18px;

font-style: italic;

}

Now our records will have the style that the container defines . category - news

Post_Class Function

Programmers and theme creators use the post_class function to tell WordPress where to add post classes. Usually it is in the < article > tag .

The post_class function not only loads the default CSS classes created by WordPress, but also allows you to add your own classes.

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

Let's add our own CSS class with this attribute:

The post_class function will output the appropriate CSS classes by default along with your own.

If you need to specify several classes, you can do this by defining them in an array, and then call them in the post_class function

<?php

$custom_classes = array(

'longform-article',

'featured-story',

'interactive',

);

<?php

$custom_classes = array(

'longform-article',

'featured-story',

'interactive',

);

Add Post Style Based On Authorship

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

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

You can do this using the following snippet:

<?php $author = get_the_author_meta('user_nicename'); ?>

<?php $author = get_the_author_meta('user_nicename'); ?>

This code will add the user's nickname as a CSS class. Nicename is the URL used by WordPress. It has no spaces, and all characters are lowercase, making it ideal for use as a CSS class.

The above code will give you this output:

Now set for the class . peter style and apply it to all posts by the author:

.peter {

background-color:#EEE;

border:1px solid #CCC;

}

.peter {

background-color:#EEE;

border:1px solid #CCC;

}

Styling Posts Of Popular Posts

Many WordPress sites have widgets for popular posts where you can see the number of comments left. The more of them, the higher the blog article becomes in popularity. In the example below, we will show you how you can add your own unique custom style using the comment counter.

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

To do this, add some code to the theme file. This code is included in the WordPress cycle, you can add it immediately before the < article > tag .

<?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';

}

<?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 code design checks the number of comments for displayed posts and assigns them a value based on the score. For example, posts with less than 10 comments receive a class called new, less than 20 are called appearing, and everything that has more than 20 comments falls into the popular class.

Then you need to add a CSS class with comments to the post_class function .

Thus, we will add classes with the names new, emerging and popular, depending on how many comments are assigned to them.

Add custom CSS styles for them:

.new {border: 1px solid #FFFF00;}

.emerging {border: 1px dashed #FF9933;}

.popular {border: 1px dashed #CC0000;}

.new {border: 1px solid #FFFF00;}

.emerging {border: 1px dashed #FF9933;}

.popular {border: 1px dashed #CC0000;}

In this example, we just added border frames of different colors.

Custom Post Style

The hardcoded CSS classes in your theme file restrict you to these specific CSS classes. What if you want to decide which CSS class to add to the article when you write it?

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

First you need to add it to your post so you can check it out. Edit the entry and scroll down to the custom fields section.

Adding class name to custom fields

Add a post-class as a name, which will be the key of an arbitrary field, and whatever you want to use as a CSS class in the value field.

Remember to click the Add Custom Field button to save it, and then save the message.

Then edit your files in order to display your custom field as a post class.

If you do not suddenly find this metabox, then do not worry. It can be easily turned on in the "Screen Settings"

Enabling custom fields in the admin panel

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

This will give us the following HTML code:

Now you can add custom CSS for the post_class to be added using an arbitrary field.

.trending{

background-color:##ff0000;

}

.trending{

background-color:##ff0000;

}

Arbitrary custom fields can have several values, which means you can add several classes with the same name.

This is the end of our issue, I sincerely hope that our editors have answered your question: how to create your own unique style for each individual WordPress blog post. Surely it will be interesting for you to familiarize yourself with another useful note - how to create the prefix “sponsorship post” .

For more information visit our website Digital Marketing Services in UAE

Search This Blog

World Digital Network