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:
That is all well and good, but did you notice something? Six of those pages share the same stylesheet because each one of those pages is a sub-category of my portfolio. Is there an easier way to call all six pages in one PHP command rather than listing each individual one? If you would like to see my website, please visit <a href="http://www.mintertweed.com/>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.
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:
<body <?php body_class(); ?>>
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' );
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...
<body <?php body_class(); ?>>
....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.
Exactly. You should find the <body> 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:
// 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...
<body id="<?php echo $page ?>">
...with...
<body <?php body_class(); ?>>
...and then I went into my stylesheet and entered this...
.page-showreel body {
color: #FCDB04;
}
...and nothing happens when I go to my 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.
@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.
It is from something I learned from @chriscoyier actually. In his tutorial here. Basically, it allows current navigational highlighting. Is there any way to keep this feature while still using:
<body <?php body_class(); ?>>
Again, I am not very experienced with PHP, so I do not know how to combine the two.
Let me explain myself a little better. So, I checked the body tag on home. It looks a little something like this:
<body class="home page page-id-28 page-template-default home page-home">
How do I take that, make it more manageable, and apply CSS to it? Because before, when I was echoing the page, I could just use #home. I hope that was a better explanation than my previous message.
I just realized what I said. I actually knew that. I guess what I meant was, the names, essentially. The menu currently works for only half of the items. And I can not figure out why they are not working for the other half. Also, when I select an li from the ul, it highlights everything in the ul. Hrm. Here is the site. And here is the CSS code running everything for the menu:
/*
MENU STYLES
*/
.header-home a,
.page .header-home a,
.header-projects a,
.page .header-projects a,
.header-blog a,
.page .header-blog a,
.header-forums a,
.page .header-forums a,
.header-contact a,
.page .header-contact a,
.header-shop a,
.page .header-shop a,
.header-support a,
.page .header-support a {
color: #7B0046;
}
.header-home a:hover,
.page .header-home a:hover,
.header-projects a:hover,
.page .header-projects a:hover,
.header-blog a:hover,
.page .header-blog a:hover,
.header-forums a:hover,
.page .header-forums a:hover,
.header-contact a:hover,
.page .header-contact a:hover,
.header-shop a:hover,
.page .header-shop a:hover,
.header-support a:hover,
.page .header-support a:hover {
color: #FFFEF2;
}
body.page-feelgoodcandy ul#main-navigation li.header-projects li.header-leaflet a:hover,
body.page-leaflet ul#main-navigation li.header-projects li.header-feelgoodcandy a:hover {
color: #00AEEF;
}
ul#main-navigation li a:hover,
body.page-home ul#main-navigation li.header-home a,
body.parent-slug-projects ul#main-navigation li.header-projects a,
body.page-blog ul#main-navigation li.header-blog a,
body.page-forums ul#main-navigation li.header-forums a,
body.page-contact ul#main-navigation li.header-contact a,
body.page-shop ul#main-navigation li.header-shop a,
body.page-support ul#main-navigation li.header-support a,
body.default ul#main-navigation li.header-home a,
body.page-feelgoodcandy ul#main-navigation li.header-projects a,
body.page-leaflet ul#main-navigation li.header-projects a,
body.page-feelgoodcandy ul#main-navigation li.header-feelgoodcandy a,
body.page-gloom ul#main-navigation li.header-gloom a {
color: #FFFEF2;
}
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:
That is all well and good, but did you notice something? Six of those pages share the same stylesheet because each one of those pages is a sub-category of my portfolio. Is there an easier way to call all six pages in one PHP command rather than listing each individual one? If you would like to see my website, please visit <a href="http://www.mintertweed.com/>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.
What about using
&&?OR (not sure if this will work)
Maybe someone else can give their input with this but I think it might work.
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:
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.
Exactly. You should find the
<body>tag in your header.php file. Just make sure it has thebody_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:
Or, if you're using SASS/SCSS:
@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.Okay, so I added...
...to my functions.php and then I replaced...
...with...
...and then I went into my stylesheet and entered this...
...and nothing happens when I go to my 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.
@mintertweed
Simple mistake. Change it to
.page-showreelorbody.page-showreel.Chris nailed it.
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.
@mintertweed
background-color, your text is yellow right now :)@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
colorto yellow, instead ofbackground-colorto 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.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.
@chrisburton
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.
Awesome. Thanks @BenWalker
@TheDoc, I figured out what this means:
It is from something I learned from @chriscoyier actually. In his tutorial here. Basically, it allows current navigational highlighting. Is there any way to keep this feature while still using:
Again, I am not very experienced with PHP, so I do not know how to combine the two.
You can use body_class() to accomplish the same thing.
Oh, how so?
Let me explain myself a little better. So, I checked the body tag on
home. It looks a little something like this:How do I take that, make it more manageable, and apply CSS to it? Because before, when I was echoing the page, I could just use
#home. I hope that was a better explanation than my previous message.Now you'd use
.home.Here is what I currently have:
So, do I change:
To:
I am confused on what should be a period and what should be a hashtag.
HTML:
CSS:
Hash tag == ID Period == class
This is really basic stuff, though. Might be worth going back and doing some CSS-basics tutorials.
I just realized what I said. I actually knew that. I guess what I meant was, the names, essentially. The menu currently works for only half of the items. And I can not figure out why they are not working for the other half. Also, when I select an
lifrom theul, it highlights everything in theul. Hrm. Here is the site. And here is the CSS code running everything for the menu:Help is always appreciated.