In this video, we look at how you can add a fantastic collapsible sidebar menu to your WordPress site to help visitors quickly find what they are looking for. This is an excellent addition to any blog or store sidebar.
With the Bellows Accordion Menu plugin, all this can be done in no time.
Check out the plugin here https://wordpress.org/plugins/bellows-accordion-menu/
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
Sidebars are a fantastic way of showing More information and linking to Different parts of your WordPress site But you can take this to the next level By adding a collapsible sidebar menu In just a couple of clicks users can Navigate to any part of your WordPress Site from the collapse or menu and you Can add whatever links you want to it as Well in this video we're going to add a Collapsible sidebar menu to a WordPress Site using one simple plugin what's even Better is that we're going to go step by Step through this process so that by the End of this video you'll have an awesome Collapsible sidebar menu on your site Too let's do it so now we're logged into Our WordPress site the first thing we Need to do is install a plugin called The Bellows accordion menu plugin and What this plugin is going to do is add The collapsible menu feature to our WordPress site with no coding knowledge Needed nice and quick to install and It's easy to use which is fantastic as Well so to do that all we need to do is Head over to plugins here on the left Hand side hover over that and then click On add new and on the ad plugins page We're just going to come up to the Search bar here on the right hand side And type in Bellows accordion menu and Hit enter and this is the Bellows Accordion menu right here we can see
It's got five stars and 10 000 active Installs it's a really good plugin and All we need do is click the install now Button that's now installing the plugin Once that's installed we can now click The blue activate Button as we can see The Bellows accordion menu plugin has Now been activated on the site so now The next thing for us to do is to create A new menu to use in this collapsible Menu for the sidebar so to do that all We need to do is head over to appearance Right here and then hover over that and Then click on menus now as you can see Up this is my primary menu right here But I don't want to use that for my Sidebar menu so I'm going to create a New menu and to do that you just click The link right here create a new menu I'm going to give my menu a new name so I'll just call it collapse menu and then I'm just going to hit create menu now We've created that menu we can now add Our pages and posts and links to this Menu and we're going to do that by Coming over to the add menu items right Here we're currently under the pages Section I'm just going to click on view All and my collapsible menu is going to Be in my blog page sidebar so what I Want to add to this menu is the home Page I'm going to add the blog page as well I'm going to add the cart checkout
Contact page my account page and I'm Going to add the store page as well Once you've selected all the pages that You want to add to your menu you're just Going to click add to menu as well as Pages I'm just going to close this we're Going to add a couple of posts to this Menu as well so I'm just going to click On this one and this one and click add To menu so now we have all of our menu Items in a big list like this now the Main thing to think about when you're Using a collapse on menu is it's all About parents and child relationships so What that means is that for instance in My menu I'll be using the blog item Right here as a parent and then I'll use The two blog posts as a child underneath That as Sub menu items so what we're Going to do is going to sort our menu Out right now so I want my store Page up By my home page I'm just going to move That up there Then I'm gonna have my blog page and my Cart checkout and account pages are then Going to go as Sub menu items under my Store page so all you do is you grab Hold of your item Drag it underneath that item and then You'll see that you'll be able to drop It as a sub menu item I'll do that for My checkout as well so I drag it Underneath the store and drop it in There and my account page
Drop it in there as well then if I want To reorder these I can just drag the Ones up to the top that I want to be at The top so I want my cart and then my Checkout And then my my account page as well Be careful because you can make these a Sub menu item of the other items as well So you just want to make sure you drag Them into the correct place So then I've sorted my store part of my Menu out my blog menu item I'm now going To drag these blog posts underneath that So they're sub items as well And then when you're happy with your Menu structure just click save menu Right here save the menu So now we've created our collapsible Menu the next thing for us to do is to Go and copy the sort code from the Bellows accordion menu plugin to the add To our page let's do that all we need to Do is head over to Bellows menu over Here on the left hand side of the screen And click on that so this is the Bellows Control panel and all we want to do is Copy this shortcode right here all you Have to do is click on it And hit command C on Max or control C For PC that'll copy the shortcode and Now what we want to do is add this Shortcode to our sidebar widget so to do That all we need to do on the screen is Head over to appearance over here and
Underneath appearance you'll see widgets Let's click on that and now we're under The widgets page I've got my main Sidebar widget right here it's currently Open I'm going to add a shortcode block To this sidebar so to do that I'm just Going to click the add block button Right there and then I'm just going to Search in the search box for shortcode And then I'll just click on the Shortcode block that's added in short Code block to the main sidebar and then I'm just going to paste in the shortcode That I copied from the Bellows menu area So I've pasted that in here and all I'm Going to click is update to update the Sidebar now as it's a shortcode we can't See anything right here so I'm going to Navigate to my blog post page and we'll Be able to see what this looks like There so I'm just going to head the site And then head to the block so here we're On the blog page and as you can see here Is the collapsible menu that we've just Created and if you click on the parent Items you'll see that all the child Items are viewable and clickable below Them as well so I've got my store pages And my blog posts so that's really handy For any user that's on a page and they Want to either navigate to the store or Navigate to another part of the site or See what some of the most popular blog Posts are underneath the blog section
Then you can add all those items to your Collapsible menu and you can make that a Really powerful feature of your website Now what you're probably thinking is how Do you change the look of this Collapsible menu well to do that click On the customizer up here that opens the Customizer and as you can see underneath The customizer you've got an option for The Bellows if you click on that and We've got two options under here we've Got General and fonts so I'm going to Click on the general section first and There's a few cool little options here For you to change the way that this Looks on your site so the first thing is This skin so that's the color of the Look of the collapsible menu itself the Options you have are non you then have a Vanilla something that maybe matches Your theme and then you've got the blue Style and the gray style as well so I'm Going to stick with the gray style you Can also choose to expand the current Sub menu by checking that box And you can also choose to show the Current Associated terms menu alignment You've got options for full left right And center and with Center you have to Choose your menu width as well heading Back we now have options for fonts so we Can choose our font family there I'm Using Poppins on this site so it's got The Poppins font right there I'm once
You're happy with customizing and the Look of your collapsible menu you just Click publish And that will then save those changes so Now you can go ahead and build up your Collapsible sidebar menu however you see Fit I hope you've enjoyed this video if You have let us know in the comments Below where you read every single Comment and if you've got a question pop One down below as well and we'll try and Get back to you and help you out with That If you want to see more videos that help You grow your WordPress site then make Sure you subscribe to our Channel thanks For watching
