Leveraging CSS to change your theme
Overview
- The style.css file
- Using body_class, post_class, and comment_class
- Sample child theme
Style.css
- Know the stylesheet
- Controls the presentation of your theme
- One of two required files in a WordPress theme
- The only file you need to make a WordPress child theme
WordPress class functions
- comment_class - Outputs classes to individual comments
- post_class - Outputs classes to individual posts
- body_class - Outputs classes to individual posts
Where to put them
If your theme does not have these functions built in, not to worry.
Body Class
The body tag is typically located in the header.php file of your theme.
<body <?php body_class(); ?>>
Post Class
Post class goes wherever you have posts, could be index.php, archive.php, search.php, etc.
<div <?php post_class(); ?>>
Comment Class
Comment classes are baked into the wp_list_comments function, or can be manually placed in a custom callback.
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
Comment Class
<li class="comment even thread-even depth-1 bypostauthor" id="comment-63">
Translation
- comment = Comment type
- even = Even or odd comment?
- thread-even = Even or odd thread
- depth-1 = Depth level
- bypostauthor = Pretty self explanatory
- comment-63 = Comment ID 63
Comment Class
<li class="comment even thread-even depth-1 bypostauthor" id="comment-63">
How To Target
.bypostauthor { background: #000; color: #fff; /* sets the background color to black, font color white */ }
.even { background: #ccc; /* light gray color */ }
#comment-63 { font-weight: bold; }
Classes vs. IDs
- Classes can be used multiple times
- IDs are only used once on a page
Comment Class
Sample CSS
.bypostauthor { background: #000; color: #fff; }
.even { background: #ccc; }
#comment-63 { font-weight: bold; }
Sample
First comment is even
Comment author
Third comment is even
Fourth comment is odd
Post Class
<div id="post-1" class="post-1 post type-post sticky hentry category-uncategorized">
Translation
- post-1 = Post ID number
- post = This is a post
- type-post = This is the post-post type
- sticky = This is a sticky post
- hentry = Don't worry about it
- category-uncategorized = In the uncategorized category
Post Class
<div id="post-1" class="post-1 post type-post sticky hentry category-uncategorized">
Example
Styling the "sticky" post to have an icon added to it.
.sticky { background-image: url('images/yield.png'); }
Source: WooThemes Ultimate Icon Set
Body Class
<body class="archive category category-wizards">
Translation
- archive = On an archive page
- category = More specifically, a category archive
- category-wizards = Category slug is "wizards"
Body Class
<body class="archive category category-wizards">
Example
Styling the Wizards category archive with a custom background, as well as altered navigation menu colors.
Body Class
<body class="archive category category-wizards">
Example
Styling the Wizards category archive with a custom background, as well as altered navigation menu colors.
body.category-wizards { background-image: url('images/wizards-logo.png'); background-repeat: no-repeat; }
.category-wizards #access { background: #005183; } /* Navigation Menu Background */
.category-wizards #branding img { border-bottom:1px solid #005183; border-top:4px solid #005183; /* Sets the border colors of the header image */ }
- You must sepcify
category-wizards class for the body only.
- The same class is used in the post class on category archives.
Applying the Changes
Two Options
- Add it to existing theme's style.css
- Create a child theme
Sample Child Theme Structure
- /wp-content/themes/twentyten/
- /wp-content/themes/your-child-theme/
- /wp-content/themes/your-child-theme/style.css
/*
Theme Name: Sample Child Theme
Theme URL: http://www.example.com
Description: This is a sample for my WordPress DC presentation.
Author: Leland Fiegel
Author URI: http://leland.info
Version: 1.0
Template: twentyten
*/
@import url("../twentyten/style.css");
/* Changes Go Here */
Further Resources
- http://www.w3schools.com/css/
- http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/
- http://codex.wordpress.org/Function_Reference/body_class
- http://codex.wordpress.org/Function_Reference/post_class
- http://codex.wordpress.org/Function_Reference/comment_class
- http://codex.wordpress.org/Child_Themes
- http://getfirebug.com/
- http://www.themelab.com/2010/03/02/highlight-author-comments-in-wordpress/