How to fix the WPAudio plugin if it’s not working

I’ve recommended the WPAudio plugin for placing easily playable and downloadable audio files on your WordPress site. But with the release of WordPress 3.2 in 2011, the plugin stopped working on many sites (including mine).

In this post, I’ll show you how to get this plugin working again.

Fair warning: This fix involves directly editing the plugin’s source code. I’ve provided all the necessary code so you can just copy and paste. This has worked on all the sites I’ve tried it on, but it’s possible that it won’t work for you — you might have a different hosting setup or a plugin conflict that I haven’t run across.

But even if this fix doesn’t take, really, the worst that can happen is that your copy of the WPAudio plugin still won’t work. What I mean is, a copy-paste mistake isn’t going to break your entire site or erase your database or anything disastrous like that.

Why you might not want to fix this plugin at all

I chose to research the fix because I like to know how things work, I’ve got a hardcore DIY streak, and I’m stubborn — I like the way WPAudio looks and works and I just don’t want to switch, doggone it.

However, I fully realize that I might be in a tiny minority here and that you might decide that it’s just easier and simpler to switch to a different audio player on your WordPress site. And that is totally OK (I’m actually researching some WPAudio alternatives and will post about those later this week).

One big reason to switch to a different plugin is that WPAudio’s author is no longer supporting it or releasing new versions. WordPress will continue to change and improve, and it’s very possible that future versions of WordPress will break this plugin again. So this code fix is a bit like wrapping a frayed wire with electrical tape — a temporary measure that’s fine for now but not built to last.

Still here? On with the tinkering!

Step 1: Download these two text files. You’ll need to copy and paste their contents later in these instructions. Right-click (on a PC) or CTRL-click (on a Mac) the filename, and choose “Save Link As” or the closest equivalent.

  1. wpaudio.js.txt
  2. wpaudio.min_.js.txt

Step 2. Open the files in a text editor (Notepad, TextEdit, or the like). Because they have the .txt suffix, they may automatically open with the right application if you simply double-click them.

Step 3. In your WordPress dashboard, go to Plugins –> Editor. 

Step 4. Choose “WPaudio” in the drop-down list at the top right corner of your Plugin Editor screen. When you first arrive at this screen, it will show the first plugin in alphabetical order (often Akismet). After you select WPaudio, click the “Select” button next to the drop-down menu and you will then see a list of that plugin’s source files.

Step 5. In this list, click the link labeled “wpaudio-mp3-player/wpaudio.js” to display the contents of that file in the editing pane. It should begin with these lines:

