Gold Penguin Logo with Text

Add Page and Post Search in Breakdance Builder

Adding a search bar to a site is essential. Using Breakdance, you can easily add a search bar to any page
Updated April 5, 2023

If you're building a new website and planning on filling it with content, one day you'll have a huge website with tons of pages and posts. You'll want to be able to search through all of them easily, allowing visitors to sort through everything you have to offer with a simple query.

Fortunately, adding search functionality to your Breakdance Builder website is easy. All you need to do is add a search form to your site and configure it to search through your pages and posts.

Adding Search in Breakdance

We've added the search in our header, so it will be visible on every page. You can place this where you want, like on a blog index page or a dedicated search page.

If you add the search to your header you'll see a magnifying glass looking button, you can customize the text and icon if you'd like but by default it looks pretty nice.

added search form to breakdance builder header

When clicking on the search and entering a query, all pages and posts should return by default. If you want to limit the search to specific types of content you'll have to create a custom template for search results, with a custom search query based on what was searched. By default, everything shows up on adding the element to your page

the fully expanded view of the search bar in breakdance builder

As you can see, a page and blog post came up after searching for "hello"

the results page after searching for a query in breakdance

Search and Display Custom Queries in Breakdance

If you are building a site with custom post types (houses, business locations, app/service names) then you might want to add a search which only displays posts of that type. Currently, Breakdance doesn't support a direct integration, but we spoke to the support team and they told us to paste the following code snippet into a Code Block element, search for "product" in the code and change it to "post" to limit the search to posts only.

<div class="bde-search-form">
  <form role="search" method="get" data-type="classic" class="js-search-form search-form search-form--classic" action="/">
   <div class="search-form__container">
      <button role="button" type="submit" class="search-form__button">
          <svg class="search-form__icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-beta2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z"></path></svg>
      </button>
      <label class="screen-reader-text">Search for</label>
      <input type="text" class="js-search-form-field search-form__field" placeholder="Search" value="" name="s">
      <input type="hidden" name="post_type" value="product">
    </div>
  </form>
</div>

Conclusion

You might want to customize the search UI in the search styling page if you don't like how it looks out of the box, but other than that you're done! You've added a simple search to your Breakdance Builder site. Searching is used on millions of websites every day, and it's an important part of any site with a lot of content. If you have a lot of pages and posts, make sure to add search so people can easily find what they're looking for! If you have any other search questions, feel free to ask in the comments.

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Justin Gluska
Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross