Donate to the Palestine's children, safe the people of Gaza.  >>>Donate Link...... Your contribution will help to save the life of Gaza people, who trapped in war conflict & urgently needed food, water, health care and more.

How to Create a Custom WordPress Search Form (Step by Step)

Creating a custom search form in WordPress involves a combination of HTML, CSS, and sometimes PHP. This guide will provide a basic understanding of how you can create your own custom search form for your WordPress website:

1. Backup Your Website

Before making any changes, always back up your website. This way, if anything goes wrong, you can restore your website to its previous state.

2. Decide on the Search Form Placement

You need to decide where you want to place the search form. Common places include the header, footer, sidebar, or a dedicated search page.

3. Create the Search Form

You can create a basic search form using HTML. Below is a simple example:

html

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div>
<label for="s">Search for:</label>
<input type="text" value="" name="s" id="s" placeholder="Enter keywords..." />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

This is a basic search form that will use WordPress’s default search functionality.

4. Style the Search Form

To make the search form fit in with the rest of your website, you’ll likely want to add some custom styles. You can do this by adding CSS to your theme’s style.css file or through a custom CSS plugin.

Example CSS:

css

#searchform {
display: flex;
justify-content: space-between;
width: 300px;
}

#searchform label {
display: none; /* This hides the label. You can style it differently if you prefer to show it. */
}

#searchform input[type="text"] {
padding: 5px;
border: 1px solid #ccc;
width: 80%;
}

#searchform input[type="submit"] {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}

5. Insert the Search Form into Your Website

To add your search form to a specific location, you have several options:

  • Widgets: Go to Appearance > Widgets, and use a Text or Custom HTML widget to add your form’s HTML.
  • Page or Post: You can insert the form’s HTML directly into a page or post using the WordPress block editor.
  • Template Files: If you’re comfortable editing your theme’s PHP template files, you can insert your search form directly. For example, to add it to the header, you might edit header.php.

6. Enhance Search Functionality (Optional)

There are plugins like “SearchWP”, “Relevanssi”, and “Ajax Search Pro” that can greatly enhance the default search functionality of WordPress, giving you more control over search results, adding AJAX capabilities, and more.

7. Test Your Search Form

After setting up, test your search form to ensure it’s working properly. Try various search terms, check its responsiveness, and ensure it displays results as expected.

8. Additional Considerations

  • For accessibility reasons, it’s good to have a visible label or use aria-label for form elements.
  • If you want to modify the search results page, you’ll need to edit or create the search.php template file in your theme.

By following these steps, you can create and customize a search form that complements your WordPress website’s design and functionality.

To Get Daily Health Newsletter

We don’t spam! Read our privacy policy for more info.

Download Mobile Apps
Follow us on Social Media
© 2012 - 2025; All rights reserved by authors. Powered by Mediarx International LTD, a subsidiary company of Rx Foundation.
RxHarun
Logo