[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! ๐Ÿ‘‰Get This Deal
Mark Hendriksen Logo

How to create a custom search result page

Mark Hendriksen | January 11, 2018 | 18 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee โ˜• so I can make more helpful content.

In this step by step tutorial, I will teach you how you can create a custom search result page for Divi.

What you will learn:

  • How to create and setup the search.php file
  • How to create sections and rows for the search result page
  • How to add the sections and rows to your search result page
  • How to upload your search.php file
  • How to change the column structure and give the page some additional styling.

You can see an example of a custom search result page here:

At the topย of the page, I created a header and just above the footer I created a call to action section.

I changed the layout from a 3/4 โ€“ 1/4 column to a 2/3 โ€“ 1/3 column structure. And I used some additional CSS for better styling.

Step 1 create the search.php file

Go to elegant themes and download a new Divi package to your computer.

Unzip this package.

Open the Divi folder, find and copy the index.php file. Paste this file into another location where you can easily access it.

Rename this file to search.php

Step 2 create the sections

Header section

Go to your WordPress dashboard and go to Divi > Divi Library

Click on add new and under Template name you can fill in any name. I named this search result header.

Under Template type, I choose Fullwidth section

Style this section to your likings.

Call to action section above the footer

Again go to Divi > Divi Library

Click on add new and fill in a Template name

Under Template type I choose section

You can create as many sections and rows as you want. For this tutorial, Iโ€™ll stick to 2.

I have now 2 section in my Divi libraryOpen the first created section. In the URL you will see something like this:

unique id number

Write down your own id number.

Do the same for the other section.

You will need those numbers in the next step.

Step 3 add the sections and rows to your search result page

Open the search.php file which we created in step 1 with a text editor program like TextEdit (Mac) or TextEditor (Windows) or Notepad++.

Copy and place this code at the top:

<?php
/*
Template Name: Search Page
*/
?>

Place this line of code just under the  get_header();

<?php echo do_shortcode('[et_pb_section global_module="???"][/et_pb_section]'); ?>

Replace the ??? with your own id number from step 2. This is where the header will show up.

It should look like this:

header code example

Do the same with the call to action section that I have created for above the footer.

I place the same line of code just above  get_footer();

And replace ??? with your id number for the call to action section.

It should look like this:

footer code example

Save the file.

Step 4 upload the search.php file

Upload this file to your child theme folder via FTP. If you donโ€™t have a child theme folder then you need to create one. You can follow my tutorial How to create a Divi child theme for creating a child theme.

Step 5 add some additional CSS for styling

With this CSS code you can change the column structure. I also used some extra CSS for better styling.

/* ###### SEARCH RESULT PAGE ###### */

@media (min-width: 981px) {
.search #left-area {
	width: 64.833%;
}

.search #sidebar {
	width: 29.666%;
	border-left: 1px solid #e2e2e2;
}

.search #main-content .container:before {
    display: none !important;
}}

.search .et_pb_post a img {
    padding-bottom: 25px;
}

.search h2 {
	font-size: 34px;
	font-weight: bold;
}

.search h4.widgettitle {
	font-size: 22px;
	font-weight: bold;
}

.search #sidebar .et_pb_widget {
	padding: 25px;
	margin-bottom: 18.54%;
}

.search #content-area {
	padding-bottom: 50px;
}

Place this in your child theme CSS file (appearance > editor). Or in Divi > theme options

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

18 thoughts on “How to create a custom search result page”

  1. Thanks a lot man, That was really great cheers, keep it up :).
    Can you please make a tutorial on modifying the Divi header its kinda suck hah, I was trying to mess with it but with no luck hope you can give some tips.
    cheers,

    Reply
    • The header can be a problem, specially if you’re using something like a Divi fullwidth header and nav section, which I have done to make the main nav menu appear below the fullwidth header – it’s just a Divi fullwidth menu.

      Of course, on pages such as the generated search results page, the Divi system just uses the default template (not the Blank Page) and there’s no way to change that – except for the way Mark describes here, which works perfectly.

      I didn’t want to wade into making a different header for my custom search results page, so I just dumped the default Divi header with this CSS:

      #main-header { display:none; }

      That clears the way for the custom search page I created using Mark’s technique.

      Reply
  2. Thanks a million! Your tutorials are super clear and very helpful. Grateful to not have to relearn coding again (that’s like 19 years ago!).

    Reply
  3. Great tutorial! So easy to follow and works exactly like you want it to.

    I know this goes a bit further than your tutorial, but I think the solution can be made in the same way with very few changes. Because I have this issue on other pages as well, this is for example with a plugin generated page from Awesome Support plugin. The plugin have shortcodes to use on a normal page to make “open a support ticket”-page, so that’s easy, but when the ticket is submitted, it goes to a new page, that is complete blank like the search page are from default. Can I use this file for the same purpose with a different name than search.php? And if so, how can I identify what the file is supposed to be called.?

    I hope you can help, but please don’t use to much of your time.. Have a great weekend!

    Best Regards,
    Rasmus

    Reply
  4. Hi is it possible to use this method for creating a maintenance.php so that you don’t get that white screen with WordPress maintenance text but instead something that actually looks like a website?
    I guess you can’t put too much in there though.

    Reply
  5. I just can’t thank you enough for this trick! It’s amazing. Been woking with Divi websites for 2 years and just got one that had a very uncommon header ( I had to create it with the builder ). Now I can import it in every page template like this ! Thank you man. Also cheers for all your great work !

    Reply
  6. Thanks for sharing Mark, you are a life saver! Happily going through and adding this method on all pages not accessible via Divi and the Divi Builder ๐Ÿ™‚

    Reply
  7. Hi Mark,

    I’ve changed my custom search result page exactly the way you did it a while ago. I did this through another tutorial, but this was similar to your way.

    What I noticed last week (something I didn’t notice before) is that my customized “no search result page” does work. But it even shows up when I type in a query that should be found on my website. So now the whole search form doesn’t work anymore, and always shows the customized “no results” page…
    Do you have any idea what I can do about this?

    If I delete thee search.php file from my child-theme, I do get my search results back, but with a random typed in query (that doesn’t mean anything) I do not get my customized page anymore but just the standard one. (logical ofcourse)

    Hence I think there is an error or absence of some coding in my search.php file that creates this problem. But I don’t have a single clue what?

    Can you please help me with this?

    Thanks in advance!

    Best regards,
    Linda

    Reply
  8. You could also add the following
    found_posts; ?> : “”

    After your header module which will show people what they searched for & results. You will need to add some css styling

    I called my div “search-term-results”
    #search-term-results h1{
    text-transform: capitalize;
    font-size: 18px;
    color: #00aad4 !important;
    text-align: center;
    }

    Reply

Leave a Comment

12 Shares
Share11
Pin1
Tweet