You can add a custom Divi header layout from your Divi Library to your search results page using the new Divi Hooks by adding a simple snippet of PHP to your functions.php file and a little CSS to your stylesheet.

I am also excited to share with you my very first custom Divi Shortcode which returns the search query term that was used in the visitor’s search query, so that you can add it to your custom Divi header like I have done on the live demo.

So in this tutorial, I will show you how to inject a custom Divi header layout to the search results page and add a shortcode to return the search term the visitor used to get those results within the Divi text module used in the header layout. To do this you will need a basic child theme with a functions.php file.

View The Live Demo

 

Let’s Get Started Setting up the Divi Header Section.

 

Adding the row and custom class

1. Go to your Divi Library and add a new layout.

 

2. Give it a name and choose Layout as the the Layout Type.

 

3. In my demo I am adding a dark background image to my header section & removing the top and bottom padding.

 

4. In my demo I only a single column and a text module. In the text module I typed in the words “Search Results For: [add_search_query]“. I made the text “Heading 1” and changed the text color to light in the design settings. As you can see I added a custom shortcode but the shortcode will not work until we add the custom PHP later in this tutorial.

 

Adding The PHP

6. Go to Appearance>Editor and open your functions.php file and you are going to insert the two functions below. 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 the txt file below.

Grab The PHP Snippet

 

7. Your functions.php page should look like this after you have copied and pasted the snippet above.

 

 

Inserting the Divi Library Section into the PHP snippet

Now we are going to grab the layout shortcode and insert it into the PHP snippet above.

8. Go to your Divi Library and open up the layout you just created. Once you have the layout open, check out the URL and you will see a sequence of characters and numbers. You are going to want to grab the numbers as we will need that for the next steps. For example in my case, the number sequence that I want to grab is 27296. This is the URL in my example: https://montereydev.com/demos/divi/mobile-footer-bar/wp-admin/post.php?post=27253&action=edit

 

9. Go back to Appearance> Editor and open the functions.php where you added the snippet above and in this shortcode, replace the number with your own.

 

 

Adding The Custom CSS

I know there is a better method to single out search results pages in the function itself but I have not figured that piece out yet. So instead I am using CSS for this which is probably not the best method, but works for now.

Since you are working with a child theme you can go to Appearance>Editor and open your stylesheet. Otherwise 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 CSS FOR INJECTED SEARCH HEADER AND SEARCH QUERY ]-*/
/*--------------------------------------------------------*/

	/* search header */
		#search-header {
			display: none;}
		.search #search-header {
			display:block;}

 

Making Adjustments To The CSS

As with all my tutorials, my goal is not to teach you how to use Divi Settings as much as it is to teach you how to customize your website learning a little CSS along the way. So with that being said, here are a few CSS tips to help you learn a little more about CSS.

This snippet is telling it to hide this section on all other page types except the search result pages.

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest