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…

Internal CSS

Related Posts:

Leave a Comment Cancel reply