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 style HTML5 tag

    How to figure a text box set of characters into a text box figure 2 effect?

    How can I fade in new HTML elements with CSS [duplicate]

    How to set up fields position?

    How to get my .toggleClass() menu to work properly?

    How to make sure that different severity Toasters are shown differently?

    How to resize parent div while keeping dynamic child divs 100% height

    PrimeFaces: how to override CSS class

    How can I alter this CSS so that it only applies to a certain div?

    How can I create a horizontal selector in a form with only html and css?

    How to move img src a few pixels down in html page

    How to make submenus have the same width as the menu CSS/HTML5

    How to target Microsoft Edge with CSS? [duplicate]

    How to make a background using CSS gradient with flat color?

    How to reduce my code in both jQuery and CSS

    How do I get the (element with the) highest CSS z-index in a document?

    How to add arrow beside some links in CSS?

    in slick slideshow, just want center slide to be active

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    how to setup capybara-webkit to test ajax calls and get screenshots(html with css and javascript loaded)

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    how to : change css class of a button in a parent window with javascript or jquery?

    How to create multiline ListBox in GWT?

    JavaScript: How to get a dynamically created element's width?

    Ionic Side Menu Not Showing Content

    How to give different style, color to dotted border of links?

    How to get the current year using css?

    How to change Google Chrome Arabic default font in css?

    How do you prevent a CSS animation from rerunning when the display property changes?

    how to custmize font awasome icons using cheat sheet in css?