(Author’s note: This post is the first in a continuing series describing issues we at Deluxe have run into with WordPress, and how we worked around them. We’re calling it NerdPress, because it will be pretty geeky at times, with all the code and whatnot. It is our hope that these posts will be helpful and informative to others in the WordPress community.)
We obviously love WordPress. It is our CMS of choice for a laundry list of reasons. But there are times when, perhaps, the underlying code outsmarts itself — or at least outsmarts me. We ran into such a situation when we were building the Deluxe site.
An image from our Valentine-themed slideshow. We chose the Gabor quote because it fits with our "win-win" business philosophy.
As part of our rebranding launch, we sent out postcards with QR codes which led visitors to a landing page on the site. This page features an animated slideshow. Because we wanted our site to work fully on any platform, we chose to use the javascript-and-jQuery-based Nivo slider to handle the slideshow. We used the slider in other client sites, and it seemed like a perfect fit for our redesigned site.
Once the page was built in WordPress, we used the HTML editor to include the code for the slideshow. Easy-peasy, right?
Wrong.
Once I put the code into the WordPress page, things just weren’t right. Sure, the images were showing up, but there were too many indicator buttons on the slideshow (It’s three images! How come there are seven buttons?), the transitions were all screwy (Come on! It’s a simple half-second fade!), and none of the links in which I wrapped the images worked (Jeebus! The anchor tags are all in place! What gives?!?). I literally spent hours working to resolve the issues, but no amount of tweaking the slideshow’s source code or CSS provided any relief.
And then I looked at the HTML editor in WordPress again. WordPress, in it’s infinite wisdom and attempts to create clean code, was inserting bits of information between the image calls in the HTML.
What to do?
In this case, we took the dynamic functionality of WordPress out of play completely. Instead of inserting the slideshow code into the landing page through the HTML editor within WordPress, we created a new template file for the page and included the slideshow in the PHP file.
After applying the new template file to the page, I crossed my fingers and reloaded the site. Lo and behold, it worked like a charm — except for the links, which I later learned resulted from a CSS issue. Two revised lines of code later, and the links worked properly as well.
The takeaway from all this: The dynamic content functionality of WordPress is a beautiful thing, but it can cause problems at times. If you find that you are having issues implementing advanced features on your site, take a look at how you are deploying your code. If it is from within the WP HTML editor, that might be a good place to start troubleshooting.