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 :
- # Upload the folder named template-parts to your child themes root directory like this :
- # Copy & paste the CSS from the style.css file to the end of your Twenty Nineteen child theme.
- # Upload the folder named js to your Twenty Nineteen child theme directory like this :
- # Copy & paste the PHP code from the functions.php file between lines 25 – 32 to the end of your child themes functions.php file
This CSS enables you to stack the header elements in any order on smaller iPad type & hand held devices.
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.
Was This Tutorial Helpful?