Builder CSS: Adding Additional Classes

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Created page with " In Builder (and in many other themes) by default the body class of a single post page does not contain the categories under which the post has been categorized. <br /> [[Im...")
 
(For Categories)
 
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
 +
=For Categories=
  
In Builder (and in many other themes) by default the body class of a single post page does not contain the categories under which the post has been categorized.
+
In Builder (and in many other themes), the body class of a single post page does not contain the categories under which the post has been categorized.
  
 
<br />
 
<br />
Line 8: Line 9:
 
<br />
 
<br />
  
If you would like to apply a specific background to all single post pages that belong to say, "Recipes" category then by using the following code "recipes" will be one of the classes that gets applied to body class. Therefore we can target any element on a single post page belonging to "Recipes" category by prepending the CSS selector with "body.recipes".
+
For example, if you would like to apply a specific background to all single post pages that belong to a "Recipes" category, then by using the following code "recipes" will be one of the classes that gets applied to body class. Therefore we can target any element on a single post page belonging to "Recipes" category by prepending the CSS selector with "body.recipes".
  
Add the following before closing PHP tag in child theme's functions.php:
+
 
 +
'''Add the following before closing PHP tag in child theme's functions.php:'''
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 27: Line 29:
  
 
Note: In Builder, category/categories are present for post class by default.
 
Note: In Builder, category/categories are present for post class by default.
 +
 +
=See also=
 +
 +
* [[CSS_Introduction|CSS Introduction]]
 +
* [[Builder_CSS:_Tutorial_Videos| Tutorial Videos]]
 +
* [[Builder_CSS:_Basic_Structure|Basic Structure]]
 +
* [[Builder_CSS:_Viewing_Page_Source|Viewing Page Source]]
 +
* [[Builder_CSS:_Classes_and_IDs_Overview| Classes & IDs: Overview]]
 +
** [[Builder_CSS:_Adding_Additional_Classes|Adding Additional Classes]]
 +
* [[Builder_CSS:_Theme_CSS_Outline|Theme CSS Outline]]
 +
 +
<br />
 +
[[:Builder|← Back to Builder Codex Home]]

Latest revision as of 10:26, July 30, 2013

For Categories

In Builder (and in many other themes), the body class of a single post page does not contain the categories under which the post has been categorized.


Category-body-class.png


For example, if you would like to apply a specific background to all single post pages that belong to a "Recipes" category, then by using the following code "recipes" will be one of the classes that gets applied to body class. Therefore we can target any element on a single post page belonging to "Recipes" category by prepending the CSS selector with "body.recipes".


Add the following before closing PHP tag in child theme's functions.php:

// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}

add_filter('body_class', 'category_id_class');

Source: http://codex.wordpress.org/Function_Reference/body_class#Adding_More_Classes

Note: In Builder, category/categories are present for post class by default.

See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox