Simple jQuery accordion menu for WordPress

Lots of people who use WordPress (and some actually call themselves developers) rely to heavily on plugins to accomplish simple tasks. While there are many valuable plugins available for WordPress, the ones try to give back end users the ability to change things that should never need to be changed. These types of plugins usually allow for a lot of “customization” on the users side but makes for an extremely bulky amount of code to accomplish things that are normally quite simple and require minimal code to actually do outside of it. While plugins like this are great for people who are just hobbyists and have no knowledge in web development because it allows them to change things with simple drop downs and checkboxes over learning JS/CSS, but no real developer should ever use these as they are bulky and unnecessary.

This is especially annoying when the plugin is only 90% of what they really needed and you can’t work around it easily from the outside. You should NEVER modify a 3rd party plugin directly because this will make it so you can’t upgrade it without adding you changes back in each and every time. Most places would just ignore upgrading it all together which is far worst because you are not getting potential security fixes and may have your entire site vulnerable to attacks from an easy to spot out of date plugin.

So below is the code I created to replace the jQuery Vertical Accordion Menu that was installed by an outside consultant who didn’t understand obvious UI issues their solution created. What this plugin will not allow is for the main pages to be clickable while also allowing you to expand them to see what’s underneath. You either can expand and not go to these pages directly or go to these pages when you click the + causing an animation to happen for a brief second (if your site is actually performing quickly) taking you to the next page.

This code will accomplish exactly what was needed for this project and does so from within the template itself. It uses the standard WordPress “Custom Menu” widget to drive the menu. I used jQuery because it was already running on the page and see no reason to add additional libraries when they are not needed. The previous consultants decided to put the menu inside of a div (which it should not have been since the menu starts as an li which gives the obvious hint a ul or ol should come before it but oh well) with the id of “sidebar-sub-nav” which you will have to change in the code to match whatever your structure looks like.

Since keeping the same look was desired I took the CSS that was already being used by the plugin and made some simple modifications to break it from it’s dependencies to the plugin and it’s additional unnecessary structure. Here it is below -

As well the javascript is pretty simple as well. Originally I was prepending an img and switching out the src out to handle the change of state for the toggle but when I went to separate the JS into it’s own file instead of just being hardcoded into the sidebar I realized there was a problem. When switching out the src, I was needing php to grab the theme directory dynamically and I didn’t want to hardcode it. So I made a quick switch to using a span with the image used in the background as a class instead and it works out much better. Since the CSS is relative I don’t have to worry about changes to the folder structure and makes it more reusable. Here is the final JS below –

And finally, to get this all working you need to make sure you are including the js file in your header so I added this right after the line where jquery is added –

Now all i had to do was switch out the widget from the plugins to the standard WordPress widget and everything was working flawlessly. Hope this helps someone else out there to make better themes in the future and avoid being dependent to bulky unneeded plugins.