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.
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.
