How to add a widget area to your WordPress header? [Quick Guide]

5:10 pm January 16, 201710802

An area of widget, or “widget area”, is one of the many advantages offered by WordPress. With it, you can build certain areas of your site to suit your needs.

However, depending on your theme, widget areas won’t be available only to build your sidebar (sidebar) and your footer (footer). You need to add one of these areas to the header (or header) of your site? Good thing we will see together how to achieve…

widget-header

why a widget in the header area?

It is true that the first of the questions you might ask would be “but why?” … According to your site or blog, you may settle your sidebar and your footer widget areas. However, in some other cases, you may benefit from this new area (in the header) to place very important content and/or high potential such as:

in addition as people use more mobile to browse the internet, it is very important to place promotional content before the classic content . Indeed, you have to realize that, for reasons of optimisation (responsive), the content of your sidebar is “relegated” at the end of an article when operating with a smartphone, just before your footer widgets… But are you sure that your readers will go up there? Your widget in the header, meanwhile, remains in first position!

Header - Version mobile

step 1: create a child theme

like all changes to a WordPress theme, it will go through creating a child theme … To achieve this, I advise you in advance read this article .

step 2: create my new widget area

this, to edit the file functions.php your theme child using a text editor or good directly from your administration tab appearance > editor to add these few lines of code:

 function header_widgets_init() {register_sidebar (array ('name'-'My new widget zone' online ((, 'id'-online 'new-widget-area', 'before_widget'-online '
', 'after_widget'-online '
', 'before_title'-online '

', 'after_title'-online '

',)); } add_action ('widgets_init', 'header_widgets_init');

Code PHP pour nouvelle zone de widget

Some explanations:

  • =’name ‘ name of the “widget area” that will appear in your WordPress administration
  • ‘id’ ID = unique of your “widget area”
  • ‘before_widget’ = choose an HTML tag to open before your widget (
    ,

  • etc.) and take the opportunity to add a class that will help you during the customization CSS (step 5)
  • ‘after_widget’ = close tag (