Welcome back to a new YouDivi tutorial. I want to show you how to remove back-end widgets with CSS. I just finished a blogging platform for a client of mine using WordPress with the Extra theme installed and the Extralight child theme and I wanted to clear as much as I could of the back-end options.

So, I installed an awesome plugin called Adminimize to clean up the WordPress admin area of nonimportant fields and options for my client.

But, there’re some other back-end widgets on the way too…

I want my client to write posts with the minimum amount of steps possible.

So, I just want them to:

  • Add a title;
  • Set a featured image;
  • Choose a category;
  • Write the content (without the Divi builder).

Therefore, let’s remove the Format, Tags, Extra Settings, Excerpt and any other widgets that the client doesn’t need to touch.

How to remove back-end widgets with CSS

Ok, so you already know how to edit front-end CSS using the Extra > Theme Options > Custom CSS.

But, when the changes are supposed to affect the back-end – or the admin part – of the WordPress. Where should the CSS code go?

After a quick search on the web about this subject, I found the solution on css-tricks.com website. I’m sure you already crossed it at least once for a great CSS tip. I recommend it.

You just need to copy and paste a few PHP code lines inside the functions.php of your child theme and you’ll be ready to write some CSS code into the head of your WordPress admin area.

add_action('admin_head', 'my_custom_css');
function my_custom_css() { 
echo '<style>
Add CSS here

How to select the back-end widgets

Ok, now that you have a place to write back-end CSS inside your WordPress you just need to find the widgets you’d like to remove.

So, let’s find them using the for Google Chrome Inspect Tool.

Right-click the widget you want to remove. Look for the ID and add the following simple CSS property.

display: none;

And that’s it. Place the CSS code inside your functions.php file and you’re ready to go.


Have you ever needed to add back-end CSS style?

How did you like this tutorial about how to remove back-end widgets with CSS?

I hope to help you somehow. Send me a message, your feedback is always important to me.

See ya!