add-custom-class-body-wordpress

Adding Custom Classes to the Body Tag in WordPress

This is the first tutorial in the WPDev101 series. I will be releasing more of this type of tutorials covering the basics in the future.

So, let’s jump into it. Here’s the simplest example, we’re adding the class custom-class to the body element.

For multiple classes you would of course go with something like this:

Custom Class on a Specific Page Template

You can use conditional tags to add custom classes to specific pages only. Here’s an example of adding a class only for a specific page template.

Custom Class if a Sidebar Has Widgets

Let’s say you want to do some CSS adjustments in case there’s no widgets added to the sidebar ( for example make the content full width or center it, so it doesn’t look out of place ).

You could also go the other way around, add a class if there are widgets in the sidebar.

Custom Class if a Navigation Menu is Empty

So, what if you want to make adjustments in case the primary menu is empty. For example you have the usual header layout with the logo on the left and navigation on the right, but if there’s no navigation you want to center the logo.

Removing Classes

Important: You shouldn’t be doing this, the classes WordPress adds are there for a reason. But if it’s for your own purposes ( not a theme available for others ) and you want to remove some classes, you can do it like this.

The following code removes all the classes:

Or in case you want to remove a specific class:

Final Words

This concludes the first tutorial in the WPDev101 series ( WordPress development basics ). In case you have any questions just let me know down in the comments.

Tags: , ,
Previous Post
enable-gutenberg-on-custom-post-type
Tutorials

Enable Gutenberg on Custom Post Types

Next Post
clement-h-544786-unsplash
Articles

Common Reasons For Theme/Plugin Conflicts in WordPress

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.