Introducing Search Styles in Astra!

Introducing Search Styles in Astra!

Have you been looking around for some stylish search options that look great and interactive on your website? Many of you even wrote to us asking whether we plan to introduce styles to replace the default Astra search box.

But now, we do! Yes, you can add a stylish search option that such as

  • The Slide search – It slides open a search box when you click on the search icon.
  • The Full-screen search – It covers the entire screen
  • The Header cover search – It covers the header
  • The Search box – A default search box if you would like to keep it as it is.

These styling options are currently available in the beta version 1.4.9 of the Astra theme and 1.5.0 of the Astra Pro addon. Please make sure you are using the latest version of the Astra theme and the addon to be able to use these styles.

You can take a quick look at the GIF below that shows how different search styles will look on your website.

What’s More to This?

Need to add search options anywhere on the page? We’ve introduced a few shortcodes that you can pick and insert anywhere on the page. These shortcodes work with specific parameters that allow you to select the style you wish to use. You can learn more about these search shortcodes in our knowledge base article.

What Can You Expect in the Stable Version?

As mentioned above, this is just a beta version that we pushed for you to give it a try. We are constantly working on improving it and adding more options as required. You can expect the stable version of this update on Monday, i.e. 20th August 2o18.

With the newly introduced styles, you’ll be assured that you no longer need to see the default search box on mobile. Yes, once you are comfortable with the search styles on desktops, they’ll be made available for mobile too. Just a couple of days to go until you get the stable version to go live on your websites.

Give It a Try!

This is a beta release and we encourage you to try it your staging and development sites and let us know how you like it.

To get started, backup your website and follow the steps below:

  1. Download the beta versions of the theme and plugin from the member’s area.
  2. Delete the currently installed Astra theme and Astra Pro Addon plugin from your site. Don’t worry you won’t lose any data.
  3. Install the downloaded zip files in step 1, just like any WordPress theme and plugin.

That’s about it! If there are any improvements or features you would like to see in this update, please feel absolutely free to let us know. We look forward to see your favorite search styles go live on your website!

Cheers 🙂

Join 304,719 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

27 comments

  1. Thanks for the great articles. I’m using your search style and add it up on my website through shortcode where I could have more flexibility in placing my search box. Again thanks for the full screen style. really great job!

    1. This is not available as of now, I the future versions of the plugin we will be bringing this option for the header layouts.

  2. Hi, I have a question. If I have team members on the website, is it possible to have the search function, search only through the list of team members?

  3. Hi

    1. How can I change the text string “Search…” without using a plugin?
    2. How to limit the search result to post only?

    Thank you.

  4. Thanks so much for this!

    I am using the “Slide Search” style on a website.

    Question: What is the best way to increase the width of the search box when it slides out?

    I would love to get the box so slide out to about 500px 700px or so.

    About the last 15 sites we have done have all been Astra!

    Thanks! — Steven

    1. Hello Steven,

      You can do this by adding a custom width to the form element and making changes for the dropdown CSS.

      Please feel free to get in touch with us if you need any further help.

  5. Dear Support Team,

    is it possible to change the action URL from the search form via a filter/action?

    Thanks in advance!
    Christian

    1. Hello Christian,

      Well, we use the default WordPress filter to fetch the Search Form. You will need to check the WP codebase or other plugins that can help achieve this requirement.

      1. Hi Support Team,

        thanks for your reply. I should have mentioned that I mean the advanced search (full screen) from the Astra Pro version. But I figured it out. In case someone searches for a solution:

        Copy template file from Astra Pro plugin directory:
        /wp-content/plugins/astra-addon/addons/advanced-search/template/full-screen.php

        to your child theme directory:
        /wp-content/themes/your-astra-child-theme/astra-addon/advanced-search/full-screen.php

        Now you can edit the template in a save way. Should work with any other template file from Astra Pro as well.

        Best regards,
        Christian

  6. Hey

    You said that search for mobile will be available soon.
    Pls make it true. I realyy need that search on mobile.

    Andrei

  7. Saurabh Khajuria

    Hi,
    How do we change (color) settings for the (search) results page.
    Search on my website returns invisible links (seems like white on white bg). However the description lines (excerpts) are visible.
    The links can be known to exist above the excerpts only on a mouse hover, otherwise its blank white spaces in between excerpts.
    Thanks,
    Saurabh.
    P.S – Is there a place to suggest additional functionalities for Astra Pro. For eg: having a hamburger menu option for desktop. Astra is fab but there is always more to add/suggest.

    Thanks!
    Saurabh.

  8. After searching and searching online for instructions on how to add search to the Astra Pro plugin Header Builder, I stumbled across how to add it. I’m having no luck in finding a setting that will allow the search box to slide to the right. Does anyone know where this setting is?

    Thanks

  9. Hi. I am using Astra Pro Version 3.5.1 but I can’t find the option to add “Search bar” as a last item in primary menu!

  10. Robi Erwin Setiawan

    Is it possible to make differentiation on Search Style?

    I mean, I would like to use the search box style on Desktop, but I use the slide search style on mobile.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Download is Just A Click Away!

Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.