Style something only on the home page

5 Views

I am relatively new to WordPress, but I’m sure there’s a way to do what I’d like to do.

I have a container in my template, and on the home page I’d like to specify slightly different padding to this element.

Read More

My current CSS is as follows: 

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

I’d like to bring the padding down to 80px if I’m on the Home page, otherwise keep it that way.

Is this something I’d have to do within the template or are there fancy ‘WordPress only’ CSS tricks that I am currently unaware of?

In my limited experience, I think I should be able to specify whether or not the page is_home or similar, and select a custom stylesheet in the header.php file for the home page. Presumably, with !important after my padding change for the CSS.

Can I get some direction? The results I’m finding through searching aren’t particularly what I’m trying to do.

Post Views: 5

Related posts

2 comments

  1. 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…

  2. Check the class of body tag, there is a class named home for home page. I hope the following css will help you.

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

Comments are closed.