WordPress 4.8 Increases Customizer Sidebar Width and Improves Accessibility

Changeable Customizer Sidebar Width in WordPress 4.8

To all who were very unhappy with the narrow sidebar of the customizer, we have good news. WordPress 4.8 has increased the customizer sidebar width to 600 pixels from the previous 300px.

In an announcement by Weston Ruter, Customize component maintainer, it has been revealed that the Customizer sidebar in WordPress 4.8 has a variable width.

Ruter said, “Ticket #32296 was created to allow the sidebar pane to be user-resizable with a grabber just like the Dev Tools pane in Chrome can be resized.”

“After a lot of back and forth, the scope was reduced to remove the user-resizable aspect and to instead address a more fundamental issue that the sidebar is exceedingly and unnecessarily narrow on high-resolution displays.”

So, the sidebar has a minimum width of 300px and a maximum of 600px. What users see will depend on the width of their screen.

Despite being a minor change, the extra width is noticeable. WordPress theme and plugin developers who have built custom controls into the Customizer are highly encouraged to test WordPress 4.8 to ensure that they display properly on large screens.

“Custom controls in plugins and themes should utilize alternative approaches to doing layout than using pixel widths,” Ruter said.

“Use of percentage-based widths or flexbox will help ensure that controls will appear properly in larger displays, while also making controls future-compatible when the sidebar width could be user-resizable.”

Accessibility Improvements

Furthermore, the admin screens in WordPress 4.8 are more accessible.

In WordPress 4.3, the Accessibility Team restored H1 headings to the admin screens. This enabled the team to change the headings hierarchy in WordPress 4.4. Now, thanks to organizing the header text on pages, in WordPress 4.8 admin screens are more accessible.

Presently, the header on admin screens typically contains more than text. For instance, the Add New button on the Posts and Pages admin screens is included within the Posts and Pages header text. So, assistive technologies have difficulty to help users navigate different sections of a page.

However, changes in WordPress 4.8 turn the headings on admin screens into their own elements.

Previously, in older WordPress versions, the HTML looked like this:

Now, it looks like this:

Andrea Fercia, WordPress core committer and a member of the accessibility team, explains what theme and plugin authors need to know.

“If your plugin or theme follows the previous WordPress pattern of adding extraneous content to the main heading, please update your plugin or theme to make the heading cleaner,” Fercia said.

“All you need to do is move the extraneous content outside of the heading. WordPress 4.8 ships with new CSS rules to take care of the new markup structure and in most cases, no additional changes will be required.”

These improvements are three years in the making. After much discussion and delays, Fercia says the Accessibility team decided to handle the changes in smaller commits versus one large patch. This provided the necessary momentum to get the changes in core.


WP Tavern

Featured Image


Leave a Reply

Your email address will not be published. Required fields are marked *