WordPress 3.5 was released yesterday. After upgrading my site, I checked the editor screen and noticed a tiny tweak that made me smile. It looks like my humble suggestion finally made it in to WordPress core.
Notice the Add Media button… it’s an actual button! The previous version of the button looked like this:
It was an easily overlooked text and icon combo labeled “Upload/Insert” . This caused problems for users as I’ve discussed before.
I don’t know if this small change to a more clickable and noticeable “Add Media” button happened because I suggested it, but I’m glad it’s there. So after suggesting this usability improvement to the WordPress core team, their developers took notice and made it happen.
Thanks, WP devs. Also, I didn’t suggest the name change, but good choice on the new wording from “Upload/Insert” to “Add Media”. Much better.
With the release of my first public WordPress plugin last month I received encouraging nods and tweets from the community, as well as some constructive feedback. One user requested a very specific set of changes:
Thanks for making this plugin! After reading your article a while ago, I went and wrote this exact plugin but luckily found yours before I submitted it to the repository. No need for more than one of these.
I checked out the plugin and discovered one bug and a few ideas 🙂
- You’re styling the div#wp-content-media-buttons rather than a#content-add_media. That leads to ALL media buttons (like the Gravity forms icon) to show up in one weird integrated “button.” See here: Weird button with Gravity Forms.
- If you change the element you’re styling to the link instead, you’ll also catch the Quick Press’s “Insert Media” button which is currently unstyled. It’s tempting to style ALL links in that row, but I’d shy away from that on the chance that other plugins style their own buttons.
- Style-wise, I wish the :hover and :active states more closely matched WordPress’s defaults.
- To get really nit-picky, the WordPress admin button’s have a border-radius of 11px.
- To make things a little more WordPress friendly, I’d use wp_enqueue_styles() hooked to the admin_enqueue_scripts hook to register the stylesheet.
So thanks again for making the plugin. If you incorporate these changes, I’ll definitely be adding it to all my client sites.
All of these tweaks made sense, so I’ve released version 1.2 with the above changes included. Download Button It Up 1.2 from the WordPress Plugin Repository to try it out, or from within the plugins section of the WordPress dashboard.
I hope these changes make the plugin more useful, usable and even desirable to the WordPress community. I look forward to more feedback.
A better WordPress Upload/Insert button
In response to the positive feedback from my last post about making the WordPress Upload/Insert button look more clickable, I’ve written my first WordPress plugin that’s open to the public. I’m calling it Button It Up*.
All it does, for now, is change the style of the upload insert button to look like an actual button.
Other than creating consistency throughout the UI, the main reason for this tweak is to make the button more find-able for first-time WordPress users. Hopefully this tweak, or a better version of it, will make it into WordPress core.
Until then, you can use this tiny plugin to make the WordPress admin more usable for your clients.
You can download Button It Up directly from the WordPress plugin directory.
Let me know if you guys find any bugs or anything.
*The name “Button It Up” was most definitely influenced by the podcast Back To Work with Merlin Mann & Dan Benjamin
How do I upload an image in WordPress?
Frequently, clients who are staring at the WordPress content editing screen ask me, “How do I upload an image?” As an experienced WordPress user/designer/developer I used to get blown away by how silly such a question sounded. The button’s right there! But after running in to this problem again and again, I’ve decided the user is not at fault in this case.
The interface is deceptive. Let me explain…
An inconsistent UI design language
The upload/insert text+icon combo is too subtle and actually deceptive UI when you look at the WordPress dashboard overall.
The same design language for the page header (icon+text on transparent background) is used for the clickable link (text+icon on transparent background). By that logic the Upload/Insert link looks like a small title or descriptive text. It doesn’t look clickable, and it should.
Make clickable things look clickable
So as the user scans for some visual que to capture their attention and say, “Click me to upload your stuff!”, they skim right over the small text that lies outside of the area containing lots of other more obvious buttons.
Even something as simple as what I’ve mocked-up here would be an improvement:
Now there is a clear distinction between the rest of the UI and the Upload/Insert button. It doesn’t look like part of the dashboard text anymore. It looks clickable. And it is.
(UPDATE: Since publishing this post I’ve written a plugin that makes the Upload/Insert button look clickable.)
Anybody on the WordPress UI team out there that could respond to this suggestion?
*Special thanks to WordPress and Beyoncé for inspiring this post.
WordPress 3.5 took my advice!
I shouldn’t be giving you this information. As Spider Man’s uncle said, “With great power comes great responsibility”. If you don’t know what you’re doing, you’ll hurt somebody. Keep that in mind if you choose to install the following plugins on your WordPress website. Make the wrong move around one of these bad boys and you’ll be peeling your face off the floor. These super-powerful plugins turn your website into search engine candy. When used properly you can boost your website’s position in search results related to your content.
WordPress SEO Plugins
- All In One SEO : Automatically generate search engine friendly page titles and much more. Download All In One SEO
- Google XML Sitemaps : Generates a XML-Sitemap compliant sitemap of your website. This format is supported by Ask.com, Google, YAHOO and MSN Search. Download Google XML Sitemap
- Redirection : Allows you to manage 301 redirections, keep track of 404 errors, and generally tidy up any loose ends your site may have. A nice interface for those who don’t want to mess with a .htaccess file. Download Redirection
- SEO Friendly Images : Automatically adds ALT and TITLE text to all of your images. This helps your site conform to W3C standards and adds valuable keyword text for search engines to gobble up. Download SEO Friendly Images
- Global Translator : Automatically translates your website into 48 languages. Download Global Translator
- SEO Smart Links : Automatically build internal links on your website by linking keywords and phrases in your posts and comments with corresponding posts, pages, categories and tags on your blog. Download SEO Smart Links
W3 Total Cache WP Super Cache: Google considers the speed of your website to determine where you rank in search results. This plugin makes your website 10 times faster according to the plugin author. Download W3 Total Cache Download WP Super Cache
- Google Analyticator : Google Analytics right in your WordPress dashboard. Download Google Analyticator
- WP to Twitter : Google includes Twitter activity in search results. Automatically post new articles to your Twitter account with this plugin. Download WP To Twitter
- Yet Another Related Posts plugin (YARPP) : Automatically generate a list of related posts. This helps build more internal links and increase page views. Download YARPP
You’ve got some face juice on the ground there. Right… there. Yep. Got it.
What are your favorite SEO plugins?
Leave comments below.