Wordpress

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.

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:

01 .rtl {}
02 .home {}
03 .blog {}
04 .archive {}
05 .date {}
06 .search {}
07 .paged {}
08 .attachment {}
09 .error404 {}
10 .single postid-(id) {}
11 .attachmentid-(id) {}
12 .attachment-(mime-type) {}
13 .author {}
14 .author-(user_nicename) {}
15 .category {}
16 .category-(slug) {}
17 .tag {}
18 .tag-(slug) {}
19 .page-parent {}
20 .page-child parent-pageid-(id) {}
21 .page-template page-template-(template file name) {}
22 .search-results {}
23 .search-no-results {}
24 .logged-in {}
25 .paged-(page number) {}
26 .single-paged-(page number) {}
27 .page-paged-(page number) {}
28 .category-paged-(page number) {}
29 .tag-paged-(page number) {}
30 .date-paged-(page number) {}
31 .author-paged-(page number) {}
32 .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:

01 .post-id {}
02 .post {}
03 .page {}
04 .attachment {}
05 .sticky {}
06 .hentry {}
07 .category-misc {}
08 .category-example {}
09 .tag-news {}
10 .tag-wordpress {}
11 .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.

1 .format-image {}
2 .format-gallery {}
3 .format-chat {}
4 .format-link {}
5 .format-quote {}
6 .format-status {}
7 .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”.

01 #header .main-menu{} // container class
02 #header .main-menu ul {} // container class first unordered list
03 #header .main-menu ul ul {} //unordered list within an unordered list
04 #header .main-menu li {} // each navigation item
05 #header .main-menu li a {} // each navigation item anchor
06 #header .main-menu li ul {} // unordered list if there is drop down items
07 #header .main-menu li li {} // each drop down navigation item
08 #header .main-menu li li a {} // each drap down navigation item anchor
09
10 .current_page_item{} // Class for Current Page
11 .current-cat{} // Class for Current Category
12 .current-menu-item{} // Class for any other current Menu Item
13 .menu-item-type-taxonomy{} // Class for a Category
14 .menu-item-type-post_type{} // Class for Pages
15 .menu-item-type-custom{} // Class for any custom item that you added
16 .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:

01 .entry-content img {}
02 .alignleft, img.alignleft {}
03 .alignright, img.alignright {}
04 .aligncenter, img.aligncenter {}
05 .alignnone, img.alignnone {}
06
07 .wp-caption {}
08 .wp-caption img {}
09 .wp-caption p.wp-caption-text {}
10
11 .wp-smiley {}
12
13 blockquote.left {}
14 blockquote.right {}
15
16 .gallery dl {}
17 .gallery dt {}
18 .gallery dd {}
19 .gallery dl a {}
20 .gallery dl img {}
21 .gallery-caption {}
22
23 .size-full {}
24 .size-large {}
25 .size-medium {}
26 .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.

01 .widget {}
02
03 #searchform {}
04 .widget_search {}
05 .screen-reader-text {}
06
07 .widget_meta {}
08 .widget_meta ul {}
09 .widget_meta ul li {}
10 .widget_meta ul li a {}
11
12 .widget_links {}
13 .widget_links ul {}
14 .widget_links ul li {}
15 .widget_links ul li a {}
16
17 .widget_archive {}
18 .widget_archive ul {}
19 .widget_archive ul li {}
20 .widget_archive ul li a {}
21 .widget_archive select {}
22 .widget_archive option {}
23
24 .widget_pages {}
25 .widget_pages ul {}
26 .widget_pages ul li {}
27 .widget_pages ul li a {}
28
29 .widget_links {}
30 .widget_links li:after {}
31 .widget_links li:before {}
32 .widget_tag_cloud {}
33 .widget_tag_cloud a {}
34 .widget_tag_cloud a:after {}
35 .widget_tag_cloud a:before {}
36
37 .widget_calendar {}
38 #calendar_wrap {}
39 #calendar_wrap th {}
40 #calendar_wrap td {}
41 #wp-calendar tr td {}
42 #wp-calendar caption {}
43 #wp-calendar a {}
44 #wp-calendar #today {}
45 #wp-calendar #prev {}
46 #wp-calendar #next {}
47 #wp-calendar #next a {}
48 #wp-calendar #prev a {}
49
50 .widget_categories {}
51 .widget_categories ul {}
52 .widget_categories ul li {}
53 .widget_categories ul ul.children {}
54 .widget_categories a {}
55 .widget_categories select{}
56 .widget_categories select#cat {}
57 .widget_categories select.postform {}
58 .widget_categories option {}
59 .widget_categories .level-0 {}
60 .widget_categories .level-1 {}
61 .widget_categories .level-2 {}
62 .widget_categories .level-3 {}
63
64 .recentcomments {}
65 #recentcomments {}
66 #recentcomments li {}
67 #recentcomments li a {}
68 .widget_recent_comments {}
69
70 .widget_recent_entries {}
71 .widget_recent_entries ul {}
72 .widget_recent_entries ul li {}
73 .widget_recent_entries ul li a {}
74
75 .textwidget {}
76 .widget_text {}
77 .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:

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

01 .commentlist .reply {}
02 .commentlist .reply a {}
03
04 .commentlist .alt {}
05 .commentlist .odd {}
06 .commentlist .even {}
07 .commentlist .thread-alt {}
08 .commentlist .thread-odd {}
09 .commentlist .thread-even {}
10 .commentlist li ul.children .alt {}
11 .commentlist li ul.children .odd {}
12 .commentlist li ul.children .even {}
13
14 .commentlist .vcard {}
15 .commentlist .vcard cite.fn {}
16 .commentlist .vcard span.says {}
17 .commentlist .vcard img.photo {}
18 .commentlist .vcard img.avatar {}
19 .commentlist .vcard cite.fn a.url {}
20
21 .commentlist .comment-meta {}
22 .commentlist .comment-meta a {}
23 .commentlist .commentmetadata {}
24 .commentlist .commentmetadata a {}
25
26 .commentlist .parent {}
27 .commentlist .comment {}
28 .commentlist .children {}
29 .commentlist .pingback {}
30 .commentlist .bypostauthor {}
31 .commentlist .comment-author {}
32 .commentlist .comment-author-admin {}
33
34 .commentlist {}
35 .commentlist li {}
36 .commentlist li p {}
37 .commentlist li ul {}
38 .commentlist li ul.children li {}
39 .commentlist li ul.children li.alt {}
40 .commentlist li ul.children li.byuser {}
41 .commentlist li ul.children li.comment {}
42 .commentlist li ul.children li.depth-{id} {}
43 .commentlist li ul.children li.bypostauthor {}
44 .commentlist li ul.children li.comment-author-admin {}
45
46 #cancel-comment-reply {}
47 #cancel-comment-reply a {}

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s