How to Embed CSS for a Specific Post in WordPress

Posted on

Sometimes you need to apply a specific CSS style to a post. We’ve seen in earlier tutorials how to add a custom body posts so that you can create different categories of post types with each having its own unique look and feel. But what if it’s just a one-off thing? What if you’re not looking to create a permanent class of CSS styles but only wish to apply a single set of rules just once? By default, WordPress doesn’t allow this kind of functionality. However with custom variables, we can craft a neat solution to the problem.

Custom variables are pieces of information that we can attach to every post or page in WordPress. They’re widely used due to the flexibility they provide in allowing us to process posts based on them. Many plug-ins in fact embed their data for individual posts within custom variables for easy retrieval from the database. You can use the template shown below to create and access your own custom variables for many different purposes. Storing CSS styles for individual posts is just one of their many, many uses.

Creating a Custom Variable

In this example, I’m going to create a CSS rule to turn the background of the current post pink. In the default WordPress post editor, scroll down until you see the section labeled “Custom Fields”. Click the text link “Enter New” and you will be presented with two text boxes – one on the right, and one on the left. The one on the left is the variable name and the right contains the value. For the first one, give it the name “custom_css” and in the box on the right, we write down the CSS rules that we want to apply to this post.

Here’s a screenshot of what this looks like for this specific example:

add custom variable

In this, I’m styling the “post” class and giving it a pink background. I’m also introducing a bit of internal padding to create some space between the text and the outer borders. You can insert whatever CSS you want over here – make it as complicated or as simple as necessary. Once you’re done, click “Update” and your custom variables will be saved. You can also go ahead and save your post.

Inserting the CSS

So far, we’ve only created a custom variable holding the CSS as a value. We haven’t done anything to actually inserted into the HTML of the post. We do this via code in the functions.php file. So open up functions.php and paste the following before the closing ?> PHP tag:

function add_new_class() {
	if(get_post_meta(get_the_ID(), 'custom_css', true) && is_single()) {
		echo '<style type="text/css">';
		echo get_post_meta(get_the_ID(), 'custom_css', true);
		echo '</style>';

If you don’t know how to insert custom code into WordPress like this, check out my earlier tutorial on the same.

This code hooks into the head area of the post, checks whether or not a custom variable exists with the name “custom_css” and if it’s single. If so, it echoes the value of our variable enclosed in appropriate HTML style CSS tags. Save your changes to functions.php and reload the page. If all goes well, the CSS styles you inserted into your custom variable should be reflected in the page like this:

css applied

As you can see, this code is best used only for “throwaway” styles that you don’t want to apply to any other post. If you’re looking into styling posts based on categories or some other parameter, you’re better off using a “body” class as explained in the first link in this article.

Leave a Reply

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