Color picker for posts and pages

I have found the solution on Denis Žoljom’s post 1) – I have added the metabox like this add_action( ‘add_meta_boxes’, ‘mytheme_add_meta_box’ ); if ( ! function_exists( ‘mytheme_add_meta_box’ ) ) { function mytheme_add_meta_box(){ add_meta_box( ‘header-page-metabox-options’, esc_html__(‘Header Color’, ‘mytheme’ ), ‘mytheme_header_meta_box’, ‘page’, ‘side’, ‘low’); } } 2) – enqueue the color picker style and script add_action( ‘admin_enqueue_scripts’, … Read more

Custom color for each category name

To achieve this Follow these easy step: Add field for color To Add/Edit category Screen using hooks category_add_form_fields and category_edit_form_fields add_action(‘category_add_form_fields’, ‘my_category_fields’, 10, 2); add_action(‘category_edit_form_fields’, ‘my_category_fields’, 10, 2); function my_category_fields($term) { $cat_color = get_term_meta($term->term_id, ‘cat_color’, true); if($cat_color == ”) $cat_color=”#000000″; // Default black color ?> <tr class=”form-field”> <th valign=”top” scope=”row”><label for=”cat_color”><?php _e(‘Color code’); ?></label></th> <td> … Read more

use add_action(‘wp_head’) in a widget for generating dynamic CSS styles

Once the widgets are being evaluated, the head of your site is completed, so you cannot use wp_head anymore. Adding <style> tags is an option, but will indeed generate a warning from the validator. Using the customizer is possibly confusing, because it is supposed to be about theme looks in general, not about specific widgets. … Read more

How do I change Twenty Nineteen’s primary color without using the color slider in the theme customizer?

That’s indeed an interesting question. Looking at the following issues – both closed as won’t fix – I’d reason that replacing this color slider with a color picker is not recommended: https://github.com/WordPress/twentynineteen/issues/613 https://core.trac.wordpress.org/ticket/45619 Thing is, that Twenty Nineteen calculates the colors that will be displayed in the frontend from hue, saturation and lightness (HSL). And … Read more

How to Use WordPress Color Picker API in Custom Post Type Metabox

I’ve created a metabox once with color picker. You need to include color picker style and script in your admin_enqueue_scripts hook, and then initialize it with $(‘.color-picker’).wpColorPicker(); From my gist: <?php add_action( ‘admin_enqueue_scripts’, ‘mytheme_backend_scripts’); if ( ! function_exists( ‘mytheme_backend_scripts’ ) ){ function mytheme_backend_scripts($hook) { wp_enqueue_media(); wp_enqueue_style( ‘wp-color-picker’); wp_enqueue_script( ‘wp-color-picker’); } } add_action( ‘add_meta_boxes’, ‘mytheme_add_meta_box’ ); … Read more

Change background color with a dominant from picture

You can use a jQuery plugin called Color Thief. Files needed: jquery.js (is included in WordPress) quantize.js (download from color-thief github page) color-thief.js (download from color-thief github page) WordPress setup: Open functions.php (located in your theme’s folder) and add the code below to load the files in WordPress. In this case I placed all files … Read more

How to add color picker to widgets?

Here is the code I used for one of my projects: <?php function load_color_picker_style() { wp_enqueue_style( ‘wp-color-picker’ ); } add_action(‘admin_print_scripts-widgets.php’, ‘load_color_picker_script’); add_action(‘admin_print_styles-widgets.php’, ‘load_color_picker_style’); ?> ///Javascript jQuery(document).ready(function($){ function updateColorPickers(){ $(‘#widgets-right .wp-color-picker’).each(function(){ $(this).wpColorPicker({ // you can declare a default color here, // or in the data-default-color attribute on the input defaultColor: false, // a callback to fire … Read more

Adding Colorpicker Field To Category

This has been updated for WordPress 4+ with the introduction of Term Meta. The code is heavily commented. :: My Functions – functions.php :: The below function is to display the colorpicker on the “Add New Category” screen: /** * Add new colorpicker field to “Add new Category” screen * – https://developer.wordpress.org/reference/hooks/taxonomy_add_form_fields/ * * @param … Read more

How to refresh Theme Customizer after change color inside wpColorPicker?

Try using the existing WordPress function to modify color palette like: function my_mce4_options( $init ) { $default_colours=” “000000”, “Black”, “993300”, “Burnt orange”, “333300”, “Dark olive”, “003300”, “Dark green”, “003366”, “Dark azure”, “000080”, “Navy Blue”, “333399”, “Indigo”, “333333”, “Very dark gray”, “800000”, “Maroon”, “FF6600”, “Orange”, “808000”, “Olive”, “008000”, “Green”, “008080”, “Teal”, “0000FF”, “Blue”, “666699”, “Grayish blue”, … Read more