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


Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

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. I placed just this part of Carrie’s instruction in my functions.php file:

    add_filter(‘body_class’, ‘string_body_class’);
    function string_body_class( $classes ) {
    if ( isset( $_GET[‘color’] ) ) :
    $classes[] = ‘parallax-pro-‘ . sanitize_html_class( $_GET[‘color’] );
    endif;

    return $classes;
    }

    Then, I created menu items via the Appearance > Menus > Links section of the Dashboard, concluding each link with whatever color I wanted. Essentially, whenever someone clicks a menu item, it changes the whole site. I’m going to work on inserting images via the ‘color’ sections of the style.css menu and see if they will change per menu item also.

    Carrie, you created a monster. 😉 Fun, so far.

      1. Hey Carrie,

        Finally in front of computer again and getting to play a bit with the code you supplied. I found some creative ways to utilize the code to affect the entire site. Thought you might like it, too.

        Applying this code to the bottom of the StudioPress Parallax Pro style.css, I was able to affect the entire site when users clicked a link that ended in a ?color=… effectively customizing their ministry, department, category, or whatever page.

        I keep a copy of my changes in a private post just in case I have to update the theme. Then, I can reapply the code to the bottom of the updated style.css.

        Thank you again, for the code. Lots of fun!

        /* Added to customize the look of the theme */

        /* Decrease padding from 200px to 100px */
        .home-even,
        .home-odd {
        padding: 100px 0 100px !important;
        }

        /* Change default appearance of a few settings */
        #genesis-responsive-slider {
        background-color: #000 !important;
        border: 0 !important;
        }

        .site-header {
        background: rgba(0, 0, 0, 0.85) !important;
        }

        .genesis-nav-menu .sub-menu a {
        background: rgba(0, 0, 0, 0.85) !important;
        }

        /* Change blue appearance of a few settings */

        .parallax-pro-blue .site-header {
        background: rgba(68, 172, 232, 0.85) !important;
        }
        .parallax-pro-blue .genesis-nav-menu .sub-menu a {
        background: rgba(68, 172, 232, 0.85) !important;
        }
        .parallax-pro-blue #genesis-responsive-slider {
        background-color: #44ace8 !important;
        border: 0 !important;
        }

        /* Change green appearance of a few settings */

        .parallax-pro-green .site-header {
        background: rgba(53, 195, 121, 0.85) !important;
        }
        .parallax-pro-green .genesis-nav-menu .sub-menu a {
        background: rgba(53, 195, 121, 0.85) !important;
        }
        .parallax-pro-green #genesis-responsive-slider {
        background-color: #35c379 !important;
        border: 0 !important;
        }

        /* Change green appearance of a few settings */

        .parallax-pro-orange .site-header {
        background: rgba(229, 140, 41, 0.85) !important;
        }
        .parallax-pro-orange .genesis-nav-menu .sub-menu a {
        background: rgba(229, 140, 41, 0.85) !important;
        }
        .parallax-pro-orange #genesis-responsive-slider {
        background-color: #e58c29 !important;
        border: 0 !important;
        }

        /* Change pink appearance of a few settings */

        .parallax-pro-pink .site-header {
        background: rgba(203, 64, 130, 0.85) !important;
        }

        .parallax-pro-pink .genesis-nav-menu .sub-menu a {
        background: rgba(203, 64, 130, 0.85) !important;
        }
        .parallax-pro-pink #genesis-responsive-slider {
        background-color: #cb4082 !important;
        border: 0 !important;
        }

        Oh! I have not found the piece to affect the text color yet so it blends with the background in the header and nav menu. Will play again later tonight I hope and figure that out, unless you know which one it might be.

        Thanks again. I really think this will benefit the user experience on the site.

  2. Hi Carrie,

    Currently building my very first website (using studiopress parallal-pro) where I have a menu located in my .site-header ( right header widget) and have finalized the creation to have one of its menu items receive “button” status. This is done with padding and radius border using a different color. All is done, button is in place, except color scheme offered by this child theme prevents me from changing the hover font color whenever the cursor is pointed over this .css button.

    My request for help is to remove the whole color scheme from my style.css and thereby allowing me to continue with my vetted code to customize the hover font color for this lone button.

    Up to this point, I have been using my custom.css stylesheet which overrides the theme’s style.css stylesheet allowing me not to taint the theme’s .css file.

    Carrie, do you know how to disable the color scheme in parallax-pro to allow me to finalize .css to this button’s hover font?

    Many thanks,
    jh

  3. Thank you so much for this! It works perfectly. Do you have a code like this but one that showcases the Page Layouts instead of colors? Thanks.

    1. That’s a really interesting thought. You could certainly pass in the body class Genesis uses for each page layout (i.e. full-width-content for Full Width), but then there’s the issue of what happens if you set a page display full-width with that body class hijack, but there’s a sidebar on the page? You’d need to hide that.

      Anyhow, it could be done, but probably 100x easier just to create pages with those three or four layouts and link to those.

  4. Your post is still getting traction! Thanks for sharing this info! I have incorporated it into a demo site that I am using to let clients see how things work. Awesome!

    I do see that the color goes back to the default any time you change the page. Any way to set it and forget it? That is, set a color to RED via the menu, change pages, and still be using the RED color palette.

    Thanks again! You Rock!
    Paul.

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.