By combining sessions and URL parameters, you can make WordPress load an extra stylesheet (or anything else). This is useful for design testing and re-skinning. And best of all you can set this up in just 5 minutes.

A recent project I worked on involved updating a non responsive WordPress theme to make it responsive. Our client wanted to maintain the current design, while updating it so it would render in a responsive manner for mobile devices. This all had to take place without affecting the live site. In the past I would have made a copy of the site and moved it to a development space where I could work on it freely. That method has its own challenges and is... well, overkill. Here is an alternative approach.

Start a WordPress Session

The first step is to start a WordPress session. In the root of your WordPress installation folder, open the wp-config.php file. Below the opening <?php tag, add the following:

session_start();

Modify Theme header.php File

Next we are going to ad a small script to the header.php file in your theme folder. Scroll down to the closing </head> tag. Just BEFORE this tag add the following:

<?php
if (isset($_GET["loadCustomCss"])) {
    if($_GET["loadCustomCss"] === 'yes') {
        $_SESSION['loadCustomCss'] = true;
    } else {
        $_SESSION['loadCustomCss'] = false;
    }
}
if (isset($_SESSION['loadCustomCss']) && $_SESSION['loadCustomCss'] === true) {
    echo '<link rel="stylesheet" type="text/css" href="custom.css" />';
}
?>

Create custom.css Stylesheet File

In the root of your WordPress installation folder, create or upload a blank stylesheet and give it the filename custom.css. You may also create the stylesheet in your theme's folder to make it editable via the WordPress back office. If you do this, you must edit the script above that you added to header.php. You must update the path to custom.css on line 10.

How to use the WordPress Session Script

Now that all the pieces are in place, let's review how it works.

By modifying wp-config.php we are starting a browsing session. The script we added to header.php watches for a URL parameter called "loadCustomCss'. If the value of that parameter is 'yes', a session variable is set accordingly. The script then examines the variable, and if true, will add the HTML necessary to load custom.css, otherwise do nothing.

Assuming you have completed all of the above, do the following:

• Visit the home page of your WordPress site in a browser of your choice.
• Once loaded, modify your URL. Example: http://www.yoursite.com?loadCustomCss=yes.
• View your page source, you will notice custom.css is being loaded just before your closing </head> tag.
• You may now add CSS commands to custom.css. These commands will override that of the main stylesheet(s).
• Once set, you can navigate page to page and the custom stylesheet will always be present.

Because this script is session based, only you will see changes made by custom.css. The public will not. If you want to disable the session, simply do the following: http://www.yoursite.com?loadCustomCss=no

At this point, custom.css will no longer be loaded or parsed.

Other Uses

You can also use this script to load images, HTML snippets and other media as needed ANYWHERE in your theme template files. For example you could load an image in the footer of your site only when the custom session is active. In footer.php you can add the following:

<?php
if (isset($_SESSION['loadCustomCss']) && $_SESSION['loadCustomCss'] === true) {
    echo '<img src="/path/to/image.jpg" />';
}
?>

Remember to remove the above programming once you are happy with your changes and you apply them to the live site.

Need Some Help with Your WordPress Website?

Check out our CMS Web development services that include plenty of experience building and maintaining WordPress websites!

Filed in // Mobile Website Development, Search Engine Optimization