WordPress Theme CSS Starter

Creating a WordPress theme can be lots of work, but the basic HTML for themes are normally quite similar. Each theme will have a way of looping through a list of posts to show the most recent posts, or to display all the posts in a category.

The HTML to display a single post inside the single.php will mainly be the same on any theme you have the header for the title, the date for the post, the main content and then the comments section.

The thing that makes each WordPress theme different is the CSS, this will decide how the theme looks and feels. Because wordpress has functions to add in CSS to your theme you need to know what these CSS classes are so you can style your theme. In this article we are going to a have a look at the CSS classes you will find inside a WordPress theme.

You should be able to take the CSS in this article and use it as a starting point for your next WordPress theme.

CSS Body Class

Because WordPress understands what page you are currently on and what job this page has to do you can use the WordPress function body_class() to automatically add CSS classes to your body tag.

<body <?php body_class(); ?>>

</body>

Add the above to your body tag and WordPress will add one of the following in the HTML.

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single postid-(id)
  • single-(post_type)
  • page-id-(page_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)
  • tax-(taxonomy name) (since 3.1)
  • term-(term name) (since 3.1)
  • admin-bar (since 3.1)
  • custom-background (since 3.3)

Add Additional CSS Classes

If you want to add any additional CSS classes to your body tag then the function body_class() takes a optional parameter where you can pass in a string of extra classes you want to use.

<body <?php body_class('class-name'); ?>>

Add CSS Class With Filters

The above code would add extra CSS classes inside the body_class() function but the problem with this is that you will need to add this code inside the theme.

You can actually add classes to the body_class() by using WordPress filters, by using the willing code.

/** Add custom body class to the head */
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
   $classes[] = 'custom-class';
   return $classes;
}

Source: http://www.paulund.co.uk/add-body-class-to-your-wordpress-theme

CSS For Body Tag

This is the starting point for your boilerplate WordPress CSS file.

/******************************************************************
 *  Body CSS Classes
 ******************************************************************/
.rtl{}
.home{}
.blog{}
.archive{}
.date{}
.search{}
.paged{}
.attachment{}
.error404{}
.single postid-(id){}
.single-(post_type){}
.page-id-(page_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){}
.tax-(taxonomy name) (since 3.1){}
.term-(term name) (since 3.1){}
.admin-bar (since 3.1){}
.custom-background (since 3.3){}

Post CSS Classes

Just like the body class posts also have the same sort of function where you can add CSS classes into the post tag.

It is used in exactly the same way place it inside the loop for the posts on the main post DIV or article tag.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
					
	<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
        </article>
	
<?php endwhile; ?>

The post_class function will add one of the following classes depending on the situation of the post.

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name
  • .format-name

Style A Specific Category Differently

Using the post_class() function you can style posts which are part of a specific category differently to other posts. For example if I had a category of news and I want to style this category differently to the other by changing the background colour then I can do this simple by using the post_class().

When this function is on the post content div it prints out a CSS class of .category-news, now I can add this to the CSS stylesheet to change the colour for posts in the news category.

.category-news
{
     background:#eee;
}

The above CSS will now make all posts in the news category to have a grey background.

Add More Classes To Post Class Function

With the post_class function you can also add additional classes to it by passing in a string into the function like the following.

<article <?php post_class("class-name") ?> id="post-<?php the_ID(); ?>">
</article

Add Classes By Filter To Post Class

You can also use post filters to add CSS classes into your post_class function, use the following to add in the category name to your post classes.

// add category nicenames in the post class

function category_id_class($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->category_nicename;
        return $classes;
}

add_filter('post_class', 'category_id_class');

CSS For Post Class

/******************************************************************
 *  Post CSS Classes
 ******************************************************************/
.post-id{}
.post{}
.attachment{}
.sticky{}
.hentry (hAtom microformat pages){}
.category-ID{}
.category-name{}
.tag-name{}
.format-name{}

WordPress Menu CSS Classes

Wordpress menu
Wordpress has a built-in function which will create menu items out of the custom made menus from the WordPress dashboard. The menu will be created with a unordered list and list items for each of the menu items.

The HTML that this creates also comes with there own CSS classes and the Theme developer can use this to style the Menus in anyway they want.

When you use wp_nav_menu() function it will create the following CSS classes.

  • .menu-item
  • .menu-item-object-{object}
    • .menu-item-object-category
    • .menu-item-object-tag
    • .menu-item-object-page
    • .menu-item-object-{custom}
  • .menu-item-type-{type}
    • .menu-item-type-post_type
    • .menu-item-type-taxonomy

Current Menu Item

Wordpress is aware of the page you are currently on and if this matches a page in your menu WordPress will add a CSS class to the menu item for this page.

For example if you have a menu which displays all of the categories on your WordPress blog, if you navigate to one of these categories WordPress will add a CSS class to the current page. Now you know the current page you can use the CSS to display the current page differently to the others.

  • .current-menu-item - The current page related to the menu item.

If you have a category hierarchy with sub-categories then you might want to highlight the parent category of the one you are on. WordPress will add the following CSS classes to the parent category you have navigated to.

  • .current-menu-parent
  • .current-{object}-parent
  • .current-{type}-parent

CSS For WordPress Menus

/******************************************************************
 *  Menu CSS Classes
 ******************************************************************/
.menu-item{}
.menu-item-object-{object}{}
.menu-item-object-category{}
.menu-item-object-tag{}
.menu-item-object-page{}
.menu-item-object-{custom}{}
.menu-item-type-{type}{}
.menu-item-type-post_type{}
.menu-item-type-taxonomy{}

/******************************************************************
 *  Current menu item class
 ******************************************************************/
.current-menu-item{}

/******************************************************************
 *  Current parent classes
 ******************************************************************/
.current-menu-parent{}
.current-{object}-parent{}
.current-{type}-parent{}

/******************************************************************
 *  Current Ancestor CSS classes
 ******************************************************************/
.current-menu-ancestor{}
.current-{object}-ancestor{}
.current-{type}-ancestor{}

/******************************************************************
 *  Home page css class
 ******************************************************************/
.menu-item-home{}

/******************************************************************
 *  Static page css classes
 ******************************************************************/
.page_item{}
.page-item-$ID{}
.current_page_item{}
.current_page_parent{}
.current_page_ancestor{}

WordPress Widget CSS Classes

688px-widget-panel
WordPress widgets can be added to any sidebar on your WordPress theme, if you add a widget which uses the Widget API then WordPress will automatically add CSS Classes to your Widgets.

Use the following CSS Classes to style some of the default WordPress widgets available.

/******************************************************************
 *  WordPress Widget classes
 ******************************************************************/
.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 {}

CSS To Change WordPress Login Page

Wordpress reset password
In a previous tutorial I wrote about how you can change the style of the WordPress login page. In this article you would of seen a selection of CSS classes you can use to style the login page in whatever way you want.

Here are the CSS classes to style the WordPress login page.

/******************************************************************
 *  WordPress Login Page classes
 ******************************************************************/
body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Conclusion

The styles here are enough to use to create a basic WordPress theme of posts, menus and widgets. Of course this is not a complete list for WordPress styles as there are so many other things you can do in WordPress, such as style the admin area. If you can think of any other style lists I have missed out then please let me know so we can complete this list.

Advertise here

Comment