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.
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!
Very nice content and amazing knowledge thanku so much..
Great blog for every new blogger,
Thank you dear sir for sharing all the important stuff with us.
Nice Information. Thanks!
Thank you for the kind words 🙂
can i replace search button to google custom search result ?
Hi,
That is not possible. The search provided by the theme will display search results from the website, not from Google. You could check some online guides about implementing Google search in WordPress, and use that instead of the theme search elements.
Thank you!
Great Share..!
This is beautiful thanks for sharing this wonderful information thank you
Very nice content and amazing knowledge thanku so much..
very nice
thank god and very good information good sharing,
Thanks For Sharing Such Great Information
Thanks for the information sir
thank you for sharing Your Blog.It Is Very usefull For Us
This is beautiful thanks for sharing this wonderful information
This theme is awesome…great information…thanks dear
Thank you for providing with this information. I was looking for it. Thanks
Great! We’re happy you’ve found the information a valuable one. Thank you for the kind words!
I use the Newspaper theme for my blog. This post is really very helpful for me.
Thanks for sharing this article
Thanks for sharing such a informative article on the Header Live Search Feature. I’m using news paper theme and it’s great
Thanks Sir/Mam, Super Informative article Ever…i used News Paper Theme..
This is beautiful thanks for sharing this wonderful information
great work
Nice post with a great quality of content. This is really helpful content. Thanks for sharing such a informative information ..
Hi,
Thank you for your appreciation.
All the best!
Usually I never comment on blogs but your post is so convincing and I cant stop myself to say something about it. You are doing a great job, Keep it up, very helpful and informative post..
Hi,
Thank you for such great words! You have made our day 🙂 One of our main goals is to please every customer!
All the best!
thank you for sharing Your Blog.It Is Very usefull For Us.
Thanks for sharing this valuable information to us.
Thanks For This Great Article. May You Bring This More in Future.
Thanks For This Great Article. May You Bring This More in Future.
wow your article so good i am happy and take knowledge article.
Thanks for sharing this valuable information to us.
Great Article!
I am using Newspaper theme for my website, such a great theme ever thank u
Thank you for choosing Newspaper theme to design your website <3. We appreciate your kind words!
I use the Newspaper theme for my blog. This post is really very helpful for me.
Great Rajesh! Thank you so much for using the Newspaper theme for your WordPress news website.
Thanks for sharing this valuable information to us.
Thank you for sharing your kind thoughts with us 🙂
This is the best for all people. It’s vey helpful for all.
Thank you for your consideration!
How to load Fast Newspaper theme Please Suggest me. Need help
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/ If you need technical assistance, you can always ask our support team to help you. Furthermore, if you need custom functionality, we have a team assigned of web developers and web designers that can help you reach your goals (https://tagdiv.com/premium-customization-services/).
All the best!
All the best!
I am using Newspaper theme . I’m very satisfied with this theme.
Great! Thank you for choosing our Newspaper WordPress theme to build your website!
I use Newspaper theme. It is one of the best theme for WordPress bloggers.
Thank you for your consideration!
very unique and helpful article
Thank you for your kind feedback!
How to load Fast Newspaper theme Please Suggest me. Need help
Hi,
Please note that the website’s speed is influenced by several optimization factors including the server, hosting, images, plugins, browser, and so on. You could check out our guide on How to Increase the Page Loading Speed – https://tagdiv.com/how-to-increase-page-loading-speed/. If you need technical help with our WordPress theme, please open a new topic on forum.tagdiv.com or send us an email at contact@tagdiv.com, and our support team can assist you. If you need custom optimization services to be implemented on your website, please address your inquiry here – https://tagdiv.com/submit-a-request/.
Thank you.
Stay Safe!
Great article sir
Hello, I am using newspaper theme for my website “allbeginners” but I am facing some issue with mobile. It is not responsive in mobile but in tablet and desktop working good.
And thanks for sharing Header Live Search feature with us. 🙂
Hi,
I have checked your website on mobile and the layout of it it seems to be fully responsive, as you can see here -> https://www.screencast.com/t/aLsbXXHY If you need more technical assistance, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ and we are ready to help you.
All the best!
Very nice Post
Thank you for commenting, Rihan!
Great Content sir
Gratefully article keep it up
Thank you!
Thank you sharing this great information.
Thank you, Vivek!
thanks for the information
This Is helpful for Our Reader , Thank You For Guide
Hi,
Thank you for your positive feedback!
All the best!
great post thanks for sharing with us
shimmringstar
Hi,
We deeply appreciate your beautiful words!
Thank you!
I use the Newspaper theme for my blog. This post is really very helpful for me.
Thank you.
Thank you for choosing Newspaper theme for your blog! <3
Thanks for Nice and Informative blog Post. This article is really contains lot more information about This Topic.
Thank you! 🙂
How Disable Live search in Newspaper theme?
Hi,
If you want to have a basic search, then you need to use a cloud header -> https://tagdiv.com/newspaper-theme-customize-the-header-manager/ from tagDiv Cloud Library -> https://tagdiv.com/what-is-the-cloud-library/, edit it with tagDiv Composer, remove the live search and add the normal search -> https://i.imgur.com/2IzKYuK.png -> https://i.imgur.com/aHer1cG.png If you need more technical assistance, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ and we are ready to help you.
All the best!
Nice Post thank for sharing
Thank you!
OMG this is what i was looking for thankyou
Great! We’re happy to see the information helped you 🙂
Sir, I’m clumsy now Sagest me to a good theme for WordPress that is free and SEO friendly
Hi,
Thanks for your message! Please note that choosing the Newspaper theme is a good idea for your project. This is a powerful WordPress theme that offers a lot of functionalities. Also, it’s SEO friendly and it can be easily customized with SEO Yoast plugin.
All the best!