How To Search Custom Post Types In Divi And Create A Search Results Pages Tutorial by Pee Aye Creative

How To Search Custom Post Types In Divi And Create A Search Results Pages

Nelson Miller Pee Aye Creative
This tutorial will show you how to search for custom post types in Divi as well as how to set up a custom search results page with the Divi Theme Builder.

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.

custom post type search module for Divi

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.

choose which post types to display in the Divi search results

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.

How To Customize And Style The Divi Search Module Tutorial by Pee Aye Creative
Add new template in the Theme Builder for the custom post type search results page
Assign template to the custom post type search results pages

Then click the blue button at the bottom of the popup that says “Create Template.”

Add custom body to the Divi Theme Builder custom post type search results template

Next, click on “Add Custom Body.”

This will bring up a new popup again. In that popup, click on “Build Custom Body.”

show Divi custom post type search results in a Theme Builder template with the blog module

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!

Last updated Oct 10, 2023 @ 5:48 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

î‚£

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

26 Comments

  1. Thomas

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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?

      Reply
      • Thomas

        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

      • Nelson Lee Miller (aka The Divi Teacher)

        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.

  2. Nigel M

    I need multiple search results templates for different post types. Divi has only one template. Any idea how I can get around this?

    Reply
  3. Mike

    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

    Reply
  4. mike

    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

    Reply
    • Hemant Gaba

      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;
      }

      Reply
  5. Jerry

    Thank you so much for the tutorial!
    Is it possible to set the search results to “All Posts” rather than default 10 posts?

    Reply
    • Jerry

      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!

      Reply
  6. Leslee Langlands

    Is this the same as the search on your support page? That is exactly what I have been looking for, for my CPT search.

    Reply
  7. Philip

    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.

    Reply
  8. Ally

    Thanks as always for awesome posts. You save my butt often!

    Do you know if your buddy is going to update that search plugin? Or do you recommend something different that is compatible with the lasted DIVI theme?

    THank you!

    Reply
      • Mat Tat

        This is good to know…I need it too. Sooo important to be able to search events. Help!

      • Ernst

        Can’t wait.
        I really hope it will be able to show the type of search result you’re getting.

        For example; when searching for: ‘design’. I would love to be able to show on the results page the type of search result that is shown i.e. if it’s a page, or a post, or news, or a document/media item.

        I’ve been searching the internet for that, but haven’t really been able to find a solution.

      • Ally Drez

        Hey boss! Has that search helper ever come out? I searched to buy it, but don’t see it listed. Thank you!

  9. S Joblin

    Not sure if you can help me but when i search for issues with Divi your name comes up a lot and your problem solving has helped me immensely. Thank you!!! On the issue of search and the search results page I am finding that when there is a page in the search results it is displaying the date. Im happy for the date to be displayed on the results for my posts but not my pages and i cant figure out if I can somehow get Divi to differentiate between the two, only on the search results page.

    Reply
    • Hemant Gaba

      Hi Joblin!

      Please try adding the following code in Theme options for it:

      .search-results .type-page span.published {
      display: none;
      }

      Let me know how it goes!

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart