Not cool.

Theme Test Drive changes that. With a few clicks of a mouse, it is easy to run the site in administrator-only viewing. This means while I get to see the theme in action – using my live data! Users still see the original theme I had installed.

How does this work? It looks complicated at the surface level, but it is really easy. First, install the plugin. (It is available through the plugin manager. Just search for Theme Test Drive.)

Once installed, click Appearance -> Theme Test Drive.

Activating the Plugin is a two-step process. First, you need the plugin activated in your plugins section. Second, you need to activate it through the below form, which is found under Appearance:

Under Usage, select the theme you want to preview. In this case, I’m previewing the default WP theme Twenty Eleven. Click Enable Theme Drive to be able to preview this theme with your live data. Click Disable Theme Drive to view the site as your users do.

Once you’ve done this, just visit your website as normal. You will see the theme that you have enabled under Theme Test Drive while your users see your standard theme.

While laying awake watching the storm, what I usually do so my family can sleep uninterrupted, I got to thinking about where all of our important papers were and how easily we could locate them in the event of a natural disaster. Fortunately, we have a pretty good disaster recovery plan in place. We have two fire safes located in our house – one in our Master Bedroom and one in the basement. Great, I knew where our important papers were.

Then, my mind wandered over to my WordPress websites. I’m currently moving all of my websites to a new, more powerful server, so it’s the perfect time to update my disaster recovery plan for my WordPress websites. I keep a record of all the important information I need to access or move both in an electronic document AND a printed document.

Since I am changing servers, I will need to update certain items on this document, so it’s the perfect time to confirm all the information on the document. I thought I’d share this with you as well.

What Information Do I Need To Record

Your Server Control Panel Login Information

Whether you use cPanel, Plesk, ServerCP, or some other control panel, you have to login to access the control panel. Be sure to record not only the login ID and password, but the URL for your login access. Sometimes, this may include a port, so don’t forget to include that information as well.

Your Domain Registrar Login Information

If you are moving from one server to another, you will probably need to change your nameservers. To do that, you will need to login to your Domain Registrar’s control panel to make those changes, so be sure to record your login ID, your password, and the URL you use to login.

Your DNS Login Information

If you host your own nameservers, you will not need this information. Also, if you use your registrar’s nameservers, you will not need this information. However, after the recent GoDaddy debacle, I would recommend against this. If you use an external DNS service, then you should record your login ID, password, and the URL you use to login.

Your Server IP Address

If you host your own nameservers, this will not be important for any of your configuration, but you should still have it recorded. If you use your registrar’s nameservers or another nameserver, then you will need the server IP address to record in your “A” record.

Your NameServer Information

You should have at least two nameservers – sometimes more. Typically, the protocol would be ns1.domain.com, ns2.domain.com, ns3.domain.com, etc. Some nameservers do not use ns1. but instead use simply ns. Regardless, of the format or how many you have, be sure to record all of them as they are important.

Your MySQL Database Information

You will need this for two different purposes.
#1 In case you ever need to reenter it into your WordPress setup. You will need the database name, the database username, and the database password. Remember when you initially set up your website? If not, set up a test website to see what information is needed to confirm this.
#2 If you use a program to directly access your MySQL database tables. Personally, I use Navicat because I find that it is so much easier to use than PhpMyAdmin. Regardless, of which one you use, you will need to record your database name, database username, and your database password. With Navicat, I need to know the IP address of my server. You did record that earlier didn’t you? If not, now is the time to do it.

WordPress Login Information

Be sure to record your main WordPress admin login information – both username and password. You didn’t use “Admin” as your admin login ID did you? If you did, now is your chance to change that. Install UserName Changer from the WordPress repository and make that change NOW, before you take another step.

FTP Information

Next, record your FTP login information. This will include your hostname (domain.com), your username, and password. Also, be sure to note whether you use standard FTP or if you operate through SSH (SFTP) access. Finally, if you use any type of encryption instead of the plain FTP, be sure to make note of that as well.

WordPress Authentication Unique Keys and Salts

Remember that long string of numbers that you generated at WordPress’s Secret Key Service? Be sure to revisit your wp-config.php file and record that string as well.

WordPress Table Prefix

You did give your WordPress table a prefix other than “wp_” didn’t you? If so, be sure to record the table prefix here. If you didn’t, now is the time to make that change. Install the plugin – Change Table Prefix – from the WordPress Repository and make that change now. Record the new WordPress table prefix so you don’t forget it.

MX Records

If you are not hosting your own nameservers or if you are using another mail service, you should record your MX Record settings. This would be important to continue to send and receive email should your move your website or you suffer a catastrophe.

Mail Server Information

If you host your own mail server – such as Squirrel Mail or some other service – then record your online mail server access information. This should include your login ID and password, as well as the URL that you visit to access your email. If you have to designate a specific port to access your mailbox, be sure to record it as well.

