How to add line breaks in a widget description in WordPress?

5 comments

1. From your question it sounds like you might have widgets and sidebars slightly confused — or maybe it just sounds that way from the way you’re using the two terms. So my apologies if I’m restating the obvious to you.

   Sidebars are dynamic sections on your site that can display widgets. Widgets are the individual items that are displayed in one or more sidebars. The function you’re referencing, register_sidebar(), is meant for creating a sidebar area — one of those blocks in the Settings –> Appearance menu that you can drag widgets to. The description field is meant just to indicate basic info. about where that particular sidebar is used. For example, if you register a sidebar that you plan to use in your header the description might be something like “Appears in header above navigation menu.”

   Widgets also have descriptions that give info. on how to fill out their various options. That sounds like what you’re trying to do. So the question would be what widget are you trying to use? It’s in the widget code that you would set up that description you’re talking about.

   As far as sidebar descriptions, WordPress uses the function wp_sidebar_description($id) to output the description for each sidebar. That function runs the description text through another WordPress function, esc_html(), which runs it through a couple of checks and removes anything that might be a problem.

   There is an opportunity for you to change the default output though. The last thing it does is apply a filter, esc_html, to the text. So if you want to make <br> actually function as a newline, you could simply add a filter in your theme’s functions.php file to restore that functionality, like so:

   add_filter('esc_html', 'newLines');
   function newLines($desc){
   return htmlspecialchars_decode($desc);
   }
   

   That will basically undo what WordPress is doing and output any HTML code (bold, italics, etc.) just as you’d expect.

   Should have noted in the original response, the above filter will affect the esc_html() function everywhere it is used on your site — you probably do not want that!

   There aren’t, unfortunately, any hooks or filters that would let you target a specific sidebar but you could limit the filter above to only happening on the admin page by using the following:

   function newLines($desc){
   global $pagenow;
   global $wp_registered_sidebars;
   if($pagenow == 'widgets.php'){
   return htmlspecialchars_decode($desc);
   }
   }
   add_filter('esc_html', 'newLines');
   

   Log in to Reply

2. Open this file in wp-includes/widgets.php

   find the function named : wp_widget_description(); on line 664

   replace it with this one

   function wp_widget_description( $id ) {
   if ( !is_scalar($id) )
   return;

   global $wp_registered_widgets;
   
   if ( isset($wp_registered_widgets[$id]['description']) )
       return ( $wp_registered_widgets[$id]['description'] );
   

   }

   Log in to Reply

3. I found a method using shortcodes. first, we need to add a function inside the functions.php file

   function line_break_shortcode() {
       return '<br />';
   }
   
   add_shortcode( 'br', 'line_break_shortcode' );
   

   Then we can use [br] anywhere we need a break

   For eg:

    Anti-counterfeiting [br] & [br] Online
   

   Log in to Reply

4. Solution 1

   The description field supports the following tags: a abbr acronym b blockquote cite code del em i q s strike strong.
   You can then add the style display: block; to move the text to a new line.

   Step 1

   register_sidebar( array(
     ...
     'description' => 'Sidebar <strong>description text</strong>',
     ...
   ));
   

   Step 2

   function admin_style() {
     wp_enqueue_style( 'admin-style', 'admin-style.css', array(), 1.0.0, true );
   }
   add_action( 'admin_enqueue_scripts', 'admin_style' );
   

   Step 3

   Then add the following into admin-style.css

   body.widgets-php .widgets-holder-wrap .description strong {
     display: block;
   }
   

   This solution is untidy and not ideal. The second solution is better.

   ---

   Solution 2

   It’s possible to manipulate the default allowed tags using the pre_kses filter (code reference) and add your own, here’s how.

   function sidebar_description(  $string, $allowed_html, $allowed_protocols ) {
     if ($allowed_html == 'sidebar_description' ) {
       global $allowedtags;
       $allowedtags['br'] = array();
     }
     return $string;
   }
   add_filter( 'pre_kses', 'sidebar_description', 10, 3 );
   

   Then add <br> into the description.

   register_sidebar( array(
     ...
     'description' => 'Sidebar <br>description text',
     ...
   ));
   

   Log in to Reply

5. I don’t know the answer. However, a possible solution is to add this to the widget form() instead, right there above or below the fields. It’s possible to make the form wider if you need to accommodate more text too (the fourth parameter in the widget constructor is an array that accepts ‘width’).

   Log in to Reply