If you’ve used Breakdance to build websites, you’ll quickly discover a frustrating limitation. The default WordPress search functionality just isn’t powerful enough.
Your visitors would search for content they knew existed on the site, only to get irrelevant results or no results at all.
This is where using SearchWP can transform the search experience completely. Plus, it easily integrates with Breakdance, making it very easy to add custom search forms.
In this guide, we’ll show you how we set up powerful search forms in Breakdance using SearchWP.
What is Breakdance?
Breakdance is a popular visual page builder plugin for WordPress. It lets you create custom websites without writing any code, using a drag-and-drop interface that feels intuitive and responsive.
What sets Breakdance apart from other page builders is its focus on clean code output and performance.
The plugin comes with a comprehensive set of design elements, from basic text and image blocks to advanced features like dynamic content, animations, and form builders.
We particularly appreciate how it handles responsive design automatically, ensuring our sites look great on all devices.
Breakdance also integrates well with popular WordPress plugins and themes. This includes SearchWP, which allows you to enhance the search process on your site.
That said, let’s look at how you can easily include a search form in Breakdance builder.
Adding a Search Form in WordPress Using Breakdance
Setting up a powerful search form in Breakdance is easier than you might think. And the best way to go about it is by using SearchWP.
It is the best WordPress search plugin that’s trusted by over 50,000 business owners to enhance their website search.
With SearchWP, you can overcome the limitations of the default search in WordPress.
For instance, you get to include important details in custom fields, categories, tags, product details, and more in the search process.
What makes SearchWP great is that it easily works with popular website builders, including Breakdance.
It offers pre-built blocks that you can easily place on your custom landing pages to display search forms and results templates.
Besides Breakdance, SearchWP also supports Elementor, Divi, WPBakery, Oxygen, and other website builders.
Here are more key features offered by SearchWP:
- Monitor what your visitors are searching for: Use detailed reports to discover what customers are looking for and gain powerful insights into their intent.
- Provide live search suggestions: Show visitors instant results as they type, allowing them to find the right products more efficiently and improving their experience.
- Customize the order of your results: Control the ranking of search results to feature specific items and align them with your business goals.
- Hide specific content from search: Prevent certain pages or products from appearing in your search results, ensuring a clean and focused customer journey.
Now, you can follow these steps to easily customize your website search, create a search form, and display it using Breakdance.
Step 1: Install and Activate SearchWP
First, you will need to visit the SearchWP website and sign up for a new account.
After creating an account, you can head to your account page in SearchWP and then go to the Downloads tab.
From here, you will need to click the Download SearchWP button and save the plugin’s ZIP file to your computer.
Now, the next step is to install SearchWP on your site. To do that, you’ll need to upload the plugin’s ZIP file to your site.
If you need help, then please follow this how to install a WordPress plugin step-by-step guide.
Upon activation, you’ll see the SearchWP welcome screen and setup wizard. Go ahead and click the ‘Start Onboarding Wizard’ button and follow the onscreen instructions.
Step 2: Edit and Customize the Search Engine
With SearchWP, you can improve your site search by customizing the search engine.
A search engine contains a set of rules that SearchWP follows when performing a search. You can edit it to include additional information.
For example, there are options to make documents like PDFs, product details like color, size, SKUs, categories like tutorials, and other details in the search process.
First, you’ll need to go SearchWP » Algorithm from your WordPress dashboard and press the Sources & Settings button.
Next, a small window will open where you can choose sources for your engine.
By default, SearchWP will include Posts, Pages, and Media as sources. But if you have an eCommerce store, then you can include Products or Downloads as a source.
When you’re done, simply click the Done button.
Another benefit of using SearchWP is that you can further customize the search by editing source attributes.
Simply scroll down to the source you want to edit and click the Add/Remove Attributes button.
Next, you can add any additional information stored in custom fields in the search process. For example, if you have a food blog, then you can add custom fields like ingredients.
Similarly, there is also an option to make categories and tags searchable. All you have to do is click the Taxonomies dropdown menu.
Do note that SearchWP will include title, content, slug, excerpt, and author as attributes by default.
Go ahead and click the Done button when you’re finished.
Now, you can scroll to the top and click the ‘Save’ button to store your changes.
For more details about customizing the search engine, you may also want to see our guide on how to change the default WordPress search settings.
Step 3: Create a Search Form in SearchWP
Now that you’ve customized the search engine, you can also create a custom search form in SearchWP.
First, you can go to SearchWP » Search Forms from the WordPress dashboard and then create a new form or edit an existing one.
On the next screen, you can select a theme for your form.
SearchWP offers multiple search form templates that you can use for your site.
With SearchWP, you can link each form to a specific search engine.
This allows you to create unlimited search forms and display them in different areas of your site.
To learn more, please see our guide on how to create a custom search form in WordPress.
Step 4: Adding a Search Form in Breakdance
The next step is to add the search form you just created to a page using the Breakdance page builder.
Simply head to Pages » All Pages in your WordPress dashboard. From here, you can edit an existing page or add a new one.
Next, you’ll see the content editor in WordPress.
From here, you can click the Edit in Breakdance button.
On the next screen, you will see the Breakdance editor.
To add a new element, simply click the + sign on the page. After that, you can select the SearchWP Form element from the menu on the left under the ‘Site’ group.
Once the SearchWP Form element is added, you can select your search from.
Go ahead and click the dropdown menu under SearchWP Form settings in the panel on the left.
When you’re done, simply click the Save button at the top.
After that, you can click close button (X icon) and then click the Exit to Frontend option.
This will take you to the page you just created with Breakdance to display the search form.
Here’s a preview of how the search form looks like on our demo site.
Now, you can simply try the search box and test if it’s working as intended. For instance, you try searching for custom fields or categories you included in the search process.
We hope this article helped you learn how to create a search form in Breakdance. You may also want to see our guide on how to display promoted ads on your WordPress search results page and the best WordPress backup plugins.
If you’re ready to create a smart search page on your site, you can get started with SearchWP here.
