Skip to content

Instantly share code, notes, and snippets.

@rmorse
Last active January 7, 2024 02:58
Show Gist options
  • Save rmorse/3b3d410a4df6c8c2c58a18283c7025c4 to your computer and use it in GitHub Desktop.
Save rmorse/3b3d410a4df6c8c2c58a18283c7025c4 to your computer and use it in GitHub Desktop.
Add custom colors to the WordPress editor via `add_theme_support`
<?php
/**
* Add custom colors to the WordPress editor via `add_theme_support`
*
* This takes the existing colours (if your theme or a plugin has set any)
* and combines them with a new set of colours defined in the function
*
* New colours should be visible in the various color pickers found in
* WordPress admin
*/
function add_custom_colors_to_palette() {
// Get the existing colors if the theme supports it
$existing_colors = get_theme_support( 'editor-color-palette' );
// Set custom colors
$additional_colors = array(
array(
'name' => esc_html__( 'Custom Color 1', 'twentytwentyone' ),
'slug' => 'custom-color-1',
'color' => '#aa5555',
),
array(
'name' => esc_html__( 'Custom Color 2', 'twentytwentyone' ),
'slug' => 'custom-color-2',
'color' => '#55aa55',
),
array(
'name' => esc_html__( 'Custom Color 3', 'twentytwentyone' ),
'slug' => 'custom-color-3',
'color' => '#5555aa',
)
);
// Merge if there are existing colors
if ( isset( $existing_colors[0] ) ) {
$all_colors = array_merge( $existing_colors[0], $additional_colors );
} else {
$all_colors = $additional_colors;
}
// Set the colors again
add_theme_support(
'editor-color-palette',
$all_colors
);
}
// Change priority to 20 to hook in later
add_action( 'after_setup_theme', 'add_custom_colors_to_palette', 20 );
@dwtompkins
Copy link

Adding priority 20 was the clincher. I was panicking thinking that add_theme_support( 'editor-color-palette', $did_not_take_a_variable_or_callback ); Glad that it does! Thanks for this 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment