- This topic has 26 replies, 6 voices, and was last updated 1 month, 2 weeks ago by
David.
-
AuthorPosts
-
November 4, 2019 at 9:19 am #1053022
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
November 4, 2019 at 5:58 pm #1053397Tom
Lead DeveloperLead DeveloperHi 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-developmentNovember 5, 2019 at 12:33 am #1053546Simone
Hi Tom,
that did the trick.
Thanks a lot.
Cheers,
Simone
November 5, 2019 at 9:12 am #1054073Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 11, 2020 at 1:04 am #1396621Nic
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.
August 11, 2020 at 4:14 am #1396865David
StaffCustomer SupportHi 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/August 11, 2020 at 4:18 am #1396872Nic
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
August 11, 2020 at 6:07 am #1396989David
StaffCustomer SupportAwesome – 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/August 18, 2020 at 5:37 am #1407583Nic
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.
August 18, 2020 at 10:25 am #1408134Tom
Lead DeveloperLead DeveloperVery 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-developmentMay 25, 2021 at 1:08 pm #1797948twarrior
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!
May 26, 2021 at 7:47 am #1799109David
StaffCustomer SupportHi there,
which part is not working ?
Are the colors loading in the editor but not the customizer?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 26, 2021 at 8:12 am #1799150twarrior
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
May 26, 2021 at 8:18 am #1799160twarrior
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; }
May 27, 2021 at 2:23 am #1799915David
StaffCustomer SupportGood news …. GP 3.1 update will have a new color module so this will no longer be required.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.