Yes, the solution is a CSS adjustment specifically targeting the customizer's button elements in the WordPress Customizer panel. Here's what it does:
First, create a CSS file, e.g., customizer-fix.css
, and add your CSS code to it:
/* To remove extra spacing for customizer button */
#customize-theme-controls .accordion-section-title button.accordion-trigger {
max-height: fit-content;
}
This targets the button.accordion-trigger inside .accordion-section-title within the Customizer panel.
Property:
max-height: fit-content;
This ensures the button's height automatically adjusts to its content, effectively removing any unnecessary extra spacing.
function my_customizer_styles() {
// Check if we are in the Customizer
if (is_customize_preview()) {
wp_enqueue_style(
'customizer-fix-style',
get_template_directory_uri() . '/css/customizer-fix.css', // Update the path as needed
[],
'1.0.0'
);
}
}
add_action('admin_enqueue_scripts', 'my_customizer_styles');
is_customize_preview()
: Ensures the styles are only loaded in the Customizer preview.wp_enqueue_style
: Enqueues the customizer-fix.css
file.customizer-fix.css
is correct. If the file is in your theme directory, use get_template_directory_uri()
. If it's in a child theme, use get_stylesheet_directory_uri()
.Add the following PHP code to your theme's functions.php
file or a custom plugin:
Why Use This?
In WordPress Customizer, buttons in the section titles (accordion headers) often have a fixed or unnecessarily large height. Applying max-height: fit-content; adjusts the button's height to snugly fit its content, improving the appearance and reducing unnecessary padding or spacing.
When to Use:
When there are visual issues with extra spacing around Customizer accordion section buttons.
To streamline the layout of the WordPress Customizer for a more compact and visually appealing look.