How To Implement Color Picker For Your WordPress Theme
A momentous trendsetter on the web, WordPress has altered the way we build websites, and it has altered it for good.
Thanks to its easy and clutter free interface, WordPress has anchored even the non-techies to develop websites of highest functional order. Setting up a website on WordPress is a straightforward task that even a non-coder can accomplish with ease and effectiveness. The backend of this CMS comprises of tools that are uncomplicated and highly accessible.
Now, while WordPress has a truckload of built-in options, for those website owners who wish to branch out of the implanted features and instead integrate the ones via customizations, there is plenty of room for them to do so.
Picking different colors for the display of different sections of the WordPress website is among those highly pursued customizations. Having appropriate colors for your website not only enhances the visual appeal, but also helps in proper segregation of your site's sections. So be it contrasting colors for header and footer, or custom background colors for different posts, you have the wherewithal to deliver it all. The color picker tool, which made its foray with the WordPress version 3.5, is arguably the best tool you can choose for your website for this endeavor. It is an all-inclusive tool, made to hand you with amazing color customization capability of your website.
In this post, I will put forth an easy-to-follow method to implement color picker with your WordPress website, which you can use anyway you want.
Creating Custom MetaBox With Color Picker
Let's kickstart our endeavor by implementing the color picker in a metabox, and for the same, here are few lines of code that you will need to add in the functions.php file of your WordPress theme. This code will inject a metabox in your WordPress post screen, along with the color picker field:
add_meta_box('wdm_sectionid', 'Post Background', 'wdm_meta_box_callback', 'post');
}
add_action( 'add_meta_boxes', 'wdm_add_meta_box' );
function wdm_meta_box_callback( $post ) {
wp_nonce_field( 'wdm_meta_box', 'wdm_meta_box_nonce' );
$color = get_post_meta( $post->ID, 'post_bg', true );
<div class="custom_meta_box">
<p>
<label>Select Post Background Color: </label>
<input class="color-field" type="text" name="post_bg" value="<?php echo '#'.$color; ?>"/>
</p>
<div class="clear"></div>
</div>
<?php
}
function wdm_save_meta_box_data( $post_id ) {
if ( !isset( $_POST['wdm_meta_box_nonce'] ) ) {
return;
}
if ( !wp_verify_nonce( $_POST['wdm_meta_box_nonce'], 'wdm_meta_box' ) ) {
return;
}
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
if ( !current_user_can( 'edit_post', $post_id ) ) {
return;
}
$post_bg = ( isset( $_POST['post_bg'] ) ? sanitize_html_class( $_POST['post_bg'] ) : '' );
update_post_meta( $post_id, 'post_bg', $post_bg );
}
add_action( 'save_post', 'wdm_save_meta_box_data' );
Alright, how much of the code from above resonates? I wager that anyone from a non-coding background will be staring blankly into the code and scratching their head hard! Here, let me explain the code for you:
The first step: Register Custom Metabox
function wdm_add_meta_box() {
add_meta_box('wdm_sectionid', 'Post Background', 'wdm_meta_box_callback', 'post');
}
Using the default WordPress function, add_meta_box(), the above code registers the metabox by using certain parameters to intimate WordPress about the meta box:
- wdm_sectionid represents the HTML 'id' attribute of the edit screen
- Post Background represents the title of the edit screen
- wdm_meta_box_callback is responsible for printing out the HTML for the edit screen.
Post is essentially an argument dictates the appearance of metabox on the post editor screen. In the event the metabox has to be made to appear on the page screen, you can replace 'post' with 'page'.
The second step: Creating Custom Metabox
function wdm_meta_box_callback( $post ) {
wp_nonce_field( 'wdm_meta_box', 'wdm_meta_box_nonce' );
$color = get_post_meta( $post->ID, 'post_bg', true );
<div class="custom_meta_box">
<p>
<label>Select Post Background Color: </label>
<input class="color-field" type="text" name="post_bg" value="<?php echo '#'.$color; ?>"/>
</p>
<div class="clear"></div>
</div>
<?php
}
The above code creates a custom function wdm_meta_box_callback( $post ). this function anchors the generation of metabox output. The add_action( 'add_meta_boxes', 'wdm_add_meta_box' ) function is a WordPress action hook and is responsible for instructing WordPress to add the metabox.
The third step: Saving Metabox
Here is the code to save our metabox:
function wdm_save_meta_box_data( $post_id ) {
if ( !isset( $_POST['wdm_meta_box_nonce'] ) ) {
return;
}
if ( !wp_verify_nonce( $_POST['wdm_meta_box_nonce'], 'wdm_meta_box' ) ) {
return;
}
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
if ( !current_user_can( 'edit_post', $post_id ) ) {
return;
}
$post_bg = ( isset( $_POST['post_bg'] ) ? sanitize_html_class( $_POST['post_bg'] ) : '' );
update_post_meta( $post_id, 'post_bg', $post_bg );
}
add_action( 'save_post', 'wdm_save_meta_box_data' );
Now comes into play the wdm_save_meta_box_data( $post_id ) function. We use the function to save our metabox value to the database of our WordPress setup. During its operation, it makes use of 'post id' in order to save the metabox field value on the respective post meta session in database.
add_action( 'save_post', 'wdm_save_meta_box_data' ): It is a hook used to instruct WordPress for saving the post with metavalue.
After gaining insight into how the code performs its job, let's get down to seeing some action. The complete code we put forth will generate the output, “Post background color”, as you can see in the below screenshot.
How to Use Color Picker
Even though we have created the metabox with the color picker is created, it's still not possible for us to use the color picker. For being able to make use of it, add the following code to the functions file of your theme:
function wpse_80236_Colorpicker(){
wp_enqueue_style( 'wp-color-picker');
//
wp_enqueue_script( 'wp-color-picker');
}
add_action('admin_enqueue_scripts', 'wpse_80236_Colorpicker');
Once you have added the above code, the following code has to be put inside the wdm_meta_box_callback( $post ) function, which will generate the metabox.
<script>
(function( $ ) {
// Add Color Picker to all inputs that have 'color-field' class
$(function() {
$('.color-field').wpColorPicker();
});
})( jQuery );
</script>
Upon the implementation of the script, the “Color Picker” tool will appear in the admin panel of your WordPress theme.
There may be occasions when you would want to fetch color code ids. For the same, add the following line of code to your functions.php file of your theme.
$post_background = get_post_meta( get_the_ID(), 'post_bg', true ); echo $post_background // here is your color code
That's all you need to do. Following the afore-mentioned instructions will add the color picker to the metabox in your website's admin panel. Use it to let your website flaunt some style!
