Show Off Colors in Your Theme Demo by Using the Body Class and a Querystring

Ever seen a WordPress theme demo with color options? Of course you have. You may not care about how that’s done, in which case don’t bother with the rest of this post and go enjoy these pictures instead.

Still here?

Color options on a theme demo allow a potential user to see how the design will look with different colors applied. Like this:

Theme Color Options

When I released the original Utility Theme for the Genesis Framework in 2013, I used a poor man’s approach to the color demo. I created a page, named it Red, for example, applied the blog template,  and set a custom body class of ‘red.’ When that single page was hit, it’d pick up the ‘red’ body class and display the template accordingly.

Can you predict the problem here?

This method only showed that single page in the selected color, which means there were a lot of template pages that couldn’t be previewed by color (i.e. the home page). How sad.

A Better Way

The theme marketplace at StudioPress has a nifty way of demoing theme colors. It passes the name of the body class via querystring and dynamically applies the body class to any page in the theme. Cool, eh?

If right about now you’re saying, why am I still reading this? I could care less! Allow me to remind you of these cute pictures.

For those of you WordPress theme developers who’d like to use the same technique on your theme demo, I’ll share the how-to with you.

I’m assuming that your theme already has the CSS for your various theme color schemes, using a naming convention like: .theme-prefix-blue h1 or similar.

Step 1: Use the 'body_class' filter to snatch the body class from a querystring

<?php //remove opening tag
add_filter('body_class', 'string_body_class');
function string_body_class( $classes ) {
if ( isset( $_GET['color'] ) ) :
$classes[] = 'theme-prefix-' . sanitize_html_class( $_GET['color'] );
endif;
return $classes;
}

Change theme-prefix to whatever you’re using.

I didn’t concept this code – Major props to Andrew Norcross and Jared Atchison for the code direction. I forked code from both of them and combined it for this solution.

Step 2: Create a menu using your querystrings

Add a menu item for each color option for your theme, using this format ?color=name-of-color. Building your link structure like this means that the body class can be applied to any page in your theme.

menu-querystring

 

