Grow your CSS skills. Land your dream job.

Sharing Stylesheets & Current Navigational Highlighting

  • # February 3, 2013 at 10:25 pm

    On my WordPress website, I currently have nine pages (not including my home page). Every page uses a different stylesheet. To do this, I have created this code:

    < ?php if( is_page('Showreel') ) : ?>

    here to get a better grasp of what I am talking about. Thank you in advance!

    Edit: I am basically trying to clean up my code as much as possible. It is long overdue.

    # February 3, 2013 at 10:40 pm

    What about using `&&`?

    < ?php
    $showreel = is_page(‘Showreel’);
    $games = is_page(‘Games’);
    $illustration = is_page(‘Illustration’);
    $literature = is_page(‘Literature’);
    $photography = is_page(‘Photography’);
    $sculpture = is_page(‘Sculpture’);
    ?>
    < ?php if( $showreel && $games && $illustration && $literature && $photography && $sculpture ) : ?>

    # February 4, 2013 at 1:42 am

    First of all, instead of having nine different stylesheets you should just have a single stylesheet and separate things with classes on the body.

    Make sure you have this:

    >

    This will put multiple classes on the body that you can use. You can also add page slugs by adding this to your functions.php file:

    // Add page slug to the body as a class
    function add_slug_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
    $classes[] = $post->post_type . ‘-‘ . $post->post_name;
    }
    return $classes;
    }
    add_filter( ‘body_class’, ‘add_slug_body_class’ );

    # February 4, 2013 at 12:57 pm

    So, I tried both methods that @chrisburton suggested and neither of them seem to work. Sorry. @TheDoc, this sounds a lot better than what I am currently doing. I have to say though that I do not understand PHP in the least, so I will need a little bit of hand holding. The method I was using previously was something I found on WordPress’ forums. So, basically, I need to have…

    >

    ….where it states the body of the page, right? And then I add that code to functions.php? I see the word “post” being mentioned several times in the code. Does it still apply to pages (rather than posts)? Also, could you give me an example of how I would style it in CSS? Apologies if this is asking for too much. I don’t see how I could make a CodePen out of this without some serious editing. Hrm.

    # February 4, 2013 at 1:01 pm

    Exactly. You should find the `` tag in your header.php file. Just make sure it has the `body_class();` function on it (it should already).

    The reason why I suggested added the other function to add the slugs to it is simply for classes that make a bit more sense.

    For example, *without* the added function you’ll be tying into classes with names like `.page-id-5`. On the other hand, *with* the added function you’ll get names like `.page-home`.

    Then in your CSS, anything that is specific to that page can be wrapped like this:

    .page-home .my-style {
    /* styles */
    }

    Or, if you’re using SASS/SCSS:

    .page-home {

    .my styles {
    /* styles */
    }

    .more-styles {
    /* styles */
    }

    }

    # February 4, 2013 at 1:22 pm

    @TheDoc has your solution but if you changed `&&` to `||` it might work. I have a similar situation on my site where `&&` doesn’t work but `||` does.

    # February 4, 2013 at 1:39 pm

    Okay, so I added…

    // Add page slug to the body as a class
    function add_slug_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
    $classes[] = $post->post_type . ‘-‘ . $post->post_name;
    }
    return $classes;
    }
    add_filter( ‘body_class’, ‘add_slug_body_class’ );

    …to my functions.php and then I replaced…

    showreel page. It should be yellow, rather than red. If you can figure out what is going on, here is my website. Thank you for your help thus far, guys!

    Edit: I just wanted to target one of the pages to see if it could work for all of them. I am clearly doing something wrong.

    # February 4, 2013 at 1:58 pm

    @mintertweed

    .page-showreel body {
    color: #FCDB04;
    }

    Simple mistake. Change it to `.page-showreel` or `body.page-showreel`.

    # February 4, 2013 at 2:39 pm

    Chris nailed it.

    # February 4, 2013 at 4:17 pm

    I did the second option, because I need to target the body specifically, and the background is still red instead of yellow. Hrm.

    Edit: I really don’t know what I am doing wrong here.

    # February 4, 2013 at 4:18 pm

    @mintertweed `background-color`, your _text_ is yellow right now :)

    # February 4, 2013 at 4:31 pm

    @mintertweed, the css for your showreel page is being called by specificity, exactly as it was stated earlier in this thread, it’s just that your css has `color` to yellow, instead of `background-color` to yellow, so what you’re seeing is your default background-color to red, and yellow text, you just need to change color to background-color and you’ll be fine.

    # February 4, 2013 at 5:30 pm

    Wow. Me thinks I need to take a break from coding. I have had my derpy moment of the day. Thank you, @ChrisP, for pointing this out.

    # February 4, 2013 at 5:52 pm

    @chrisburton

    > has your solution but if you changed && to || it might work. I have a similar situation on my site where && doesn’t work but || does.

    Just to clarify, since it isn’t mentioned above, the reason

    &&

    doesn’t work and

    ||

    does is because

    &&

    requires all of the statements to be true (ie. a single page would have to be of all the different types being checked), while

    ||

    only requires one of the statements to be true.

    # February 4, 2013 at 5:59 pm

    Awesome. Thanks @BenWalker

Viewing 15 posts - 1 through 15 (of 23 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".