How Do You Sell Your Digital Products Accessibly? You Do It With Easy Digital Downloads

Since I live in WordPress, I’ve heard about Easy Digital Downloads by Pippin Williamson a lot. He’s a prolific plugin author who contributes in a huge way to the WordPress community with both his plugins and the tutorials he writes, both for free and cost.

I’ve been pondering the idea of putting together some guides for WordPress that focus on performing tasks with accessibility in mind. I will still publish free tutorials on this site, but would also like to write more in-depth material.

So I took Easy Digital Downloads for a spin yesterday. I wrote a plugin that I thought would be useful and put up a post about it. As part of the work for that post, I tested Easy Digital Downloads.

The documentation promises that it’s easy. It is indeed that. But what pleasantly surprised me is that along with the ease comes accessibility. I was able to configure every option using a screen reader for the plugin, and I didn’t have to perform any crazy maneuvers to get it working. Given everything the plugin can do, I was a little worried that accessibility would have been compromised. I’m glad that I found that not to be the case.

If you’re a blind businessperson selling products that are digital, like music or ebooks, and you’re also running WordPress, give Easy Digital Downloads a spin.

Thanks Pippin. This is how you do accessible user experience. I’ll be buying extensions.

Add To Your Collection: A Free Guide To JavaScript Tutorials And Best Practices

JavaScript: The Right Way is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices. It is a project hosted on GitHub that gathers together tutorials, tips and tricks that show both beginners and seasoned developers the best way to write their code so they can get things done.

It can also be used as a free JavaScript course, because it starts at the beginning. It doesn’t cover everything yet, but because it’s hosted on GitHub, that means that multiple people can contribute. Content version control in action.

You can find the tutorial here, and of course add it to your bookmarks if you want to consume it.

Get Rid Of The Shakes On The WordPress Login Screen With Milkshake

It can happen to the best of us. We’re in a hurry, so we start typing stuff on the login screen for our WordPress installations, and we find out the information is wrong when we see red text and an annoying shake effect.

Sometimes that shake effect is just annoying, and sometimes it can trigger seizures. If you’re customizing WordPress, or you just don’t want to do the work to get rid of the shaking effect yourself, then this plugin is for you.

It’s based on a tutorial posted on the WPMUDev blog. That tutorial instructs the user to put this functionality in a theme. But this is something you probably don’t want to lose just because you’ve switched themes, as often happens in the life of a WordPress site. So here’s a plugin which will keep that from happening.

How To Migrate A Static Site To WordPress Using The Genesis Framework

Many websites start out being created with nothing more than HTML, CSS, and a few images. For some, that will always be enough and there will never be any need to change. For others, however, there will come a time when more is required.

You may want to add social networking capabilities to your site. Or you may want to add e-commerce. Or you may have a large number of pages that are cumbersome to manage and update by hand. Whatever the reason, WordPress is almost always an excellent fit, and can handle a lot of the heavy lifting for you. Adding the Genesis framework will position you to more easily keep up with what the search engines want and what your readers want, and thus help you create more and better engagement, and if you’re a business, leads and sales. This combination creates a win-win for everybody.

This tutorial was written specifically for those who are ready to make the jump, but are not sure how to go about it. At first, the prospect of making this transition might seem daunting and you might wonder where to begin. Rest assured that there’s no need to feel overwhelmed because we’ll cover the process from beginning to end so that you will never get lost along the way.

In this post, you will learn how to:

  • Prepare for the transition
  • Temporarily keep your new website hidden from both visitors and search engines
  • Transfer the content from your old website into WordPress
  • Create a genesis-powered child theme using your current template
  • Protect your website’s position in the search engines
  • Make sure that your new website is error-free

Preparing for the transition

Before going any further, it’s extremely important for you to create a backup of all of the files that currently make up your static website. That way you can ensure that none of the data from your original website is lost. This is important for two reasons. The first being that it’s always best to keep a copy of every version of your website because you never know when you might need to refer back to it for one reason or another. Secondly, during the transition, you will need your static website to remain online and functional until your WordPress website is ready to go live. Should one of the files from your current website accidentally get deleted before the transition is complete, you can easily upload a replacement copy from your computer to get things back in working order.

