Changing CSS Style using PHP in WordPress

Question

I'm somewhat new to PHP and WordPress and I'm trying style a menu plugin (their support is busy) based on what page the user is on.

What I want is for the background and other styles to change if it isn't on the front page.

I've tested the CSS in inspect element so the selectors are correct, but I don't really know how to implement this in a clean and effective way.

The messy way would be to create another two menus (because top_navigation and main_menu are separate so 4 total) style those in their plugin settings and replace the two menus on the front page with two other ones when not on the front page using php. So if I need to make a change the menu's items I'd have to do it for two or four times which to me is stupid.

So far I've come up with creating a PHP variant of the style sheet and rewriting the URL to redirect from .css to .php however I don't really have a firm grasp on how I would do this from the root directory's .htaccess as the location of the two style sheets are far from it.

Location of style sheets:/wp-content/plugins/hmenu/_frontend_files/_menu_5/_css
Name of style sheets: hero_menu_styles.css and hero_menu_styles.php
PHP Style sheet:

<?php 
header('Content-type: text/css; charset: UTF-8'); 
?>

/*  Normal CSS Here */

<?php 
if(!is_front_page())
{
echo "#hmenu_load_5 .hmenu_main_holder {background-color: #67b7e1;}"
}
?>

.htaccess:
I am almost 100% sure there is something wrong with this.
I have no idea what though.

# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase "/wp-content/plugins/hmenu/_frontend_files/_menu_5/_css/"
RewriteRule ^hero\_menu\_styles\.css$ hero\_menu\_styles\.php [L]
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

So I have a bunch of questions.

Does echo work the way that I'm currently writing it assuming that it is in a stylesheet.php rather than a stylesheet.css?
What if I were to reference an additional stylesheet.php on all my pages and just put it in there rather than rewriting my URLs? Is there a way to make sure it would override the other stylesheets?
Can I have multiple .htaccess files
(for example in /wp-content/plugins/hmenu/_frontend_files/_menu_5/_css)
so I don't have to bother with long RewriteBase headaches?
Am I correct in that I cannot just stick this code+css into my WordPress theme's header.php or functions.php?
Do I need to require('/wp-load.php'); or load some WordPress functions (no idea what other than wp-load though) on my .php stylesheet if I wanted to use is_front_page()?

fostertime · Accepted Answer · 2016-03-04 18:47:55Z

1

If you need to style a menu based solely on whether you are on the homepage or not. Then you can simply use CSS selectors based on what you need to change.

Target home page menu style:

body.home .menu-class {background: #333;}

Target menu on a page:

body.page .menu-class {background: #FFF;}

You can find more scenarios and their classes here: https://codex.wordpress.org/Function_Reference/body_class

answered Mar 4, 2016 at 18:47

fostertime

5655 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Gibson Over a year ago

Yup. Targeting the standard WordPress body class is definitely the way to go with this one.

amygdata Over a year ago

So from what I understand if I were applying a certain style to the menu for archives it would be body.archive #menu_load_5 .hmenu_main_holder { background-color: #67b7e1; }

fostertime Over a year ago

@EndingLegacy Correct. You can see from the link provided above, you can use a number of different body classes to target specific elements.

amygdata Over a year ago

Thanks a lot! This really helped me avoid a ton of work, never knew I could select particular pages only using CSS.

Bhupesh · Accepted Answer · 2016-03-04 19:30:13Z

0

Try this code.

echo "<style>
#hmenu_load_5 .hmenu_main_holder 
{
background-color: #67b7e1;
}
</style>";

answered Mar 4, 2016 at 19:30

Bhupesh

8817 silver badges16 bronze badges

Collectives™ on Stack Overflow

Changing CSS Style using PHP in WordPress

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related