1

The Issue With Customise:

Wouldn't it be nice if WordPress made the Customise area shown in the below image resizable?

As it is at the moment, it can be a little tricky working in a squashed sidebar.

Because of this I usually do all my CSS in an external editor then copy it into the sidebar area.

It's Under Discussion at WordPress

The WordPress devs were looking at improving the Customizer UI, which you can see here. This would solve the issue, but until then...

This Question is Not About CSS

This question isn't about why I've used the Customizer for CSS - I have my reasons - That's another topic altogether.


The Question:

What is the best way of customising this WordPress area to make it expandable or wider without the need for a plugin? This would make it easier to work with all customizations, not just CSS.

*This change must be part of the child theme to prevent being overwritten by updates.


enter image description here

enter image description here

1

You can expand the WordPress customize area without plugins by applying a simple line of CSS.

.wp-full-overlay-sidebar {
   width: 30% !important; /* The width of the customize area */
}
.wp-full-overlay.expanded {
  margin-left: 30%; /* Here would be the width as same as the customize window width you set */
}

Hook the CSS to admin_enqueue_scripts() function to load it in the WordPress customize area. The CSS file enqueueing example is given below-

add_action('admin_enqueue_scripts', function() {
   wp_enqueue_style('your-prefix-admin', get_template_directory_uri().'/assets/css/admin.css');
});

Note: This code should put into your theme's functions.php file. You should create a file named admin.css in the assets/css directory (create the directory if it doesn't exist) in your theme.

For child theme, you should the get_stylesheet_directory_uri() function instead of the get_template_directory_uri() function.

  • 1
    Hi @InvariantChange, Thanks for your suggestions. I have updated the answer according to your feedback. – Eh Jewel Aug 28 '18 at 11:05
  • 1
    Happy to help! Please click the check mark next to this answer to close the question. Thank you :) – Eh Jewel Aug 29 '18 at 6:37
  • 1
    You should create a file named admin.css in the assets/css directory (create the directory if it doesn't exist) in your child theme. – Eh Jewel Aug 29 '18 at 9:35
  • 1
    You should create a separate CSS file for the admin area. The style.css file will load on the frontend and the admin.css file will load on the backend. – Eh Jewel Aug 29 '18 at 9:40
  • 1
    I had forgotten that for child themes, you should be using the get_stylesheet_directory_uri() the function which retrieves the stylesheet directory path, which is used by child themes. So, you have to replace the get_template_directory_uri() function with the get_stylesheet_directory_uri() function in this case. – Eh Jewel Aug 29 '18 at 9:59
0

I would say that it is generally unwise to do major CSS changes via the customizer. In addition to the limited space it is hard to locate specific CSS rule you might need to modify and you have no history of when and why you have made the change in the first place.

You should add CSS rules in your theme, which whether it is a main or a child theme should be under GIT.

Yes, it will take slightly more time working like that, but you will recover all of your investment the first time you will need to understand why you have a specific rule.

  • Thanks for your time answering the question. I was going to address the CSS in the sidebar not always being the best option (debatable) in the question but wanted to keep it specific. I usually do my CSS in a child theme. However, there are times I do do it in the sidebar. In this case, it's actually done in a Divi area, which shares the same output area as the sidebar. The Divi CSS area is equally as restrictive. I've updated the question to make it more obvious what the question is about. Thanks for your comment :) – Invariant Change Aug 28 '18 at 10:30
  • 1
    This is one of those "just because you can do not mean you should". I am well aware that it is a common practice and I understand why people demand it, but it is still wrong :( (had a client that probably had 1k CSS rules that way, I always felt relived when I saw it that I was hired to do something that did not involve it) – Mark Kaplun Aug 28 '18 at 11:15
  • Just thinking about that hurts my head. However, I have come close. I used to use the Jetpack CSS area to take advantage of the history function, then when I stopped using Jetpack and the CSS area became part of the core, the CSS remained in the customizer! I moved it for some clients, not all! – Invariant Change Aug 28 '18 at 11:21

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.