Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

Default WordPress Generated CSS Cheat Sheet for Beginners

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
Default WordPress Generated CSS Cheat Sheet for Beginners

Have you ever wondered how you could style different elements of the WordPress theme? Well it varies from theme to theme, but there are certain CSS classes and IDs that are generated by WordPress. If you are someone who is trying to style a theme, or looking to create a theme for public release, then these are some style elements that you might want to consider adding in your theme.

The goal of this cheat sheet is to assist beginners who are looking to get into WordPress theme styling. If you are a beginner who does not want to deal with the codes, then we recommend that you get a theme framework like Headway which does the whole thing for you with drag and drop. For the rest of you, we are going to go through some of the most important default WordPress styles one by one.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

Default Body Class Styles

One of the great things about WordPress is its customizability. It allows you to target very specific aspects of your site with CSS. One of the ways it does this is by adding custom classes to various elements of your blog. The most important of these is the <body> tag. Here are some examples of common classes that WordPress might add to this element:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

If, for example, you would like to style your search results page in a specific way you can use the “search-results” class to add your styling. WordPress only adds this class to the body tag when the search results page is active so it doesn’t affect any other pages.

Default Post Styles

Just like with the body element WordPress adds dynamic classes to the post elements as well. Here is a list of some of the most popular ones:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

If you have read our article What, Whys, and How to’s of Post Formats in WordPress 3.1 then you about post formats and how you can display your posts differently according to the format you choose. Once again, WordPress adds dynamic classes to your post using the post_class () function that will allow you to create your own styles for each format. The post_class () function will add a class in the form of “.format-foo” where foo is whatever post format you have chosen ie. gallery, image, etc.

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Default Menu Styles

In our article called how to style WordPress navigation menus we discuss how you can go about adding your own class to your menu. We are going to assume you have read it and that you gave your nav menu its own class name of “main-menu”.

#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

Notice that whenever you create a menu in WordPress it is automatically wrapped in a div. This div only has a class name if you specify it (we chose “main-menu”). From there you are just styling the various list elements.

Default WISIWYG Editor Styles

The WISWYG editor is one of the most popular and most used aspects of WordPress. For this reason it is a good idea to have styles ready for anything that the user might add to their blog, like images or blockquotes. The following CSS shows you what classes WordPress automatically adds to these elements:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

You can see that there are several class pertaining just to images. If, for example, the user decides to include a left-aligned image then WordPress will add the “alignleft” class.

Default WordPress Widget Styles

Widgets are another popular aspect of WordPress. As the developer you have control over which widgets are going to be displayed so you will usually know exactly which styles to add. WordPress comes with a handful of default widgets, however, and unless you remove them it is wise to add styling to their classes.

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {} 
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

When styling widgets you will probably end up using the same styles over and over again. For this reason it is a good idea to combine classes on your style sheet using commas. For example, you could combine .widget_pages ul and .widget_archive ul by doing something like this:

.widget_pages ul, .widget_archive ul {}

Default Comment Form Styles

As ugly as styling comments can get WordPress makes it a lot easier with its default classes. If you are not dealing with threaded comments, however, it is possible to ignore many of them.

/*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 {}
.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-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.form-allowed-tags { } 

Since this is only a cheatsheet there are still many other classes and id’s we may not have covered. If you feel as though something else is important and it belongs on this list please feel free to leave a comment below.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Shai says:

    Can you (if not already elsewhere) list the admin dashboard and admin widgets classes.
    it look like the admin is using a loader (wp-admin/load-styles.php) to include it CSS but that CSS is compress and hard to read. it will be nice to see a list of the items in use. for example if you want to create your own widget with tabs ; I inspected the CSS and can see large list of the class .nav-tab related CSS.

  2. Ari Susanto says:

    and the “entry-content” itself!

  3. Ari Susanto says:

    I want to add this one:


  4. luroch says:

    A question: when creating a bootstrap theme from underscores, should I keep the classes and ids that come with this framework, just adding the Bootstrap ones, or can I use only Bootstrap classes and Ids?

  5. Ari Susanto says:

    How did you found them? Is there an automated way like using php function, may be?

  6. Stephen Clark says:

    Fantastic post and highly informative. Curious if you could append this post with similar details about the WP footer. I have been struggling with styling and formatting the footer with the theme I’m using, and with some other sites I’ve built.

    Would also be helpful to have a downloadable CSS stylesheet file containing all of these styles. Thanks!

  7. Kevin Pryce says:

    When I inspect element only my wordpress theme, I do not see these styles, especially the ones applied to the body class. Do you have to put them into the template?

  8. Joel Bladt says:

    Nice compilation of all the standard WordPress classes. Was that really all classes that are added automatically by WordPress? If classes are obsolete and disappeared, or new ones have come to this, I look forward to updating the list.

    – German Blogger and translated with Google Translator.

    • WPBeginner Support says:

      It is up to date to the best of our knowledge, if you find any class obsolete, please let us know.

  9. loreto says:

    time saver! now let me mess those styles :)

  10. Amba Junior says:

    Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well

  11. MalcolmOwen says:

    Do you know what would be useful? A printable PDF version of this guide…

  12. wpbeginner says:

    @smashingmag Thank you for retweeting our article :) really appreciate the love.

  13. favstar50 says:

    @smashingmag Congrats on your 50★ tweet!

  14. bobHankin says:

    @photoassassin No I hadn’t. That’s sweet! Handy too!

  15. eugenebicyclist says:

    Just learning to work with WP and this is really handy. Thank you.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.