Something that I always forget to do when building a website, is to check for any conflicts. Either between plugins, themes, scripts or images. Sometimes I forget that when you wp_enqueue a script to the front end, it’s going to be on every page unless you specify what page it should be. Well this happened to me last week. Worst part is that I didn’t even catch it until last night. Then I was up until 4 am fixing the problem. For those of you who know me, 4 am used to be nothing. I laughed in the face of 4 am. Now I’m working on a new schedule and trying to be in bed by 11. So 4 am was a nightmare. Regardless, I solved my problems by remembering to check inside WordPress to see if my plugin plays nice with others.
jQuery Items. They’re All Boys!
One of the best pieces of advice that I ever received, vis-a-vis programming and programming languages, is that all of the elements in jQuery are all boys. Meaning that they all have some kind of a relationship with one another. So when I style an accordion to have a background that’s blue, unless I’m very specific in my css, all accordions will have the same background color, or even worse. All jQuery elements could have that background. That’s exactly what happened to me. Let me explain. I’m a huge fan of the jQuery Themeroller. It’s one place I can go to and style all of my jQuery elements. As long as I use it right, no matter where I use a jQuery accordion or jQuery tabs, all of my jQuery elements have style to them. That’s awesome for the front end of a site. For the backend of a WordPress site, that can be a nightmare.
WordPress has some awesome functionality. Some of the pieces that I use the most would be the wp enqueue script and wp enqueue style. It’s a simple way to link to a style sheet or javascript file, with out having to edit a header.php or footer.php template to load the script. I love it to say the least. So I learned how to enqueue scripts into the admin side of WordPress by using my WordPress Plugin that I’m creating. It’s called Gravity Styles by the way. A really awesome dude, Michal Bluma, showed me the easiest way to do it. So I dropped it in and BAM! it worked. I was super happy! There was my accordion in my admin page. SO I marked up some html and pushed out the update to the plugin.
Here’s Where Things Go Crazy
The biggest mistake I made was not checking to see if my website still functioned after making my changes. It did by the way. Everything was fine. Except for not being able to add a new Gravity Form, or update a Gravity Form or deleting a Gravity From. What happened was that I was enqueuing my stylesheet and javascript file by using a admin enqueue scripts, which is totally fine and ok to do. The only problem was that I was queing the script on every page inside the admin. And it turns out that I was not giving my jQuery elements a prefix to make sure my script plays nice with others. So anywhere in the admin, where an id of Accordion was being used, my jQuery commands were being listened to and being used. Talk about an effing nightmare! I did a quick Google search on “wp enqueue script on specific admin page” and I found this awesome page that explains how to do it.
It turns out that a lot of plugins use accordions and tabs from jQuery. Since I was including my ThemeRoller script, I totally styled everyone’s plugin to look like mine. Which kind of gave me a rad idea for a plugin. Anyways, I figure out how to use the code in the right way and now my stylesheet and scripts only que on my own admin page. Amazing.
Make sure, when you develop your own WordPress Plugin, you’re making sure that you are playing nice with others!