10

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.

Improve this question

2 Answers 2

Reset to default
16

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

Improve this answer
4
  • Your answer was very helpful and thorough, thank you!
    – MrS1ck
    Commented Dec 4, 2013 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
    Commented Mar 1, 2018 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
    Commented May 8, 2018 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
    Commented May 8, 2018 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;
}
Improve this answer

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