6

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.

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.

10

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

  • Your answer was very helpful and thorough, thank you! – MrS1ck Dec 4 '13 at 16:57
  • 1
    If you are in Home page, your body tag will render <body class="blog"> instead of home and in Front Page <body class="home"> instead front-page: core.trac.wordpress.org/browser/tags/4.9.2/src/wp-includes/… – rafawhs Mar 1 '18 at 13:37
  • @mayeenul Islam, i have applied some css on ".page" class for my inner pages. But my home page is having both ".home" & ".page" classes. How should i handle this? – Sopo May 8 '18 at 19:29
  • what i have found is "page-template-default" class in available on all inner pages except home page, so used that. Thanks anyway.. it was helpful – Sopo May 8 '18 at 19:50
1

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;
}

protected by Community May 25 at 10:22

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.