Forums

  • # 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 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: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 5:59 pm

    Awesome. Thanks @BenWalker

    # March 6, 2013 at 6:39 pm

    You can use body_class() to accomplish the same thing.

    # March 6, 2013 at 7:11 pm

    Now you’d use `.home`.

    # March 6, 2013 at 7:34 pm

    HTML:

    CSS:

    #hash-tag { }
    .period { }

    Hash tag == ID
    Period == class

    This is *really* basic stuff, though. Might be worth going back and doing some CSS-basics tutorials.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag