Sharing Stylesheets & Current Navigational Highlighting

[mintertweed]

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:

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.

[chrisburton]

What about using `&&`?

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

#123259

[TheDoc]

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’ );

[TheDoc]

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 */
}

}

[chrisburton]

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

[chrisburton]

@mintertweed

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

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

[TheDoc]

Chris nailed it.

[chrisburton]

Awesome. Thanks @BenWalker

[TheDoc]

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

[TheDoc]

Now you’d use `.home`.

[TheDoc]

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.

[Author]

Posts