Specify a different CSS for each WordPress Post

Style sheets (CSS) are an excellent tool and essential to achieve that professional looking presentation for your website or WordPress blog.

One idea that will give an additional attraction to your pages is to specify a different CSS for each post in WordPress. That is, according to certain rules you will determine the appearance of each entry or page that will vary according to their content, location, size or other variables. I got this idea of ??custom CSS per post , digging into WordPress.

There are various criteria you can use to differentiate each post with a subject to group different pages within the same category and present the group with similar colors, fonts and other features. There are several ways to achieve the desired result. Ideally, the method you choose, will likely involve some modification to the theme files you use, as clear as possible to avoid complications in the updated code and / or future confusion.

Add Code CSS Editor

A simple and effective to specify a different CSS for each WordPress post, is to automate the addition of CSS features in the editor screen posts or pages. That is, when you enter to add or edit an article, the editor will present a space that you can fill with the CSS you want to apply and will overlap the existing code. This is simple, unless you add a few lines of code in the “functions.php” theme you use.

Modifying the functions.php file

To make the editor present a rectangle where you can enter a CSS code itself, you must modify the function, “functions.php” in the theme you’re using. The text that you add at end of file is the one specified in the article under the title Custom Panel (Don’t know why it will not let me copy it in the WordPress editor).

Operation of this code

The code you added to your “functions.php” file will produce the following effect:

Each time you enter a new post or a new page (or when accessing to modify), a box appears with the words “Enter CSS for this entry,” or “Enter CSS for this page.”
In the space you must write the CSS code that modifies attributes of the post or page according to the style you want to print.
Once the style code is entered, use the button “update” (or “publish” if it is a new article.) The next time you display the page or modified post, you will see the changes you made on their attributes.
Do not forget that if you work with more than one topic, you must enter the code in the file “functions.php” of each subject.

Note that the variable names used in the code are preceded by the prefix “micss_” thereby avoid duplicating our names with some of the ones used by WordPress template.

Testing the Operation

In the box that this new feature in the edit screen, you can add code like the following, for example:

<br>. entry-content h4 {<br> color: # 000; <br> font-size: 17px; <br> font-style: italic;} <br> <br>

Test this now in your page. Should show the usual style. Then, something changes. For example, the color. O indicates a font-size: 32. You’ll see it in the preview of your page or your post will change according to the new features you choose.

Share this post