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.

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.

• theme-development
• theme-customizer

2 Answers 2

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.

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' );