Search code examples
phpwordpressurlparametersstylesheet

Wordpress/PHP - load stylesheet when URL parameter is present

Hoping to find a way to make a Wordpress site load a stylesheet only when a URL parameter is present. For example when http://www.somesite.com is loaded, it will use whatever stylesheets are in use by the theme. But if a specific URL parameter is used, an additional stylesheet will be called. Example http://www.somesite.com?useAltCss=yes. In this case, an additional stylesheet is loaded AFTER the theme stylsheets. This gives me an opportunity to override theme styles only when the URL parameter is used, and test style/laylout changes without effecting public viewing.

I assume a coding modification would be needed for header.php. The following is not working PHP syntax but gives you an idea of I'm looking for:

<?php
    $param = ($_GET["useAltCss"]);
    if($param == 'yes') {
        <link rel="stylesheet" type="text/css" href="custom.css" />
    } else {
        // Do nothing
    }
?>

Update:

Looks like my original code was close I just had to change line 4 from:

<link rel="stylesheet" type="text/css" href="custom.css" />

to:

echo('<link rel="stylesheet" type="text/css" href="custom.css" />');

While this is working, im wondering if there is a more efficient way of doing this. If I navigate to a new page to test style changes, I have to manually add the URL parameter. It would be great if it somehow locked in the custom.css stylsheet... maybe using a cookie or session? I wonder how it could be toggled on/off. Thoughts?

Solution

  • If you're only using this for yourself then I think your method is fine... However - for anyone else stumbling upon this question - I want to emphasize that this is not doing things by the book. The second method suggested below is an ok solution, but the first should only be used for a very temporary situation (opening a session on each page load is likely unnecessary and will cause some performance degradation).

    Stylesheets also shouldn't be printed manually (ie. using <link[...]>), instead use wp_enqueue_style() in the wp_enqueue_scripts hook.

    Method 1

    To keep the "setting" instead of having to manually type it on every page load you can use a session like this:

    You need to open a session before headers are sent, so put this in wp-config.php:

    //Start the session if it isn't already
session_start();

    The rest goes wherever you want your stylesheet (most likely in header.php):

    //Check if the parameter is set
if (isset($_GET["useAltCss"])) {
    if($_GET["useAltCss"] === 'yes') {
        //Adjust the session
        $_SESSION['useAltCss'] = true;
    } else {
        /**
         * If set to anything other than "yes", assume it's being switched
         * off, and adjust the session
         */
        $_SESSION['useAltCss'] = false;
    }
}
//Check if the session variable exists, and is currently true
if (isset($_SESSION['useAltCss']) && $_SESSION['useAltCss'] === true) {
    //And print your stylesheet
    echo '<link rel="stylesheet" type="text/css" href="custom.css" />';
}

    Method 2

    Another (simpler) option would be to simply check if the current user is logged in and has the capability to edit the theme (which I expect you do):

    if (current_user_can('edit_themes')) {
    echo '<link rel="stylesheet" type="text/css" href="custom.css" />';
}

    ...this of course won't allow you to switch back and forth - except by logging in and out each time.