Getting Search Results for Custom Post Types In Divi
Adding A Custom Divi Module for CPT Search
Our tutorial on How To Style And Customize The Divi Search Module was a big hit, so we are following up and adding on to that post. This new post will show you how to search for any custom post type in Divi, and how to display those search results with the Divi Theme Builder. This is perfect if you are using any custom post type on your site!
Create A Custom Post Type Search Bar In Divi
Custom Post Types
If you are using our FREE Custom Post Type Generator, or if you have custom post types on your Divi website, then you probably should provide a way for users to search your content.
To learn more about custom post types, be sure to check out our full guide here:Â How To Create And Use Custom Post Types In Divi
Using A Custom Divi Search BarÂ
The default Divi Search module is only compatible with Pages and Posts, so it will not work for custom post types. Thankfully, a friend of mine Jerry Simmons has created a Divi plugin that extends the search module for use with custom post types.
For the actual search bar we are using Post Type Search Module for Divi plugin which adds a custom module to limit the search results to the post type of your choice.
Once you have this plugin installed and active, you will see a new module in your Divi Builder called “Post Type Search.” Go ahead and add that module to your layout.
This module is very similar to the default Divi Search module, but it has a few extra features that are very important. Notice that you can select which post types you want the search to apply to. This is very handy. I suggest creating separate search bars for each post type on your website.
Adjusting The Module Design Style
We have another tutorial on How To Customize And Style The Divi Search Module. Instead of repeating everything, just go ahead and reference that tutorial for how to style this custom post type search module. It’s exactly the same, it just has a different name and a few extra features.
Create A Custom Post Type Search Results Page With The Divi Theme Builder
Now that we have the search module installed and added to our layout, let’s focus on the search results page. This is the page that displays the items that match the search term that the user enters.
To create this search results page, we are going to use the Divi Theme Builder. This enables us to create a dynamic template and design the layout and style it however we want using the Divi Builder.
The first thing you need to do is go to the Divi Theme Builder. You can find that from the Dashboard under the Divi menu, Divi>Theme Builder.
The Theme Builder is an absolutely amazing tool, and if you are not using it yet, I highly recommend you learn how.
Create & Assign A Template
Go ahead and create a new template. To do that, just click on “Add New Template.”
In the popup, click on “Search Results.”
Then click the blue button at the bottom of the popup that says “Create Template.”
Next, click on “Add Custom Body.”
This will bring up a new popup again. In that popup, click on “Build Custom Body.”
Add The Blog Module To Dynamically Display The Post Type Search Results
At this point, you can design the layout however you want. Note that this same template will apply to all post types, including Pages, Posts, and any custom post types you have added to your Divi website. The important step here is to make sure you turn on the toggle called “Posts For Current Page” and it will pull in the results for the relevant post type that your visitors search.
You can use any layout or design style you want, just remember that this layout is for search results. So any time someone enters a search term in one of the search bars, this will be the layout they see. I suggest adding a text module and use dynamic content for the “Archive/Page Title” and anything else you want to use!
Hi, i am just testing your plugin and i am wondering if the search results page is also working with the divi shop module… It is just not working on my test environment. Is there something i have to do additionally to get it work with products. With the Blog Module it seems to work, but i need the shop module.
BR, Thomas
Hi Thomas, I haven’t tested it, but do you mean you can’t use a shop module on the Search Results template at all? Or just with this plugin?
The shop module was not working on my results page built with the theme builder and your plugin…. Now i deactivated relevanssi and i think it has to do something with it…
The Problem is: I dont like the quality of the search from wordpress. How would you enhance the search. Which plugins do you use for a woo commerce shop built with divi. I would pay for a good solution which i could use for any shop built with woo and divi theme builder and divi theme.
Thx a lot
Br, Thomas
I’m not sure, I haven’t looked into it much but I will be soon.
By the way, this isn’t my plugin, it’s just a free one in the repository.
Maybe this would help, Thomas: https://intercom.help/elegantthemes/en/articles/3030197-how-to-enable-products-and-other-post-types-in-divi-s-search-module
I need multiple search results templates for different post types. Divi has only one template. Any idea how I can get around this?
Hi Nigel,
That is a really good question and I have been working on this idea also. I don’t have a solution yet but hope to soon!
Can you please advise me on how to add a magnify glass search icon to the button of this plugin. I am trying to do so with the advanced tab in the button area but I am not having success with the CSS
It’s not easy, we may do a tutorial about this in the future.
that would be awesome. thanks
Hello I was wondering if you could help me add a search icon to the button of the search bar of the custom post type search plugin. I have tried to add css to the advanced tab in the module with no luck.. my client really wants that little magnifying glass icon :))
here is a link https://stcharlescountyveteransmuseum.org/stories/
thanks so much
Could you please use this code and see if that helps?
jQuery(document).ready(function(){
jQuery("form.et_pb_searchform .et_pb_searchsubmit").val("");
})
form.et_pb_searchform div{
position: relative;
}
form.et_pb_searchform div:after{
content: "\55";
position: absolute;
color: #fff !important;
right: 0px;
font-family: ETMODULES;
font-weight: bold;
font-size: 26px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
background-color: #0B297F !important;
height: 100%;
display:flex;
align-items:center;
padding: 0 0.4em;
}
form.et_pb_searchform .et_pb_searchsubmit{
z-index: 2;
background-color: transparent !important;
min-width: 40px;
}
Thank you so much for the tutorial!
Is it possible to set the search results to “All Posts” rather than default 10 posts?
Never mind, I found that if I set the Posts For Current Page -> Post Count = 9999 which is more than enough. Thank you for everything!
Is this the same as the search on your support page? That is exactly what I have been looking for, for my CPT search.
No for that I am using a plugin called SearchIQ.
Hi, I just wondering if there’s an option for search results to be in a specific category of a custom post type. For example, my custom post type is Food and I have several categories under it like Breakfast, Lunch, Dinner. And if I have a page of all my custom post types under the category of Breakfast, I want my seach button to filter all the results under that specific category. That is possible with the default seach module of Divi but not with this one. Hope you can help me. Thank you.
Not yet, but keep an eye out for our new plugin releasing soon!