/*
 * WPaudio v3.1 (http://wpaudio.com)
 * by Todd Iceton (todd@wpaudio.com)
 *
 * Converts an mp3 link to a simple player styled by HTML & CSS, powered by
HTML5 with SoundManager2 Flash fallback

Step 6. Copy the entire contents of the first text file you downloaded — the one called wpaudio.js.txt — and replace the entire contents of the wpaudio.js file onscreen with your copied text. You want to completely overwrite the file contents, so in the WordPress Editor screen you can either Select All and Paste, or Select All and Delete before Pasting.

Step 7. Click the blue “Update File” button at the bottom of your screen. You should see a success message appear at the top of your screen that reads “File updated successfully.”

Step 8. Repeat steps 5, 6, and 7 with the file named wpaudio.min.js. You’ve just replaced the entire contents of two of the plugin’s source files, and saved your changes. Your site is still there, right? No smoke coming out of your hard drive? Good! On to the final step:

Step 9. Go to Settings –> WPaudio, and click the blue “Save Changes” button at the bottom of the screen. It’s a good idea to check the settings to make sure they’re correct, but go ahead and click the blue button even if you don’t make any changes. This is similar to refreshing a web page to get the latest version — you want your copy of the plugin to read the new code you added.

Now go test one of your audio files on your site. Fingers crossed that it plays the way it is supposed to! And if not, stay tuned for my upcoming post on audio player alternatives (you can subscribe to get updates in your inbox or grab the RSS feed to get it in your reader). And feel free to leave a comment if you have a favorite WordPress audio plugin, too!

It’s important to note that I didn’t do this coding work on my own. All the code fixes came from helpful users on the WordPress.org support forum; I’m merely trying to let more people know about these fixes, and maybe make them a bit less scary to implement. Here are the original posts describing the code changes:

Frayed cord image by blmurch on Flickr, used under a Creative Commons ShareAlike License

Fixing your Prose Design Settings after upgrading to WordPress 3.3

If you are using the Prose child theme for the Genesis Framework, and you recently upgraded to WordPress 3.3, you might have noticed that your Prose Design Settings page now looks kinda strange.

Instead of two columns of settings, you now have one column of extra-wide settings:

…with a big space about halfway down the page:

Clearly some kind of column-resetting weirdness has happened with the WordPress 3.3 upgrade.

Fortunately, it’s easy to get your normal two-column display back, in four quick clicks.

Click 1: Screen Options

At the top right of your Prose Design Settings screen, there’s a little gray pull-down menu entitled “Screen Options.”

Click it.

Click 2: Select number of columns

At the bottom of the menu that opens up, look under Screen Layout and click “2″ next to Number of Columns.

Unless you have a good reason for hiding one or more of your Prose Design Settings, just leave all the checkboxes checked.

Click 3: Close Screen Options

When you have selected the two-column layout, go ahead and close the Screen Options menu by clicking on the words “Screen Options” again.

Nothing changes on your screen, but that’s because you need the fourth click!

Click 4: Save Settings

At the top of your Prose Design Settings page, click the Save Settings button (it’s supposed to be WordPress blue, but in some browsers it shows up as barely legible white-on-gray).

Be sure to click the Save Settings button at the top of the page. There’s another one at the bottom of the page, but the bottom button is buggy (say that five times fast!), especially in certain browsers.

Presto! Two columns restored!

There you have it, your regular two-column Prose Design Settings have been restored!

Yes, that Prose link up there is an affiliate link. I’m now using the Prose theme here on WendyCholbi.com and for the majority of my WordPress installations, and I highly recommend it. You’ll be hearing more about Prose from me in the coming months.

WordPress menus: If you can’t use them, you seriously need a new theme

I’ve had three clients in as many weeks who came to me with problems with the navigation menus on their websites.

In every one of these three cases, it turned out that they weren’t able to use the built-in WordPress menus, because their themes were outdated. And with WordPress 3.3 due to be released in the next few weeks, theme compatibility is on my mind.

If you’re apprehensive about updating to WordPress 3.3, get a Website Tune-Up and I’ll handle the upgrade for you, as well as making sure you’re completely backed up.

Navigation is important. If your visitors can’t find things on your site, they will go away.

To meet this need, every website should have these two things on (almost) every page:*

  1. Clear navigation menu(s). The navigation links should have short, obvious names. On my site, for instance, the purple navigation bar that appears just below my header has six links: Home, About, Contact, Store, Free Goodies, and Subscribe. My Store link also has a drop-down menu listing the individual pages describing my products and services.
  2. A “search this site” form. This can go in the header, in the navigation bar, or in a sidebar, but please put it in a consistent location across your site. And test it once in awhile to make sure it works.

*I say “almost” because there are always exceptions. On a sales page, for instance, you may not want to include a search form because you want the single call-to-action on that page to be clicking the buy button.

Is your theme compatible with WordPress Menus?

These three clients, with different websites, were all telling me that they couldn’t reorder their menu items or add items to their menus. And at first I was baffled, because the WordPress menus are really easy to work with — you just drag and drop to reorder, and adding a page is a one-click operation.

But in each case, the problem quickly became clear when I logged into their WordPress dashboard to find that their theme was not compatible with the built-in WordPress menus.

If you’re not sure if your theme is compatible with the drag-and-drop WordPress menus, visit Appearance –> Menus in your WordPress dashboard. If you see a message telling you that “The current theme does not natively support menus…” then you need a new theme. Period.

If you see this incompatibility warning, you seriously need a new theme.

Yikes! What if you need a new theme?

The WordPress menus have been drag-and-drop for at least a year now. So any theme that is not compatible with WordPress menus is outdated.

Good theme developers update their themes when WordPress introduces cool new functions like drag-and-drop menus, so it’s possible that you can simply update your theme to the latest version. If you bought a premium theme, updates like this are part of what you paid for. Ask the theme creator how to update your theme.

If your theme doesn’t have a menu-compatible latest version, you seriously need to get a new theme. Seriously. You are missing out on features that will make your WordPress-wrangling easy, quick, and fun. And older code (yes, older than a year is pretty old in Internet time) is more vulnerable to corruption by Internet Bad Guys.

With a Website Tune-Up, I’ll update your theme to the latest version, if one is available (and I’ll also update you to WordPress 3.3 when it comes out).

If you need to switch themes entirely because your old theme is outdated, consider my new Fairy Godmother package, which includes two one-hour consultations with me plus my time to fix, tweak, and test your site.

Got a question about WordPress menus, themes, or wine? Leave a comment!

Wine menu image adapted from Civertan on Wikimedia Commons, used under a Creative Commons ShareAlike License

Anchor yourself with easy jump links

Anchor and chain linksI’ve previously explained how WordPress is an internal linking powerhouse, but even the super-easy and super-powerful WordPress link dialog box doesn’t contain a built-in way to add jump links.

Jump links, also known as anchor links, are links that take you to a specific part of a page, instead of the default top location.

I personally prefer the term jump links because it captures the idea that these links let readers “jump” to various parts of a page (and also because technically all links use the HTML anchor tag…so every link is an anchor link).

So…what if you want to link to something other than the top of the page?

Good news: Yes you can!

News that might be not-quite-so-good: You have to do a little bit of manual fiddling to get it to work, including (gasp) adding a tiny piece of HTML code to your page.

Why use jump links in the first place?

Links should be useful. And sometimes that means linking within the content of a page.

F’rinstance, here are some situations that might call for jump links:

  • A long post or page with a table of contents at the top. Each item in the table of contents links to a subhead lower down on the page.
  • The handy “return to top” link at the bottom of a page.
  • At the top of a sales page, you can include a link saying “Want to go straight to the price?”
  • Footnotes.[1]

Let’s say, for example, that you have a long page, and you want to let readers jump straight to Part 1, Part 2, or Part 3 of the page from a table of contents at the top. Here’s what you need to do:

Step 1. Figure out where the jump will start and end

At the top of your page, you’ll have some text that you want to turn into clickable links to sections of your page. Maybe a list, like this:

Part 1: Thesis

Part 2: Antithesis

Part 3: Synthesis

And then lower down in the body of your page, you’ll have subheads, using Header 3 style, that match those table-of-contents listings.

Let’s link up the table-of-contents entry “Part 1: Thesis” with its subhead. To do that, we’ll start with the subhead itself.

Step 2. Locate the end point of the jump in HTML view

Visual tab and HTML tab

The Visual and HTML tabs on the WordPress post box

At the top of your WordPress post box, there are two tabs, labeled Visual and HTML. Most of us do our writing entirely in Visual view, which is fine for most purposes. This is one of the few times you’ll need to take a peek into the HTML code of your page.

If you click the HTML tab, you’ll see that the text of your post is still there, interspersed with HTML tags. What you want to do is find the subhead where you’ll be pointing your jump link. If you’ve used the WordPress visual editor to give this subhead a Header 3 style, it will be wrapped in the appropriate HTML tags like this:

<h3>Part 1: Thesis</h3>

Step 3. Add an id attribute to your HTML

Now that you’ve located the HTML tags that enclose your subhead, you need to add one small piece of code to the first tag, so that this:

<h3>Part 1: Thesis</h3>

becomes this:

<h3 id="thesis">Part 1: Thesis</h3>

Pay attention to the spacing: Leave a space before the “id” but make sure there’s no space between the closing quotation mark and the greater-than symbol. And remember, you’re not deleting any characters, only adding.

You get to choose the text between the quotation marks — it will become part of your link URL, so use only letters and numbers, and no spaces inside the quotation marks.

You can add the id=”linkname” attribute to any HTML tag, not just <h3>. Subheads are easy to find and it makes sense to use them, but you’re not limited to them for jump link purposes.

Step 4. Switch back to Visual view and make sure it looks OK

Now click the Visual tab again and make sure the subhead — and everything after it — looks all right. “All right” in this case means “visually indistinguishable from before you added the id=”linkname” attribute.” In the Visual tab, your subhead should look unchanged.

Step 5. Add a link at the origin point

Now that you’ve prepared the end point of your jump link, you can use the built-in WordPress link dialog box to add your link in the usual way: Highlight the text you want to turn into a clickable link (in this case, the table-of-contents entry corresponding to the subhead) and click the link icon in your editing toolbar.

Now, instead of putting a full URL here, simply type the number sign (#) followed by the word you placed between the quotation marks in your id=”linkname” attribute, like this:

Optionally fill in a title, then click the blue “Add Link” button to save the link. Your table-of-contents entry should now show up as a blue, underlined link.

Step 6: Test the link

Once you’ve added the link, I suggest previewing the page to make sure your jump link works as intended. In the Preview tab, click the link and see if you jump down (or up) the page to your desired end point.

If it works, you are good to go.

If it doesn’t (if you click the link and nothing happens, for instance, or if you are taken to your home page instead of the same-page end point you expected), first double-check your HTML change.

It’s also possible that your theme or one of your plugins is rewriting your link URLs. The solution is to use the full URL of the page plus the “#linkname”, instead of just “#linkname” in the URL field, like this:

The tricky part here is that you are linking to the same page you’re currently editing, and if that page is unpublished, it won’t show up in the list of “existing content,” so you’ll have to manually type the complete and correct URL, make sure it ends with a forward slash, and append the “#linkname” text.

Now you can easily create tables of contents, footnotes, and intra-page jump links. Jump away!

1. ^ See how that little superscript “1″ took you right down here to the bottom of the post? Neat, huh? The thing to remember with footnotes is that you always want to provide your readers an easy way to jump back up to exactly where they came from, or you’ll lose them. That’s why the little “^” symbol at the beginning of this footnote is another jump link that goes right back up to the footnoted text. If it’s good enough for Wikipedia, it’s good enough for me!

Image adapted from dorron on Flickr, used under a Creative Commons ShareAlike License