Add Brand Duotone Filters for Images
Adds duotone image filters in your brand colors to the Image and Cover block toolbars, for a consistent photo style across the site.
Opens WPIDE on
Code
// Duotone presets: slug => [name, dark color, light color].
$wpide_duotones = array(
'wpide-navy-cream' => array( 'Navy and cream', '#1e293b', '#fef3c7' ),
'wpide-teal-white' => array( 'Teal and white', '#134e4a', '#f0fdfa' ),
);
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_duotones ) {
$data = $theme_json->get_data();
$current = isset( $data['settings']['color']['duotone'] ) ? (array) $data['settings']['color']['duotone'] : array();
$current = isset( $current['theme'] ) ? (array) $current['theme'] : $current;
$by_slug = array();
foreach ( $current as $preset ) {
if ( isset( $preset['slug'] ) ) {
$by_slug[ $preset['slug'] ] = $preset;
}
}
foreach ( $wpide_duotones as $slug => $duotone ) {
$by_slug[ $slug ] = array( 'slug' => $slug, 'name' => $duotone[0], 'colors' => array( $duotone[1], $duotone[2] ) );
}
return $theme_json->update_with( array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'settings' => array( 'color' => array( 'duotone' => array_values( $by_slug ) ) ),
) );
} );Notes
Each filter maps shadows to the first color and highlights to the second.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.