Color Scheme every Theme 2.0 (read about v1.o here) makes it even more easy to create color schemes for WordPress themes.

Get version 2.0 on wordpress.org

After the release of version 1.0, some bug-fixing and the release of two minor versions I had got so much feedback that I thought it was time to implement the two feature requests most users suggested:

  • Editing color schemes directly in the admin interface, instead of having to add code in the functions.php
  • An option to make the css for all schemes available in the theme, to make it possible to change the scheme not only via the admin interface, but even on the front-end.

This resulted in a completely new options page, see a screenshot below:

screenshot-2

Here you got the possibility to edit the scheme directly in the admin interface. Just click on a color and change it in the Change color input field, hit enter, pick the next color you want to change. Don’t forget to save the schemes when you are done.

If you want to use the Dynamic theme colors option and used version 1.0 of the plugin, you have to regenerate the schemes.

There is still the possibility to permanently add a scheme to your theme by copying it to the functions.php of that theme. If you want to do that, just create the new theme via the admin interface, save and click on the < embed in theme > link, which opens an textarea with the code you have to add in it.

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

  1. 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' =&gt; '#111111',
    		'$color-2' =&gt; '#111111',
    		'$color-3' =&gt; '#111111',
    		'$color-4' =&gt; '#111111',
    		'$color-5' =&gt; '#111111',
    		'$color-6' =&gt; '#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;
     */
    
  2. 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.
  3. 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.screenshot-1

    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:

  1. Check if your WordPress version is 3.4 or higher and if your PHP version is 4.3.0 or higher.
  2. 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.
  3. 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.
  4. Try to deactivate all other plugins. If the problem disappears I have to know which plugins you use, to help.
  5. 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!

if (function_exists('add_image_size')) {
   add_image_size( 'dummy-1', 940, 450, true );
   add_image_size( 'dummy-2', 480, 0 );
}

global $_wp_additional_image_sizes;
foreach ( $_wp_additional_image_sizes as $name => $image_size ){
    update_option( $name."_size_w", $image_size['width'] );
    update_option( $name."_size_h", $image_size['height'] );
    update_option( $name."_crop", $image_size['crop'] );
}

add_filter( 'intermediate_image_sizes', 'regenerate_custom_image_sizes' );
function regenerate_custom_image_sizes( $sizes ){
    global $_wp_additional_image_sizes;
    foreach ( $_wp_additional_image_sizes as $name => $size ){
        $sizes[] = $name;
    }
    return $sizes;
}

WordPress custom image size crop: The snippets Story

If you are using custom image sizes in your WordPress theme you likely know the problem. Cropping, rotating or flipping an image via the WordPress image editor, works just on the original. After editing the image is not available in your custom sizes anymore, all you get in your theme is the edited version in original size.

I thought that there has to be a simple solution to this problem, because it is pretty basic after all. But a quick google search just got me not working code. Finally I found some code on pastebin that pointed me in the right direction.

Copy and paste the above code into your functions.php, adjust the image sizes and even your cropped images should be available in your custom sizes.

$menuParameters = array(
    'echo' => false,
    'items_wrap' => '<nav>%3$s</nav>',
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a><nav>' );

Result:

<nav>
    <a href="...">...</a>
    <a href="...">...</a>
    <a href="...">...</a>
</nav>

Source: Remove LI Elements From Output of wp_nav_menu

HTML5 wp_nav_menu: The Snippets Story

This is how you build a HTML5-navigation without lists in WordPress. I slightly changed the code I found on CSS-Tricks. Had to post this after todays reading of “Navigation in Lists: To Be or Not To Be” by Chris Coyier.

“A man must have a code” – Bunk in The Wire

I recently uploaded my first plugin to the WordPress Plugin Directory, wrote some plugins at work and most importantly used a lot of the plugins out there. So I thought the time has come, to step back and think of what I’ve learned about plugin development and I came up with my personal WordPress plugin best practices, my three golden rules:

WordPress plugin best practices no. 1: Do not try to improve the UI

First rule is simple, don’t touch the standard WordPress UI. There might be ways of doing things better, there might be nicer looking checkboxes and coloring up things would surely give the admin interface a friendlier touch. But, there are better ways to communicate your ideas than just making up new UI-styles in your plugin. I think one reason why WordPress is as big as it is, is consistent UI-design, don’t mess with it.

WordPress plugin best practices no. 2: Leave theme developers in controll

Whatever your plugin is doing, it is most probably impacting the current theme in some way. And that makes you the theme developers friend – or most hated enemy. Theme developers want to control all of their theme, HTML output, css-classes, javascripts, language and so on. They don’t want a plugin to inject uncontrollable bits of code into their theme.

So treat them as grown-ups and let them be responsible for their theme. Give them hooks, filters and functions to control the output, admin options to let them deactivate automatically enqueued scripts and styles, prepare for localization and what else you can think of.

WordPress plugin best practices no. 3: A plugin does what it has to do, nothing more

Keep your plugin as simple as possible, do not bloat it with functionality just because you can. Every plugin adds complexity to the admin interface and every plugin has to get along with other plugins. Therefore “as simple as possible” even means fewer bugs, less confused users and less support.

Ask yourself questions like these: Does my nice little Widget really needs an own stats section or global settings? Are custom database tables really necessary? Am I using the plugin API as much as possible? Is there really no way around these custom database queries? And so on …

Have these WordPress plugin best practices in mind, when writing your next plugin and I’m sure it will be a success.