Wordpress - Style something only on the home page

WordPress body_class($class) is a nice dynamic way to load styles, js for specific body contents. If your theme doesn't support body class add them very simply:

  • Open the header.php (or the template that contains the <body> tag)
  • Edit the <body> tag and make it to <body <?php body_class(); ?>> — you are Done! :)

Now when you are in:

  • Home page, your body tag will render <body class="blog">
  • Front Page, your body tag will render <body class="home">
  • Blog post detail page (single.php), your body tag will render <body class="single">
  • Page detail page (page.php), your body tag will render <body class="page">

So, you are free now. Style however you want. For external stylesheet, and for home page your style will be (@saifur already mentioned):

body.home #main_content .container {
   position: relative;
   padding: 120px 0;
}

Internal CSS

For internal CSS, there is a conditional checker in WordPress, called is_home(), and another is is_front_page(). With these two, you can check whether "you" are in home page or in front page, and then can load your internal CSS code:

<?php if( is_home() || is_front_page() ) : ?>
<style id="my-internal-css">
    #main_content .container {
       position: relative;
       padding: 120px 0;
    }
</style>
<?php endif; ?>

Similarly is_single(), is_page(), is_category(), is_archive(), is_day(), ... so on...

Tags:

Css

Homepage

Recent Posts