2

I want to increase the width of the expanded sidebar in the WP customizer.

The relevant customizer markup:

<div class="wp-full-overlay expanded preview-desktop">
  <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
    <div id="customize-preview" class="wp-full-overlay-main">

The CSS:

.wp-full-overlay.expanded {
    margin-left: 300px;
}

.wp-full-overlay-sidebar {
    width: 300px;
}
.wp-full-overlay-main {
    right: auto;
    width: 100%;

I tried it with this CSS in my childtheme´s style.css

.wp-full-overlay.expanded {
    margin-left: 500px !important;
}
#customize-controls.wp-full-overlay-sidebar {
    width: 500px !important;
}

and these lines of JS in an enqueued scripts.js

jQuery(document).ready(function( $ ) {
$(".wp-full-overlay.expanded").css("marginLeft", "500px");
$(".wp-full-overlay-sidebar").css("width", "500px");
});

but it does not work.

1

Enqueue a style sheet to your admin or dashboard with admin_enqueue_scripts hook like below-

add_action( 'admin_enqueue_scripts', 'the_dramatist_admin_styles' );
function the_dramatist_admin_styles() {
    wp_enqueue_style( 'admin-css-override', get_template_directory_uri() . '/your-admin-css-file.css', false );
} 

And put your admin css code there. As your code above the inside of your-admin-css-file.css will look kinda like-

.wp-full-overlay.expanded {
    margin-left: 500px !important;
}
#customize-controls.wp-full-overlay-sidebar {
    width: 500px !important;
}

And it'll work.

1
0

Making the customize sidebar a higher percentage of the screen

The answer by CodeMascot works, but I figured I'd also submit a percentage-based answer, since from what I can tell the current system is mainly maxed-out by percentage of the screen, and it seems like an elegant way to go so that you are less likely to have problems if you use a smaller screen.

/*Wider customizer sidebar based on percentage*/
/*It will fall back to min-width: 300px*/
.wp-full-overlay-sidebar {
    width: 22%;
}
/*Wider margin on preview to make space for sidebar (match theme)*/
.wp-full-overlay.expanded {
    margin-left: 22%;
}

/*Below a certain size we revert to 300px because it's the min-width*/
/*Calculate this number as 300/% i.e. 300/.22=1363*/
@media (max-width: 1363px) {
    .wp-full-overlay.expanded {
        margin-left: 300px;
    }
}

For me this solved my problem after I tuned the percentage to reflect the widest size the site I'm working on takes up on the screen I'm using. For editing CSS I would have made it even higher if I was working on a site with a smaller max width.

For bonus points, here's how to enqueue the CSS file if it lives in a plugin rather than the theme

(if you have it in your theme, see CodeMascot's answer above):

function jer_admin_styles() {
    wp_enqueue_style( 'admin-css-override', plugins_url( "jer-admin.css", __FILE__ ) , false );
} 
add_action( 'admin_enqueue_scripts', 'jer_admin_styles' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.