How to Set Up Your Own Editor Color Palette in Genesis

The editor color palette in your WordPress theme can have a big impact on the overall look and feel of your website. With just a few lines of code, you can customize the colors available in the editor to match your brand or personal style. In this article, we’ll show you how to set up your own custom editor color palette in the Genesis theme framework.

To get started, open your functions.php file and add the following code:

add_action( 'after_setup_theme', 'wp_daily_theme_setup' );
function wp_daily_theme_setup() {
	// Disable Custom Colors
	add_theme_support( 'disable-custom-colors' );
	
	// Editor Color Palette
	add_theme_support( 'editor-color-palette', array(
		array(
			'name'  => __( 'White', 'genesis-sample' ),
			'slug'  => 'white',
			'color'	=> '#ffffff',
		),
		array(
			'name'  => __( 'Black', 'genesis-sample' ),
			'slug'  => 'black',
			'color'	=> '#000000',
		),
		array(
			'name'  => __( 'Grey', 'genesis-sample' ),
			'slug'  => 'grey',
			'color'	=> '#BBB2A6',
		),
		array(
			'name'  => __( 'Grey Dark', 'genesis-sample' ),
			'slug'  => 'grey-dark',
			'color'	=> '#343738',
		),
	) );
}

Let’s take a closer look at the code. The add_action() function is used to hook into the after_setup_theme action, which fires after the theme is loaded. The wp_daily_theme_setup() function is then called, which sets up the custom color palette.

First, we disable the default custom colors by calling add_theme_support( 'disable-custom-colors' );. This ensures that only the colors we define in the color palette will be available.

Next, we define the custom color palette by calling add_theme_support( 'editor-color-palette', array( ... ) );. In the array, we define each color as an array with a name, slug, and color value. The name is the display name of the color, the slug is a unique identifier for the color, and the color is the hex code for the color.

You can add as many colors as you like to the array, and you can customize the colors to match your brand or personal style.

Once you’ve added the code to your functions.php file, save the file and refresh your WordPress site. You should now see the custom color palette in the editor.

In conclusion, customizing the editor color palette in your Genesis WordPress theme is a great way to create a sleek and professional look for your website. With just a few lines of code, you can set up your own custom color palette and make your website stand out. Follow our step-by-step guide to get started today!