After backing up all of the necessary files, you will next need to document the name of each of your web pages and its web address. I do this using a spreadsheet. Open your spreadsheet program and then label the first column File Names . Next, label the second column URLs. Visit your website and then begin recording this information in your spreadsheet.

This step is important because, before your WordPress website is made visible to the search engines, you will need to use this spreadsheet, along with a redirection plugin, to create several 301 (moved permanently) redirects so that the previous URL for each of these web pages points to its new location.

Hiding your new WordPress installation

Normally , after installing WordPress, you would get right to installing a theme, configuring the software to your liking, and then adding content. In this case, however, additional steps need to be taken to ensure that your WordPress installation temporarily remains hidden. Secrecy, at this point, is important for two reasons:

  • When migrating from static HTML to WordPress, it’s important that you continue to direct visitors to your original website for as long as possible. This measure will avoid a great deal of inconvenience and confusion that your visitors might otherwise suffer.
  • While creating the WordPress version of your website, you don’t want it to be prematurely indexed by the search engines because, at this point, it’s still a work-in-progress.

So, the first thing that you need to do to keep your new website temporarily under wraps is locate the index.php file located in the main folder of your WordPress installation and then rename it to 1index.php . Adding the number one to the beginning of the file name will make it easier to locate when it comes time to return this file to its original name since it should appear at the top of your file list just under .htaccess . Renaming index.php guarantees that your index.html file will continue to act as your website’s home page for the time being.

Having done that, your WordPress website is now hidden from visitors. Now you need to take steps to ensure that it’s also hidden from the search engines crawlers. To do this, begin by logging in to your WordPress administration panel. Once there, click on Settings|reading. On this screen, you will find a section labeled “search engine visibility”.

In this section, you can choose to make your site visible or invisible to the search engines. Since you don’t want the crawlers to index these pages just yet, check the box labeled “discourage search engines from visiting this site”. Then, click Save Changes .

This setting doesn’t guarantee that search engines won’t crawl WordPress since websites with this option selected have been known to have been indexed. Taking this measure does, however, at least reduce the likelihood of your WordPress website appearing in the search results until you’re ready to reveal it to the crawlers and the world.

Adding Your Content

Since your content lives on your static site as pages, you’ll want it to do so in WordPress as well. You will need to manually add all of your pages. This process may seem daunting at first, and depending on how many pages you have, it can be time-consuming. We’ll walk through this process so you can get a feel for how it’s done.

For this example, suppose that you’re recreating a page from your static site called Services . To do this, navigate to Pages | Add New . On this screen, enter Services as the title of this page. Then, paste all of the content that was previously included in the body of your static Services page into the text area. Well, almost all of the content. If you’ve included HTML 5 markup in your static pages, you won’t need to add this information, because your theme will add it for you. Now, click Publish to add this page to your site. Repeat this process for each of the web pages found on your static website until all of your content has been transferred over to WordPress.

Partially revealing WordPress

At this time, you will need to locate 1index.php on your server and then return it to it’s original name of index.php . Next, find index.html and then rename it to 1index.html . Both of these steps must be taken at this point because, once your theme is activated, you will need to be able to access your WordPress home page in order to proceed. With index.php in place and index.html renamed, your WordPress website will now be visible to visitors, but it will still be hidden from search engine crawlers.

Turning your current template into a theme

You may think that migrating to WordPress means that you will also have to give up your current website design. This, however, doesn’t have to be the case. If you’re happy with the way your website looks now, then it’s entirely possible to continue using your current design. To do this, you will need to convert your static HTML/CSS template into a theme. Since we’re using Genesis for this tutorial, you’ll need to convert your template into a child theme. This is not going to be as hard as you may think. When you purchase the Genesis framework, you get a sample child theme you can use to build cool things. We’re going to use that sample in this tutorial.

