How to Change Search Placeholder Text in WordPress [No Plugin]

Changing the search placeholder text in WordPress can be a simple yet effective way to personalize your website’s search bar.

In this article, I will share with you how to change the search placeholder text in WordPress without using any plugins.

Table of Contents

Changing Search Placeholder Text in WordPress

If you want to change the placeholder text in your WordPress search form without using a plugin, you can do so by adding a few lines of code to your theme’s functions.php file.

Here’s how:

Step 1: Locate the search form

First, you need to locate the search form in your WordPress theme. Depending on your theme, the search form may be located in the header, sidebar, or footer. Once you’ve located the search form, you can move on to the next step.

Step 2: Find the search input field

Next, you need to find the search input field in the search form. This is the field where users enter their search terms. In most WordPress themes, the search input field is identified by the name “s” or “search”.

Step 3: Add the code to change the placeholder text

Once you’ve located the search input field, you can add the following code to your theme’s functions.php file to change the placeholder text:

function my_search_placeholder( $text ) {
    if ( is_search() ) {
        $text = 'Enter your search term here';
    }
    return $text;
}
add_filter( 'get_search_query', 'my_search_placeholder' );

You can use a code snippets plugin or add this in your child theme’s function.

In this code, the my_search_placeholder function checks if the user is on the search results page, and if so, changes the placeholder text to “Enter your search term here”. You can replace this text with any custom text you like.

And that’s it!

With this code added to your theme’s functions.php file, the placeholder text in your WordPress search form will be changed.

If you want to add a copy button to your WordPress code block, then check this blog, where I have shared the custom CSS.

Using Custom CSS to Change the Search Placeholder Text

If you want to change the search placeholder text in WordPress without using a plugin, you can also do it by adding custom CSS to your theme. Here’s how:

Personalised WordPress Hosting for Agencies

Are you Spending hours:

  • Managing your WordPress website?
  • Troubleshooting Technical difficulties?
  • Dealing with plugin Security Issues?
  • Website Uptime Monitoring?
  • Cleaning Hacked Sites?

Let me take care of your WordPress website, so you can focus on scaling your agency.

Give your clients top-notch VPS Hosting for blazing fast performance, 24×7 security monitoring with autopilot safe plugin updates.

I will help you free up time by managing WordPress websites.

Step 1: Identify the search form class or ID

First, you need to identify the search form class or ID. You can do this by inspecting the search form element using your browser’s developer tools. Look for the class or ID attribute of the search form element.

Step 2: Add custom CSS to change the placeholder text

Once you have identified the search form class or ID, you can add custom CSS to change the placeholder text. Here’s an example:

.search-form input[type="search"]::placeholder {
  color: #999;
  font-style: italic;
}

In this example, we are targeting the placeholder text of the search form input field using the ::placeholder pseudo-element. We are setting the color to #999 and the font-style to italic.

You can customize the CSS to your liking, depending on your theme’s design and your preferences. Here are some other CSS properties you can use to style the search placeholder text:

  • font-family
  • font-size
  • font-weight
  • text-align
  • background-color
  • border-color
  • border-radius

Make sure to test your custom CSS on different devices and browsers to ensure that it looks good and works well.

That’s it! With these simple steps, you can change the search placeholder text in WordPress using custom CSS.



I share my Learnings & Case studies via email.
Subscribe to Stay Updated

Conclusion

In conclusion, changing the search placeholder text in WordPress is a simple task that can be accomplished without using any plugins. By following the steps outlined in this article, I was able to successfully change the placeholder text on my WordPress website.

It is important to note that this change will affect all search forms on your website, including the default WordPress search, as well as search forms on posts, pages, and custom post types. Additionally, it is important to ensure that the new placeholder text is accessible to all users, including those using screen readers.

Overall, changing the search placeholder text in WordPress can be a quick and easy way to improve the user experience on your website. By using the functions.php file and making the necessary modifications, you can customize the search form to better fit your website’s needs.

Aditya R Sharma

Hello! Currently, I am working as Chief Marketing Officer at POSIMYTH Innovations, with a deep love for WordPress. I love solving problem with AI, Automations & Critical planning. In my free time, I write blogs to share all his learnings with the internet.

Content Writing for SaaS & WordPress Business
Tired of Low Traffic & see your Blog Fail?

Let me help you with content writing & SEO strategy for your product that makes sales.

After raising multiple domains to 1M+ organic click, I am helping Business owners like you harness the real power of SEO.

Explore Further