How To Make A Website With WordPress And Divi Theme In 2018 Start Tutorial

How to create a custom divi search result page

How to create a custom search result page

by | Jan 11, 2018 | Divi tutorials | 2 comments

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 library

Open 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:

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

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.

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

2 Comments

  1. OSh

    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
    • Mark

      Those tutorials are in the planning to be created

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Free Divi layouts
Divi tutorials

6 Shares
Share6
+1
Tweet
Share
Buffer