Introducing WordPress To Your Theme

In order to use your new theme with WordPress, your theme needs to arrive with some information that lets WordPress know what to call it, and that it’s a theme in the first place. To add this information, first open the style.css file in a text editor. The style.css file is found in the genesis-sample file you get when you download the Genesis framework. Unzip this file and put it somewhere you can find it on your computer. Once you’ve done that, you’ll be able to open the genesis-sample folder and find style.css.

First, you’ll need to give your theme a name. In the sample stylesheet, replace the word “sample” with your theme’s name, and keep the formatting of the line exactly how it appears. This will make things easier later if you want to make changes to this theme. Next, do the same with the description line. It’s a good idea to write an accurate but short description, so that you can easily determine which theme this is in your WordPress administration panel. After this, fill in the author (that’s you), the author’s URL (that’s your web site), and finally the theme’s version number.

After these lines, you’ll see a bit about tags. These may be useful if you plan on selling this theme later on. Next, you see some lines about the template, template version, and type of license used. Leave these intact.

Getting Down To Business

Now we get into the meat of the style. You’ll see a section within CSS comments called “table of contents”. This lets you know exactly where each section of the styling is in the stylesheet. When making your customizations, it’s helpful to add any that don’t already have an entry here to this list, and add comments above the customization. This keeps everything well-documented. Are you noticing a trend?

At this point, because StudioPress has already included most of the styling elements you’ll need for your static site, you can fill in the details where appropriate, and add anything you don’t see a style for.

Let’s Talk About Functions

If you’ve never written a program, and your only exposure to websites is to HTML and CSS, playing around with PHP can seem very scary. I promise, it’s not that bad. StudioPress has included all the functions you need for you in the sample theme, at least for a completely static web site. Of course, you can always add more later, but for now, the fact that they’ve already included what you need will save you a lot of work on the theming front. All of this documentation and inclusion is where Genesis really shines. If you were doing this with another theme, or creating a theme from scratch using the standard method used by most free themes, you’d still be creating templates and styling everything yourself.

Maintaining search engine ranking

During the process of migrating from a static website to WordPress you will be adding new pages and posts. You will also eventually delete all of your original HTML pages since they will become unnecessary and redundant. This means that your previous content will now exist on pages that are located at completely different web addresses. If nothing was done, then your website would lose its search engine ranking and PageRank for each of those deleted pages. Another consequence would be that anyone clicking those outdated links would arrive at 404 pages rather than the web pages that they hoped to visit.

This is a less than desirable situation and, luckily, it can be avoided by installing the Redirection plugin. With the help of this plugin, when the search engines arrive to crawl your website, they will be sent to the updated location for all of your old web pages. These redirects will also be beneficial should a visitor happen upon an outdated link since they will also be redirected to the page’s new location.

Introducing Redirection

The Redirection plugin is primarily designed to manage 301 redirects. This functionality is especially useful when migrating from a static website to WordPress because you’ll need to do a lot of redirection in order to get the search engines and your visitors to your new pages. In addition, this plugin also has the ability to track 404 errors. This will prove useful as it will allow you to monitor your website for errors and to ensure that everything is performing as it should be.

In order for this plugin to operate properly, permalinks need to be enabled on your site. You should, therefore, configure that WordPress setting before installing and configuring the Redirection plugin, so click on Settings | Permalinks . On this screen, in the Common settings area, choose any of the available options other than default. Then, click Save Changes .

Setting up and configuring Redirection

After installing and activating the plugin, go to Tools | Redirection . This will take you to the first page of the Redirection settings and configuration area. It’s on this screen that you will enter all of the necessary 301 redirects.

To do this, open the spreadsheet that you previously created. Copy the URL of the first static page listed in the spreadsheet and then paste it into the Source URL textbox. Next, enter the new URL for that web page into the Target URL textbox. Then, click Add Redirection . Repeat this process for each of your static web pages.

