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 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 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.