Email Provider

If you forward your email to a Google or GMail account like I do, then you should also record your access information for that account.

Will I Ever Use This Information

Even if you are not planning to move your hosting to another server and you never have a catastrophic failure, you should maintain all this information so you can sleep better at night.

I work with a local radio station that covers high school football on Friday nights and streams their station online 24/7. One Friday afternoon, I got a call about 2:30PM saying that their website was inaccessible. After about 30 minutes of research, we discovered their their nameserver was down for their actual domain name (domainname.fm); however, their published domain was a simple redirect.

Since the domain registrar was unsure how long it would take to solve their nameserver issue, our quick solution was to remove the redirect, point the name servers to our server, and mirror their content on our server. Another potential solution was to just change the redirect to a sandbox domain on our server. Regardless, this quickly became a non-issue because they didn’t know their login information at their domain registrar and could not retrieve it by game time.

If this information had been readily available, we could have had them back up in under an hour with the redirect change and possibly even a couple of hours with a DNS change. Instead, the live stream was down for that game. For them, they lost listenership for that evening and potentially many weeks to come – all because they didn’t maintain some simple records.

I created a simple document with blanks for all this information. I fill in the information, save the document, print a hard copy and file it, and sleep well secure in the knowledge that my WordPress Disaster Recovery Plan is in place and kept up to date. We should all prepare our own plan and file it away in a safe place. The storm could come tonight.

I’d love to hear about your own WordPress Disaster Recovery Plan. Leave your comments below.

Photo Credits:
Alex //Berlin _ Alexander Stübner via photopin cc
gruntzooki via photopin cc
RambergMediaImages via photopin cc
Kevin Severud via photopin cc

Font Awesome is an iconic font designed for use with Twitter Bootstrap. The icons have cross-browser support and even support IE7, should you be so unfortunate to be have to support it. There are 220 vector icons in the font and they were designed to be infinitely scalable and compatible with screen readers.

Font Awesome Icons Plugin for WordPress:

Font Awesome Icons is a new plugin that makes these icons available to you within your WordPress site. The cool thing about this plugin is that it doesn’t require Twitter Boostrap so you can use it with any WordPress theme.

The Font Awesome Icons plugin was created by Rachel Baker, who is also the author of BootstrapWP, which we featured in 7 Free Twitter Bootstrap Themes for WordPress. Rachel is always creating cool things with WordPress. She made the Font Awesome Icons plugin to be something that you can use independently of your theme, which means you can change your design and keep your icons.

How to Add Icons Using the Font Awesome WordPress Plugin:

There are two easy ways to add icons using this plugin – HTML or Shortcode.

Add Icons Using HTML
Adding the icons using HTML is just as easy as using the shortcode and it provides greater flexibility. You simply add the icon name to the class name like so:

<i class="icon-umbrella"></i>

This produces a tiny umbrella icon.

You can make the icons bigger by increasing the font size:

<div style="font-size: 44px;">
<i class="icon-umbrella icon-large"></i>
</div>

The inline style is just an example, but you’d probably be better off putting the font size in your stylesheet.

Add Icons Using Shortcodes

If you find it easier to use shortcodes than HTML, you an add the icons by specifying the name within the shortcode like so:

[icon name=icon-pencil]

This will work for post and page content, but you will probably need to go with the HTML for using the icons outside of the post editor screen.

You can view all 220 of the Font Awesome icons at github and use this as a reference. New icons are being added to each new version so you can expect the resource to continue to grow. Use them in menus, buttons, posts or anywhere you like. Many thanks to Rachel Baker for creating this cool new plugin. Download Font Awesome Icons for free from the WordPress plugin repository.

Whether you need to quickly get up to speed with HTML5 or are in search of easy-to-digest resources that you can use to educate your clients about this web technology that’s creating a huge paradigm shift in the web and mobile development ecosystem, this collection of infographics that visualize HTML5 facts and figures will help.

If you’d like to go to the source of an infographic so that you can find a larger version and learn more about the infographic, click on the respective title or preview image.

1. HTML5: Past, Present and Future

This infographic is an overview of the state of HTML5 in web and mobile apps, with data on HTML5-capable mobile web browsers, browser compatibility, and more.

2. WTF is HTML5?

This is a simple primer on HTML5, which can be an excellent educational reference for your clients. The original source of this infographic is no longer available.

3. History of HTML5

This infographic traces the progression of HTML5, starting in 2004 when the Web Hypertext Application Technology Working Group (WHATWG) was formed.

4. HTML5: Why Developers Need It

Some compelling data on why web developers should start using HTML5 (like 74% of the browser market is HTML5-compatible) are shown in this infographic.

5. HTML5: I’ve Seen the Future – It’s in My Browser