Clicking Groups , Modules , and Options will take you to additional settings screens for this plugin. These remaining options can, however, be left at their default settings and everything should run smoothly.

Completing the switch to the new website

You already began to make the switch over to your new website when you reverted index.php back to its original name and renamed index.html . With your 301 redirects in place, it’s time to complete the transition. The first thing that you need to do is delete all of the files that comprised your original website.

Next, return to settings|reading and check the box to allow search engines to begin visiting your new site.

Testing your new website for errors

One of the last steps you need to take to check your website for errors. In regard to markup and CSS vaidation, if you’ve kept to the documentation and style examples in the genesis-sample theme, your markup should be good to go, and so should your CSS. You’ll want to take the time to visit the World Wide Web Consortium and validate your links, because by doing so you’l find out which links are broken so you can fix them before you start adding new content. Waiting to do this could prove to be a huge time vampire later. You’ll also want to take the time to make sure your site is cross-browser compatible to the extent that it can be. Test it in different browsers to make sure it looks and acts as it should.

That’s It

If you’ve made it to the end of this tutorial, congradulations. You should have a fully functional website on WordPress. This is a long process, but once you’ve made the switch, managing your site becomes so much easier in a lot of ways.

Show Me Yours

I want to see what you’ve build. Feel free to leave a link in the comments and I’ll drop by.

Introducing Universal, A Free Accessible WordPress Theme For Blogs And Businesses

Building accessible web sites with WordPress just got easier, because Joe Dolson has released the Universal theme for bloggers and businesses. This theme doesn’t overload you with options, but it does come with a healthy selection of features that will help you build a great web site that also happens to be accessible. Universal is responsive, has five widget regions, allows for custom background colors, (including the ability to choose a color and have a contrasting foreground color automatically chosen for you for text and links), custom menus, which include a social networks toolbar. There’s also support for native WordPress features like featured images and post formats.

Universal is part of the Cities project, project to create themes that will help you build accessible web sites. The inline documentation is extensive, and can serve as a reference point for other theme developers who want to make their themes accessible. The best part is it’s completely free to use. So if you like free, and you like accessible, go get a copy from the WordPress theme repository.

Let Your Visitors Know You’ve Approved Their Comment With The “Comment Approved” Plugin For WordPress

denise and penny with penny's puppy raisers

You’ve written a stellar piece of content. Your visitors are commenting like it’s going out of style. They hit “post comment” and look through the list of comments to find there’s. They get a message saying “your comment is awaiting moderation”, and they have no idea when you’ve approved it that their juicy comment is showing up.

You can fix this

Emailing your visitors to let them know their comment is approved is something you probably don’t have a lot of time to do. It’s one thing if there are only a few of them, but when you start getting a lot of interaction, it’s just not practical. Make WordPress do it for you. Go get the Comment Approved plugin by by Neils van Renselaar.

It’s simple to use. Once you activate the plugin, you’ll find its settings in Settings > Comment Approved. Check the box to enable the “comment approved” message, and whenever you approve a comment, your visitor will get an email letting them know you’ve taken care of that for them.

The plugin comes with a couple of shortcodes, but you can customize the message using HTML. It’s a great way to award first-time commentors with a free ebook or other promotional item.

Help Plugins Know Their Role With Menu Humility

You want to add some cool new feature to your WordPress website. So you head on over to the add new plugins screen in your administration panel, do some searching and clicking, and before you know it, you’re ready to make your dream come true.

There’s Just One Problem

Satisfied with your discovery, you settle in and get ready to get down to the business of adding more awesome content. You click Home to get back to your administration panel. But look, you have all these new links from your latest forray into the plugin repository. Links for all kinds of options and settings. Links that rudely shove the important stuff like comments and posts and pages out of the way. They’re like those roommates you live with in college. You meet and everything seems like it’s going to be totally epic. Then they move in and take up all your space, eat all your food, and are only useful when the bils have to be paid.

You might think you have to stand for this, that there’s some sort of WordPress rule somewhere that says plugin configuration links have to get top billing.

There’s Something You Can Do About This

