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

Justin Gluska
Updated April 5, 2023

Reading Time: 4 minutes
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.

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

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

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 newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.