Style a Single Post in WordPress

In my last post I talked about removing columns using pseudo-selectors to rectify a problem I had not too long ago. I learned something new on that last post and figured I should share it. How to style elements on a single post without adding it to the main CSS file. The process lies in the core WordPress files but we don’t have to go digging into that because it is MUCH simpler.

So first off, we’re going to need some HTML tags to play around with.

Two simple paragraph tags with the class and ID of “demo.” Very easy so far, I can do it in my sleep and probably already have. So now let’s add some CSS.

And you should get something like this:

This is a really simple tutorial, even a beginner can do it!

Dude, seriously, it is so easy I almost fainted. And that is not cool.

 

This is the part that is so easy it is sickening. Simply copy and paste or type out your CSS, including the style tag, in the WordPress editor but make sure you do it in the “text” tab.
text-tab

Another neat trick you can do is add in media queries to each post. You can add it the exact same way as CSS. Since it is a part of CSS then naturally you can add it the same way. So I’ll add that in too for fun. I’ll set the max-width to 900px so you don’t have to go fishing for it and all you have to do is adjust the browser size. Normally they’ll be a blue color so you know which paragraphs I’m talking about.

Super easy Dude!

Way super easy Dude!

Voila! You have done it. You have successfully styled a single post without adding anything to the base CSS file. I’ll explain the bit that I know. The <style> tags are read in XHTML which is the code that WordPress uses however it is wrapped in a conditional statement as part of the WordPress loop. The loop basically says, “if it has a post, then display the post. But if it doesn’t then don’t.” Since the post is created inside the loop process then it doesn’t display them unless called on, hence the conditional statement. And since the <style> tags are created inside the post it won’t show them unless called on. It’s like what my teachers used to say growing up, “Don’t talk unless spoken to!” Same principle applies here.