Twenty Nineteen Header Widget

This tutorial contains the steps which enable you to add a widget area in the header of the Twenty Nineteen default theme for WordPress.

In this case, a HTML widget is added to the Widget area named Header and displays a advertisement banner like this :

You can use any widget in the new Header widget area as seen in the demo video which also shows the use of a search widget and text widget.

Demo Video

Shows the new Header widget added to the Twenty Nineteen theme tested using a HTML widget, search widget and text widget.

Note : The CSS for media queries are written to stack the header elements @ 980px width based on the usage of a search widget. You may need to change this width if using a widget displaying content wider than the search widget.

Installation Steps

There’s 3 – 5 steps using a child theme for Twenty Nineteen :

1. # Copy & paste the PHP code from the functions.php file between lines 25 – 40 to the end of your child themes functions file.

 



2. # Upload the folder named template-parts to your Twenty Nineteen themes directory like your see in the following screenshot

 



3. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

 



Note : Only follow steps 4 & 5 if using the search widget in the header widget area.

4. # If using the search widget, upload the js folder to your child theme folder like this :

 



5. # Copy & paste the PHP code between lines 44 – 51 to the end of your child themes functions file.

 

Download Folder

Related Tutorials

• Add Search To Header In Twenty Nineteen