That rule doesn’t exist, and you can solve this problem very simply with a plugin called Menu Humility.

This plugin is very simple. It doesn’t even have a settings page. It does one thing. It takes all those intrusive links that other plugins insert and shoves them down to the end of all the important stuff, where they belong. This is an easy way to keep the part of your administration panel that you use on a regular basis uncluttered, which means you can find what you need more quickly.

This plugin won’t cost you anything but a trip to the add new plugins screen and the click it takes to activate it. So if you’re tired of paying the price of clutter for all those cool features, go get yourself a copy of Menu Humility. Your administration panel will thank you.

Stop Making Things Pretty And Start Designing

I saw on Twitter last week that the next WordSesh is being planned. So I want to share some of my favorite talks from previous events. The first one I’m sharing is on design.

This talk by Michelle Schulp is one of my favorites because it looks at design as solving problems strategically and not just making things look pretty. I’ve worked with several sites that look pretty, only to dig deeper and find that the implementation is what I end up fixing because it bleeds over into making features of the site in question break. So it was refreshing to see design treated as problem solving and not just adding what too often turns out to be a superficial varnish.

How To Find Free Images For Your Site Even If You’re Totally Blind

In both the Intro To HTML 5 And CSS and Intro To WordPress And CMS Fundamentals courses at the Cisco Academy for the Vision Impaired, we stress the importance of adding rich media to sites you design and build, even if you are totally blind. The web is a rich place, and its denisons have grown used to, (and like), all of that rich content. But how do you find images for a site if you are totally blind and cannot usually take the pictures yourself, and you don’t have a dedicated team of light slaves (sorry sighted people, we love you, but that’s just what we call you sometimes), to beta test the pictures you take, or you don’t have the money to use a service like this to have all the images you need described for you? (Protip: Use that service the next time you need to take a picture for a job interview. They’ll give you accurate, objective descriptions of yourself, and once you have a good picture, you can use that on resumes as well, or have it cropped to use as a social media avatar).

Fortunately, all hope is not lost. There is a reliable way to find good free images for your site that are easy to use. It will take a little work on your part, and you need to be familiar with your screen reader, but it’s definitely worth it. This method has been tested with Jaws 14 and 15, and Internet Explorer 10 and 11. Your milage may varry with other screen readers and other browsers.

We use Flikr for this, because it’s free and has lots of images that are released under the Creative Commons license. You’ll need a Yahoo ID for this, because you sign into Flikr using that ID and password. Here are the steps you need to take to start finding images:

Plan Your Images

