How to Add a Resizable Sidebar to the WordPress Customizer (Persistent Width + Drag Resize)

By default, the WordPress Customizer sidebar has a fixed width, which can make previewing responsive designs or large screens cumbersome.

If you’ve ever wanted to resize the Customizer sidebar — just like a draggable panel in a modern design app — you’re in luck.

In this guide, you’ll learn how to make your Customizer sidebar resizable, with persistent width, smooth transitions, and even keyboard shortcuts using PHP and jQuery.

Step 1: Add the Sidebar Resizer Script

Add this PHP snippet to your theme’s functions.php file or a dedicated inc/customizer-sidebar-resizer.php file:

<?php
function ultra_nutrition_customizer_sidebar_resizer() {
	?>
	<script>
		(function($) {
			'use strict';

			$(document).ready(function() {
				const MIN_WIDTH = 250;
				const MAX_WIDTH = 600;
				const DEFAULT_WIDTH = 300;
				const STORAGE_KEY = 'customizerSidebarWidth';

				let isResizing = false;
				let startX = 0;
				let startWidth = 0;

				const savedWidth = parseInt(localStorage.getItem(STORAGE_KEY)) || DEFAULT_WIDTH;

				const $sidebar = $('.wp-full-overlay-sidebar');
				const $overlay = $('.wp-full-overlay');
				const $main = $('.wp-full-overlay-main');

				$sidebar.append('<div class="customizer-resize-handle" title="Drag to resize sidebar"></div>');
				const $handle = $('.customizer-resize-handle');

				applySidebarWidth(savedWidth);

				$handle.on('mousedown', function(e) {
					e.preventDefault();
					isResizing = true;
					startX = e.clientX;
					startWidth = $sidebar.width();

					$('body').addClass('customizer-resizing');
					$main.css('pointer-events', 'none');
				});

				$(document).on('mousemove', function(e) {
					if (!isResizing) return;

					const deltaX = e.clientX - startX;
					let newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, startWidth + deltaX));

					applySidebarWidth(newWidth);
					$handle.attr("data-width", newWidth + "px");
				});

				$(document).on('mouseup', function() {
					if (!isResizing) return;

					isResizing = false;
					$('body').removeClass('customizer-resizing');
					$main.css('pointer-events', '');

					const finalWidth = $sidebar.width();
					localStorage.setItem(STORAGE_KEY, finalWidth);
				});

				$(document).on('click', '.collapse-sidebar', function() {
					setTimeout(function() {
						const currentWidth = parseInt(localStorage.getItem(STORAGE_KEY)) || DEFAULT_WIDTH;
						applySidebarWidth(currentWidth);
					}, 50);
				});

				$(window).on('resize', function() {
					if (!isResizing) {
						const currentWidth = parseInt(localStorage.getItem(STORAGE_KEY)) || DEFAULT_WIDTH;
						applySidebarWidth(currentWidth);
					}
				});

				function applySidebarWidth(width) {
					width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, width));
					$sidebar.css('width', width + 'px');
					$overlay.filter('.expanded').css('margin-left', width + 'px');
				}

				$handle.on('dblclick', function() {
					applySidebarWidth(DEFAULT_WIDTH);
					localStorage.setItem(STORAGE_KEY, DEFAULT_WIDTH);
				});
			});
		})(jQuery);
	</script>

	<style>
		.customizer-resize-handle {
			position: absolute;
			top: 0;
			right: -4px;
			width: 8px;
			height: 100%;
			cursor: col-resize;
			background: transparent;
			z-index: 99999;
			transition: all 0.2s ease;
		}
		.customizer-resize-handle:hover::before {
			opacity: 1;
		}
		.customizer-resize-handle::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 3px;
			height: 30px;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 2px;
			opacity: 0;
			transition: opacity 0.2s ease;
		}
		.customizer-resizing {
			cursor: col-resize !important;
			user-select: none !important;
		}
	</style>
	<?php
}
add_action( 'customize_controls_print_footer_scripts', 'ultra_nutrition_customizer_sidebar_resizer' );

Step 2: Improve User Experience (Optional Enhancements) Add Keyboard Shortcuts

To make resizing even smoother, allow users to use Ctrl + + / - / 0:

$(document).on("keydown", function (e) {
	if (!$sidebar.is(":hover")) return;

	if (e.ctrlKey || e.metaKey) {
		let currentWidth = $sidebar.width();

		if (e.key === "=" || e.key === "+") {
			applySidebarWidth(currentWidth + 10);
			localStorage.setItem(STORAGE_KEY, currentWidth + 10);
		} else if (e.key === "-") {
			applySidebarWidth(currentWidth - 10);
			localStorage.setItem(STORAGE_KEY, currentWidth - 10);
		} else if (e.key === "0") {
			applySidebarWidth(DEFAULT_WIDTH);
			localStorage.setItem(STORAGE_KEY, DEFAULT_WIDTH);
		}
	}
});

Step 3: Why This Improves the Customizer

This small addition enhances developer and user experience:

✅ Persistent width: Sidebar remembers the last size between sessions.
✅ Better usability: More room to view long Customizer labels or controls.
✅ Smooth animations: CSS transitions make resizing feel natural.
✅ Double-click reset: Quickly revert to default width.
✅ Accessibility-friendly: Optional keyboard shortcuts.

For reference, explore the WordPress Customizer Developer Handbook for other UI customizations.

Bonus: Add Tooltip Showing Width

You can add a small tooltip showing the current width while resizing:

$handle.attr("data-width", newWidth + "px");

Then style it:

.customizer-resize-handle::after {
	content: attr(data-width);
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 11px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.customizer-resizing .customizer-resize-handle::after {
	opacity: 1;
}

Relevant Resources

📘 WordPress Customizer API — Learn how the Customizer works.
🧩 jQuery API Documentation — Useful for DOM manipulation and event handling.
🧠 LocalStorage MDN Docs — For persisting sidebar width between sessions.
💻 CSS Transitions Guide (MDN) — For smooth animations.

Final Thoughts

This sidebar resizer adds a modern, user-friendly improvement to the WordPress Customizer.
Whether you’re developing client themes or working on your own framework, it’s a great touch that makes customization more intuitive — especially on large screens.

For even more Customizer enhancements, check out:

Quick Summary

Feature	Description
Resizable Sidebar	Drag or use keyboard shortcuts
Persistent Width	Saved via LocalStorage
UX Enhancements	Smooth transitions, reset option
Tech Stack	PHP + jQuery + CSS
Docs	WordPress Customizer Handbook