Add Your Own Shadow Presets to the Editor
Adds soft, medium and lifted shadow options to the editor's Shadow control for buttons, images, groups and columns, next to the theme's own shadows.
Opens WPIDE on
Code
// Shadow presets: slug => [name, CSS shadow].
$wpide_shadows = array(
'wpide-soft' => array( 'Soft', '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)' ),
'wpide-medium' => array( 'Medium', '0 6px 16px rgba(0,0,0,.10)' ),
'wpide-lifted' => array( 'Lifted', '0 18px 40px -12px rgba(0,0,0,.25)' ),
);
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_shadows ) {
$data = $theme_json->get_data();
$current = isset( $data['settings']['shadow']['presets'] ) ? (array) $data['settings']['shadow']['presets'] : 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_shadows as $slug => $shadow ) {
$by_slug[ $slug ] = array( 'slug' => $slug, 'name' => $shadow[0], 'shadow' => $shadow[1] );
}
return $theme_json->update_with( array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'settings' => array( 'shadow' => array( 'presets' => array_values( $by_slug ) ) ),
) );
} );Notes
Shadow controls need WordPress 6.5+ and blocks that support shadows.
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.