WordPress automatically applies its own CSS classes to various elements in most themes, which helps in styling different sections of your website seamlessly.
Understanding these default CSS classes is incredibly beneficial, as they simplify the process of customizing your site’s design without the need to start from scratch.
For instance, after we began implementing CSS on our websites, we found it significantly easier to enhance the appearance of our blog content and make it more visually appealing.
In this article, you will discover a comprehensive cheat sheet of default CSS classes generated by WordPress. We will also guide you on how to locate additional CSS classes and create your own when necessary.
Why is it Important to Understand Default WordPress CSS Classes?
WordPress automatically generates and incorporates default CSS classes for various elements on your website.
Theme developers can utilize these default CSS classes to style common areas of WordPress sites, including content sections, sidebars, widgets, navigation menus, and more.
Therefore, being familiar with these CSS classes is advantageous if you are learning WordPress theme development or working on creating a child theme for your website.
It also enables you to quickly style specific elements in your WordPress theme by adding custom CSS without the need to develop your own theme.
Important NoteYou don’t need to master CSS to modify your theme styles or create a custom theme. If coding isn’t your preference, you can easily use a drag-and-drop builder like SeedProd. We’ll discuss this tool further in the article.
In the upcoming sections, we will outline the default CSS classes generated by WordPress. Here’s a brief overview of the topics we’ll cover in this article:
- Default Body Class Styles
- Default Post Style Classes
- Default Navigation Menu Classes
- Default WordPress Widget Classes
- Default Comment Form Classes
- Finding WordPress Block Classes
- Adding Your Own Custom CSS Classes in WordPress
- Bonus: Design a WordPress Theme Effortlessly Without Writing CSS Code
Now, let’s get started and discover how to customize your WordPress site to match your vision!
Default Body Class Styles
In HTML, thetag is crucial as it defines the layout structure of any webpage, making it vital for WordPress theme design.
WordPress automatically adds various CSS classes to the body tag, allowing theme designers to style the body container effectively.
// This style is applied when the website is using a right-to-left language, such as Arabic or Hebrew.
.rtl {}
// This style is applied when the home page is being viewed.
.home {}
// This style is applied when the blog page is displayed.
.blog {}
// This style is applied when an archive page is shown.
.archive {}
// This style is applied when a date-based archive is displayed.
.date {}
// This style is applied on search result pages.
.search {}
// This style is applied when pagination is active.
.paged {}
// This style is applied when an attachment page is shown.
.attachment {}
// This style is applied when a 404 error page is displayed.
.error404 {}
// This style is applied when a single post is displayed, including the post ID.
.single postid-(id) {}
// This style is applied when a single attachment is displayed, including the attachment ID.
.attachmentid-(id) {}
// This style is applied when a single attachment is displayed, including the attachment's MIME type.
.attachment-(mime-type) {}
// This style is applied when an author page is displayed.
.author {}
// This style is applied when an author page is displayed, including the author's username.
.author-(user_nicename) {}
// This style is applied when a category page is displayed.
.category {}
// This style is applied when a category page is displayed, including the category slug.
.category-(slug) {}
// This style is applied when a tag page is displayed.
.tag {}
// This style is applied when a tag page is displayed, including the tag slug.
.tag-(slug) {}
// This style is applied when a parent page is displayed.
.page-parent {}
// This style is applied when a child page is displayed, including the parent page ID.
.page-child parent-pageid-(id) {}
// This style is applied when a page is displayed using a specific page template, including the template file name.
.page-template page-template-(template file name) {}
// This style is applied when search results are shown.
.search-results {}
// This style is applied when a search returns no results.
.search-no-results {}
// This style is applied when a logged-in user is detected.
.logged-in {}
// This style is applied when a paginated page is displayed, including the page number.
.paged-(page number) {}
// This style is applied when a paginated single item is displayed, including the page number.
.single-paged-(page number) {}
// This style is applied when a paged page type is displayed, including the page number.
.page-paged-(page number) {}
// This style is applied when a paged category page is displayed, including the page number.
.category-paged-(page number) {}
// This style is applied when a paged tag page is displayed, including the page number.
.tag-paged-(page number) {}
// This style is applied when a paged date-based archive page is displayed, including the page number.
.date-paged-(page number) {}
// This style is applied when a paged author page is displayed, including the page number.
.author-paged-(page number) {}
// This style is applied when a paged search page is displayed, including the page number.
.search-paged-(page number) {}
These classes encompass a diverse range of conditions that you can target with your CSS styles.
For example, if you want to change the background color of the ‘News’ category page, you can use the following custom CSS.
.category-news { background-color:#f7f7f7; }
Pro Tip:Looking for a simple way to add CSS and code snippets in WordPress? Check out the free WPCode plugin to keep your code snippets up to date.
Default Post Style Classes
Similar to the body element, WordPress also assigns dynamic classes to post elements.
This element is typically the
post_class() template tag.
<article id="post-<?php the_ID(); ?>"></article>
This is a compilation of some of the most frequently used CSS classes created by the post_class() function:
// Adds a class with the ID for individual items
.post-(ID) {}
// Generic class for single blog posts.
.post {}
// Generic class for displaying a single page.
.page {}
// Generic class for attachment pages.
.attachment {}
// Adds a class for post type, e.g., type-post
.type(post-type) {}
// Adds a class for post format if the theme supports post formats, e.g., format-standard
.format-(post-format) {}
// Added when an item features a thumbnail image
.has-post-thumbnail {}
// Added when a sticky post is displayed
.sticky {}
// Generic class for displaying an entry
.hentry {}
// Classes for categories assigned to a post, e.g., category-news category-movies
.category-(slug) {}
// Classes for tags assigned to a post, e.g., tag-photofriday tag-tgif
.tag-(slug) {}
Post classes enable you to style blog posts and pages based on various conditions. For example, you can apply different styles to blog posts categorized under a specific category using the following custom CSS:
.category-news { background-color: #EFEFEF; }
If the CSS editor is not visible in your WordPress dashboard, check out our guide on how to restore the missing WordPress theme customizer.
Default Classes for Navigation Menus
WordPress automatically assigns CSS classes to navigation menus. Below are the standard classes that are applied to these menus.
// Class for the Current Page
.current_page_item{}
// Class for the Current Category
.current-cat{} // Class for any Current Menu Item
.current-menu-item{} // Class for Taxonomies
.menu-item-type-(taxonomy){}
// Class to Identify Post Types. .menu-item-type-(post_type){}
// Class for Custom Items Added
.menu-item-type-custom{} // Class for the Home Link
.menu-item-home{}Your WordPress theme will also assign a CSS class to each navigation menu location.
For example, if your theme designates the primary menu class to a menu location in the header area, you can target it in your CSS using the following classes.
// CSS for the header navigation menu
#header .primary-menu {} // CSS for the first unordered list in the primary menu
#header .primary-menu ul {} // CSS for nested unordered lists within the primary menu
#header .primary-menu ul ul {} // CSS for each navigation item in the primary menu
#header .primary-menu li {} // CSS for links within each navigation item
#header .primary-menu li a {} // CSS for unordered lists that contain dropdown items
#header .primary-menu li ul {} // CSS for each dropdown navigation item
#header .primary-menu li li {} // CSS for links within each dropdown navigation item
#header .primary-menu li li a {}For more information, check out our guide on styling navigation menus in WordPress.
Default Widget Classes in WordPress
Widgets provide a convenient way to display non-content elements in your WordPress theme. They are usually found in designated widget-ready areas or sidebars.
WordPress automatically assigns the following classes to legacy widgets.
.widget { /* Styles for widgets */ } #searchform { /* Styles for the search form */ }
.widget_search { /* Styles for search widgets */ }
.screen-reader-text { /* Styles for screen reader text */ } .widget_meta { /* Styles for meta widgets */ }
.widget_meta ul { /* Styles for meta widget lists */ }
.widget_meta ul li { /* Styles for list items in meta widgets */ }
.widget_meta ul li a { /* Styles for links in meta widget lists */ } .widget_links { /* Styles for link widgets */ }
.widget_links ul { /* Styles for link widget lists */ }
.widget_links ul li { /* Styles for list items in link widgets */ }
.widget_links ul li a { /* Styles for links in link widget lists */ } .widget_archive { /* Styles for archive widgets */ }
.widget_archive ul { /* Styles for archive widget lists */ }
.widget_archive ul li { /* Styles for list items in archive widgets */ }
.widget_archive ul li a { /* Styles for links in archive widget lists */ }
.widget_archive select { /* Styles for archive dropdowns */ }
.widget_archive option { /* Styles for options in archive dropdowns */ } .widget_pages { /* Styles for page widgets */ }
.widget_pages ul { /* Styles for page widget lists */ }
.widget_pages ul li { /* Styles for list items in page widgets */ }
.widget_pages ul li a { /* Styles for links in page widget lists */ } .widget_links { /* Styles for link widgets */ }
.widget_links li:after { /* Styles for after pseudo-elements in link list items */ }
.widget_links li:before { /* Styles for before pseudo-elements in link list items */ }
.widget_tag_cloud { /* Styles for tag cloud widgets */ }
.widget_tag_cloud a { /* Styles for links in tag clouds */ }
.widget_tag_cloud a:after { /* Styles for after pseudo-elements in tag cloud links */ }
.widget_tag_cloud a:before { /* Styles for before pseudo-elements in tag cloud links */ } .widget_calendar { /* Styles for calendar widgets */ }
#calendar_wrap { /* Styles for calendar wrapper */ }
#calendar_wrap th { /* Styles for table headers in the calendar */ }
#calendar_wrap td { /* Styles for table data in the calendar */ }
#wp-calendar tr td { /* Styles for table data in WordPress calendar */ }
#wp-calendar caption { /* Styles for calendar captions */ }
#wp-calendar a { /* Styles for links in the calendar */ }
#wp-calendar #today { /* Styles for today's date in the calendar */ }
#wp-calendar #prev { /* Styles for previous navigation in the calendar */ }
#wp-calendar #next { /* Styles for next navigation in the calendar */ }
#wp-calendar #next a { /* Styles for links in next navigation */ }
#wp-calendar #prev a { /* Styles for links in previous navigation */ } .widget_categories { /* Styles for category widgets */ }
.widget_categories ul { /* Styles for category widget lists */ }
.widget_categories ul li { /* Styles for list items in category widgets */ }
.widget_categories ul ul.children { /* Styles for child category lists */ }
.widget_categories a { /* Styles for category links */ }
.widget_categories select { /* Styles for category dropdowns */ }
.widget_categories select#cat { /* Styles for specific category dropdown */ }
.widget_categories select.postform { /* Styles for post form category dropdown */ }
.widget_categories option { /* Styles for options in category dropdowns */ }
.widget_categories .level-0 { /* Styles for top-level categories */ }
.widget_categories .level-1 { /* Styles for first-level subcategories */ }
.widget_categories .level-2 { /* Styles for second-level subcategories */ }
.widget_categories .level-3 { /* Styles for third-level subcategories */ } .recentcomments { /* Styles for recent comments section */ }
#recentcomments { /* Styles for recent comments wrapper */ }
#recentcomments li { /* Styles for list items in recent comments */ }
#recentcomments li a { /* Styles for links in recent comments */ }
.widget_recent_comments { /* Styles for recent comments widgets */ } .widget_recent_entries { /* Styles for recent entries widgets */ }
.widget_recent_entries ul { /* Styles for recent entries lists */ }
.widget_recent_entries ul li { /* Styles for list items in recent entries */ }
.widget_recent_entries ul li a { /* Styles for links in recent entries */ } .textwidget { /* Styles for text widgets */ }
.widget_text { /* Styles for text widget containers */ }
.textwidget p { /* Styles for paragraphs in text widgets */ }
As WordPress transitions to block-based widget areas, you can now incorporate various blocks into your widget sections, each generating CSS classes automatically.
We will guide you on how to locate these CSS classes later in this article.
Default Classes for Comment Forms
Comments serve as the engagement center for numerous WordPress sites. Proper styling enhances user experience, making it cleaner and more interactive.
WordPress includes several default CSS classes to assist theme developers in styling comment sections.
/* Comment Output */ .commentlist .reply {} .commentlist .reply a {} .commentlist .alt {} .commentlist .odd {} .commentlist .even {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {} .commentlist .vcard {} .commentlist .vcard cite.fn {} .commentlist .vcard span.says {} .commentlist .vcard img.photo {} .commentlist .vcard img.avatar {} .commentlist .vcard cite.fn a.url {} .commentlist .comment-meta {} .commentlist .comment-meta a {} .commentlist .commentmetadata {} .commentlist .commentmetadata a {} .commentlist .parent {} .commentlist .comment {} .commentlist .children {} .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author-admin {} .commentlist {} .commentlist li {} .commentlist li p {} .commentlist li ul {} .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.depth-{id} {} .commentlist li ul.children li.bypostauthor {} .commentlist li ul.children li.comment-author-admin {} #cancel-comment-reply {} #cancel-comment-reply a {} /* Comment Form */ #respond {} #reply-title {} #cancel-comment-reply-link {} #commentform {} #author {} #email {} #url {} #comment {} #submit {} .comment-notes {} .required {} .comment-form-author {} .comment-form-email {} .comment-form-url {} .comment-form-comment {} .form-allowed-tags {} .form-submit {}For further information, check out our guide on styling comments in WordPress.
Identifying WordPress Block Classes
The WordPress block editor automatically creates CSS classes for each block.
To locate these CSS classes, first add a specific block to your post or page. Then, click the ‘Preview’ button to see the block in action.
In the preview tab, hover over the block you added and right-click to choose the Inspect tool.
In the developer console, you will find the HTML generated by the block along with the associated CSS classes.
In the image above, we are examining the CSS classes for the Gallery block. You can use these classes to customize the gallery block in your WordPress theme.
Adding Custom CSS Classes in WordPress
While the default WordPress CSS classes are quite extensive, they mainly serve to provide theme developers with a consistent framework.
For your website, you may need to introduce custom CSS in areas where the default classes fall short.
Additionally, you might want to implement minor adjustments to a specific post or page without altering your entire theme.
Fortunately, WordPress offers several straightforward methods to add CSS classes to various sections. Here are some options:
Adding Custom CSS Classes to a Block in the Block Editor
To quickly assign a custom CSS class to a specific post or page, the simplest approach is to use the block editor.
Just edit the post or page and select the block where you want to add a custom CSS class. In the block settings, click on the ‘Advanced’ panel and enter the name of your CSS class.
Remember to save your changes by clicking the ‘Update’ button.
You can now utilize this class to implement custom CSS code that will specifically target this block in the selected post or page.
Custom CSS in WordPress Navigation Menus
You can also apply custom CSS to your WordPress navigation menu items. For instance, if you want to style a menu item as a button, this method is very useful.
Simply navigate to the Appearance » Menus section and click on the ‘Screen Options’ button located in the top right corner of the screen.
From here, check the box next to the ‘CSS Classes’ option.
Next, scroll down and expand the menu item where you wish to add the custom CSS class.
Look for the field labeled ‘CSS classes’ and enter your custom CSS class here.
Remember to click the ‘Save Menu’ button to apply your changes.
You can now apply this custom CSS class to style that specific menu item uniquely.
Bonus: Effortlessly Create a WordPress Theme Without Writing CSS Code
Mastering custom CSS to style your WordPress theme is a valuable skill, but some users prefer a way to design their WordPress theme without any coding.
For this purpose, you’ll need SeedProd, the top WordPress page builder tool that allows you to create custom themes without coding.
SeedProd offers a selection of pre-designed themes that you can use as a foundation.
Alternatively, you can build a theme from the ground up if you prefer.
Once you’ve selected a template, you’re ready to customize your theme using an easy-to-use drag-and-drop editor.
Simply drag and drop blocks into your design to create your own layouts.
You can also modify any element with a straightforward point-and-click method. Additionally, you can personalize colors, backgrounds, fonts, and more.
For further information, check out our detailed tutorial on how to create a custom WordPress theme without writing any code.
We trust this article has provided you with the essential WordPress CSS cheat sheet. Additionally, you may find our guides on minifying CSS and JavaScript files in WordPress, as well as removing unused CSS in WordPress, helpful.
If you enjoyed this article, consider subscribing to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