Before you can do any searching, you need to plan what kind of images you need. What kind of images will butress your content and add flare to it. what kind of image will evoke the kind of feelings or thoughts or associations you want for your readers. For instance, if you manage a cooking site, and you’re posting a recipe for the most amazing cake ever, then an image of a scrumptious cake is what you want. Or, if you’re managing a site about beekeeping, then a picture of cultivated beehives or honey extraction is what you need.

  1. Go to the advanced search page on Flikr.
  2. Type keywords in the search box for images that you need. Also, make sure to type words you don’t want to show up in the search in the appropriate boxes. For instance, you might want roses, but not pictures of the band Guns and Roses, so type guns in the box for words you don’t want to show up in your search.
  3. Check the box that searches for photos only if you don’t want other kinds of images, and check the box that narrows your search to photos and images released under the creative commons license.
  4. Press the submit button and wait for results.
  5. Look through the page of results and pay attention to what tags are applied to
    the photos and what kind of comments people make about the pictures.
    Tags are keywords people use to describe the photo. Comments can tell
    you more about what the picture is like and how well people like it.
  6. 7. When you find one that is highly rated and sounds like what you want, press enter on its link. Its link is usually a long random string of
    letters and numbers.
  7. Do not download from this page since it defaults to a huge full screen
    picture that is 1024 by 768. It’s not what you want for a website.
  8. On that page, look for and press the actions button. It’s after the
    follow and fave buttons.
  9. Now comes the screen reader magic part. There is a silent menu
    that comes up once you press the actions button. You will need to use
    your JAWS cursor or object nav in NVDA to find the view/download all sizes button. Click that
    button with the key that’s next to the numlock key on a full-sized
    keyboard, the left mouse button.
  10. Once you click this, you’ll need to use your JAWS cursor again to
    click the view all sizes button. It’s on the same line as the download
    button, so you’ll need to be sure you click on the correct button.
  11. You’ll reach a page with multiple sizes for your chosen image. For
    icons, you’ll want the smaller format, the square or the thumbnail. For
    a regular image to use on the website, try one of the medium sizes,
    around 320 by 240 or in that neighborhood. Don’t go higher than 500.
  12. When you press the link to download the size you want, it’ll take
    you to a page where the download starts.
  13. This is very important. When the download finishes, immediately go
    to the folder with your file and give it a real name. By default the
    photo has a name that is a long string of random numbers and letters. If
    you don’t give it a better name, you’ll forget what that file is six
    months down the road. Call it something like “pink rose icon” or “red
    mountain bike medium” and make sure to keep the original file extension
    of .jpg.
  14. Now hit your back button twice. Tab to the link where you would
    follow a person’s photo stream. Press your context key and choose copy
    shortcut. This copies the URL for the person’s photo stream to your
    clipboard.
  15. The price for being able to use someone’s photo is that you must
    give them credit. People either do this by using the caption attribute
    in the img tag or by providing credit as an aside in the article where
    the photo is posted. You could also use space in your footer tag to
    provide attribution.
    Attribution consists of letting your viewers know who took the photo as
    well as posting the link to the person’s photo stream on Flickr. It’s
    not required, but I also send the person a message on Flickr to thank
    them for sharing the photo.
  16. This process works equally well using HTML or a WordPress site. Just
    do the attribution inside the caption area when you upload a photo to
    the WordPress post where the photo will be used.

We used Flikr in this tutorial, but there are tons of websites that offer creative-commons images that you can use throughout your content. As you spend more time creating content and adding images, the process becomes a lot easier and you’ll be following it like it’s second nature.

Your Turn

Now I’ll turn it over to you. If you don’t take your own pics for your site, what sources do you use to find images? Are they free? Are they paid? And if you’re a screen reader user, what accessible sources of creative-commons images have you found? Why not share your findings in the comments below?

Track Your Billable Hours With Instabilling

If you’re someone who charges for your work on an hourly basis, keeping track of those hours can be chalenging. You could use a stopwatch, and then create a spreadsheet and enter that data, create a formula to calculate your rate, and then get the results from another column, but that means you have to remember to enter the data for the hours you’ve worked after you’re done. And if that work period is a long one, you’re probably just like me and you’re so tired after working that logging hours is the last thing on your mind.

Instabilling To The Rescue

I was talking to some of my geek friends last night, and the subject of hourly rates came up. I was given an app recommendation, and while searching in the app store on my iPhone for the app, I came across Instabilling. Instabilling is an app that lets you track tasks, how long they take, and for specific clients. For each task, you enter a task name, select a client, and enter an hourly rate. This is great for those of us who charge differently depending on the task and the client. There’s a task timer screen, and it shows the task, the time worked, and the earnings in real time. There’s also a start and stop button, which, (though unlabeled), are still useable by Voiceover users. Having a simple start/stop option makes it easy to stop when you take a break, and then start again when you get back to the grindstone.

Instabilling also lets you generate reports based on time period, task and client, and then email that report to the client, so he or she gets a time report along with your invoice should you choose to include that. You can also time personal tasks with the app, which means it has applications outside of work.

Oh, and one more thing. There’s a free version that works just as well as the full version, which is only ninety-nine cents. I don’t think you can beat that.

<3>Your Turn

Now I’ll turn it over to my fellow hourly workers: Web designers, developers, content writers, and anyone else who works from home and has to keep track of their hours. What tools do you use to keep track of all that time? Leave a comment and let me know.