Download on wordpress.org: Color Scheme every Theme
WordPress 3.4 gave us a tool for theme customization, and I really like the idea. Changing the background color or adding a header image makes even the most downloaded theme on the internet unique. So I had this idea of not only changing the background color, but changing the whole color scheme of a theme and thus building for example a green, red and blue variant of a theme or a dark and a light version. A WordPress color scheme plugin, that would both be great for users, to adjust their downloaded themes, and for theme developers, to provide their themes with multiple color schemes.
Three simple steps to make your own color scheme
- Generating the css – The first step, after installing and activating the plugin, is scanning your current theme after color-relevant css. Go to the plugins settings page under Settings -> Color scheme every theme and click the generate button. This will scan all the css files in your current theme after colors, generate code to overwrite the default colors and provide you with a color scheme template to add to your functions.php. After clicking the generate button you will see two textfields. The first with the color scheme template …
if ( function_exists( 'cset_add_color_scheme' ) ) { cset_add_color_scheme( 'scheme-name', array( '$color-1' => '#111111', '$color-2' => '#111111', '$color-3' => '#111111', '$color-4' => '#111111', '$color-5' => '#111111', '$color-6' => '#111111', ) ); }
… and the second with the default colors, found in you theme.
/** * Default colors * * $color-1: #efefef; * $color-2: rgba(0,0,0,0.5); * $color-3: rgba(0,0,0,0); * $color-4: #fff; * $color-5: #000; * $color-6: #222; */
- Adding a scheme to the functions.php – Now you only have to add one or more color schemes to your themes functions.php. Just copy and paste the first code-snippet and change the colors as you like. Allowed are all valid css color definitions, inclusive rgb/rgba and hsl/hsla.
- Choosing a scheme – It’s almost done, the last step is going to the customize section of your theme an choosing the color scheme. Click in the admin menu on Appearance -> Themes and then on the Customize link of the current theme.
Now you should see the schemes you created in the Color Schemes section, choose one and see a live preview to the right and save if you want to publish the new scheme.
Next development steps
This plugin is really not much more than a working prototype. I have some ideas, to make it really great.
- Making the generator work for other themes than the currently activated (even parent/child themes).
- Saving color schemes in the options, so there are no changes to the functions.php needed.
- Generating random color schemes or automatically making the default scheme ‘warmer’ or ‘colder’.
- Testing, bugfixing and discussing
Troubleshooting
If there is something not working, you are welcome to contact me via the comment section of this article or twitter. But check some things first, to make it easier for me to locate the problem:
- Check if your WordPress version is 3.4 or higher and if your PHP version is 4.3.0 or higher.
- To overwrite the color scheme of your theme, the plugin does save a file in the
wp-content/uploads/
directory. So this directory must have write permissions set. - Set the
WP_DEBUG
constant in your wp-config.php file to true and see if there are any errors shown when you use the plugin. - Try to deactivate all other plugins. If the problem disappears I have to know which plugins you use, to help.
- Give me as much information about your system as possible, when you contact me.
What do you think?
Of course I want to hear what your thoughts and experiences are. Is this plugin usable for you, would you like too see some features it doesn’t have at the moment or do you have some color schemes, you want to share? Please comment or contact me on twitter and let me know what you think!
Hi,
Love the concept, but when I try to generate a color scheme my content area just go blank (can still see the admin menu on the left). When I go to Customize the bar is there but nothing inside. I’ve tried this on different wordpress installs and with the plugin downloaded from wordpress.org as well as the one on githib.
Any ideas what might be the problem?
Thx!
Hi, mailed you some question and added a troubleshooting section above. I’m sure we can solve this.
I have the same problem as Stiaan. there is a color-scheme-Responsive.tss in the upload folder and I have disabled all plugins. I am running wp3.5.1 and the theme is Responsive. There are no errors from WP_DEBUG that I can see. Server with php version 5.3
I am still trying to reproduce the bug. Send you some questions via mail. Thanks for reporting.
Finally solved the white-screen bug. Version 1.1 is available in the plugin directory.
This plugin looks great can’t wait to test it out.
Hopefully we can put an end to all these themes with the gazillion of theme options built-in.
Thanks. I agree, there are way too many themes overplaying the theme options thing.
I activated this plugin and I am having trouble using it! Can you please tell me your email so that I can send you further details of my problems with this plugin.
alteriaonline@gmail.com
I’ve send you a mail.
Hi There.
Ive tried generating a colour scheme but i get;
There was an error while generating the color scheme.
Check if you have an active and working theme and if there is any css-file in your active theme!
The site is on a sub domain due to being in development so I’m not sure if that would be the reason. Please email me and I can give you th eurl if need be.
Thanks
I got this error with Twenty Twelve theme installed:
There is no color scheme generatad for your current theme.
There was an error while generating the color scheme.
Check if you have an active and working theme and if there is any css-file in your active theme!
It is on a multisite installed site. Does this not work with default theme?
Hi,
I just tested the plugin with the Twenty-Twelve-theme in a multisite environment and it worked fine. Have you gone through the troubleshooting list?
Kind regards
Daniel
Trying to generate and get this error:
Warning: Invalid argument supplied for foreach() in /nfs/c07/h01/mnt/99388/domains/blog.mexxywood.tv/html/wp-content/plugins/color-scheme-every-theme/classes/ColorExtractor.class.php on line 9
Warning: array_merge() [function.array-merge]: Argument #1 is not an array in /nfs/c07/h01/mnt/99388/domains/blog.mexxywood.tv/html/wp-content/plugins/color-scheme-every-theme/classes/ColorExtractor.class.php on line 9
Warning: Invalid argument supplied for foreach() in /nfs/c07/h01/mnt/99388/domains/blog.mexxywood.tv/html/wp-content/plugins/color-scheme-every-theme/classes/ColorExtractor.class.php on line 45
Warning: Cannot modify header information – headers already sent by (output started at /nfs/c07/h01/mnt/99388/domains/blog.mexxywood.tv/html/wp-content/plugins/color-scheme-every-theme/classes/ColorExtractor.class.php:9) in /nfs/c07/h01/mnt/99388/domains/blog.mexxywood.tv/html/wp-includes/pluggable.php on line 876
Hi,
seems to be the ‘glob’ function, which is making trouble. I’ve sent you a mail with some further questions.
Thank you so much
Daniel
(Shameless plug)
Hi there, I’ve created a premium plugin with a similar idea:
http://goo.gl/752Lb
It allows customization of all css used on the page, even one added by other plugins.
Hey Daniel,
I Updated plugin this Color Scheme I mean is only default color displaying could you let me know what should I do to get the other color displaying via e-email.
Thanks
Hi Daniel,
I’ve just started building a website for sight impaired people and one of the main issues is having two options for the colour content of the site.
1. Light text on a dark background
2. Dark text on a light background
Is this something that your plugin could do via a link on the site itself without admin access?
Many thanks,
SW
Thank you so much for making this plug-in. Now I can easily change my theme to match my background without knowing code 🙂 Yay!
my colors changes aren’t being saved. am I doing something wrong? I’ve changed all the colors and clicked save schemes, but they don’t show up in the color scheme choices in the customize link??
Hi, I’m really interested in your plugin, but it doesn’t seem to be working the way the pictures show. For example when I generate the scheme, it shows a long bar with lots and lots of colors, not code. Is that what’s supposed to happen? Thanks for your help!
I am having the exact same problem. any suggestions? and with the bar that comes up with lots of colors, only one color can be chosen. How do I fix this?
Hi Daniel,
Great idea this plugin !
I have an error when copying code on functions.php :
Parse error: syntax error, unexpected ‘so’ (T_STRING) in /home/scienced/www/posts/wp-content/themes/so-simple/functions.php on line 29
Copyied code is this one, line 29 is the first one :
$scheme_name legend{
color:$color-1;
}
$scheme_name .wp-caption .wp-caption-text,.gallery-caption{
color:$color-2;
}
$scheme_name .gallery-caption{
color:$color-3;
}
$scheme_name .gallery-caption:before{
box-shadow:0 -10px 15px $color-4 inset;
}
$scheme_name .text-light.has-thumbnail ::selection,.text-light.has-thumbnail ::-moz-selection,.text-dark.has-thumbnail ::selection,.text-dark.has-thumbnail ::-moz-selection{
background:$color-3fff;
}
$scheme_name .text-light.has-thumbnail h1,.text-light.has-thumbnail h2{
color:$color-3fff;
}
Thanks
Hi. I installed this plugin on my wordpress “suits” theme site, that I manage through one.com (on wordpress.com i can change colour scheme, but such an option is not available through one.com!)
I go to settings, and it appears a windows that says “add new colour scheme” and under that, “change colour” and a blanc box I should fill inn with… ? Should I have a html code or something?
Thanks for any help
Hi, I’m in the process of redecorating my blog, fresh WP 3.9.1 install with Mimbo (4) Pro theme. Generating the Color Scheme throws these errors:
Back to the WP Scheme Settings page, further errors are shown:
Finally, a file has been stored in the uploads folder by the name of color-scheme-Mimbo Pro-4.1.tss but it has zero bytes.
This isn’t working as it should, is it?
Cheers,
J.
Hi Daniel, I was trying to change the colour via the code as I couldn’t get your plugin to work. I didn’t save the original code and now I’m getting this message…
Parse error: syntax error, unexpected T_DOUBLE_ARROW, expecting ‘)’ in /home/audiobiz/public_html/wp-content/themes/vantage/functions.php on line 119
Any idea what it should be, or how I can ‘reset’ it?
Hi Daniel,
I’m trying to use your plugin, but I’m experiencing the same as Kristin here. I only see a bar with colors and I don’t know what to do from then on. Can you help? Thanks so much.
Hello,
I’ve installed the plugin, I’ve set/saved the new colour scheme and chosen the colour scheme in the ‘customise’ settings, but it’s still not working.
Can you tell me where to find the wp-content/uploads/ directory?
Thanks!