3 Ways To Add A Search Box In Nav Menu In Wordpress | Virtual Crafts

[Music] hello and welcome to virtual crafts in this video we'll see how we can add a search icon or a search box in our navigation menu so a search box will probably be appended at the end of this navigation menu here now sometimes a search box is an absolute requirement to provide your visitors a way to search your website so there are three ways we can add a search box in our navigation menu one way is that you enable a search box in your theme customizer and now i already mentioned many times in my previous videos that accessibility features are different for different themes for example in the last video we saw how we can add a scroll to top button on our website now the theme i'm using provides the feature of a scroll to talk button scroll down and you will see this scroll to talk button now many other themes might not provide this feature so that's when the last video i showed three methods to add a scroll to top button that if your theme doesn't provide it you can go for the other two same in this video that i'll show three methods one is through theme customization and if your team doesn't provide that feature then you can go for the other two the second method is that we can add a small php code snippet in our functions.php file the third method is that we can use a plugin to add a search box in our navigation menu so let's start with the first one go to your dashboard go to appearance and then customize now this customization area might be different for you based on the theme you're using so you'll find the search box setting in your header for me it is in theme options header and then header main area here i have a setting enable search icon i'll toggle this setting and now i have a search icon here when i click it it will open a search box and we can search anything here and our website will filter it for us publish the changes now go to your website and you'll see that the search icon has been added and you can search anything so this was one way we can add a search icon or search box in our navigation menu let's disable this and try the other way now refresh the website okay now the icon is disabled so the second way we can add our search box is by adding a small php code snippet in our theme file which is functions.php file so let's go to our dashboard go to parents and theme editor this sidebar has all the theme files currently styles.css file is open we have to open this functions file functions.php click it and here you'll see the title of this file which is functions.php file now a very very important point here that edit your theme files very carefully even if you misplace a single comma a bracket a semicolon or colon you'll break your whole site so the best practice is before editing your theme file copy all this code open your text editor and paste it here and now your code is safe i'll minimize it now even if you mess up your code you can simply go to your text file copy this code and replace it with this code so try to have a backup first now scroll to the end of this file it's better to give commands while you're adding something new and add two forward slashes before that line and now it will act as a command it has no influence of your code now if you don't know php simply follow this code i'm writing here i'll not explain it because i'm going through a wordpress series for beginners and beginners really don't know php so i'll just write the code and you can definitely copy it [Music] [Music] okay this is the code you have to add to your functions.php file now click update file you'll see a success message that file has been saved now go to your website and refresh it and now you'll see a search box here you can type in your content and search so this is how you can add a search box using a php code snippet now i'll remove this code and i'll try the third method go to your themes file again and remove it update file now refresh the website and now the search box is gone now go to your dashboard go to plugins and add new search for plugin ivory search this is our plugin install it activate it scroll down and this is our plugin you can click this settings button on go to this ivory search tab in our dashboard area skip this setup wizard okay this is the dashboard for this plugin here we'll get a shortcut for our search form by default just copy this shortcode and paste it on your website to show your search form for example go to your website and edit your page with elementor i'll add a new section here search for the shortcode module and drag it in your content area now i'll go back to my dashboard and copy that shortcode and paste it here now you'll see the search box appears update the changes and preview the page and here is the search box so using this short code you can add your search box anywhere in your website but as we need it in our menu so go back to the dashboard before that let's have a look on some settings of this search box you can duplicate it by clicking here or reset it i'll just save this form go to this design tab and toggle this setting enable search form customization reload the page and now you can customize the search box by clicking this button search from customizer it will take you to your theme customizer and now a new section has been added to your theme customizer which is ivory search so these are the three boxes you can select from one is with search box and icon search box and button and a simple search box i'll keep in this one you can change the placeholder text let's say this you can choose a text box background a text color for this text box submit button color and you can make all of these customizations and not go for customizations now i'll close the custom either then i'll go to settings here the first tab is custom css you can add a css code to style this form in this tab you can add your stop words that will not be searched you can add synonyms for better search results you can also display your search form in your header now header is not necessarily menu in some themes header is a complete hero image section and in some header is just a tab under navigation menu and it variates with themes so you can add the search form to your head as well or your footer just select a form we currently only have this one search form select it and it will display in your footer you can also you can also display it on your mobile phone go to this tab menu search and toggle this setting to display the search box in your menu click save are some settings currently the search box is displayed at the end of navigation menu but you can toggle this setting to display it at the start of your navigation menu you can also select a search form style currently a drop down is active so let's first see our search form looks go to your website and refresh it and now you have the search icon here click it and it fades into your website now go back and choose it to sliding we can also add a menu title to display in place of search icon for example if we write search then the text search will be written and when we click it a search box will appear save the changes and refresh your website now click the search icon and now the search box slides from the icon so you can customize these settings according to you these are the three ways you can add a search icon or search box to your navigation menu that's all for this video if you like the video please subscribe to the channel and turn on the notifications to get notified of every latest video uploaded thank you and see you in the next video

Channel: Virtual Crafts

Views: 6,019

Keywords: wordpress for beginners, worpdress tutorials, complete wordpress course, wordpress training, virtual crafts, wordpress freelancing, best wordpress lectures, wordpress, free wordpress course, search box wordpress, search icon wordpress, search box in menu wordpress, search icon in menu wordpress, wordpress search box, wordpress search icon, add a search box in menu wordpress, add search icon in menu wordress, search box in website, create search box in wordpress, ivory search

Id: RkyoPB3nDHY

Length: 11min 56sec (716 seconds)

Published: Fri Oct 09 2020