Archived topic
Add theme support editor-color-palette
26 replies · Started by Simone on November 4, 2019
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
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 :)
Hi Tom,
that did the trick.
Thanks a lot.
Cheers,
Simone
You're welcome :)
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.
Hi there,
for the customizer colors you will need to set them here:
https://docs.generatepress.com/article/generate_default_color_palettes/
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
Awesome - thanks for sharing it was somewhere on my to do list - so that saved us a job :)
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.
Very cool, thanks for sharing that!
sorry, but this code is not working for me.
$theme_colors = array(
array(
'name' => __( 'Blue', 'bs' ),
'slug' => 'blue',
'color' => '#aff',
),
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");
}at least, in the Generatepress Customizer, it changes the palette with other colours, but not with the defined colours!
Hi there,
which part is not working ?
Are the colors loading in the editor but not the customizer?
Hello,
I have tried again, but with this code (i use Code Snippets), the palette of color is not showing, either in GP customizer>colors, either in Gutenberg blocks
this code works for me (but I need to insert two times the colors):
add_action( 'after_setup_theme', function() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'ttt' ),
'slug' => 'ttt',
'color' => '#212121',
),
array(
'name' => __( 'rrr' ),
'slug' => 'rrr',
'color' => '#994141',
),
array(
'name' => __( 'ddd' ),
'slug' => 'ddd',
'color' => '#020202',
),
array(
'name' => __( 'zzz' ),
'slug' => 'zzz',
'color' => '#229784',
),
array(
'name' => __( 'yyy' ),
'slug' => 'yyy',
'color' => '#3f3f3f',
),
array(
'name' => __( 'xxx' ),
'slug' => 'xxx',
'color' => '#b7b6b5',
),
) );
} );
/* must be 8 colors */
add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
function tu_custom_color_palettes( $palettes ) {
$palettes = array(
'#000000',
'#FFFFFF',
'#212121',
'#020202',
'#229784',
'#1e72bd',
'#3f3f3f',
'#b7b6b5',
);
return $palettes;
}Good news .... GP 3.1 update will have a new color module so this will no longer be required.
