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.
<?php body_class( $class ); ?>
The body_class may include one or more of the following values for the class attribute, dependent upon the pageview.
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
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, $class) {
// 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');
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