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:
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.
.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.
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.
haha – have fun!
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.
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
Wow. Thanks for this! I’m in the middle of creating my first theme and this is awesome! Any tips on how to create a “Default” navbar link?
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.
That’s a really interesting thought. You could certainly pass in the body class Genesis uses for each page layout (i.e.
full-width-contentfor 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.
Ultra helpful, thanks Carrie.
That’s even better than “regular helpful.” 🙂
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.
Thanks, Paul!
You could – probably by rigging up a way to append the color to any URL. I don’t have an elegant solution off the top of my head.
I have been searching for this for 3 days and spent hours and hours looking!!! Thank you so much!!!
My pleasure!