1

I want to put CSS inside a PHP file, because with that I can use 'conditional CSS', depending on the value of a customizer control.

My idea is to create a new php file, somewhere in my theme directory

./assets/css/header-conditional-styles.css

In this file I have created the following code:

<?php header("Content-type: text/css; charset: UTF-8"); ?>
<style>
    <?php if ( text == get_theme_mod( 'layout_logo', text ) ) : ?>
        .theme-header-title { color: green !important; }
    <?php else : ?>
        .theme-header-title { color: blue !important;}
    <?php endif; ?>
</style>

The code inside the is as an example.

In my functions.php file I tried to include the file like this:

require( get_template_directory()  . '/assets/css/header-conditional-styles.php');

I implemented this and I know have difficulty editing theme files. It gives me the message that my changes might not be saved and that I might try to upload them via FTP.

Please point me in the right direction on how to include the file and if the content of the php-file is correct? Thanks!

2

You might try conditional classes instead. In your regular "style.css" file you would include both classes:

.theme-header-title.green { color:green; }
.theme-header-title.blue { color:blue; }

(Tip 1: avoid !important, just use a more specific style if needed - for example, h1.theme-header-title.green.)

Then in your HTML, which is likely in your "header.php" file, you'd use the Customizer setting to add the green or blue class:

<?php
if ( text == get_theme_mod( 'layout_logo', text ) ) {
    $color = 'green';
} else {
    $color = 'blue';
}
?>
<h1 class="theme-header-title <?php echo $color; ?>"><?php the_title(); ?></h1>

This way you don't have to include an additional CSS file, or mix CSS with PHP.

(Tip 2: when adding CSS to WP, enqueue it rather than using require(). Similar to avoiding !important, it will allow you to adjust things later if needed.)

(Tip 3: make your changes in a child theme, instead of directly editing an existing theme. This way you won't lose your changes when the theme is updated.)

(Tip 4: it sounds like you're editing theme files directly in wp-admin. It's much safer to SFTP in, download a copy of the theme to work on, and upload files as needed.)

|improve this answer|||||
  • This works very nice, thank you for your suggestion! Do you also have a way to add a more specific class to menu elements, eg 'nav a', '.sub-menu a', etcetera? – ralphsmit Jan 7 at 14:33
  • To come back on your valuable tips: 1) Good idea to use more specific classes. I'm going through all my code to remove !important. 2) I did use wp_enqueue for my css files, but I do not know if I can use that also for PHP files? Do you know that? 3) I'm creating a theme myself, so it's not an existing theme. 4) I use a few computers to edit my theme and it is a lot of work every time to do download files, etc. I therefore decided to use wp-admin, because you instantly see the result and I can test on different devices and browsers. I use my own hosting, so I always have backups. – ralphsmit Jan 7 at 14:38
  • No, PHP files aren't enqueued. :) For multi-computer workflow, I prefer Git. It's much more secure than editing in wp-admin and I then also have a version history that makes it easier to debug if problems ever arise. Download once to one of the computers, create a repo and push everything to Git. From then on, push/pull changes, and you can clone the repo on the additional computers, and every time to switch computers just pull the latest from the master branch. It will only download whatever files have changed rather than making you download everything every time. – WebElaine Jan 7 at 15:10
  • I will certainly have a look into Git. Thanks :) Are there any specific risks wp-admin has and Git not? Curious which things exactly can go wrong with wp-admi. Do you also know how to add classes to menu elements? – ralphsmit Jan 7 at 15:31
  • If a hacker got access to wp-admin, they could put malicious code into your theme and plugin files easily if the in-wp-admin-editor is enabled. If you disable it, at least they can't edit your files directly without additional elements. As far as classes, you can add them individually in wp-admin, or if you need them automatically added look into a Custom Walker. (Or when you pull in the menu, you can add parameters like what elements to wrap it in, and then target them by the wrapper rather than individual elements.) – WebElaine Jan 7 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.