Codex tools: Log in
Languages: English • 日本語 • (Add your language)
Contents |
Themes have a template tag for the body tag which will help theme authors to style more effectively with CSS. The Template Tag is called body_class. This function gives the body element different classes and can be added, typically, in the header.php's HTML body tag.
<body <?php body_class($class); ?>>
The variable $class, which is optional, can be either an array of class names or a string with space-separated classes names.
The class or classes passed as this functions are echoed back, along with a number of Wordpress-generated classes (that depend on the current page and other factors).
The echoed class attribute may include one or more of the following values for the class attribute, dependent upon the pageview.
The optional argument $class may contain one or more classes to add to the class list.
The body_class CSS classes appear based upon the pageview Conditional Tags as follows.
Front Page
If using Reading Settings for typical chronological blog post displays, the class selectors are blog home [ paged paged-n ].
If using Reading Settings for static front page displays, the class selectors are home page page-id-ID [*].
If using a post as the static front page, the class selectors are blog [ paged paged-n ]
Single Post
Single post template files and pageviews feature the class selectors: single postid-ID [ paged paged-n single-paged-n]
Page
Page template files and pageviews feature the class selectors: page page-id-ID [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
If Page is a parent Page: page page-id-ID page-parent [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
If Page is a child Page: page page-id-ID page-child parent-pageid-parent-ID [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
Author
Author template files and pageviews feature the class selectors: archive author author-user_nicename [ paged paged-n author-paged-n ]
Category
Category template files and pageviews feature the class selectors: archive category category-slug [ paged paged-n category-paged-n ]
Tags
Tag template files and pageviews feature the class selectors: archive tag tag-slug [ paged paged-n tag-paged-n ]
Archives
Archive pageviews and pageviews feature CSS classes: archive author author-user_nicename [ paged paged-n author-paged-n ]
Archives by date feature class selectors: archive date [ paged paged-n date-paged-n ]
Search
Search template files and pageviews feature the class selectors: search search-results [ paged paged-n search-paged-n ] for find results and search search-no-results [ paged paged-n search-paged-n ] for no results found.
Attachment
Attachment template files and pageviews feature the class selectors: attachment single postid-ID attachmentid-postID attachment-mime-type
404 Page Error
404 Page Errors template files and pageviews feature the class selectors: error404
Logged-in
Login template files and pageviews feature the class selectors: logged-in
Paged/Multiple Pages
Paged, pageviews with multiple pages, template files and pageviews feature the class selectors: paged. If less than two pages paged, and if more than 2 pages paged-n page-paged-n.
Text Direction
Pages and posts with text direction, such as right-to-left, template files and pageviews feature the class selectors: rtl
Custom Background
If using Custom Background to display the site background image or color the class selectors: custom-background
How to pass parameters to tags with PHP function-style parameters
The following example shows how to implement the body_class template tag into a theme.
<body <?php body_class(); ?>>
The actual HTML output might resemble something like this (the About page from a default WordPress installation):
<body class="page page-id-2 page-template page-template-default logged-in">
In the WordPress Theme stylesheet, add the appropriate styles, such as:
.page {
/* styles for all posts within the page class */
}
.page-id-2 {
/* styles for only page ID number 2 */
}
.logged-in {
/* styles for all pageviews when the user is logged in */
The classes are restricted to the defaults listed.
To add more classes, the template tag's parameter can be added. For example, to add a unique class to any template file:
<body <?php body_class('class-name'); ?>>
The results would be:
<body class="class-name post post-id-24">
You can add additional body classes by filtering the body_class function.
To add the following to the WordPress Theme functions.php file, changing my_class_names and class-name to meet your needs:
// Add specific CSS class by filter
add_filter('body_class','my_class_names');
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'class-name';
// return the $classes array
return $classes;
}
To add a category class to single post pageviews and template files, add the following to the functions.php.
// add category nicenames in body and 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');
add_filter('body_class', 'category_id_class');
You can add additional body classes by filtering the body_class function, but what if you want to add a class only when the sidebar.php file is being shown? Here's a working example you can post in your themes functions.php file to add a sidebar class to the output of body_class. From: Add CSS Class to body when Sidebar is Present
add_action('wp_head', create_function("",'ob_start();') );
add_action('get_sidebar', 'my_sidebar_class');
add_action('wp_footer', 'my_sidebar_class_replace');
function my_sidebar_class($name=''){
static $class="withsidebar";
if(!empty($name))$class.=" sidebar-{$name}";
my_sidebar_class_replace($class);
}
function my_sidebar_class_replace($c=''){
static $class='';
if(!empty($c)) $class=$c;
else {
echo str_replace('<body class="','<body class="'.$class.' ',ob_get_clean());
ob_start();
}
}
body_class() is located in wp-includes/post-template.php.
body_class(), next_image_link(), next_post_link(), next_posts_link(), post_class(), post_password_required(), posts_nav_link(), previous_image_link(), previous_post_link(), previous_posts_link(), single_post_title, sticky_class(), the_category(), the_category_rss(), the_content(), the_content_rss(), the_excerpt(), the_excerpt_rss(), the_ID(), the_meta(), the_shortlink(), the_tags(), the_title(), the_title_attribute(), the_title_rss(), wp_link_pages()