Over 34% of websites use HTML5 in some way, but the browsers with the largest combined market share as of January 2012 (IE6-IE8) don’t have HTML5 support.

6. Taking HTML5 to the Next Level for Mobile

This infographic includes a visualization of data about mobile web browser capabilities (gathered using Ringmark).

7. The Wonderful World of HTML5

According to this infographic, over 2.1 billion mobile devices with HTML5-capable browsers are estimated to exist by 2016.

8. The Hype versus Reality of HTML5 Deployment

This infographic commissioned by Zipline Games argues that, for mobile gaming, HTML5 lacks in “reach, technical capabilities, and market results” compared to Flash.

9. HTML5 vs Flash Games

This is another infographic that matches up HTML5 games and Flash games by comparing their distribution method, CPU usage performance, security, and so forth.

10. The History of HTML5 in Line with Popular Culture Events

This interesting infographic places HTML5 milestones side-by-side with pop culture events happening at the same time of the milestone.

The WordPress Helpers plugin was created to be exactly that – the missing settings page for WordPress. It’s part of the PIKLIST Rapid Development Framework and as such requires that you have the PIKLIST plugin installed first. PIKLIST is a powerful, flexible framework for developers who want to focus on tailoring and extending WordPress. It makes it easy to build fields for settings pages, widgets and custom post types with minimal code.

WordPress Helpers, once installed, is located at Tools > Helpers. There you will find a settings screen with tabs for all the options available to be changed.

WordPress Helpers features the ability to:

• Take control of the WordPress Admin Bar, including “Howdy”.
• Show ID’s on edit screens for Posts, Pages, Categories, Tags, Users, Media, Custom Post Types and Custom Taxonomies.
• Disable the theme switcher.
• Remove the “Screen Options” tab.
• Remove WordPress version, Feed Links, RSD Link, wlwmanifest and relational links for the posts adjacent to the current post, from your theme header.

WordPress Dashboard:

• Hide Dashboard widgets.
• Set the default Dashboard columns.

Writing:

• Set the default Post editor (Visual or HTML).
• Totally disable the Visual Editor.
• Increase the height of the Excerpt box when writing a Post.
• Disable Autosave.
• Set the Post Per Page on the edit screen.

Discussion:

• Close Comments for older posts.
• Remove auto linking in comments.

There are many more settings beyond those listed here. If you wanted to make all of these changes, you would normally have to install 20 or more separate plugins to handle it. With WordPress Helpers you get everything in one shot, with the settings panel under one menu in the WordPress dashboard. No need to hunt around to try to find out how to change every little thing.

New WordPress users can be confused by all of the extra options and widgets in the dashboard. These little tweaks can make all the difference for someone who is struggling to use WordPress for the first time. Install WordPress Helpers to keep the dashboard trim and simple.

First, you’ll need the FREE WordPress plugin called “Exclude Pages.” Once you install and activate that plugin, you’ll find a small check box in your WordPress admin area, like this:

As you can see, including or excluding a page on your WordPress site is as easy as checking or unchecking the “Exclude Pages” checkbox. You can always go back and edit the page to show up in your menu later. Try it out.

WordPress widgets; ooh… we love ‘em, don’t we?

The functionality and flexibility that WordPress widgets can add to our blogs and sites is unmatched (imho) by other platforms. Just do a quick search of the WordPress repository for widget, and you’ll find over 1000 plugins that can include a new widget for your blog!

But, regardless of the quantity and quality of WordPress widgets available, every once in a while, we install a WordPress plugin with a widget that doesn’t quite fit the look and feel of our site. Sometimes, (sorry designers), the built-in styling looks just awful.

Then again, there are times when we’d simply like a specific widget to stand out from the rest in our sidebar. This little tutorial will give you a few basic tips on how to

• just tweak individual WordPress widgets a little bit
• customize things by removing some of the information displayed in the widget
• ensure the same custom style is applied to all widgets in your sidebar, or throughout your site
• re-arrange how the information is outputted by a widget

Note that for that last point, we won’t be touching any plugin files or editing any php code. All our customizations will be done via CSS in the style-sheet of our theme or child-theme. That means that the order in which the various elements are called by the widget code won’t change. We can, however, do a bit of pretty nifty stuff with CSS alone.

For the purposes of this tutorial, we’ll be using a simple text widget so you can get the hang of things. Once you’re familiar with how easy is actually is to get your WordPress widgets looking the way you want, you’ll have a ball creating custom styles for almost any widget on your site.

Create a test widget

Go to “Appearance” > “Widgets” in your WordPress back-end and drag a text widget to your sidebar, or any other widget area where you’d like to play around a bit. Give your widget any title you like, add the following to your widget and Save.

