Add theme support editor-color-palette

[Simone]

Hi there,

I’m trying to add theme support for the editor-color-palette feature of WordPress.

I added the following code to the functions.php file of my child theme. But in the backend the color selectors do not appear:

if ( ! function_exists( 'castiglioni_setup' ) ) :
	function castiglioni_setup() {
		add_theme_support(
			'editor-color-palette',
			array(
				array(
					'name'  => __( 'Scuro', 'castiglioni' ),
					'slug'  => 'dark',
					'color' => '#382c33',
				),
				array(
					'name'  => __( 'Chiaro', 'castiglioni' ),
					'slug'  => 'light',
					'color' => '#eeeeee',
				),
			)
		);
	}
endif;
add_action( 'after_setup_theme', 'castiglioni_setup' );

Thanks a lot for your help,

Simone

[Tom]

Hi there,

What if you do this?:

add_action( 'after_setup_theme', function() {
    add_theme_support(
        'editor-color-palette',
        array(
            array(
                'name'  => __( 'Scuro', 'castiglioni' ),
                'slug'  => 'dark',
                'color' => '#382c33',
            ),
            array(
                'name'  => __( 'Chiaro', 'castiglioni' ),
                'slug'  => 'light',
                'color' => '#eeeeee',
            ),
        )
    );
}, 50 );

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Simone]

Hi Tom,

that did the trick.

Thanks a lot.

Cheers,

Simone

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nic]

May i hook in this question? I inserted the code and color picker with color presets appear in common wordpress blocks but the colors do not appear in your customizer fields. why? seems in customizer the color picker works different.

View post on imgur.com

[David]

Hi there,

for the customizer colors you will need to set them here:

https://docs.generatepress.com/article/generate_default_color_palettes/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nic]

Nice! thank you david. here is my complete code to have predefined color palettes everywhere:

$theme_colors = array(
	array(
		'name'	=> __( 'Blue', 'bs' ),
		'slug'	=> 'blue',
		'color'	=> '#1e72bd',
	),
	array(
		'name'	=> __( 'Lightblue', 'bs' ),
		'slug'	=> 'lightblue',
		'color'	=> '#05bcbf',
	),
	array(
		'name'	=> __( 'Yellow', 'bs' ),
		'slug'	=> 'yellow',
		'color'	=> '#fcb900',
	),
	array(
		'name'	=> __( 'Textfarbe', 'bs' ),
		'slug'	=> 'textcolor',
		'color'	=> '#2b2b2b',
	),
	array(
		'name'	=> __( 'White', 'bs' ),
		'slug'	=> 'white',
		'color'	=> '#ffffff',
	),
	array(
		'name'	=> __( 'Light', 'bs' ),
		'slug'	=> 'light',
		'color'	=> '#dadada',
	)
);

function custom_setup(){
	global $theme_colors;
	add_theme_support( 'editor-color-palette', $theme_colors );

}
add_action( 'after_setup_theme', 'custom_setup' );

add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
function tu_custom_color_palettes() {
	global $theme_colors;
	return array_column($theme_colors,"color");
}

put this in your functions.php

[David]

Awesome – thanks for sharing it was somewhere on my to do list – so that saved us a job 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nic]

hi guys. made some additional code tweaks if you use SCSS for your theme (like me). normally you need to define theme colors in php and scss. so you have to write one array in functions.php (as already described here earlier) AND one scss-map in your scss file. i wrote a code to have only one place where you define your colors:
1. create _colors.scss (simplified example):

$theme-colors: (
    (
      "slug": "blue",
      "name": "Blau",
      "color": #104d83
    ),
    (
      "slug": "lightblue",
      "name": "Hellblau",
      "color": #05bcbf
    )
);

this file is where you define all your colors. Gutenberg and GeneratePress and WPStackable will use it.
2. import into your style.scss:

@import "colors";
@each $map in $theme-colors {

    .has-#{map-get($map, slug)}-background-color,
    .has-#{map-get($map, slug)}-background-color:before {
      background-color: map-get($map, color);
    }
    .has-#{map-get($map, slug)}-color {
      color: map-get($map, color);
    }
    .wp-block-button__link.has-#{map-get($map, slug)}-background-color:hover {
      background-color: lighten(map-get($map, color),10%);
    }

}

3. import it in your functions.php and make several explodes to match expected php format:

function get_data($url){

	// Get remote HTML file
	$response = wp_remote_get( $url );

	// Check for error
	if ( is_wp_error( $response ) ) {
		return false;
	}

	// Parse remote HTML file
	$html = wp_remote_retrieve_body( $response );

	// Check for error
	if ( is_wp_error( $html ) ) {
		return false;
	}

	return $html;
}
function theme_colors(){
	if($colors = get_data(get_stylesheet_directory_uri() . '/assets/_colors.scss')){
		$theme_colors = array();
		$colors = array_filter(array_map('trim', explode("(",$colors)));
		$i = 0;
		foreach($colors as $key=>$color){
			if($key==0 OR $key==1) continue;
			$color = explode(",",preg_replace("/\s+/", "", $color));
			foreach($color as $key2=>$onecolor){
				if(empty($onecolor)) continue;
				$onecolor = explode(":",$onecolor);
				if(isset($onecolor[0])){
					$final_key = str_replace('"','',$onecolor[0]);
					$final_value = $onecolor[1];
					if($final_key == "color"){
						$final_value = str_replace(array(")",";"),"",$final_value);
					}
					$theme_colors[$i][$final_key] = str_replace('"','',$final_value);
				}
			}
			$i++;
		}
		return $theme_colors;
	}
	return false;
}
function custom_setup(){
	if(theme_colors())
	    add_theme_support( 'editor-color-palette', theme_colors() );
}
add_action( 'after_setup_theme', 'custom_setup' );
add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
function tu_custom_color_palettes() {
	if(theme_colors())
	    return array_column(theme_colors(),"color");
	return false;
}

maybe someone finds a sleeker method for part 3 but for me its works like a charm.

[Tom]

Very cool, thanks for sharing that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts