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.
UPDATE: If you are using a child theme that with an older version of Divi’s header.php and footer.php, before they added the hooks, then you will need to update those files.
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.
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.
You are a genius boy!
🙂
Mr. Quiroz, you are a genuine asset to the Divi community. This post is well written, easy to follow, and solves a real problem with how search results pages look.
We’re now using your code on our site and folks really like how our search results pages look. As your request, here’s our URL:
https://www.nextstepaudioenhancement.com
Thank you very much.
Very nice. Thanks for sharing Steve 🙂
How to replace entire default header with library section?
Add this to your functions.php and replace the global module number with your own.
/** * Custom Header * * Replaces Standard Header With Divi Libary Item **/ function mp_custom_header( $content ) { $custom_header = '<header id="custom-header">'; $custom_header .= do_shortcode('[et_pb_section global_module="9999"][/et_pb_section]'); $custom_header .= '</header> <!-- #custom-header -->'; return $custom_header; } add_filter( 'et_html_main_header', 'mp_custom_header' );Hello Geno,
What I need to do if I want to use this method on a multi language page? For every language it will be a different id module.
or it is not possible to use this, in this particular case?
Regards
It is probably possible but I have not tried something like that yet.
Cool one Geno! Thank you very much! Keep up the good work there and the new health regime!
Thanks Andrew 🙂
hello Queno!! this is great, i`m trying to do the same for the single products on woocommerce (add the header before the woo) , it`s possible? cheers
Hi Guille. Yes it is. You can add this to your functions file.
//====================================================================== // CUSTOM HEADER - MAIN PAGES // Adds a section below the Main Header //====================================================================== function mp_custom_header_page( $content ) { $custom_header = '<header id="header-page">'; $custom_header .= do_shortcode('[et_pb_section global_module="206438"][/et_pb_section]'); $custom_header .= '</header> <!-- #header-page -->'; return $content . $custom_header; } add_filter( 'et_html_main_header', 'mp_custom_header_page' );Then add this CSS
/* page header */ #header-page { display: none;} .single-product #header-page { display:block;}