How to add Search Icon with Toggle Effect in WordPress Menus
Many themes already have a search icon image or supporting icon libraries, so, accordingly add search icon. If the theme supports the font-awesome icon library, then, directly use the font-awesome search icon. If you want custom search icon, then, create png icon with photoshop or find the icon image, but, just make sure you use the file name as search-icon.png and upload it to the themes images folder.
How to Create a Search Icon With Toggle Effect in WordPress
Today, I will demonstrate how to create a search icon with toggle effect in WordPress by using CSS code. Most design options can be changed with CSS code and it is easy to add to WordPress. The issue with most CSS is that all themes are not coded the same way. This will result in CSS working on one site and not another. The issue for this case is that some themes are coded in HTML4 and some are in HTML5. More than likely, your theme is in HTML5, but if you are using an older theme, it may be using HTML4.
How to Use the Toggle Effect to Show and Hide Text in WordPress Posts
One concern that people have with toggle effects is that they can negatively impact your website’s SEO. This is somewhat true, but on a very small scale and it depends on the search engine. For example, Google will have hidden text or read more content ranked lower than websites without it, but it is not the deciding factor by any means. Thus, if you were going to rank low in the first place, this doesn’t really change much. At the same time, if your rank high, you would still end up in roughly the same spot. Other search engines like Bing and Yahoo do not seem to use these as a deciding factor for ranking.
Have you seen the search icon with toggle effect on many popular websites? Take a look at our sister project List25 for an example. The idea is to display a simple search icon, and when the user clicks on it the search forms slides out also known as the toggle effect. It is a neat effect that also saves space and allows your users to focus on the content. Not to mention, this is great for mobile responsive themes. In this article, we will show you how to add a search toggle effect in WordPress Themes.