Default WordPress Generated CSS Cheat Sheet for Beginners

Default WordPress themes can be a lifesaver, a way to learn, a way to make sure a theme you’re releasing has all the elements included, elements that allow the theme to be further stylized. Therefore, using a few CSS sheet theme cheats can be the way to go if you want to quickly add different default styling to your theme.

We’ll cover the cheat codes separately, for each class.

Default Body styles:

CSS targeting in order to customize your WP website is a lifesaver, as it can manage a lot of detailed, finely grained, specific elements via new classes. What a class is, in terms of how it’s coded, is a tag that specifies different relative and non-relative parameters for the displaying of visual elements. The Default body styling for instance is expressed as:

.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 an example, if you’d like to use a paged category, you’d have to add this class in the file (category-paged) and have this as an option available.

Post File defaults

The post file defaults are categories that target class elements, basically in a similar way as body elements. Both of them are dynamic and can be used or not.

Here’s a couple of the most widely used:

.post-id {}

.post {}

.page {}

.attachment {}

.sticky {}

.hentry {}

.category-misc {}

.category-example {}

.tag-news {}

.tag-wordpress {}

.tag-markup {}

In order to attach dynamic classes to a post, WP uses the post_class() function to select the format of the post itself. The format is a two parameter sequence – the format and the type, where the type can be an image type, a gallery, a page post, etc.

Here’s a few examples:

.format-image {}

.format-gallery {}

.format-chat {}

.format-link {}

Default Menu Styles

You can also define menus as classes of their own, with their own particulars of styling;

Here’s an example:

#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

Default WordPress Widget Styles

If you’re using widgets, and chances are you’re using at least a few, you might want to have a few different options for styling them. Here are a few to use:

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

A good idea is to use different classes of styles in your sheet with commas between them to save time.

Comments Form Styles

You may also want to get your comments section to a default style, as it can be quite tricky to define your own styling.  Here’s a few options:

/*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

These are some of the most useful classes you can use and the defaults can also be tweaked if you want to, though they’re pretty “welcoming” as they are. Use the ones you find the most useful for your website(s).

Code Sources: WordPress Default Stylesheet