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 :
- # Copy & paste the PHP code from the functions.php file between lines 25 – 40 to the end of your child themes functions file.
- # Upload the folder named template-parts to your Twenty Nineteen themes directory like your see in the following screenshot
- # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
- # If using the search widget, upload the js folder to your child theme folder like this :
- # Copy & paste the PHP code between lines 44 – 51 to the end of your child themes functions file.
Note : Only follow steps 4 & 5 if using the search widget in the header widget area.
Was This Tutorial Helpful?