WordPress Default CSS Styles (Part 2 of 2)

Web Design WordPressPublished June 9, 2010 at 8:21 am No Comments

WordPress CSS – Default WordPress Widgets

There are literally thousands of widgets available to WordPress users, but there is a handful of very common widgets that are frequently used with widgetized themes. If you are planning on widgetizing your theme, you should include some styles for some of the more popular widgets. Many of the widgets included with the retiring Kubrick theme have become very common, if not expected:

As the theme designer, you will decide which (if any) widgets to include in your theme, so you will know exactly which styles to apply. Here are the generic rules for some of the more common WordPress widgets:

/* == WordPress CSS – Default WordPress Widgets == */

.widget {}

/* links widget */

.widget_links {}

.widget_links ul {}

.widget_links ul li {}

.widget_links ul li a {}

/* meta widget */

.widget_meta {}

.widget_meta ul {}

.widget_meta ul li {}

.widget_meta ul li a {}

/* pages widget */

.widget_pages {}

.widget_pages ul {}

.widget_pages ul li {}

.widget_pages ul li a {}

/* recent-posts widget */

.widget_recent_entries {}

.widget_recent_entries ul {}

.widget_recent_entries ul li {}

.widget_recent_entries ul li a {}

/* archives widget */

.widget_archive {}

.widget_archive ul {}

.widget_archive ul li {}

.widget_archive ul li a {}

.widget_archive select {}

.widget_archive option {}

/* tag-cloud widget */

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

/* calendar widget */

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

/* category widget */

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

/* recent-comments widget */

.recentcomments {}

#recentcomments {}

#recentcomments li {}

#recentcomments li a {}

.widget_recent_comments {}

/* search widget */

#searchform {}

.widget_search {}

.screen-reader-text {}

/* text widget */

.textwidget {}

.widget_text {}

.textwidget p {}

That’s obviously a lot of work for any designer, but there are many similar elements that would probably look best with matching styles. For example, instead of multiple declarations for list elements such as .widget_archive ul li, .widget_pages ul li, and .widget_recent_entries ul li, we can simplify by combining them into a single declaration, for example:

.widget_pages ul li,
.widget_archive ul li,
.widget_recent_entries ul li {}

In other words, when it comes to styling widgets, there’s a lot of repetition that may be consolidated and streamlined in your stylesheet. As you apply styles for WordPress’ default widgets, keep an eye out for exploitable selector patterns and similar styles that may be combined to save time and effort.

WordPress CSS – Comment Styles

Styling comments is the bane of WordPress theme designers, especially when threaded/nested comments are enabled. The deeper they go, the more time you’re going to spend with them, but thankfully WordPress makes things a little easier by providing plenty of precise CSS hooks. Of course, if threaded comments are disabled, there is no need to bother with most of these classes. But when they are used, many of the following selectors should define style:

/* == WP CSS – Comment Styles == */

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

These are all of the classes and IDs that I could find, and they all seem to be pretty self-explanatory, especially after using them a few times. Even so, consider the collection a work in progress. As new information is discovered, the list will continue to improve (hypothetically speaking). Many of these selectors target markup elements generated via WordPress’ built-in wp_list_comments() template tag. Even when using a custom callback function for your comments loop, many of these CSS classes will be available for your styling convenience.

WordPress CSS – body_class()

As of version 2.5, WordPress provides the body_class() template tag, which is included in the <body> element of your theme’s markup. When included, this tag outputs a variety of context-dependent class names that facilitate styling different types of page views. Let’s look at the different classes WordPress generates for this powerful tag:

/* == WP CSS – body_class() == */

.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) {}

As you can see, these classes enable us to easily target elements on any specific type of page. For example, if you want to customize the presentation of your search results, you could define your styles using the .search-results class. This flexibility offers greater control over the granular construction of your WordPress theme. For more information on the body_class() tag, check out the WordPress Codex.

WordPress CSS – post_class()

As with body_class(), the post_class() template tag outputs a variety of context-dependent class names for your posts. The post_class() tag makes it easy to target and style specific posts and post-types, as well as posts from specific categories or tags. Here are the different class names automatically generated by post_class():

/* == WP CSS – post_class() == */

.post-id {}

.post {}

.page {}

.attachment {}

.sticky {}

.hentry {}

.category-misc {}

.category-example {}

.tag-news {}

.tag-wordpress {}

.tag-markup {}

Again, these classes seem pretty self-explanatory, but if anyone happens to know the definition of the .hentry class, it would be nice to know – I couldn’t find anything, and sadly didn’t take time to test. Basically, these classes enable you to define styles for specific types of posts, attachments, stickies, categories and tags. You can also include your own classes to post_class(), and even include current category IDs. For more information on the post_class() tag, check out the WordPress Codex.

Tags: CSS, css attributes, custom style, WordPress