I recently collaborated on a project with Brian Casel, another WordPress developer, who wanted options for selecting preset color palettes in the Options Framework.
The idea is that a user could choose a color palette (light,dark,vibrant) from a select box or image radio button- and all the color pickers would fill with those presets. The user could then override any of those preset colors if they choose.
View on Screenr: http://www.screenr.com/7sys
Load the Javascript
In order to have an option like this you actually don’t have to hack the Options Framework plugin at all, you just need to hook in a little javascript for the options page to use.
If you want to display the code inline, you can use this hook:
add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');
function optionsframework_custom_scripts() { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
// Javascript goes here
});
</script>
<?php
}
If you have a lot of scripts, it might be better to put them all in a single javascript file and enqueue that:
if ( is_admin() ) {
// Load additional css and js for image uploads on the Options Framework page
$of_page= 'appearance_page_options-framework';
add_action( "admin_print_scripts-$of_page", 'optionsframework_custom_js', 0 );
}
function optionsframework_custom_js () {
wp_register_script( 'optionsframework_custom_js', get_bloginfo('template_directory') .'/js/optionsframework_custom.js', array( 'jquery') );
wp_enqueue_script( 'optionsframework_custom_js' );
}
If you are using theme version rather than the plugin version, you can just add the new javascript to options-custom.js.
The Options
Let’s keep it simple. We’ll create a new option called “Color Palettes”, which will be in a drop down select box. Then we’ll have two color pickers called “Primary Color”, “Secondary Color”:
$base_color_scheme_array = array("dark" => "Dark","light" => "Light","vibrant" => "Vibrant");
$options[] = array(
"name" => "Design",
"type" => "heading");
$options[] = array(
"name" => "Base Color Scheme",
"desc" => "Choose a base color scheme.",
"id" => "base_color_scheme",
"std" => "fresh",
"type" => "select",
"class" => "mini", //mini, tiny, small
"options" => $base_color_scheme_array);
$options[] = array( "name" => "Primary Color",
"desc" => "The primary color for the site.",
"id" => "primary_color",
"std" => "#000000",
"type" => "color" );
$options[] = array(
"name" => "Secondary Color",
"desc" => "The secondary color for the site.",
"id" => "secondary_color",
"std" => "#555555",
"type" => "color");
Javascript
This javascript code will be triggered when someone changes the value of the select box base_color_scheme. It will go through and update our two color pickers with the new color.
jQuery(document).ready(function($) {
// Color Scheme Options - These array names should match
// the values in base_color_scheme of options.php
// Dark Color Options
var dark = new Array();
dark['primary_color']='#e4ff31';
dark['secondary_color']='#e4ff31';
// Light Color Options
var light = new Array();
light['primary_color']='#6cff00';
light['secondary_color']='#6cff00';
// Vibrant Color Options
var vibrant = new Array();
vibrant['primary_color']='#065667';
vibrant['secondary_color']='#065667';
// When the select box #base_color_scheme changes
// it checks which value was selected and calls of_update_color
$('#base_color_scheme').change(function() {
colorscheme = $(this).val();
if (colorscheme == 'dark') { colorscheme = dark; }
if (colorscheme == 'light') { colorscheme = light; }
if (colorscheme == 'vibrant') { colorscheme = vibrant; }
for (id in colorscheme) {
of_update_color(id,colorscheme[id]);
}
});
// This does the heavy lifting of updating all the colorpickers and text
function of_update_color(id,hex) {
$('#' + id).wpColorPicker('color',hex);
}
});
That’s It
For more information about the Options Framework:
Restaurant Engine
If you’re interested in the work Brian Casel is doing on this, check out restaurantengine.com.
