Adding a title and search term to your divi search results page helps readers know where they are remember what term they used to get these search results.
In this tutorial I am going to show you how you can create a separate search.php file and add the title and search term to your Divi search results page.
To do this you will need a basic child theme and you will need to use either an ftp program such as FileZilla, or if your hosting company offers you access to the cPanel, you can use the File Manager.
Let’s Get Started
Creating the Search.php File
The first thing we are going to do is create a search.php template and add it to your child theme. If you have never done this before, don’t worry. It is much easier than you think and you will be stoked once you do it for the first time.
1. Unzip your most recent Divi Theme file that you downloaded from Elegant Themes.
2. Open up the unzipped folder, find the index.php file, and make a copy of it.
3. Now rename the file and name it search.php
4. Good job. You just created the template file. Now you will need to upload it to the child theme you have already installed. If you have not installed a child theme you can learn more about them, and download a free one here: https://quiroz.co/the-ins-outs-of-child-themes-premium-divi-child-themes/
4a. If you use an FTP program like Filezilla or WinSCP, you can just drag and drop the file over to your child theme. This is what it will look like using WinSCP.
4b. If you prefer to use the cPanel File Manager, then you just open up the file manager and go to the child theme folder (/wp-content/themes/the_name_of_your_child_theme/) and upload the search.php file. This is what it will look like.
Awesome. Now that was not so hard was it? Let’s move on to the next step.
Inserting the Category Title into the PHP template
Now we are going to grab the Category Title & Description and insert it into the search.php page with a little php snippet.
5. While you have the category.php template open, find this line.
Just underneath that line you are going to insert this snippet
Unfortunately my Syntax plugin does not know how to read the shortcode without messing up this page so you will have to write the code yourself or grab the snippet from this txt file.
So your search.php file should now look like this.
Adding The Custom CSS
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)
Add this CSS
/*------------------------------------------------*/
/*---------------[GQ SEARCH TITLES]--------------*/
/*------------------------------------------------*/
.blog-title {
margin-bottom: 60px;}
hr.archive-line {
width: 25%;
float: left;
border: 0;
height: 4px;
background-color: #2ea3f2;}
BOOM!!!! You have just injected a Title and Search Term to your Divi Search Results Page. Your page should now look like this.
Styling The Title and Underline
If you want to change the color, width and thickness of the underline, just change these rules.
Once you start playing around with this type of stuff you will find you can do all sorts of amazing stuff in Divi.
Have fun!
Well that’s all for now. I hope you find this article useful.
In Step 3 you rename it search.php, and in Step 4b you upload category.php, and continue referring to it as category.pghp from there on. I was able to complete the modification using search.php.
Thanks. The tutorial has been updated.
Hi this is useful, thanks. Not entirely sure why you started mentioning ‘category.php’ though, as you mentioned copying the ‘search.php’ file…
Fixed it.
Hello. I kinda got lost between step 4 and step 5. Where do I get the category.php? Thanks.
Nevermind. I think I got it. Thank you very much.
Sorry Lino. I had the wrong php page. It should have said search.php. I have since updated the tutorial.
This worked great, thanks. Although it seems like there’s a closing span tag without an opening tag in the code snippet:
<?php printf( __( 'Search Results for "%s"', 'Divi' ), '’ . get_search_query() . ” ); ?>
Great. But, I do want to display the title on category pages as well. I created a category.php page and put your code there, but I get ‘Search results for BLANK’. Could I modify this to display the category title? And I’d probably like to do the same for authors? Thanks.
Add a Category Title and Description to your Divi Category Archive Pages
https://quiroz.co/add-category-title-description-category-archive-pages/
Hi Geno, can you say how to set up all those clever PHP files for multiple languages. I’ll use WPML for it. Maybe do you have clever resources for that purpose ?
Thx for sharing.
I have finished my child theme for Divi, with your tips like that title, but the search results page is very ugly, I want it to have a full width header with a background image … But I do not know where to start.
Thanks for sharing.
Using the search.php, you could follow the steps in this tutorial for archive pages https://quiroz.co/add-a-section-and-category-title-to-the-top-of-your-category-pages/
Hi Geno,
Thanks for the info. Great post … and a life-saver!
Much appreciated.