Add Search To Header In Twenty Nineteen

This solution shows you how to add a search form inline with the logo, site title and nav menu in the Twenty Nineteen default theme for WordPress.

The code in the download folder provides a child theme which enables you to :

• Add the search box in the header of your theme
• Change the size of the logo at any screen width
• Change the order of the header elements ( logo, title, menu & search ) at any screen width

Demo Video

Shows the search form added to the header of the Twenty Nineteen theme using a child theme. Also shows the header elements stacked in a different order than the default on smaller screens.

Tested using the Twenty Nineteen default theme for WordPress however will work in most other default themes with minimal modification needed.

Installation Steps

If you haven’t created a child theme for Twenty Nineteen, simply install the zipped folder from the download folder as a new theme and add your custom logo.

If you already have a child theme for Twenty Nineteen installed, follow these instructions to install the code.

There’s 4 steps :

1. # Upload the folder named template-parts to your child themes root directory like this :

 


2. # Copy & paste the CSS from the style.css file to the end of your Twenty Nineteen child theme.

 



This CSS enables you to stack the header elements in any order on smaller iPad type & hand held devices.

3. # Upload the folder named js to your Twenty Nineteen child theme directory like this :

 



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

 

The download folder contains an image named added-code showing exactly what code has been added and exactly where it has been added in the file.

Download Folder

Related Tutorials

• Add Header Widget In Twenty Nineteen