46 thoughts on “Show Off Colors in Your Theme Demo by Using the Body Class and a Querystring”

  1. Hi Carrie, I’m working on my first child theme and want it to add this amazing option for a demo. I have my css colors done.

    On STEP 1 I get confuse, Where should this code go functions.php?
    This is what I have and it show on the theme settings.

    ============
    /** Add support for color options */
    add_theme_support( ‘genesis-style-selector’, array( ‘kassity-pink’ => ‘Pink’,’kassity-black’ => ‘Black’,’kassity-teal’ => ‘Teal’, ‘kassity-green’ => ‘Green’, ‘kassity-orange’ => ‘Orange’,’theme-customexample’ => ‘Custom Example’ ) );
    ==========

    Any help, tip is very much appreciated.
    Best Regards!

  2. Hello – I apply the code but is not working for me, please advise what I’m doing wrong. here is what I add to the Funtions.php:
    ====================
    //*Add color switcher to menu bar
    add_filter(‘body_class’, ‘string_body_class’);
    function string_body_class( $classes ) {
    if ( isset( $_GET[‘color’] ) ) :
    $classes[] = ‘kassity-pink’ . sanitize_html_class( $_GET[‘color’]);
    $classes[] = ‘kassity-orange’ . sanitize_html_class( $_GET[‘color’]);
    $classes[] = ‘kassity-green’ . sanitize_html_class( $_GET[‘color’]);
    $classes[] = ‘kassity-black’ . sanitize_html_class( $_GET[‘color’]);
    endif;

    return $classes;
    }
    ===============================
    Thank you!

  3. Carrie, this is an OMG-Epic moment for me! after 5 days without sleep, I finally got it, just a minor adjustment to my link colors but over all is working perfectly. Thank you for you direction, I’m following you on twitter and bookmark your page. You are on my top 5!

    Best Regards- Lisa

  4. Hi Carrie

    Love your posts and tips’n’tricks. Just as a variation on this post. I recently created a theme called ENVY (http://envy.krolyn.com) and used this jQuery code which can simply be added to the wp_head() or wp_footer() in the Genesis Theme Settings. The menu is treated the same way. However, the code is extended to include media that you might want changed with the alternative styles.

    In the sample below, the slider images change between color styles. I’ve named the default images slider1-default.jpg, slider2-default.jpg and other images slider1-[color].jpg and slider2-[color].jpg – of course, you could alter the sample code below to accommodate any kind of image or media.

    jQuery(document).ready(function($) {
    function getUrlVar(key) {
    var result = new RegExp(key + “=([^&]*)”, “i”).exec(window.location.search);
    return result && unescape(result[1]) || “”;
    }
    var color = getUrlVar(‘color’);
    if(window.location.search) {
    $(‘.slide-image img’).each(function(){
    var $this = $(this)
    $this.attr(‘src’,$this.attr(‘src’).replace(‘default’,color));
    });
    $(“body”).addClass(“envy-” + color);
    }
    });

  5. First, curiosity got the best of me and I did ‘enjoy these pictures.’ 😉 So funny!
    Second, I attempted to implement this code in my functions.php of the Outreach Pro theme and could not make it work. Thought I’d better jot you a not before I gave up and went to attempt my own ‘Sleep-Fu.’

    I copied the code as it was and my functions.php file complained of an extra “<" then I tried just the lines beneath the "<?php…" and that didn't work either.

    Oh, and I did change the theme-prefix to outreach- and outreach-pro-. Neither worked.

    I know it's going to be something simple. Always is.

    Thanks for your time.

  6. Hello Carrie, I notice you did not state were to place the PHP filter. Thanks so much for any help with this.

    <?php //remove opening tag

    add_filter('body_class', 'string_body_class');
    function string_body_class( $classes ) {
    if ( isset( $_GET['color'] ) ) :
    $classes[] = 'theme-prefix-' . sanitize_html_class( $_GET['color'] );
    endif;

    return $classes;
    }

      1. Hello Carrie thanks so much for the responce, I’m having a problem getting it to work correctly.

        Here is what I’ve added to my function also to make this work. Please let me know what I’m doing wrong. I try to change the color options from my demo menu but no go. I’m using the Parallax-Pro

        //*Add color switcher to menu bar
        add_filter(‘body_class’, ‘string_body_class’);
        function string_body_class( $classes ) {
        if ( isset( $_GET[‘color’] ) ) :
        $classes[] = ‘parallax-pro-blue’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘parallax-pro-green’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘parallax-pro-orange’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘parallax-pro-pink’ . sanitize_html_class( $_GET[‘color’] );
        endif;

        return $classes;
        }

        Thanks so much Rob

      2. Hello Carrie thanks for the share and I hope I can get this to work for my demo.

        Here’s what I’ve added to my function. Maybe I’m missing something or leaving a bracket out for the prefix to get it to work

        add_filter(‘body_class’, ‘string_body_class’);
        function string_body_class( $classes ) {
        if ( isset( $_GET[‘color’] ) ) :
        $classes[] = ‘theme-prefix-blue’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘theme-prefix-green’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘theme-prefix-orange’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘theme-prefix-pink’ . sanitize_html_class( $_GET[‘color’] );
        endif;

        return $classes;
        }

        I have tryed changing things around to get it working but no luck.

        I added the URL for each color option in the menu as follow

        Blue
        http://mydomain,com/demosite/?color=blue

        Orange
        http://mydomain,com/demosite/?color=orange

        Pink
        http://mydomain,com/demosite/?color=pink

        Green
        http://mydomain,com/demosite/?color=green

        Thank for any help on this matter.

          1. Hi Carrie, I was wondering what I was doing wrong and it was because I was adding a prefix for each color.

            I also managed to add the header class to change with each color choice.

            This is a plus for setting up demos.

            Thanks so much for sharing.

  7. Carrie! Works like a charm on Centric Pro and Parallax Pro so far. Hey! I also tried it in links to pages, where for instance, I wanted a particular page to be blue, I added the ?color=blue to the end of the URL referring to that page. Fun! Changes the whole look of the site depending on the Category, topic or whatever I’ve linked to in the URL. Thank you very much!

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.