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:
1 |
return esc_html( $wp_registered_sidebars[$id]['description'] ); |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php /** * Plugin Name: Widget Description * Description: How to style your widget description field? * Version: 0.1.0 * Author: Łukasz Nowicki * Author URI: http://lukasznowicki.info/ * Requires at least: 4.8 * Tested up to: 4.8 */ namespace Phylax\WPPlugin\WD; if ( !defined( 'ABSPATH' ) ) { exit; } class Plugin { function __construct() { add_action( 'widgets_init', [ $this, 'widgets_init' ] ); } function widgets_init() { for( $index = 1; $index <= 3; $index++ ) { register_sidebar( [ 'name' => sprintf( 'Desc sidebar #%d', $index ), 'id' => 'phylax-desc-sidebar-' . $index, 'description' => '…' ] ); } } } $wd_plugin = new Plugin(); ?> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?php /** * Plugin Name: Widget Description * Description: How to style your widget description field? * Version: 0.1.0 * Author: Łukasz Nowicki * Author URI: http://lukasznowicki.info/ * Requires at least: 4.8 * Tested up to: 4.8 */ namespace Phylax\WPPlugin\WD; if ( !defined( 'ABSPATH' ) ) { exit; } class Plugin { public $widget_description = []; public $card_to_ord = []; function __construct() { $this->card_to_ord = [ 1 => 'First', 'Second', 'Third', 'Fourth', 'Fifth' ]; add_action( 'widgets_init', [ $this, 'widgets_init' ] ); add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] ); } function admin_enqueue_scripts() { wp_enqueue_style( 'wd-widget-css', plugins_url( 'widget.css', __FILE__ ) ); wp_enqueue_script( 'wd-widget', plugins_url( 'widget.js', __FILE__ ), [ 'jquery' ] ); wp_localize_script( 'wd-widget', 'widgetdesc', $this->widget_description ); } function widgets_init() { for( $index = 1; $index <= 3; $index++ ) { $widget_id = 'phylax-desc-sidebar-' . $index; $this->widget_description[ $widget_id ] = '<div class="wd-h1">' . $this->card_to_ord[ $index ] . ' sidebar.</div><div class="incolor">And this is <strong>true</strong> description for <em>our widget</em>!</div>'; register_sidebar( [ 'name' => sprintf( 'Desc sidebar #%d', $index ), 'id' => $widget_id, 'description' => '…' ] ); } } } $wd_plugin = new Plugin(); ?> |
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!):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.wd-h1{ font-size:110%; font-weight:bold; color:#0a0; } .incolor{ color:#035; } .incolor em{ text-decoration:underline; font-size:97.5%; } .incolor strong{ font-weight:bold; font-size:92.5%; text-transform:uppercase; } |
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:
1 2 3 4 5 |
jQuery( document ).ready( function( $ ) { for( var $key in widgetdesc ) { $( '#' + $key + ' .sidebar-description .description' ).html( widgetdesc[ $key ] ); } } ); |
And this should be your result (I don’t have to mention that I added “Audio” widget?):
And that’s all folks! If you want, you may download this example on my github page.