correct way of adding a custom color pallete from child theme

  • Resolved klewis

    (@blackawxs)


    3 years ago

    In regards to twenty twenty one, from our child theme, what is the correct way to add additional colors to the Gutenberg color palette. I tried the following, but no change so far. What am I doing wrong…

    function _ag_setup_theme_supported_features()
{

    add_theme_support('editor-color-palette', array(
        array(
            'name'  => esc_attr__('strong magenta', 'themeLangDomain'),
            'slug'  => 'strong-magenta',
            'color' => '#a156b4',
        ),
        array(
            'name' => esc_attr__('white', '_ac'),
            'slug'  => 'white',
            'color'    => '#ffffff',
        ),
        array(
            'name' => esc_attr__('floralwhite', '_ac'),
            'slug'  => 'floralwhite',
            'color'    => '#fffaf0',
        ),
        array(
            'name' => esc_attr__('whitesmoke', '_ac'),
            'slug'  => 'whitesmoke',
            'color'    => '#f5f5f5',
        ),
        array(
            'name' => esc_attr__('blanchedalmond', '_ac'),
            'slug'  => 'blanchedalmond',
            'color'    => '#ffebcd',
        ),
        array(
            'name' => esc_attr__('bisque', '_ac'),
            'slug'  => 'bisque',
            'color'    => '#ffe4c4',
        ),
        array(
            'name' => esc_attr__('palrod', '_ac'),
            'slug'  => 'palrod',
            'color'    => '#eee8aa',
        ),
        array(
            'name' => esc_attr__('khaki', '_ac'),
            'slug'  => 'khaki',
            'color'    => '#f0e68c',
        ),
        array(
            'name' => esc_attr__('burlywood', '_ac'),
            'slug'  => 'burlywood',
            'color'    => '#deb887',
        ),
        array(
            'name' => esc_attr__('tan', '_ac'),
            'slug'  => 'tan',
            'color'    => '#d2b48c',
        ),
        array(
            'name' => esc_attr__('darksalmon', '_ac'),
            'slug'  => 'darksalmon',
            'color'    => '#e9967a',
        ),
        array(
            'name' => esc_attr__('sandybrown', '_ac'),
            'slug'  => 'sandybrown',
            'color'    => '#f4a460',
        ),
        array(
            'name' => esc_attr__('gold', '_ac'),
            'slug'  => 'gold',
            'color'    => '#daa520',
        ),
        array(
            'name' => esc_attr__('peru', '_ac'),
            'slug'  => 'peru',
            'color'    => '#cd853f',
        ),
        array(
            'name' => esc_attr__('coco', '_ac'),
            'slug'  => 'coco',
            'color'    => '#d2691e',
        ),
        array(
            'name' => esc_attr__('sienna', '_ac'),
            'slug'  => 'sienna',
            'color'    => '#a0522d',
        ),
        array(
            'name' => esc_attr__('saddlebrown', '_ac'),
            'slug'  => 'saddlebrown',
            'color'    => '#8b4513',
        ),
        array(
            'name' => esc_attr__('red', '_ac'),
            'slug'  => 'red',
            'color'    => '#DA2A1B',
        ),
        array(
            'name' => esc_attr__('firebrick', '_ac'),
            'slug'  => 'firebrick',
            'color'    => '#b22222',
        ),
        array(
            'name' => esc_attr__('brown', '_ac'),
            'slug'  => 'brown',
            'color'    => '#a52a2a',
        ),
        array(
            'name' => esc_attr__('darkred', '_ac'),
            'slug'  => 'darkred',
            'color'    => '#8b0000',
        ),
        array(
            'name' => esc_attr__('maroon', '_ac'),
            'slug'  => 'maroon',
            'color'    => '#800000',
        ),
        array(
            'name' => esc_attr__('olive', '_ac'),
            'slug'  => 'olive',
            'color'    => '#556b2f',
        ),
        array(
            'name' => esc_attr__('darkslategray', '_ac'),
            'slug'  => 'darkslategray',
            'color'    => '#2f4f4f',
        ),
        array(
            'name' => esc_attr__('thristle', '_ac'),
            'slug'  => 'thristle',
            'color'    => '#d8bfd8',
        ),
        array(
            'name' => esc_attr__('grey-light', '_ac'),
            'slug'  => 'grey-light',
            'color'    => '#ccc',
        ),
        array(
            'name' => esc_attr__('grey', '_ac'),
            'slug'  => 'grey',
            'color'    => '#808080',
        ),
        array(
            'name' => esc_attr__('grey-dark', '_ac'),
            'slug'  => 'grey-dark',
            'color'    => '#333',
        ),
        array(
            'name'   => esc_attr__('black', '_ac'),
            'slug'    => 'black',
            'color'    => '#222',
        )
    ));
}

add_action('after_setup_theme', '_ag_setup_theme_supported_features');
Viewing 1 replies (of 1 total)
  • Thread Starter klewis

    (@blackawxs)

    Just in case anyone is in this same situation, with having WordPress 5.9+ and TwentyTwentyOne Version: 1.5 as your parent theme, from your child theme can you create a theme.json file in its root directory and apply the following code to it…

    {
    "version": 1,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Magenta",
                    "slug": "magenta",
                    "color": "#ff00ff"
                },
                {
                    "name": "Cyan",
                    "slug": "cyan",
                    "color": "#00ffff"
                }
            ]
        }
    }
}

    Saving this code from your child theme will allow you you to see your custom color pallet not only when you edit pages, but also when you edit posts and custom post types.

    • This reply was modified 3 years ago by klewis.
Viewing 1 replies (of 1 total)
  • The topic ‘correct way of adding a custom color pallete from child theme’ is closed to new replies.