I’ve done a few jQuery-based drop down content areas for client projects lately – the kind where the additional content opens up on click so you can peruse the contents. This is a strategy often used for FAQs, such as the “About” page on Love Taza, but it can also be used to great effect to condense some of the longer blog sidebar elements (see the categories and archives on Everly Clothing’s blog).
When a reader recently asked about this functionality, I thought I’d go ahead and tackle it in a tutorial post.
Quick Note: If you just need the drop down to appear on hover, and you don’t need it to stay open if the mouse is moved off the list, you can use CSS (think: navigation bar drop downs). If you want it to stay open after a click, you’ll need jQuery (or vanilla Javascript, if that’s your thing).
Here is an unstyled but working example of the general functionality we’ll be creating in this tutorial:
And in case it’s a little more motivating, here’s a screenshot of a real-life styled version (you can try it action over on the EverlySo blog):
I used to have this problem on my contact page where I wanted to clearly show my next availability. It was a problem because if I just put a lead time (e.g. 6-8 weeks), people didn’t seem to take the time to do the math to figure out when that actually put my next openings. On the flip side, if I typed in the next opening manually, I invariably forgot to update it in a timely manner.
I’ve posted before about how I feel about small nuisances on websites and in workflows – the gist is that they drive me nuts and I feel compelled to fix them.
Eventually I decided on a two-pronged attack to this particular problem. One prong involved changing my quote request form to show multiple notices about timeline/ availability. The second prong involved coding my contact page to display my next availability on a rolling basis, where I just enter the lead time as a single digit and the displayed date is calculated automatically based on the current date.
Click to enlarge
Step 1: Create a Custom Entry Field
I definitely wanted to be able to update the lead time value on an ongoing basis from right within WordPress, since it tends to shift a bit based on scheduled time off, holidays, and of course client scheduling, so I used the Advanced Custom Fields plugin to add a simple input field to my contact page.
While a number of different projects over the last few months have included features where I’ve needed to use information from a URL to do something special with a page, two in particular stand out. These two required that I use PHP to find out the referring page so that I could then define the actual content and structure of the page before it was created client-side.
Client-Side, Referring Page URLs, WHAT?
Let me back up just a little, since I know some of you may not be that familiar with this sort of thing but may still be curious about the techniques. When thinking about WordPress and PHP sites in general, it’s helpful to know that PHP is a server-side language. This means that everything going on in your PHP code is read by the server and performed before the page is ever created in the browser (on the client-side, or the side of the end user). This is why you don’t see any PHP in your browser web developer tools when you inspect the code – only the HTML and other stuff the PHP outputs.
Much of the time, the changes I’m making based on the referrer or URL are fairly minor, and a lot of the time I need them to be flexible based on the user’s interaction with the page. In these cases, I use special content in the URL such as fragments preceded by the hash symbol (#) or query strings, which use question marks and other symbols to set up a whole set of information right in the URL. Then, I use jQuery to read the URL and perform whatever page tweaks are necessary.
jQuery Example: Fairmount Fibers
I recently coded a wonderfully complex site for local Philadelphia business Fairmount Fibers, the US distributor of Manos del Uruguay yarns, through Aeolidia (the site was designed by Meg Lewis). There is a directory of available patterns, which can be filtered and sorted by yarn, pattern type, and whether the pattern is free or for purchase.
While the client wanted to highlight the free patterns in the navigation menu as well, it didn’t really make sense to create a whole second page that does the same thing as the main patterns page. Instead, I coded just the one page, and set up some visual changes based on whether the URL has #free at the end. When you click the “Free Patterns” link in the menu, you’re really just reloading the same page with that fragment on the URL. Then, the code reads that fragment and triggers changes to the page title and filtering.
Updating WordPress core, themes and plugins is a scary thing for a lot of people. You’ve heard (and/or experienced) that things on your site can break when you run updates, so it feels risky and uncertain. However, while there are managed maintenance services out there, it typically isn’t all that cost-effective to pay someone else to manage your WordPress site either.
On the other hand, you’ve probably heard that it’s very important that you keep everything up to date on your site. Doing so ensures that your software is bug-free, and that it’s got the latest security measures in place. Incremental updates also tend to be less painful than waiting for a very long time and doing a bunch of updates that you’ve been putting off all at once.
It’s basically impossible to talk about updating your site without also covering backing it up, so here are a few of my top suggestions for both aspects of ongoing site maintenance.
Backing Up & Restoring Your Site
The best way to safely and confidently update your WordPress installation is to ensure that you have a clear, easy, functioning backup system, ideally also with an easy way to restore from the backups you’re creating. This is also essential just for everyday peace of mind – a great defense against hacks or even user error where you do something silly and break your site.
Click to enlarge
Option 1: Premium Hosting
My preferred way of handling this is to use a premium WordPress hosting provider who does it for you, such as WP Engine [affiliate link], who I use for this site. Yes, it costs more per month, but I am pretty happy paying more to know that complete restore points (copies of my entire site) are made every single day and that I can roll my site back to one of those saved restore-points at any time with one click. Also I like that I can create a new restore point at any time, for example before I update my plugins or make major changes.
Option 2: Backup/ Restore Subscription Services
If you’re not looking to change your hosting, there are a few subscription services out there that manage an automated backup and restore system via plugins. Vaultpress is one such service, and is offered by the same team that’s behind WordPress itself.
Option 3: Backup Plugins with Manual Restoration
There are a number of plugins out there that you can use to back up your files (your theme, your uploads, etc.) and/ or database (your content), including WordPress Backup to Dropbox. The benefit to these is that they can be used to set up automated backups just like the premium options above, and they’re often free. The down side is that they usually don’t offer automatic or one-click restoration from a backup, so you may still end up paying someone to restore your site if you aren’t able to do it yourself (and paying a premium if it’s on an emergency basis).
Updating Your Site
Getting a backup system in place is 90% of the battle, in my opinion. Once you’ve got a recent backup (preferably with automated restore process), you can pretty much update with confidence knowing that you can easily hit the “undo” by restoring to that backup. That said, there are still a few things to keep in mind when that little update icon pops up on your site.
Tip 1: Pay Attention to What You’re Upgrading
It can be tempting to just hit “Update All” without looking at any of the details first, but that won’t give you any useful information in case you do run into a problem. In an ideal world, you should update things one at a time and check after each update for anything amiss. Since that may not be totally realistic, at minimum make a mental note of exactly what you’re updating so that you can provide a developer with a list should you need to troubleshoot something that goes wrong.
Tip 2: Note the Version Numbers
In the screenshot above, the current version number is in the yellow box and the number for the version you’re being asked to update to is in the green box. The main thing to know about version numbers is that changes to the first number (before the decimal) signal major version changes. These are instances where you definitely want to skim the changelog for any notices. Changes to the number after the decimal are typically smaller changes and bug fixes. If you’ve skipped a few updates, you’ll see a bigger jump in numbers – that should also signal that you’ll want to be a bit more attentive.
Tip 3: Skim the Update Changelog
Next to the version numbers, you’ll find a link to view the changelog for the update (underlined above). A changelog is a list of all the changes for each version of a piece of software, and hopefully the creator of your plugin or theme is updating theirs with every version change. When you click that link you’ll get a popup – you should skim the changes just so you know what’s going on and you’re aware of any major warnings included in the log.
Don’t worry if you don’t necessarily understand every item in the log – you mainly want to be sure there aren’t any huge notices warning you that things have changed enough to potentially break your site.
After the Updates
Once you’ve run your updates, it’s a good idea to run through your site and check for anything that is different or appears broken as a result of the updates. Things that may go wrong with updates include changes to CSS selectors (leading to styling being applied incorrectly or differently), lost plugin settings, and errors or bugs in the new code. Doing a visual check will help you ensure that your updates went off without a hitch.
Dealing with Hacked Sites
Whenever I talk about backups with people, they invariable ask about handling hacked sites, so I thought I’d include my recommendations. Here, verbatim, is what I share with people who’ve been hacked:
As far as cleanup goes, my best recommendation is to go with Sucuri or a similar company that specializes in these things. [Hacked sites] can be a real bear to clean up, so it would be much more expensive to have an independent developer do it, if you could even find someone willing (and probably without the same guarantees), as compared to Sucuri.
One of the reasons you have a website, I’m guessing, is to get visitors to do something you want them to do. To get even more specific, you’re probably trying to get the right visitors to do something that will lead to a certain outcome.
Tip: You should know your goals for your website.
Sounds obvious, but a shocking number of people/ businesses don’t really know what they want out of their website, or they have too many goals (leading to a mess of confusion for visitors). Good goals for your site are along the lines of:
My site should get customers to buy my products, with emphasis on moving seasonal inventory.
My site should encourage customers to come to my restaurant. I especially want to fill tables at lunch.
My site should provide leads with information about the services I provide, establish me as an expert in my field, and make it easy to contact me.
My site should get prospective clients with good-fit projects to submit quote requests with enough detail that I can respond with an estimate.*
*This is one of my goals for this site.
Notice I’m not including numerical targets in these examples – for my particular purposes, I’m not that interested in converting a certain percentage of leads. I’m much more interested in finding the right people, with the right projects. I don’t need to track conversions on my forms to know if my site is working, and knowing those numbers doesn’t actually inform my strategy for making adjustments to my website.
I wrote a lot more about planning your website, with great info from three professionals in related fields, if that’s still where you are in this process.
Design & Structure Your Site to Achieve Your Goals
Again, sounds obvious. However, I talk to lots and lots of people who talk about putting all sorts of stuff all over their site, including key places on the home page, that won’t actually lead to their primary goals for their site. A good designer will help you through this, and will push back if you’re going too far off track. Your job is to listen, and to put your goals first.
Tip: Make content areas as flexible as possible
On my home page, every single text area is editable. This is what the main feature block looks like when I go to edit the page:
I can easily swap out the language to change the first messaging people see when they visit my site, even while the styling stays the same (and adding an image that reinforces that messaging would make it even stronger):
Pay Attention to Where You’re Falling Short
Once you’ve got a site up and running that is at least somewhat targeted towards your goals, take note of every interaction and data point related to your site that shows you how it is and is not helping you achieve your goals.
A lot of the time, instances where your website isn’t helping you (and might be actively hurting you) are noticeable points of pain or annoyance. For example, if you continually get phone calls asking whether you’re open – the most awkward kind of call for everyone involved – that’s probably a good sign that your website is failing to inform your potential customers of your hours.
In my case, when I get multiple inquiries that aren’t a good fit for a previously-defined/ known reason (e.g. too soon, too small a budget), it’s a very clear sign to me that I am not clearly communicating the limits to the projects I do take.
You may think you’ve been clear on your website, but you already know where each piece of information is on your site, and people miss stuff all the time. If one person asks, just make a mental note of it. If two ask, make a change (or waste more time on both sides answering those questions over and over).
Make Lots of Small Changes
Hopefully your site is set up so that it’s easy for you to update your content. I build my sites so just about every possible piece of content is editable by the client. I love my clients but I do not want them to be dependent on me for every little wording change or link update, so I make things unbreakable but completely editable.
Tip: Tiny Changes are Still Good Changes
I think it’s easy to fall into a mental trap where you don’t touch your site content except to make major updates. While major refreshes are important from time to time, I think you should also be constantly making little changes here and there. A few of my favorite small changes to make on my own site are:
Grammar/ Spelling/ Syntax Edits
Pretty much every time I reread text I’ve written I find edits I want to make. Sometimes it’s as small as fixing a typo I missed the first couple times around, others I realize I left out an entire word or wrote a sentence that actually makes very little sense. That’s what that “Edit Page” link is for.
Content Tweaks
Going back to that scenario where you get the same question or request over and over again – that signals a necessary content tweak. You probably don’t need to rewrite your whole site, though. Instead, find the spot where the disconnect happens and add just a little bit of guidance for your visitor.
I recently decided to focus more of my time working with designers and less directly with clients on projects they designed themselves, so I made use of the way I’ve set up the content blocks on my home page to be easily editable and updated the intro copy to focus on that aspect of my work.
Structure Tweaks
Similarly, when I realized I was getting a lot of requests where the project budget was just too low for my actual price range, I went into my quote request form and made a few edits to the form fields so that the low end of the price range that’s available to be selected is more in line with what I actually charge. Even though I also already listed my typical project costs right next to the form, forcing users to select their budget and limiting their selection to a reasonable budget range makes it even more clear what they can expect.
I use the Gravity Forms premium plugin for my contact form, which is great for a number of reasons but one of my favorites is that it’s so easy for me to make tweaks to the form in a matter of seconds, and to add little notices depending on what the user selects (like my warnings that I’m usually not available for rush projects). (Contact Form 7 is my favorite for simpler forms.)
Other forms of structural tweaks available to you in WordPress are changes to your navigation and any widget areas (such as a blog sidebar). If you find people aren’t visiting a key page as often as you’d like, make it the first link in the menu and change the link name to something obvious and compelling. If you’ve got a special promotion or announcement, throw it near the top of your blog sidebar using a text widget (the Black Studio TinyMCE Widget plugin gives you a more flexible interface for your widgets including a media uploader).
You don’t necessarily need to be able to rearrange your entire layout on a regular basis, but you should definitely be able to make frequent text and content edits and updates without needing to do any coding of your own (Gravity Forms’ interface is a bit of a learning curve but doesn’t require any HTML at all).
The bottom line is that your site is doing you a disservice if it isn’t set up to be easily and quickly editable, and you’re doing your goals a disservice if you aren’t paying attention to how your site is or is not meeting them and adjusting accordingly.
