Interpretation and explanation of register sidebar

by

First off, register_sidebar() is used to add a widget area, an area where you can add widgets to.

And in short, esc_html__() retrieves and escapes the translation of a text, whereas those %1$s and %2$s are placeholders which will be replaced with the widget ID and class name, respectively.

More details on esc_html__()

esc_html__() does two things:

  • First, it calls translate() which retrieves the translation of a text.

  • Secondly, it calls esc_html() which escapes HTML tags in a text.

So esc_html__() is equivalent to esc_html( translate( 'text', 'text-domain' ) ) and is a shorthand for esc_html( __( 'text', 'text-domain' ) ) (that uses __() which calls translate()).

And if there is no translation, or the text domain isn’t loaded, then the original text is simply escaped and returned.

So for example, esc_html__( 'Hello <b>World</b>!', 'text-domain' ) might return:

  • Hello &lt;b&gt;World&lt;/b&gt;! — not translated, but escaped

  • Ciao &lt;b&gt;mondo&lt;/b&gt;! — translated (to Italiano), and then escaped

More details on the %1$s and %2$s (placeholders)

Excerpt from the register_sidebar() documentation:

‘before_widget’
(string) HTML content to prepend to each widget’s HTML output when assigned to this sidebar. Receives the widget’s ID attribute as %1$s
and class name as %2$s. Default is an opening list item element.

So for example, if you added a Paragraph block widget to the Footer 1 sidebar, then on the front-end (where you called dynamic_sidebar( 'sidebar-1' )) you would see the <section> tag like so:

<section id="block-8" class="widget widget_block widget_text">

Which means %1$s was replaced with block-8, whereas %2$s was replaced with widget_block widget_text.

  • Note: The class name for a block widget defaults to widget_block, but for backwards compatibility, if a block widget contains a block that has an equivalent legacy widget, the legacy widget’s class name is added to the list just like the widget_text above.

    So for example if I had used the Classic Widgets plugin and added a Text widget to the above sidebar, the <section> would instead look like this where the %1$s was replaced with text-2, whereas %2$s was replaced with just widget_text:

    <section id="text-2" class="widget widget_text">