<div class="my-entry">
<div class="my-title">
<h4>This is the title</h4>
</div>
<div class="my-image">
<a href="http://www.flickr.com/photos/kevinmcmanus/3956021578/" title="Thatched roof cottage by K Mick, on Flickr"><img src="http://farm3.staticflickr.com/2431/3956021578_8579b5943c_m.jpg" width="240" height="161" alt="Thatched roof cottage"></a>
</div>
<div class="my-content">
Here is a bit of content to describe what's going on here. This could be some automatically generated text like a post excerpt, rss feed, or text you enter yourself in a widget like this one.
</div>
</div>

The above code will generate a widget on your site similar to the image below:

This is a very basic display that inherits the base sidebar styles in the theme style-sheet. While we do have full control over the content in this widget (we just entered it manually), let’s pretend for now that it’s generated by some plugin. That’s also why we added div containers around the image and the content, ‘cuz most plugins will enclose elements in some kind of container for styling purposes (we may not need to use them, but they’re there for our exercise). Now let’s make our test widget stand out from all the others on our site.

Styling a single widget

In the window in which you are viewing your site, launch your browser’s developer tools. For tips and links to documentation of popular browser developer tools, see “Tip #1″ of this article: 5 Tips to Organize Your WordPress Theme Stylesheet and Make it Easier to Navigate. (For the rest of this article, I’ll be referring to tool names found in Firebug for Firefox.)

Using the “Inspect Element” tool, highlight the text widget you just created. You should see something like the image below:

See where it says “id=”text-5” in the html window on the left? That’s the ID of the text widget we just created. That ID is what is going to help us create styles that will be specific to that particular widget. So, in all the custom styles we will be adding to our style-sheet, they will be preceded by that ID, ensuring that the styles will be applied only to that widget.

For the rest of this exercise, we’ll be adding some custom styles to our site. There are 3 ways we can do this:

1. Open your theme/child-theme’s style-sheet in your favorite text editor (you will need to re-upload the edited file via FTP)
2. Use the theme editor in your WordPress admin panel
3. Use the new “Custom CSS module” in Jetpack. For more on this new feature, see Jetpack 1.7 Adds Custom CSS to the WordPress Dashboard

Got the style-sheet open? Good, let’s start by making our test widget really stand out from the others in the sidebar by giving it different border and background colors. Add the following to your style-sheet:

#text-5 {
  border: 1px solid #000000;
  background: #999900;
}

You should see something like the image below. Go ahead and play around with the border thickness, border color and background color until you get it looking the way you want.

We can also see that the image we added from Flickr.com isn’t quite right for our sidebar (it’s preset in the embed code at 240×161 pixels). We could cheat and modify the dimensions directly in the embed code but, as we’re pretending this widget is generated by a plugin, we won’t do that here. So, here’s an easy way to ensure that any images that appear in our customized widget fit just right:

#text-5 img {
  width:100%;
  height:auto;
}

The width:100%; declaration ensures that larger images will be resized to fit exactly the space available in their parent container. The height:auto; ensures that the height will remain proportionate to the original. Now you should see something like this:

The color of the headings isn’t right either for the background color we added earlier, so let’s make them easier to read by adding the following to our style-sheet:

#text-5 h3, #text-5 h4 {
  color:#ffffff;
}

That would give you something like this:

You can see in the examples above how easy it can be to add custom styles to your WordPress widgets simply by targeting the ID of the widget (#text-5 in our examples), then appending the appropriate elements to the selector. Up til now, we’ve been customizing the look of the widget content. Now, let’s shift things into another gear and change how the content is displayed; the layout.

Changing the widget content layout

For this part of our exercise, we’ll be using some display and/or float properties. (For more on display, float and other style rules, see the helpful links at the end of this article.) Let’s first add a bit more content to our test widget so we can really see the impact of our changes. To simulate multiple entries generated by a plugin, we’ll copy what we already have, and add it in again with a horizontal rule between the 2 entries. Change the content in your test widget to the following and Save.

<div class="my-entry">
<div class="my-title">
<h4>This is the title</h4>
</div>
<div class="my-image">
<a href="http://www.flickr.com/photos/kevinmcmanus/3956021578/" title="Thatched roof cottage by K Mick, on Flickr"><img src="http://farm3.staticflickr.com/2431/3956021578_8579b5943c_m.jpg" width="240" height="161" alt="Thatched roof cottage"></a>
</div>
<div class="my-content">
Here is a bit of content to describe what's going on here. This could be some automatically generated text like a post excerpt, rss feed, or text you enter yourself in a widget like this one.
</div>
</div>
<hr/>
<div class="my-entry">
<div class="my-title">
<h4>This is the title</h4>
</div>
<div class="my-image">
<a href="http://www.flickr.com/photos/kevinmcmanus/3956021578/" title="Thatched roof cottage by K Mick, on Flickr"><img src="http://farm3.staticflickr.com/2431/3956021578_8579b5943c_m.jpg" width="240" height="161" alt="Thatched roof cottage"></a>
</div>
<div class="my-content">
Here is a bit of content to describe what's going on here. This could be some automatically generated text like a post excerpt, rss feed, or text you enter yourself in a widget like this one.
</div>
</div>

You should now see something like this on your site:

Let’s try simply making the images half the width of the widget, and get the content to wrap around them. To do so, we’ll style the parent containers of the images. As we have already added a width of 100% to our images, they will automatically resize to fit their container. Most widget content generated by plugins will have images wrapped in some kind of container. In our test widget, the image container is div class=”my-image”. So to style that container, we can add the following to our style-sheet:

#text-5 .my-image {
  float:left;
  margin:0 1em 0 0;
  width:50%;
}

