Building a site on WordPress is a unique experience. On one hand, you get a ton of functionality right off the gate. On the other, WordPress often expects you to use certain structures when displaying content to take advantage of that functionality.
Some of those structures WordPress are used automatically, no matter how you've built your design (e.g. all menus are
Styling Widgets
.widget {} /* top level class for every widget */
.widget-title {} /* usually on the inner header element */
Then, based on the widget type, any of these classes can be used:
/* Archives */
.widget_archive {} /* used next to .widget (on the same tag) */
/* Calendar */
.widget_calendar {} /* used next to .widget (on the same tag) */
#calendar_wrap {} /* on <div> wrapping the calendar */
#wp-calendar {} /* on <table> building the calendar */
/* Categories */
.widget_categories {} /* used next to .widget (on the same tag) */
.cat-item {} /* on each item in the <ul> list */
/* Custom Menu */
.widget_nav_menu {} /* used next to .widget (on the same tag) */
.menu-item {}
/* Meta */
.widget_meta {} /* used next to .widget (on the same tag) */
/* Pages */
.widget_pages {} /* used next to .widget (on the same tag) */
.page_item {}
/* Recent Comments */
.widget_recent_comments {} /* used next to .widget (on the same tag) */
.recentcomments {} /* on each item in the <ul> list */
/* Recent Posts */
.widget_recent_entries {} /* used next to .widget (on the same tag) */
/* RSS */
.widget_rss {} /* used next to .widget (on the same tag) */
.rsswidget {} /* on each RSS link */
/* Search */
.widget_search {} /* used next to .widget (on the same tag) */
.search-form {} /* used with the actual <form> element */
/* Tag Cloud */
.widget_tag_cloud {} /* used next to .widget (on the same tag) */
.tagcloud {} /* on the <div> wrapping the cloud */
/* Text */
.widget_text {} /* used next to .widget (on the same tag) */
.textwidget {} /* on the actual text content of the widget */
Styling the <body>
.home {} /* if it's the homepage */
.page {} /* if it's any page */
.postid-XX {} /* if it's a post - XX is the post's ID */
.rtl {} /* when dealing with right-to-left content */
.blog {} /* if it's the custom blog listing */
.archive {} /* if it's any sort of archive page */
.category {} /* if it's a categories listing page */
.tag {} /* if it's a tags listing page */
.search search-results {} /* if it's a search results page */
.author {} /* if it's an authors page */
.author-XX {} /* if it's an individual author's archive - XX is the author's nickname */
.date {} /* if it's a date-based archives page */
.error404 {} /* if it's a 404 page */
Styling post and pages
.post-XX {} /* the ID of the element being displayed; used for both the posts and the pages */
.post {} /* if it's a post */
.page {} /* if it's a page */
.attachment {} /* if it's an attachment; on most sites this is not used */
.sticky {} /* if it's a sticky post */
.format-YY {} /* assigned to custom content types - YY is the name of the content type, e.g. "audio" */
Styling content
/* the main classes used for alignment */
.alignnone {}
.alignleft {}
.alignright {}
.aligncenter {}
img.alignnone {}
img.alignleft {}
img.alignright {}
img.aligncenter {}
.wp-caption {} /* img caption */
.gallery {}
.gallery-caption {}
/* styles for img sizes */
img.size-full {}
img.size-large {}
img.size-medium {}
img.size-thumbnail {}
/* not classes, but surely something you should take care of */
blockquote {}
code {}
pre {}
hr {}
del {}
Always start by resetting
Starting your CSS work by resetting all the default tags is a good practice regardless of the project you're working on, and WordPress is no different here.
Some of those structures WordPress are used automatically, no matter how you've built your design (e.g. all menus are
<ul> whether you like it or not), while others are more within your control thanks to custom PHP, WordPress actions hooks and other tricks you can use. Although it's a fact that the platform doesn't impose a lot of restrictions, you still need to be mindful of the most basic traits if you want your content to be displayed properly.Styling Widgets
.widget {} /* top level class for every widget */
.widget-title {} /* usually on the inner header element */
Then, based on the widget type, any of these classes can be used:
/* Archives */
.widget_archive {} /* used next to .widget (on the same tag) */
/* Calendar */
.widget_calendar {} /* used next to .widget (on the same tag) */
#calendar_wrap {} /* on <div> wrapping the calendar */
#wp-calendar {} /* on <table> building the calendar */
/* Categories */
.widget_categories {} /* used next to .widget (on the same tag) */
.cat-item {} /* on each item in the <ul> list */
/* Custom Menu */
.widget_nav_menu {} /* used next to .widget (on the same tag) */
.menu-item {}
/* Meta */
.widget_meta {} /* used next to .widget (on the same tag) */
/* Pages */
.widget_pages {} /* used next to .widget (on the same tag) */
.page_item {}
/* Recent Comments */
.widget_recent_comments {} /* used next to .widget (on the same tag) */
.recentcomments {} /* on each item in the <ul> list */
/* Recent Posts */
.widget_recent_entries {} /* used next to .widget (on the same tag) */
/* RSS */
.widget_rss {} /* used next to .widget (on the same tag) */
.rsswidget {} /* on each RSS link */
/* Search */
.widget_search {} /* used next to .widget (on the same tag) */
.search-form {} /* used with the actual <form> element */
/* Tag Cloud */
.widget_tag_cloud {} /* used next to .widget (on the same tag) */
.tagcloud {} /* on the <div> wrapping the cloud */
/* Text */
.widget_text {} /* used next to .widget (on the same tag) */
.textwidget {} /* on the actual text content of the widget */
Styling the <body>
.home {} /* if it's the homepage */
.page {} /* if it's any page */
.postid-XX {} /* if it's a post - XX is the post's ID */
.rtl {} /* when dealing with right-to-left content */
.blog {} /* if it's the custom blog listing */
.archive {} /* if it's any sort of archive page */
.category {} /* if it's a categories listing page */
.tag {} /* if it's a tags listing page */
.search search-results {} /* if it's a search results page */
.author {} /* if it's an authors page */
.author-XX {} /* if it's an individual author's archive - XX is the author's nickname */
.date {} /* if it's a date-based archives page */
.error404 {} /* if it's a 404 page */
Styling post and pages
.post-XX {} /* the ID of the element being displayed; used for both the posts and the pages */
.post {} /* if it's a post */
.page {} /* if it's a page */
.attachment {} /* if it's an attachment; on most sites this is not used */
.sticky {} /* if it's a sticky post */
.format-YY {} /* assigned to custom content types - YY is the name of the content type, e.g. "audio" */
Styling content
/* the main classes used for alignment */
.alignnone {}
.alignleft {}
.alignright {}
.aligncenter {}
img.alignnone {}
img.alignleft {}
img.alignright {}
img.aligncenter {}
.wp-caption {} /* img caption */
.gallery {}
.gallery-caption {}
/* styles for img sizes */
img.size-full {}
img.size-large {}
img.size-medium {}
img.size-thumbnail {}
/* not classes, but surely something you should take care of */
blockquote {}
code {}
pre {}
hr {}
del {}
Always start by resetting
Starting your CSS work by resetting all the default tags is a good practice regardless of the project you're working on, and WordPress is no different here.
