Development,  Github,  WordPress

How to style widget description in admin menu?

Is it ever possible to style widget description in admin menu? Well, the short answer should be no, however longer answer should be yes, of course. You must keep in mind, that this method is a bit tricky. If you may avoid that, please do. If you have to style your widget description using html, well… this article is just for you.

I found myself dumbfound when I realized I need to style widget description but… it’s impossible using normal WordPress actions, filter or hooks. WordPress is using wp_sidebar_description function to show widget description in admin panel and it is located in \wp-includes\widgets.php. When you take a look into source, you may find our biggest and only obstacle:

Yes, esc_html does it all for us… So, is it still impossible? Well, we may do something. Of course you don’t even consider manipulating WordPress source code! It’s absolutely no-no. So, what to do? We need to write some JavaScript. And we will use our previous post to write descriptions.

First, let’s do some code to add widget. You may do it in your theme or in your plugin, it doesn’t matter. In this case we will write a plugin, however it is more common to put widgets into theme. Of course you may write plugin to enable styled description for other themes.

This is our plugin. Please note, that we add three widget areas (sidebars), and we used phylax-desc-sidebar-index style instead of common sidebar-index style. Why? Because when user will add themes and/or plugins, this ID may change due to incrementation method. In this case, no-one should use our ID. And one more very important thing – we use as description. We cannot leave this empty, because empty description won’t show anyway. So, please activate our plugin and go to Appearance -> Widgets menu. You should see our three brand new sidebars. With as a description. So, what to do next?

We need our descriptions! And we will need it in unusual way. Let’s take a look at the code:

As you may see, this code contains everything. We have CSS and JS, we have our description with html… But it doesn’t work! Of course, because we need our JS/CSS files 🙂 This is basic CSS file, of course it’s just an example, feel free to edit it (and to edit your description as well!):

And JS file, where all the magic happens. Well, check it out and you clearly realize that there is no magic at all, just a simple trick:

And this should be your result (I don’t have to mention that I added “Audio” widget?):

How to style widget description in admin menu - results image

And that’s all folks! If you want, you may download this example on my github page.

Leave a Reply

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