Now you should see something like this on your site:

If you’d prefer a layout with images to the right, change the code you just added to the following and you’ll see something much like the image below:

#text-5 .my-image {
  float:right;
  margin:0 0 0 1em;
  width:50%;
}

In some instances, we may want the content of our WordPress widgets to display in distinct columns. The display property allows us to do that by mimicking good ol’ tables and table cells. First, we should tell our widget that we want its content to behave like a table by adding display:table; to it. The style rule for your test widget should now look like this:

#text-5 {
  border: 1px solid #000000;
  background: #999900;
  display:table;
}

Next, we’ll add a style rule to the my-image container, and create a rule for the my-content container so they behave like table cells:

#text-5 .my-image {
  display:table-cell;
  float:left;
  margin:0 1em 0 0;
  width:50%;
}
#text-5 .my-content {
  display:table-cell;
}

Viewing your site, your test widget should now look much like this:

Evidently, this technique may not be ideally suited to WordPress widgets in narrow sidebars where there’s a lot of text beside a single image in each entry. However, it can be useful to re-arrange text, links or images in wider widget areas such as full-width footer widgets.

Hiding some of the widget content

There are times when a widget displays a bunch of information in each entry, some of which we don’t necessarily need or want. Depending on the plugin used, there may not be a built-in setting or option available to hide or display certain elements. There’s an easy solution to that with the display property.

Let’s say we want to remove the text from each entry in our test widget and show only the images. We would simply apply display:none; to the appropriate container. The container for our test widget text is my-content, so the style rule would look like the following (you’ll need to remove the style rules for the my-image container to get the images back to full-width for this exercise):

#text-5 .my-content {
  display:none;
}

To hide the images and display only the text, we would apply the display rule to the image container instead like so:

#text-5 .my-image {
  display:none;
}

Depending on what we’ve hidden, our test widget would now look like one of the images below:

Applying custom styles to groups of widgets

Let’s say we want all the widgets in our sidebar to inherit the same custom styling. Rather than preceding style rules with the ID of a specific widget (such as #text-5 from our test widget), we would precede them with the ID of the sidebar and target the widgets like so:

#sidebar .widget {
 style rules here... 
}

If we want to apply the same rules to all our sidebar widget images, our CSS would then look like this:

#sidebar .widget img {
 style rules here... 
}

To apply custom CSS to all the widgets in our site’s footer instead, we would target the footer ID like so:

#footer .widget {
 style rules here... 
}

To apply custom rules to ALL the widgets on our site, we would simply target the widget class like so:

.widget {
 style rules here... 
}

Tips to override stubborn theme styles

Depending on the complexity of your chosen theme’s style-sheet, custom styles for your WordPress widgets may not “take” immediately. In other words, some built-in theme styles may take precedence and override your custom stuff. If this happens, there are 2 ways to ensure that your custom styles override whatever may be present in your theme’s style-sheet.

1. Increase the specificity of the selector. This is by far the preferred method. To help get you going on CSS specificity, here’s a simple tutorial, and a complete one.
2. Use the !important rule. Be careful though, this should be used only if absolutely necessary. See this article at CSS-Tricks.com for a great write-up on how !important can be used wisely.

However, I am all for giving second chances, and further to my aforementioned article, the team at CodeGuard worked quickly to make amends for their previous misdemeanor (which in fairness, did seem to have been committed in ignorance, rather than with intent). And as they once did before, they now again offer a free option to WordPress users.

So with bygones being bygones and a forward-facing attitude, today I want to introduce you to what is a rather unique backup service for WordPress.

Dime a Dozen

Whenever I stumble across a new backup plugin, one question always immediately springs to mind: “What does this plugin do that a hundred other backup plugins don’t?”

So let’s take a look (in no particular order) at what I consider to be the key selling points of any backup service:

• Simplicity
• Reliability
• Affordability

You need to trust a backup service. You need to have confidence in their service. You need to be able to use such a service without needing an instruction manual. And preferably, such a service shouldn’t cost you an arm and a leg.

