Request a quote
Featured Image for Header Live Search

Find Pages and Posts Instantly with the Header Live Search Feature

Live Search on your website is an underappreciated usability function. It helps your visitors quickly access the desired content by giving results based on the input keyword and each letter typed into the form. With Newspaper Theme 9.5, you get access to a brand new shortcode: the Header Live Search. Add it straight into your header and give the audience a way to access different pages of your site.

Header Live Search

What do you do with the Header Live Search feature?

The Website Manager is one of the core features of the 9.5 update of Newspaper Theme. With it, you can build and customize a website’s header from the ground up. Our team has created a series of shortcodes to accompany it. They give you the elements necessary for a fantastic layout.

Once you add the Header Live Search into the header, you give the audience the content they are searching for instantly. It pulls up articles, posts, pages relevant to the keyword helping them access it faster than ever before.

There’s a lot more to do with the Live Search:

  • Each result displayed to your readers can be customized from adding padding to the meta info to resizing the featured image for the page.
  • Create a search form that fits in with your site’s appearance (give it a background color, add a placeholder text, and many more.)
  • Add a hover animation over the results such as a shadow display or even a movement one.

Let’s dive right in and explore each possibility in detail!

Create the Header Live Search

Import a Header Template straight from the tagDiv Cloud Library. Now, whether you’ve chosen to import a Template or create one from the ground up, don’t forget to customize them to fit in with the rest of your website. Keep the look uniform throughout the design process.

To start customizing the Header Live Search shortcode, find it in the tagDiv Composer and drag it into your Header if you haven’t done so already. Now click on it to open the settings tab. In the General Settings section, you can choose the icon that appears for the button. We advise using a magnifying glass as it is easily identifiable by the audience.

Click on the Show Search Form option to see how your Search Form looks. Adjust the Search Form width, the padding, border and its alignment for starters. You can also choose a text placeholder which appears in the form and then disappear as the user starts typing. Add margins, padding and type the text that appears on the button.

Customize the Header Live Search

In the Results Module settings, you can find options for how the results are displayed within the search form Box. The Modules per row lets you show multiple posts on a single row. This works well in case you want the Posts Limit to be a higher number. Add a hover animation for your modules in the Hover Effect drop-down menu.

The Meta info has many customization options: choose the padding, margins, hide or show different parts of it such as the Category, Author, Button, Date, Comment, and many more. Mix and match to see which works best for the vision you have in mind.

The Style settings are divided into different zones:

  • The first section is the Search Icon. Choose the color of the icon, and if there’s text that accompanies it, you can choose the font and color of it, too.
  • Search Form is next, pick the background color, the arrow color, the border’s color if you have a border. There are also input and button options.
  • ‘The View All Results’ is at the bottom of your form. This section can also be customized in the Style settings of the Search Results Box.
  • The Search Results Module deals with all the fonts, shadows, colors of the Meta info and everything contained within the displayed results box.

With Newspaper Theme, you’ve got virtually unlimited options available to you. Test out designs to find the one that works best with the rest of your website.

Conclusions

Use the Header Live Search to display search results in real time to the audience. This helps them find what they are looking for faster and thereby creating a good user experience. Design and customize the element to fit in perfectly with the rest of your content and website. Display as many search results as you want and adjust their size accordingly. Get creative with Newspaper Theme!

Use the comment box below to share your fabulous designs with us!

Share

Alex I.
Alex I.
In my role as an artist and designer, my objective is to create brilliance on a daily basis. During my off-hours, I enthusiastically pursue growth, whether it's through photography, drawing, rendering, or any other captivating endeavor that piques my interest.
Previous article
Create the Perfect Logo for your Website
Next article
Check out the New Header Main Menu with Newspaper Theme

Do you need any help with the Newspaper or Newsmag WordPress Themes? Please send us all the necessary details via email or create a new topic on our online forum. We're always happy to assist you.

    • Hi,

      Thank you for your kind thoughts and words! We are delighted to discover that our work it’s appreciated the way you do. We truly value your feedback!

      All the best!

  2. Hi Alina,

    I used Newspaper them for our all blogs, it is one of the best theme for WordPress bloggers.

    Thanks

  4. Pls tell me, The news paper theme comes at $ 59, Pls let me know whether it can be put on life time, one time payment and unlimited website.

    • Hi! Thank you for your given interest. When you buy one theme license you will have it for a lifetime, with free lifetime updates. A single license can be used on one domain, according to the Envato policy from here – https://themeforest.net/licenses/standard. If you have more pre-sale questions, please drop them via email at contact@tagdiv.com and we’ll be happy to answer them. Thank you. Have a lovely day!

  8. That is a great article especially to those new to the blogosphere. Brief but very precise info. Thanks for sharing

  13. Greetings Pretty helpful advice within this article. I am surprised by the details that you have posted in the article. I appreciate your hard work and thanks!!

  18. Hi all, my site is using the latest Newspaper X theme.
    Ihave turn off 80×60 thumb size for several month. Now i know that using for live search (Quick Ajax search item hint)
    Please tell me how to custom that size? Want change it to the recent exits size 100×70.
    The theme default generator too many thumb size, so i must turn they off any size as i can to reduce space and number of files.

    Thanks you
    Nim

    • Hi,

      The theme can be easily customized if you will use the TD Composer and Cloud Library functionality. We do not recommend to alter the plugins through the code because you can break the functionality. Another alternative would be to use the child theme and add there which files you want to overwrite. Further, if you need more technical assistance, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ and our experts are ready to assist you.

      Thank you!
      Best regards!

    • Hi Umar! Thank you for reaching out to us. Can you please include this information into a new email at contact@tagdiv.com or open a new topic on forum.tagdiv.com? Unfortunately, this is not the best area to get technical help, as it’s not assigned to the Customer Support Center. Thank you for understanding!

    • Hi,

      Unfortunately, the theme does not have any such an option that allows you to set the general theme font from one single place, sorry! You will need to check the settings for each element you use on the frontend.

      Thank you!

    • Hi,

      Please note that the speed of your website depends on how well your site is optimized. First of all, you will need to check the image size and try to optimize them if you want to bring good theme results. Also, note that we have a speed optimization tutorial but this is addressed only to advanced users. So, if you follow the steps which are presented in this tutorial here -> https://tagdiv.com/how-to-increase-page-loading-speed/

      Hope this helps!

      Thank you for your understanding!

Newer Comments »

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Join our community

With over 2000+ fellow WordPress enthusiasts and digital creators

restaurant website template, cassio lovo pro restaurant website templates free website template homepage website restaurant ideas

Prebuilt Website Showcase: Cassio Lovo – Free Restaurant Website Template

Prebuilt Website Features: Cassio Lovo Cassio Lovo is a restaurant pre-built website template designed for...

How To Create a Newsletter Section With tagDiv Newsletter Plugin

Introduction If you have a WordPress website and use the Newspaper theme, adding an email...

Prebuilt Website Template Showcase: Newspaper Free News Pro

In the following paragraphs, we introduce you to one of our latest releases, the...

The Benefits of Using the tagDiv Module Builder

What is a module builder? The Module builder is a feature available in the tagDiv...