WordPress custom body class plugin – What is this?!?
Yesterday I’ve created a WordPress plugin which allows you to add a custom CSS class on the HTML body tag. Obviously this works only if your theme follows standards and uses the body_class() function. Here is the basic workflow:
1) First you add your custom class in the right sidebar of the edit page, like this:
2) Once you’ve done this, and saved your post, you should already have your unique class on your <body> tag. So when you hit “View Post” and inspect the page you should see it like this:
Now this isn’t such a big thing (you can probably do this with some custom code, but … why bother?), but I find it very useful since you can customize any post, page or custom post type item as you wish. Now you can choose which of your posts should be awesome by adding some custom CSS style in your theme’s style.css file or you can use our Customify plugin which allows you to add and edit custom CSS, with live preview, directly in your Customizer panel.
A simple test?
Well even if you didn’t notice this, the article you read is the living proof because I really added the .my_awesome_class to this article and in Customify there is a CSS snippet which adds a small border to all the images in this article:
[crayon lang=”css”]
.my_awesome_class .content-area img {
border: 1px solid #777;
}
[/crayon]
This is the only article on my website with bordered images, but who knows, maybe in the future I may need this class on other articles.
More features
For now this plugin lacks in extensive features, but you can enable / disable the visibility of the plugin’s metabox or select what post types should have this feature.
I plan to improve this plugin and also add options for categories, terms or taxonomies. Who knows maybe some custom rules or global ones, it depends if they are really needed.
But Why?
Why did I decide to create such a simple plugin? Firstly, I find it very useful, there wasn’t one on the market, but this is the actual use case that motivated me to create it:
While developing WordPress themes and plugins often our clients come and ask us for help with customization for their websites. I noticed that most of them ask things like “I would like that one of my pages to have black borders” or “I would like to hide the featured image on one of my article’s page” and is fairly simple for us to serve them a CSS snippet like
[crayon lang=”css”]
.postid-62 .featured-image{
display: none;
}
[/crayon]
And this was enough! They were happy and we were happy to help them, but there was a redundant thing when they came back and ask us to add this feature to another post, now the CSS selector gets long and ugly, we needed another solution.
Also while editing a WordPress post or page, did you ever found yourself in the need of doing something unique only with the current post? I personally did, I imagine that if you are familiar with CSS you surely did add this kind of code in your style.css file
[crayon lang=”css”]
.postid-62 img{
border:3px solid #000;
}
[/crayon]
Then you were happy with that outcome and in your next article you think “Hey let’s do the same with this one” and turn your CSS selector in something like this:
[crayon lang=”css”]
.postid-62 img, .postid-77 img, .postid-81 img{
border:3px solid #000;
}
[/crayon]
In the end, you need to admit that this is ugly and it could get worse.
Enough, go and play with it.
To sum it all up, you can use this plugin only if you like to play with small CSS edits and you need to add them only on some posts or pages. I hope you find it useful, and, if that is the case, let me know your thoughts on it (some reviews would also be nice 🙂 ).
September 27, 2015 at 2:01 am
Nice plug in Andrei. There are other plugins but these are really complicated or convoluted. Yours is Nice simple and straight forward. I used to use a theme that had this feature built in and and it gave me a lot of flexibility to customize via CSS. Then I HAD to change themes due to upgrade for mobile devises and this new theme lacked this flexibility. Really recommended!
October 1, 2015 at 6:53 am
Thank you for your kind words, I really appreciate it.
June 23, 2016 at 10:30 am
The “body_class” filter is used to filter the classes that are assigned to the body HTML element on the current page.
August 2, 2016 at 11:53 am
Just wanna input that you have a very nice website ,
I like the design it actually stands out.
August 14, 2016 at 7:00 am
Hurrah, that’s what I was looking for, what a material!
existing here at this blog, thanks admin of this website.