Having been using CodeGuard for several weeks now, I believe that it delivers on all three fronts, and is well worth investigating if you are in the market for a backup service.

Simplicity

To give you an idea of CodeGuard’s feature set, check out this brief promotional video:

The concept is simple – CodeGuard takes periodical “snapshots” of your site, informs you of any changes, and provides you with the ability to reverse any changes made between each snapshot.

Not only is this simple, it also highlights one of CodeGuard’s unique selling points – its ability to spot changes made to a site. With the daily reporting system, you will never be far away from knowing if someone (or something) malicious is interacting with your site. And if no changes are made, CodeGuard won’t take a backup. Therefore, every backup you see on your account represents a unique iteration of your site.

Here’s a screenshot of backups of my blog from the last few days:

As you can see, you get an intuitive overview of all of the changes that have been made to your site. You can click for more details on any specific day and browse through a list of every single file that has been added, changed or removed.

If you need to restore your site to a previous iteration, you have three options:

1. Request a ZIP file of your backup and manually overwrite files as you see fit
2. Automatically restore your site to a previous version
3. Select specific files to overwrite

Reliability

This is where CodeGuard really shines, because it has nowhere to hide. Every single backup ever made, with full details on the changes within, is available within a few clicks:

This kind of transparency can only serve to fill you with confidence, because let’s face it – reliability is an absolute must when it comes to choosing a backup service. If you choose to receive daily emails, you will be able to see that CodeGuard is working every day to log and store changes to your site.

Affordability

This is where CodeGuard’s very reasonable and relatively simplistic payment plan comes to the fore. First of all, there is a free option available, offering the following features:

• 1 website
• 1gb storage
• Weekly backups
• Manual restore

The pro plan, starting at $5 per month, offers a more feature-rich service:

• Up to 50 websites
• 5gb storage
• Daily backups
• One click automatic restore

If you require more space, each gigabyte will set you back another dollar a month. If you need to back up more than 50 sites, you will need to pay another $4 per site (or $3 per site once you go over 100).

It might get a little bit convoluted for power users, but for the rest of us, CodeGuard is a very reasonably-priced and well-featured backup solution. However, there are some curious anomalies regarding the service. For instance, I am using the free plan, which is supposed to provide weekly backups and 1gb of space. But for some reason, I am getting daily backups and 2gb of space (I’m not complaining!). Furthermore, if you attempt to upgrade your plan from within your account (as opposed to signing up as a new user), you get offered completely different payment plans. I have contacted CodeGuard regarding these issues, so it will be interesting to see how they respond.

In conclusion, whilst defining one backup service as “the best” is essentially impossible, I do believe that CodeGuard is an excellent option. I wouldn’t hesitate in trusting it with my own sites.

Download CodeGuard here.

Related posts:

1. Backup WordPress With The New PressBackup Express Service Backup your WordPress site to Amazon S3 or Dropbox for…
2. Monitor and Backup Your WordPress Sites with the Free WP Remote Service WP Remote has undergone a total reboot and is now…
3. Should WordPress.org Host Premium Subscription-Based Plugins? WordPress.org is in danger of losing its status as a…

Why haven’t you heard from that client?   You emailed him the last draft a week ago.  Why hasn’t he given you a sign-off or feedback yet?  You definitely emailed him.  Right? Right?!

Many a freelancer designer has known this feeling and has created a system to be able to efficiently submit drafts to clients and receive their approval and comments on that work.  To do so, some go about emailing designs, creating email chains that make it easy to lose an email or forget who last contacted who, especially when inboxes are crowded with junk or the emails pile up on each other.   Other designers opt to simply upload files to a Dropbox and share them, but this method does little to ensure that the other person has reviewed and approved the submission.

What the freelancer graphic designer needs is an application that will allow them to:

• Display the designs as they should be seen
• Make the design, and its earlier versions, easy to find and reference
• Communicate easily and clearly with their clients.

Now there is a plugin that looks to be able to do all of those things and make it easier for graphic designers to run an efficient design business from their WordPress website: Design Approval System.

What Does It Do?

This is what you get:

The DAS Plugin’s Design Display Interface.

Design Approval System creates a customized post template that looks like the above for displaying your designs.  In addition to the display properties, it also makes it easier for you to manage routine submission, input, and review processes with the client. Working clockwise from the upper left hand corner, you have:

1. A display for when this version of the design was posted and for which company it was intended
2. The name of the designer and the logo of his/her agency/company
3. An easy toggle between different versions of the design.   It will automatically display the linked to version of the design, but will also allow the viewer to select any of the versions of the design in a drop down menu.
4. The design itself.  This is 300×200, but it will display whatever size you enter, even if it overflows the browser window.
5. A button which, when clicked, displays a pop-up that allows the client to formally approve the design (sample below).  This is only for final approval of a design and is not intended to be used in for each bit of feedback (although it can).
6. Designer’s notes for the client to read as well as a description of the notes that the client has requested previously.
7. A button that allows the designer to send an email to their client notifying them that the design is ready for their review.  This function is not triggered automatically and this action must be performed every time the designer would like the client to review a design.

