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:
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
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:
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3 4 5 6 7 8 9 10 11
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.
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3 4 5 6 7
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”.
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
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:
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
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.
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
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:
Tables can't be imported directly. Please insert an image of your table which can be found here.
1
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.
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
Since this is only a cheatsheet there are still many other classes and id’s we may not have covered.