WordPress adds its own CSS classes to different elements in most themes. These default classes help style various parts of your site automatically.
Knowing these default CSS classes can be really useful. They make it easier to customize your site’s appearance without starting from scratch.
For example, once we started using CSS on our sites, we found it much easier to style our blog content to make it stand out.
In this article, you’ll find a cheat sheet of these default WordPress-generated CSS classes. We’ll also show you how to find more CSS classes and add your own when you need them.
Why Learn About the Default WordPress-Generated CSS?
WordPress automatically generates and adds default CSS classes to different elements on your WordPress website.
Theme developers can play around with these default CSS classes to style WordPress sites’ common areas, such as the content areas, sidebars, widgets, navigation menus, and more.
So, knowing those CSS classes comes in handy if you are learning WordPress theme development or simply trying to create a child theme for your own website.
It also helps you quickly style certain elements in your WordPress theme by adding custom CSS without creating your own theme.
Note: You don’t have to learn CSS to change your theme styles or create a custom theme. If you prefer not to learn to code, you can use a drag-and-drop builder like SeedProd. We’ll talk more about it later in the article.
In the following sections, we’ll share the default WordPress-generated CSS classes. Here’s a quick overview of all the things we’ll cover in this article:
Without further ado, let’s dive in and learn how to make your WordPress site look exactly how you want it!
Default Body Class Styles
In HTML, the tag contains the layout structure of any web page, making it very important in WordPress theme design.
WordPress adds several CSS classes to the body tag. Theme designers can use these classes to style the body container effectively.
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
As you can see, these classes include a wide variety of conditions that you can target in your CSS styles.
For instance, if you wanted the ‘News’ category page to have a different background color, then you can add the following custom CSS.
.category-news {
background-color:#f7f7f7;
}
Default Post Style Classes
Just like with the body element, WordPress adds dynamic classes to the post elements as well.
This element is usually the tag in your theme template. However, it could be any other tag, depending on your WordPress theme. The post-CSS classes are displayed in your theme by adding the post_class() template tag.
