Treehouse: Grow your CSS skills. Land your dream job.

WordPress Headers

  • # April 24, 2012 at 11:58 am

    My website is and I’m trying to have the slider thats on the homepage only on the homepage, any other page will not have this slider. I was wondering how I would go by doing this. Thanks

    # April 24, 2012 at 1:35 pm

    Best way do do this is edit the theme files and place your slider inside this php code:

    < ?php if ( is_front_page() ) { ?>
    Anything in this area will only display on the home page.
    < ?php } ?>

    Be sure you place that in a part of the theme that makes sense and wouldn’t break your layout. Most likely somewhere in the header.php file or the page.php file.

    Inside that php you can either create the slider yourself, or find a slider plugin that lets you embed your sliders in your theme. Whatever works for you! :)

    Hope this helps you out.

    # April 27, 2012 at 12:26 pm

    Thanks that worked! how would you go by changing the css only for the homepage?

    # April 27, 2012 at 12:32 pm

    If you want to add something on the home page only, I would actually recommend you put it on the home/front page template (as opposed to putting it in every template and then only execute it if it’s the home page).

    # April 27, 2012 at 12:50 pm

    I just need a different background

    # April 27, 2012 at 1:09 pm

    For smaller page specific changes like that I use the WordPress body class feature.

    <body <?php body_class(); ?>>

    That dynamically adds classes to the body based on what type of page you’re on. As an example, when on the home page the body tag will get a class of “home” (among others), while on a single post page it will get a class of “single”.

    So what you can do with that is just below where you call your background in the css add a new line using the class specific to the home page with the different background.

    If you’re body has the background just use this:

    .home {
    background: stuff;

    Or if your background is on say a wrapper you could use this:

    .home .wrapper {
    background: stuff;
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.