What The DAS Signature Sign Off Looks Like.

Getting Started

This “quick” 22-minute tutorial video of their’s is a pretty comprehensive guide on how to install, setup, and begin using the plugin:

For those of you who do not believe that 22-minutes is short, here is a brief summary of how to get it working.  First, download, install, and activate the Design Approval System plugin as well as the Custom Post Template plugin (both plugins are necessary for the DAS to function correctly).  The plugin will then go ahead and create a separate Dashboard menu for the Design Approval System with tabs to create and view DAS posts, create DAS tags and categories, get help with DAS, and adjust the settings of DAS. You are then required to enter your company’s name, logo, and email address in the DAS Settings panel (while there, you can also start to customize some of the automated email messages the plugin sends out).

To add your first design, simply insert an image into a DAS post as you would in any other WordPress post and it will display as you can see in the screenshot above.  You will also need to enter the appropriate information in the custom fields, you can see them below the text editor, so as to identify the creator and recipient of the design as well as enable or disable the client notes.  To ensure that this design is linked with others for the same client, it is important to add a client specific DAS category.  This can be done in the post’s category manager or in the DAS Settings panel, but it is important to not neglect it as the plugin groups different version of the same design by their shared category.

Reservations

Get The Response From Your Client You Need. When You Need It.

There are two reservations that I have about this product.  The first is that I did have a couple of issues with installation.  Since it relies on the Custom Post Template plugin, you will have to have your site updated to WordPress version 3.4; otherwise it will not work.  Also, although I wasn’t quite able to isolate that this was the problem, I believe that it does not play nicely with the Cloudflare service and the plugin will fail if your site is in the Cloudflare network.

The second reservation is that some of the options that I would like to see standard are only offered in the USD$15 extension pack, such as:

1. Designers can prevent clients from submitting requests for further changes until they have completed payment on their existing payments to the designer.
2. Clients can enter comments on the Design Display page.
3. After the client has submitted their design request, the plugin can email both parties with confirmation emails.
4. Can allow the designer to customize the confirmation emails messages and “Thank you” messages.

Other Options

If you are a photographer and are looking for something which has a somewhat similar functionality to the Design Approval System plugin, check out WP Shutter and its add-on, ShutterProof.  This plugin and add-on will allow you to display a variety of proofs to the client privately and allow the client to select the photograph(s) that they like best.

Four Types of WordPress Jobs

What kind of WordPress job are you looking for? I’ll divide this article into the 4 types I see the most.

1. Writing / Editing / Managing a WordPress site

These jobs use WordPress tools to create and manage website content.

2. Theme Development

Primarily concerned with the front-end look and feel of WordPress sites, these jobs leverage your visual design skills.

3. Plugin Development

Adding and changing site functionality makes use of your PHP development skills, along with other related experience.

4. End-User Support

Site managers sometimes need help using WordPress, and can benefit from your multiple years as a WordPress user.

So Many Skills, So Little Time

Your use of WordPress for an employer will fall within one or more of the above topics. Below, check out the important proficiencies you need to show for each of these areas. For most topics, I’ve provided what I think is the best link to move you in the right direction when you need a little help. By no means is this all you need to know about WordPress for the rest of your life, but completing these lists definitely puts you near the front of the pack.

Bonus Tip: I’ve hired WordPress staff for all of these categories. No candidate ever had all items checked off their list. If you take time to learn all of these skills and prove them with examples, you’ll rise to the top of most WordPress job interview lists.

Writing / Editing Skills

In addition to your general writing and editing abilities, you need to show familiarity with using WordPress in the backend.

WordPress Posts

Make sure you understand how to do everything the WordPress.org “Writing Posts” page shows you. That’s a pretty big page, so start with my list below, in order. If you get stuck, check the “Writing Posts” page to figure out what’s wrong. Make sure you can do everything on the following list.

1. Create a new post.
2. Change the permalink, and understand what it does.
3. Assign a category or two.
4. Assign tags intelligently.
5. Write a semantically-correct post.
6. Include HTML / CSS / PHP etc. code in a post using PRE and CODE tags.

   <h2>An example of code inclusion</h2> <p>Here we have included HTML tags that will not be rendered, but will be shown in raw form.</p>

7. Paste styled content copied from Word / RTF / etc. into the post without messed-up styling.
8. Attach and insert a link to a PDF document in your post.
9. Upload and insert photos into your post — left, right, and non-aligned.
10. Know how to clear an element from a floated previous element using the HTML editor.
    For example: If you insert an image left-aligned, and want the next 2nd-level heading to start below the image, how can you do it?
