How to use body_class to change css according to page hierarchy


Tags: css,wordpress,themes

Problem :

Trying to set up various css rules based on my Wordpress page hierarchy, and found out that wordpress can auto-generate these rules using body_class but I have absolutely no idea how to implement it. can someone explain it to me step-by-step? (Aka, what do i need to put in the functions.php, what do i need to put in the css file)?

Basically, I want to change the header text background, depending on what the parent page is. Eg:

  • .../news, and all its subpages (...news/newsletter-signup, news/submit, etc) would be blue
  • .../community, and all its subpages (...community/resources/supermarkets, ...community/how-to/pay-utilities, etc) would be purple.
  • .../events, and all its subpages would be orange.

TIA!



Solution :

For example, we have standart page, like:

<html>
  <head>
    <!-- HEAD CONTENT -->
  </head>
  <body>
    <div class="container">
      <div class="post">
        <h1>Title of post</h1>
        <p>Text or another content of post</p>
      </div>
      <div class="post">
        <h1>Title of post</h1>
        <p>Text or another content of post</p>
      </div>
      <div class="post">
        <h1>Title of post</h1>
        <p>Text or another content of post</p>
      </div>
    </div>
  </body>
</html>

So, we can use body_class() function to customize view for different category types.

First: put body_class() function into body tag

<body <? body_class(); ?>>

Second: write classes for each category

body.home .post, body.news .post, body.blog .post {
  width: 640px;
  display: block;
  clear: both;
}

body.portfolio .post, body.work .post, body.projects .post {
  width: 200px;
  display: block;
  float: left;

}

Now all posts on the main page, in the blog and in the category of news are displayed line by line.

All publications in the portfolio section and category projects are displayed in three columns.

Example for home, news and blog:

body,
html {
  width: 100%;
  background-color: #333;
}
.container {
  margin: 10px auto;
  width: 660px;
  background-color: #ccc;
}
.post {
  background-color: #fff;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px;
  min-height: 240px;
  border: 1px solid #666;
}
body.home .post,
body.news .post,
body.blog .post {
  width: 640px;
  display: block;
  clear: both;
}
body.portfolio .post,
body.work .post,
body.projects .post {
  width: 200px;
  display: block;
  float: left;
}
<html>

<head>
  <!-- HEAD CONTENT -->
</head>

<body class="home">
  <div class="container">
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <br clear="all">
  </div>
</body>

</html>

Example for works, projects and portfolio:

body,
html {
  width: 100%;
  background-color: #333;
}
.container {
  margin: 10px auto;
  width: 660px;
  background-color: #ccc;
}
.post {
  background-color: #fff;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px;
  min-height: 240px;
  border: 1px solid #666;
}
body.home .post,
body.news .post,
body.blog .post {
  width: 640px;
  display: block;
  clear: both;
}
body.portfolio .post,
body.work .post,
body.projects .post {
  width: 200px;
  display: block;
  float: left;
}
<html>

<head>
  <!-- HEAD CONTENT -->
</head>

<body class="work">
  <div class="container">
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <br clear="all">
  </div>
</body>

</html>


    CSS Howto..

    How to add a custom font to Rails app?

    How to use “two-toned” font variants in CSS?

    How to make a different background for each link from a navbar? [closed]

    How to create menu of overlayed divs?

    How to make a div to fit all available width even hidden with scroll?

    how to create proportional image height/width

    How to horizontally center Twitter Bootstrap grid elements

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How to get maximum compatibility with most of the devices for a Mobile Website?

    CSS Overflow, the scroll bar appears at the bottom, how can I get a scroll bar at the top?

    How do I maintain modularity with mixins?

    Please help me understand how to make my first jquery slider

    How to “add details” to CSS (example Box shadow)

    How to put text in the upper right, or lower right corner of a “box” using css

    How can I improve this markup and CSS to keep things simple and easy to work with?

    How to apply gradient to element with correctly display in IE9?

    Slideshow by changing background-image CSS attribute using JQuery in Drupal 7

    Jquery not showing select element. No errors in console

    How to add html in language file of opencart 2.0.1.1?

    How to make a header bar fold over the webpage css

    How to avoid CSS interference in an HTML page

    How do I do the CSS for this?

    How do I put a horizontal line/border right in the middle of a table row?

    How to hide the first two div using css?

    How to make infinite movement of a div?

    How to animate an image under a mask or a clip using html css and jquery?

    How to get a frame off animated png using CSS?

    How to remove strange border from css-animated clip-path?

    how to set div display property block when url have some id?

    How to access the physical Bundled and Minified js / css created by BundleConfig class