WordPress Default CSS Styles (Part 1 of 2)
Web Design WordPressPublished June 2, 2010 at 11:00 am No CommentsWordPress gives us full control over the presentation of our websites. We specify which classes and attributes to use in our template files, and then apply CSS using our theme’s custom stylesheet. Behind the scenes, WordPress generates its own classes and IDs, and applies them to specific HTML elements in theme files and database content. Having these default hooks available makes it super-easy to custom-style your theme’s blockquotes, post images, widget items, and much more.
In addition to generating default classes for your site’s “front-end” (public-facing) pages, WordPress also employs a default set of CSS attributes for the Admin, or “back-end” pages. If you’ve ever delved into the convoluted CSS stylings of the WordPress Admin, you will understand why we focus exclusively on front-end attributes in this article. The goal is to include all classes and IDs generated for database content, theme template files, and default widget items.
Fortunately, most (if not all) of your WP CSS work happens at the “theme” or “post” level. And when you do need to style the Admin, it’s usually easiest to just do it en bloc via plugin. You can also do it the old-fashioned way.
Different Types of Default WordPress Styles
In this post, we assemble and dissect as many of the default front-end WordPress CSS attributes that we could find. It turns out there are many more automatically generated classes and IDs than you probably realize, including those for more commonly styled elements such as the following:
- Images included via WordPress’ WYSIWYG Post Editor
- Image captions and galleries included via the WYSIWYG Post Editor
- The body_class() and post_class() template tags
- WordPress’ automatic “smilies”
- WordPress’ default widgets
Some of these features are used quite frequently, while others not so much. It’s a good idea to cover your bases for these items, especially when producing publicly available themes. By including some basic styles for key CSS attributes, you ensure a more complete and rewarding experience for your theme’s users (and their users as well).
Fortunately, not all of WordPress’ default CSS attributes require explicit styling. Many default classes and IDs are generated and included as a matter of convenience. Conversely, there some core styles that are essential for public themes. So to organize things, we have two somewhat arbitrary types of default attributes, “essential” or “optional” – and here they are now:
Essential WordPress Styles
These are default WordPress attributes that should be styled with CSS:
- Default styles applied by WordPress’ WYSIWYG editor
- Default styles generated by WordPress’ default widgets
- Comment styles – threaded comments, specific comment styles, et al.
- Miscellaneous WordPress styles
Optional WordPress Styles
These are default WordPress attributes that should be styled only when needed:
- WordPress Page Listings
- CSS attributes generated by body_class()
- CSS attributes generated by post_class()
- Miscellaneous WordPress styles
For each of these sections, we’ll review the associated functionality and then present the default CSS styles generated and output by WordPress. It is ultimately up to you to decide the best approach for dealing with these default styles. If nothing else, it is wise to provide styles for WordPress’ WYSIWYG Editor items and perhaps widgets, if enabled. This is functionality that users typically employ while working with their site.
For all of these CSS attributes, we are merely presenting the selectors devoid of any preset styles. Only the styles for the WYSIWYG Editor are included, mostly because they are styled according to the WordPress Codex. Everything else is entirely up to you.
WordPress CSS – WYSIWYG Editor Styles
When you are working with WordPress’ WYSIWYG Editor in the Edit Post screen, WordPress applies context-specific CSS attributes to certain elements when they are included in your post. For example, when inserting images, you can specify whether the images are floated left, right, or even centered. To do this, WordPress applies classes such as alignleft, alignright, or aligncenter. Without defining styles for WordPress’ default hooks, images and other elements may not display as intended.
Thus, at a bare minimum, if you are building a theme that will be used by the general public, it is wise to include the following basic styles for the items attributed via the WYSIWYG Editor:
/* == WordPress WYSIWYG Editor Styles == */
.entry-content img {
margin: 0 0 1.5em 0;
}
.alignleft, img.alignleft {
margin-right: 1.5em;
display: inline;
float: left;
}
.alignright, img.alignright {
margin-left: 1.5em;
display: inline;
float: right;
}
.aligncenter, img.aligncenter {
margin-right: auto;
margin-left: auto;
display: block;
clear: both;
}
.alignnone, img.alignnone {
/* not sure about this one */
}
.wp-caption {
margin-bottom: 1.5em;
text-align: center;
padding-top: 5px;
}
.wp-caption img {
border: 0 none;
padding: 0;
margin: 0;
}
.wp-caption p.wp-caption-text {
line-height: 1.5;
font-size: 10px;
margin: 0;
}
.wp-smiley {
margin: 0 !important;
max-height: 1em;
}
blockquote.left {
margin-right: 20px;
text-align: right;
margin-left: 0;
width: 33%;
float: left;
}
blockquote.right {
margin-left: 20px;
text-align: left;
margin-right: 0;
width: 33%;
float: right;
}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}
.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}
Lots of good stuff there, but no predefined styles for some of the Gallery items, such as .gallery dl and .size-thumbnail, as seen near the end of the list. Also, if you are using reset styles for margins and padding, you can strip out quite a few rules from this default set.
Quick Tip: an easy way to ensure that everything is looking great is to simply create a test post in which you include each of the WYSIWYG items. Then include this set of default styles and fine-tune as desired.
As with most everything else WordPress-related, for more information on these default WordPress styles, check out the Codex. The default selectors above basically define CSS styles for images, captions, galleries, blockquotes, and smilies &ndash: in other words, all of the items that you can include using WordPress’ built-in WYSIWYG Editor.
WordPress CSS – Miscellaneous Styles
After styling the essentials, you may also want to keep an eye out for these miscellaneous WordPress classes:
/* == WordPress CSS – Miscellaneous Styles == */
/* category links */
li.categories {}
li.cat-item {}
li.cat-item-{id} {}
li.current-cat {}
li.current-cat-parent {}
ul.children {}
/* blogroll links */
.linkcat {}
.blogroll {}
/* read-more links */
.more-link {}
Not all of them are going to be used in every theme, but they are used quite commonly, especially the .read-more class, which is frequently used for archive, category and tag pages. It may be wise to anticipate their presence to ensure that nothing is going to break your theme’s design. Also, for more information on the category-links template tag, visit the WP Codex: wp_list_categories.
WordPress CSS – Page Listings
If you are using WordPress’ built-in page-listing functionality provided by the wp_list_pages() and wp_page_menu() template tags, there are a variety of items that should be styled. These may look like a lot of work, but once you get the pattern down, it goes pretty quickly. Hopefully the following list will prove a useful reference during your next page-list styling session:
/* == WordPressP CSS – Page Listings == */
.pagenav {} /* outermost list item */
.page_item {} /* any page item */
.page-item-{id} {} /* specific page id */
.current_page_item {} /* current page */
.current_page_parent {} /* parent of current page */
.current_page_ancestor {} /* any ancestor of current page */
.pagenav ul,
.pagenav .current_page_item ul,
.pagenav .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {}
.pagenav ul ul,
.pagenav .current_page_item ul ul,
.pagenav .current_page_ancestor ul ul,
.pagenav .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor ul ul {}
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul ul {}
Again, the easiest way to understand this spaghetti is to create a list by including wp_list_pages() in a theme template file, and define a big red border (or whatever) for each declaration block. Check the results and you should quickly recognize the pattern. For more information on the template tags used to generate these rules, go to Codex:
Stay tuned for the second part of WordPress Dafault CSS Styles.
