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

Question

I would like to add line breaks inside a widget description in Wordpress to show in the admin panel the usage instructions, like this:

To format the text use the tags:
<h3>Subtitle</h3>
<strong>Bold</strong>
[:pt]Text in Portuguese
[:en]Text in English
[:es]Text in Spanish

The idea so far is adding spaces using ISO 8859-1 symbol (   ) which is not the best solution (the description is in portuguese):

register_sidebar( array(
    'name' => 'Widget',
    'id' => 'widget-user',
    'description' => "Para formatar o texto, utilize as tags: <h3>Subtítulo laranja</h3> &nbsp; <strong>Negrito</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#91;:pt]Texto em português nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#91;:en]Texto em inglês &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#91;:es]Texto em espanhol &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (o que estiver escrito fora das tags de idioma irão aparecer para todos",
    'before_widget' => '<div class="widget-user"><div class="box">',
    'after_widget' => '</div></div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
));

Different from the itens 'before_widget', 'after_widget', 'before_title' and 'after_title', the 'description' does not accept HTML. If it did, it would be easy to solve by simply escaping HTML I didn't want to be converted in HTML with a php function like htmlspecialchars() .

I have desperately tried these without success:

"description" => "This is a line <br> break test"    
"description" => "This is a line \n break test"    
"description" => "This is a line \r break test"
"description" => "This is a line \r\n break test"
"description" => htmlspecialchars("This is a line <br>break test")
htmlspecialchars("description") => "This is a line <br>break test"
"description" => htmlentities("This is a line <br>break test")
"description" => html_entity_decode("This is a line <br>break test")
"description" => nl2br("This is a line <br> break test")
nl2br("description") => nl2br("This is a line <br> break test")

So, any ideas?

Answer 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');

Answer 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'] );

}

Answer 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

Answer 4

Solution 1

The description field supports the following tags: a abbr acronym b blockquote cite code del em iqs 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',
  ...
));

Answer 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').