11. Insert custom characters with the “Insert custom character” tool.
    For example: Copyright symbol, Yen sign, etc.
12. Understand what the “More” tag does.
13. Schedule a post to publish at a later date and time.
14. Set a post to be viewable only to people who have a post-specific password.
15. Add a custom field value.

WordPress Pages

In addition to Posts, you need to understand Pages. Check the WordPress.org “Pages” page, and make sure you know the differences between Posts and Pages. Then, make sure you know how to:

1. Change the parent of a page.
2. Change the template used for displaying a page.

Search Engine Optimization (SEO)

You won’t find much about SEO on the official WordPress site, but it’s an important aspect to writing and managing any website.

1. Understand what SEO is.
2. Familiarize yourself with at least one SEO plugin.
   1. WordPress SEO
   2. Infinite SEO
   3. All-In-One SEO Pack

Shared Theme and Plugin Development Skills

Theme and Plugin development share a number of skills. If you’re trying to get a job involving either theme or plugin development, you’d better have experience with the following:

1. Loading JavaScript and CSS the proper way.
2. Creating settings screens and storing options.
3. Using theme features like:
   1. Sidebars
   2. Navigation Menus
   3. Post Thumbnails
   4. Post Formats
   5. Custom Headers
   6. Custom Backgrounds
4. Use of blog information functions to determine things like certain URL’s and certain file paths, rather than relying on hard-coded paths.
5. Showing you understand localization.
6. Demonstrating code formatting best practices.
7. Using jQuery in WordPress.

Theme Development Skills

If you have what it takes to design great user interfaces, you should consider building some of your own WordPress themes. As you gain experience, make sure you’ve covered all the following to help you land a full-time theme-related WordPress job.

1. Demonstrate HTML / CSS / JavaScript proficiency.
2. Build something using a grid framework.
3. Build a responsive theme.
4. Build your own custom page templates, including full width, left sidebar, and right sidebar variants.
5. Understand the template hierarchy.
6. Know how to make specific templates for specific category archive pages.
7. Add your own sidebars to a theme in various places.
8. Add editor stylesheets to a theme.
9. Make a child theme.
10. Understand efficient ways to debug theme problems.
11. Know when to split functionality into a plugin instead of including in a theme.

Plugin Development Skills

The problem solvers among us may thrive on building backend functionality for web applications. WordPress provides a great market for such coding skills. Before you knock on the door asking for a full-time plugin development job, make sure you can at least do the following.

1. Demonstrate PHP proficiency and ability to optimize code.
2. Understand object-oriented plugin development.
3. Understand the need for namespacing, and how object-oriented development relates.
4. Understand WordPress security and secure development practices.
5. Debug WordPress code.
6. Modify content using filters.
7. Explain what Custom Post Types and Custom Taxonomies are, and when best to use them.
8. Create your own widget.
9. Add custom meta boxes to post / page edit screen for capturing extra data.
10. Handle shortcodes in content to output certain results.
11. Pull data from external data source for display on the WordPress site.
12. Use jQuery for various effects and DOM control.

End-User Support Skills

Those who love lending a helping hand might best provide support services to other WordPress users. Big players in the WordPress world increasingly hire full-time staff to provide top-notch customer support. Make sure you can do the following before trying to get a WordPress support position.

1. Demonstrate ability to communicate well in writing.
2. Know how to create meaningful screenshots.
3. Demonstrate complete, in-depth knowledge of WordPress core functionality.
4. Demonstrate knowledge of the specific product you’ll be supporting.
5. Show your history on the WordPress.org support forums and other such places.

Show your work

If I were hiring for any job requiring WordPress skills, I’d expect to see examples of your work. Smooth talkers can sound like they know what they’re doing, but you’ll get more mileage out of an interview by showing real-world examples of your skills. Show me sites you’ve managed, themes and plugins you’ve made, tutorials you’ve written, or some highlights from your community WordPress support. If you don’t have any good examples, there’s no time like the present to go build them. I’ve given you a road map above–all you have to do is follow it.

Tell me your tales

When you hire WordPress talent, what else do you look for? When you’ve been hired yourself, were there other specific requirements not on these lists? Do tell.

Credits

•  Help Wanted photo: andjohan
• Write+Aid group photo: MaineDOE
• Radio dial user interface photo: Nite_Owl
• Cryptography technician photo: brewbooks
• User support technician photo: Highways Agency

Related posts:

1. Work with Incsub… Advanced Theme Designer / Developer Are you… or do you know… a damn good WP…
2. Create Beautiful, Viral Landing Pages for WordPress with Launch Effect Premium The Launch Effect WordPress theme has added tons of useful…
3. Launchpad, Free Landing Page Plugin for WordPress Easily set up a landing page with this free WordPress…