BlogmyQuery – BMQ

Anyone who has had their website hacked or inadvertently changed something they shouldn’t have on their websites database, will know the importance of backing up your live websites on a regular basis. The steps involved in backing up and restoring a WordPress database using PHPMyAdmin is no different from any other MySQL powered website.

There are alternatives to manually backing up and restoring your database in this way. In this article we will be showing you how you can backup and restore your WordPress database using the built-in import and export tool, using PHPMyAdmin, using CPanel and using a host of WordPress plugins and services.

If your chosen method of backup only backs up your websites database, your site could still be somewhat vulnerable. It is advisable to backup your website files manually as well so that you have a backup of uploaded files such as images, videos etc and any non-WordPress related files that are important (there are solutions for backing up files only).

Backing Up And Restoring Content Using WordPress

WordPress has a built in import (restore) and export (backup) system for transferring content from one location to another. It backs up posts, pages, comments, custom fields, categories, and tags. Unfortunately, things like attachment files aren’t backed up.

The export function can be found at http://www.yoursite.com/wp-admin/export.php. You will have the option of backing up all content or just posts or pages here. You also have the option of backing up any additional custom post formats you have installed e.g. forums, coupons, job-listings etc (quite a large percentage of good WordPress plugins use custom post formats to store data so you may have custom post formats and not even know it). The data is exported in XML format.

To restore your content, either on the same website or a different location, you need to use the import function. This can be found at http://www.yoursite.com/wp-admin/import.php.

WordPress lets you import content from a number of different blogging platforms such as Blogger and Live Journal and WordPress related products such as bbPress too.

There is a good chance that you don’t have the WordPress importer installed on your website so you will probably have to install it (should only take a few seconds).

The import function is very straight forward. All you have to do is upload your exported XML file and click on the ‘Upload file and import’ button. This screen also highlights one of the limitations of the WordPress export and import functions; the file size limit of 2mb. Thankfully, there are steps you can take to increase this limit so that you can upload your file correctly.

After you have uploaded your backed up database you will have the option of assigning posts to an existing user or creating a brand new account for those posts. This is a useful feature when merging the content from two blogs or websites together.

In this screen you can also import file attachments. The backup file you exported earlier saves the location of all of your uploaded files so if the site you backed up is still live on the internet you have the option of importing these attachments to the new location. This is handy if you are moving servers but it isn’t a practical solution for importing attachments from a backed up file if the old website is no longer live.

Finally, WordPress shows you a list of the entries that were imported onto your new website. If the content already exists, it won’t be transferred to your new site, therefore you don’t have to worry about ending up with two copies of your posts or pages if you accidentally upload the file again.

The WordPress import and export function is a user friendly method of backing up, that WordPress beginners are sure to find useful.

Backing Up And Restoring Your Files And Database Via cPanel

One of the most popular hosting platforms used online is cPanel. You should see an icon for backups on your cPanel home page (it’s exact location depends on the version of cPanel you are using and the theme your host has chosen).

To download a database you simply go to ‘Download a MySQL Database Backup’ and choose the database you want to backup. The file will be downloaded as a *.gz file. You can restore your database from this area too (you just need to upload your *.gz file).

You can also download and restore a home directory backup from this area (again, a *.gz file is used). This will backup all of your website files including your core WordPress files, uploads, plugins, themes and non-WordPress related files.

It’s a quick and easy method of transferring WordPress files and the WordPress database from one location to another. Though you do need cPanel to be installed on both locations (or at least be using a hosting platform that supports this type of importing).

Backing Up Your Database Via PHPMyAdmin

PHPMyAdmin is the most common way of administrating MySQL databases. You can access PhpMyAdmin directly through your hosting area (e.g. cPanel) though a great way to backup or modify your database through PhpMyAdmin is by installing the Portable phpMyAdmin plugin which allows you to use the tool through your WordPress admin area.

Once you are logged into PHPMyAdmin, you need to choose the database you want to backup, from the top left hand side (check your WordPress wp-config.php file if you are not 100% sure which one it is).

You then need to click on the export tab, which can be found in the navigation menu at the top. Some versions of PHPMyAdmin have a quick backup option that simply asks which format you want to back your database up in. It’s generally best to backup with the options like they are shown below.

Advanced options are usually available. The most important thing is to make sure that all of the database tables are selected before you click to backup (otherwise you run the risk of backing up one table rather than your whole database). You should also make sure that you click the option which says that it will ‘create a table if it does not exist’ (usually separated into two options to be checked). By default, the correct settings are usually selected but it’s important to make sure before you move to the next step.

Lastly, you may be asked how you want to compress your database. You can select none, zipped, gzipped and bzipped. It doesn’t matter much what you choose as PHPMyAdmin can unzip all of these formats when importing.

The steps for importing a database are very similar. Again, you need to login to PHPMyAdmin and make sure you choose the correct database. Then you need to click on the import tab at the top of the page.

All you need to do now is upload your exported file and click on the go button, ensuring that you chose SQL as your format.

When Moving Your WordPress Website

If you are moving your WordPress website to a new server all you have to do is:

• Backup your files and upload them to the new host.
• Export your database and import it to your new host.
• Ensure that your wp-config.php has the correct login information so that WordPress can access the database.

If your website is changing URL’s you have to make sure that your database has the correct information or WordPress will keep forwarding your website to the old URL.

The smartest way to do this is to change your WordPress address (URL) and Site address (URL) to your new URL before backing up (you do this at http://www.yoursite.com/wp-admin/options-general.php). For example, you would login to your site at http://www.yoursite.com/wp-admin/, change both URLs from http://www.yoursite.com/ to http://www.mynewsite.com and then start the backup process.

If you fail to take these steps, don’t worry. All you have to do is login to PHPMyAdmin and look for the wp_options table and click browse.

You should now see your site address (URL) in the first row. The option_name is siteurl. You simply need to click on the edit link and update this from your old URL to your new one.

The home address (URL), which is the first URL you see at http://www.yoursite.com/wp-admin/options-general.php, can be found on row 39 under option_name home. Simply click the edit link and then update the entry with your new URL. This whole process is relatively painless though it is much easier if you simply update the URLs on your old website before you back up.

Recommended Automated Backup Solutions

There are lots of plugins and services available for WordPress that make the process of backing up and restoring a database quicker and easier. In this section we would like to show you what we consider to be the best back up solutions available for WordPress.

VaultPress – From $15 per month per site

Launched at the end of 2010, VaultPress is the premium backup service from WordPress developers Automattic. In less than a year it has established itself as the benchmark for backing up WordPress.

Once the plugin has been installed VaultPress will take a snapshot of your website. The backup includes your database, plugins, themes and uploads.

VaultPress is constantly working. If you check the activity tab through the VaultPress area on your website you will see several updates every hour.

You can access your main dashboard at VaultPress through the VaultPress page on your own site. You can see a list of all of your websites that are being backed up by VaultPress with a note of when they were last backed up.

From the backup page you can download a full backup of your website or just your database, plugins, themes or uploads.

Older backups can be downloaded too. VaultPress doesn’t just keep backups for a few days; backups are kept from the very first day you started using the service. For VaultPress users who signed up at launch that means that they can download any post, page, theme, plugin or upload since November 2010. This pretty much guarantees that nothing will ever be lost from your website.

Vitality is a measure of how active your site has been over the last month or so. The score essentially informs you how much content has been added to your site during that time; be it posts, pages, comments or uploads.

The basic plan retails for $15 per month per site. The premium package costs $40 per month per site and gives you additional features such as domain and hosting migration assistance, theme and plugin scanning and security scanning. The enterprise plan was created for large businesses who want performance auditing and consultative security. That costs a whopping $350 per month per site.

With constant backups dating back from the day you first started using the service, VaultPress is one of the best backup solutions available for WordPress.

Link: VaultPress

BackupBuddy – From $75

Developed by iThemes., BackupBuddy is a fantastic backup solution that lets you backup your site to your own server, to Amazon S3, to Rackspace Cloud, Dropbox, FTP or email.

It backs up your database, themes, plugins and uploads. You can even backup non-WordPress tables. You can schedule backups as frequently as you wish, exclude certain directories from backups and limit the number of local backups so your server doesn’t get too full.

BackupBuddy has a user friendly restore and migrate feature too. All you have to do is upload your file and then enter some details (such as your database information).

BackupBuddy Restore Feature from WebDesign.com on Vimeo.

A license for two websites retails for $75. 10 websites will cost you $100 whereas an unlimited license costs $150. Unlike VaultPress, BackupBuddy backs up your database to your own server or external services such as Dropbox (most of which are very affordable). This makes it a very reliable and affordable backup solution after the initial outlay (see the BackupBuddy VS VaultPress comparison table for a direct comparison of prices with VaultPress).

Link: BackupBuddy

ManageWP – Currently Free

ManageWP is a service that lets you administrate all of your WordPress websites from the one area. Last month they upgraded their service with support for automatic backups to external FTP, Amazon S3 and Dropbox.

You can schedule backups on a daily, weekly or monthly basis. The number of backups you want to keep can be set and you can choose to delete older backups from your server.

To backup via FTP, Amazon or Dropbox you simply need to enter information the alternative backup destination.

ManageWP is currently in beta development and is therefore free to everyone. From November 2011 the service will cost only $5 per month for 10 websites and $50 per month for 500 websites. With DropBox offering the first 2GB of data for free and Amazon S3 having a very competitive pricing plan; ManageWP is an affordable way of backing up your WordPress website.

Link: ManageWP

WordPress Smart Backup – $20

A WordPress plugin that lets you schedule backups to your server or to your Amazon S3 account. Files can be zipped in order to save space in your accounts.

All past backups and future backups are shown on the backup manager page. Backups on your server can be deleted directly through the admin area. You can also restore your database or files by simply clicking on the restore button.

Backups can be scheduled on a daily basis if necessary and old backups can be deleted when necessary. You can receive updates whether your files were backed up successfully or not.

A regular license for WordPress Smart Backup costs only $20. Although not as advanced as VaultPress or BackupBuddy, it’s a useful plugin for scheduling backups on a regular basis.

Link: WordPress Smart Backup

CodeGuard – From Free

A user friendly service that backs your website up on a regular basis and checks your files for known malware. Your first website on the service is free. All you have to do is enter your website address and the FTP login details and your account will be setup.

The first backup takes between 48 and 72 hours but once it’s setup backups can be scheduled on a daily basis.

You can also receive updates if any of your files change. Backups can be restored at the touch of a button too.

The entry plan for CodeGuard is free and gives you 1GB of storage for one website. The basic plan offers the same storage for $10 per month however lets you backup an unlimited number of websites. The pro plan offers unlimited storage and costs 20% of your hosting costs. A strange way to price a service but it makes sense when you think about it’s a good estimate of their costs.

One of the best solutions available if your website files and database take up less than 1GB though you should perhaps re-evaluate your situation if you need more storage space.

Link: CodeGuard

30 Free WordPress Backup Plugin Alternatives

The official WordPress plugin directory is home to many backup plugins for WordPress. All of these plugins are free to download so you want to consider them if you are not keen on spending money on your backup solution or if the solutions mentioned above just don’t suit your needs.

• MyRepono WordPress Backup Plugin – Automate an unlimited number of backups using the MyRepono backup service.
• WordPess EZ Backup – Backs up files and databases to your website server.
• WP Online Backup – Backup your website to your desktop or email. You can also backup up to 100mb of files on Backup Technology’s servers.
• WordPress Backup To Dropbox – Automatically backs up your files and database to your DropBox account.
• Xcloner Backup And Restore – Backup and restore your website using the Xcloner application.
• WP DB Backup – A simple plugin that backs up your database to your website server.
• The Codetree Backup – Allows you to backup your database, themes, plugins and uploads to your server or via the MyCodeTree server.
• Snapshot Backup – Creates a backup of your database and all of your files and uploads it to the FTP destination of your choice.
• Backup And Move – Allows you to create a backup of your WordPress database and restore it on a different location at the touch of a button.
• Bei Fen – The predecessor of WordPress Smart Backup, Bei Fen allows you to schedule backups to your server for your database and all of your files.
• WordPress SQL Backup – Lets you backup your database and your wp-contents directory.
• SME Storage Multi Cloud Files Plug In – Backup your website to one of 10 storage clouds including Amazon S3, RackSpace Cloud Files, Box.net, Microsoft SkyDrive, Microsoft Live Mesh, Google Docs, DropBox, Mezeo, FTP, and any WebDav enable cloud
• Automatic WordPress Backup – Backup your important files to the Amazon S3 storage service.
• WP S3 Backups – An alternative Amazon S3 backup plugin.
• Ezpz One Click Backup – Automatically backs up your website to any FTP server.
• iDrive For WordPress – Backs up your whole WordPress website to your iDrive online account.
• Backup WordPress – Schedule daily backups of your database and files to your server. You can exclude specific files and folders from backups if you wish.
• WP InstantBackup – Backup your database and files via FTP or email.
• BackupWP – Your database and files can be backed up to your server or to an external cloud storage service such as DropBox, Amazon S3 or Google storage.
• My EasyBackup – Easily backup, restore and migrate your database. Backups are stored on your server and can be placed outside the WordPress installation so that no one else can link to it.
• PressBackup – Backup your website through Amazon S3 or PressBackup.
• Sypex Dumper 2 For WordPress – A plugin that lets you create and restore your MySQL database.
• Updraft – Backup your website to cloud services such as Amazon S3 or Rackspace Cloud. You can also backup to an FTP destination or via email.
• Duplicator – Transfer an entire site from one location to another in 3 easy steps.
• OP Archive – A one-click backup solution that backs up your files and database to your server.
• Drop In Dropbox – Backs up your files to your Dropbox account.
• WP Time Machine – Backup your files and database to Dropbox, Amazon S3 or via FTP.
• WordPress Move – Helps you migrate your WordPress website to a new server.
• WP Migrate DB – A useful plugin when you are moving to a new host. The plugin backs up your database and does a find and replace on your old URLS so you don’t have to do it manually via PHPMyAdmin.
• WP Export – Export your database as a CSV file.

Overview

What backup solution you use for your WordPress website depends on your own situation. It depends on your budget, your experience administrating FTP applications and databases and how important your website is to you.

The one thing you shouldn’t do is disregard the importance of backing up your website. There’s always a chance of someone hacking your website and you never know when something could become corrupted in your files or database. So don’t be afraid to pay for a good backup solution if the free alternatives are not practical (which is usually the case once your website reaches a certain size).

What method of backing up do you use for your WordPress website? Please let us know in the comments area.

(rb)

Imagine you’re playing the latest hash-tag game on Twitter when you see this friendly tweet:

You might want to check your #WP site. It includes two copies of jQuery. Nothing’s broken, but loading time will be slower.

You check your source code, and sure enough you see this:

<script src="/wp-includes/js/jquery/jquery.js?ver=1.6.1" type="text/javascript"></script>
<script src="/wp-content/plugins/some-plugin/jquery.js"></script>

What Went Wrong?

The first copy of jQuery is included the WordPress way, while some-plugin includes jQuery as you would on a static HTML page.

A number of JavaScript frameworks are included in WordPress by default, including:

• Scriptaculous,
• jQuery (running in noConflict mode),
• the jQuery UI core and selected widgets,
• Prototype.

A complete list can be found in the Codex. On the same page are instructions for using jQuery in noConflict mode.

Avoiding the Problem

WordPress includes these libraries so that plugin and theme authors can avoid this problem by using the wp_register_script and wp_enqueue_script PHP functions to include JavaScript in the HTML.

Registering a file alone doesn’t do anything to the output of your HTML; it only adds the file to WordPress’s list of known scripts. As you’ll see in the next section, we register files early on in a theme or plugin where we can keep track of versioning information.

To output the file to the HTML, you need to enqueue the file. Once you’ve done this, WordPress will add the required script tag to the header or footer of the outputted page. More details are provided later in this article.

Registering a file requires more complex code than enqueueing the files; so, quickly parsing the file is harder when you’re reviewing your code. Enqueueing the file is far simpler, and you can easily parse how the HTML is being affected.

For these techniques to work, the theme’s header.php file must include the line <?php wp_head(); ?> just before the </head> tag, and the footer.php file must include the line <?php wp_footer(); ?> just before the </body> tag.

Registering JavaScript

Before registering your JavaScript, you’ll need to decide on a few additional items:

• the file’s handle (i.e. the name by which WordPress will know the file);
• other scripts that the file depends on (jQuery, for example);
• the version number (optional);
• where the file will appear in the HTML (the header or footer).

This article refers to building a theme, but the tips apply equally to building a plugin.

Examples

We’ll use two JavaScript files to illustrate the power of the functions:

The first is base.js, which is a toolkit of functions used in our example website.

function makeRed(selector){
  var $ = jQuery; //enable $ alias within this scope
  $(function(){
    $(selector).css('color','red');
  });
}

The base.js file relies on jQuery, so jQuery can be considered a dependency.

This is the first version of the file, version 1.0.0, and there is no reason to run this file in the HTML header.

The second file, custom.js, is used to add the JavaScript goodness to our website.

makeRed('*');

This custom.js file calls a function in base.js, so base.js is a dependency.

Like base.js, custom.js is version 1.0.0 and can be run in the HTML footer.

The custom.js file also indirectly relies on jQuery. But in this case, base.js could be edited to be self-contained or to rely on another framework. There is no need for jQuery to be listed as a dependency of custom.js.

It’s now simply a matter of registering your JavaScript using the function wp_register_script. This takes the following arguments:

• $handle
  A string
• $source
  A string
• $dependancies
  An array (optional)
• $version
  A string (optional)
• $in_footer
  True/false (optional, default is false)

When registering scripts, it is best to use the init hook and to register them all at once.

To register the scripts in our example, add the following to the theme’s functions.php file:

function mytheme_register_scripts() {
  //base.js – dependent on jQuery
  wp_register_script(
    'theme-base', //handle
    '/wp-content/themes/my-theme/base.js', //source
    array('jquery'), //dependencies
    '1.0.0', //version
    true //run in footer
  ); 

  //custom.js – dependent on base.js
  wp_register_script(
    'theme-custom',
    '/wp-content/themes/my-theme/custom.js',
    array('theme-base'),
    '1.0.0',
    true
  );
}
add_action('init', 'mytheme_register_scripts');

There is no need to register jQuery, because WordPress already has. Re-registering it could lead to problems.

You Have Achieved Nothing!

All of this registering JavaScript files the WordPress way has, so far, achieved nothing. Nothing will be outputted to your HTML files.

To get WordPress to output the relevant HTML, we need to enqueue our files. Unlike the relatively long-winded commands required to register the functions, this is a very simple process.

Outputting the JavaScript HTML

Adding the <script> tags to your HTML is done with the wp_enqueue_script function. Once a script is registered, it takes one argument, the file’s handle.

Adding JavaScript to the HTML is done in the wp_print_scripts hook with the following code:

function mytheme_enqueue_scripts(){
  if (!is_admin()):
    wp_enqueue_script('theme-custom'); //custom.js
  endif; //!is_admin
}
add_action('wp_print_scripts', 'mytheme_enqueue_scripts');

Of our two registered JavaScript files (base.js and custom.js), only the second adds JavaScript functionality to the website. Without the second file, there is no need to add the first.

Having enqueued custom.js for output to the HTML, WordPress will figure out that it depends on base.js being present and that base.js, in turn, requires jQuery. The resulting HTML is:

<script src="/wp-includes/js/jquery/jquery.js?ver=1.6.1" type="text/javascript"></script>
<script src="/wp-content/themes/my-theme/base.js?ver=1.0.0" type="text/javascript"></script>
<script src="/wp-content/themes/my-theme/custom.js?ver=1.0.0" type="text/javascript"></script>

Registering Style Sheets

Both of the functions for adding JavaScript to our HTML have sister PHP functions for adding style sheets to the HTML: wp_register_style and wp_enqueue_style.

As with the JavaScript example, we’ll use a couple of CSS files throughout this article, employing the mobile-first methodology for responsive Web design.

The mobile.css file is the CSS for building the mobile version of the website. It has no dependencies.

The desktop.css file is the CSS that is loaded for desktop devices only. The desktop version builds on the mobile version, so mobile.css is a dependency.

Once you’ve decided on version numbers, dependencies and media types, it’s time to register your style sheets using the wp_register_style function. This function takes the following arguments:

• $handle
  A string
• $source
  A string
• $dependancies
  An array (optional, default is none)
• $version
  A string (optional, the default is the current WordPress version number)
• $media_type
  A string (optional, the default is all)

Again, registering your style sheets using the init action is best.

To your theme’s functions.php, you would add this:

function mytheme_register_styles(){
  //mobile.css for all devices
  wp_register_style(
    'theme-mobile', //handle
    '/wp-content/themes/my-theme/mobile.css', //source
    null, //no dependencies
    '1.0.0' //version
  ); 

  //desktop.css for big-screen browsers
  wp_register_style(
    'theme-desktop',
    '/wp-content/themes/my-theme/desktop.css',
    array('theme-mobile'),
    '1.0.0',
    'only screen and (min-width : 960px)' //media type
  ); 

  /* *keep reading* */
}
add_action('init', 'mytheme_register_styles');

We have used CSS3 media queries to prevent mobile browsers from parsing our desktop style sheet. But Internet Explorer versions 8 and below do not understand CSS3 media queries and so will not parse the desktop CSS either.

IE8 is only two years old, so we should support its users with conditional comments.

Conditional Comments

When registering CSS using the register and enqueue functions, conditional comments are a little more complex. WordPress uses the object $wp_styles to store registered style sheets.

To wrap your file in conditional comments, add extra information to this object.

For Internet Explorer 8 and below, excluding mobile IE, we need to register another copy of our desktop style sheet (using the media type all) and wrap it in conditional comments.

In the code sample above, /* *keep reading* */ would be replaced with the following:

global $wp_styles;
wp_register_style(
  'theme-desktop-ie',
  '/wp-content/themes/my-theme/desktop.css',
  array('theme-mobile'),
  '1.0.0'
); 

$wp_styles->add_data(
  'theme-desktop-ie', //handle
  'conditional',  //is a conditional comment
  '!(IEMobile)&(lte IE 8)' //the conditional comment
);

Unfortunately, there is no equivalent for wrapping JavaScript files in conditional comments, presumably due to the concatenation of JavaScript in the admin section.

If you need to wrap a JavaScript file in conditional comments, you will need to add it to header.php or footer.php in the theme. Alternatively, you could use the wp_head or wp_footer hooks.

Outputting The Style Sheet HTML

Outputting the style sheet HTML is very similar to outputting the JavaScript HTML. We use the enqueue function and run it on the wp_print_styles hook.

In our example, we could get away with telling WordPress to queue only the style sheets that have the handles theme-desktop and theme-desktop-ie. WordPress would then output the mobile/all media version.

However, both style sheets apply styles to the website beyond a basic reset: mobile.css builds the website for mobile phones, and desktop.css builds on top of that. If it does something and I’ve registered it, then I should enqueue it. It helps to keep track of what’s going on.

Here is the code to output the CSS to the HTML:

function mytheme_enqueue_styles(){
  if (!is_admin()):
    wp_enqueue_style('theme-mobile'); //mobile.css
    wp_enqueue_style('theme-desktop'); //desktop.css
    wp_enqueue_style('theme-desktop-ie'); //desktop.css lte ie8
  endif; //!is_admin
}
add_action('wp_print_styles', 'mytheme_enqueue_styles');

What’s The Point?

You may be wondering what the point is of going through all of this extra effort when we could just output our JavaScript and style sheets in the theme’s header.php or using the wp_head hook.

In the case of CSS in a standalone theme, it’s a valid point. It’s extra work without much of a payoff.

But with JavaScript, it helps to prevent clashes between plugins and themes when each uses a different version of a JavaScript framework. It also makes page-loading times as fast as possible by avoiding file duplication.

WordPress Frameworks

This group of functions can be most helpful when using a framework for theming. In my agency, Soupgiant, we’ve built a framework to speed up our production of websites.

As with most agencies, we have internal conventions for naming JavaScript and CSS files.

When we create a bespoke WordPress theme for a client, we develop it as a child theme of our framework. In the framework itself, we register a number of JavaScript and CSS files in accordance with our naming convention.

In the child theme, we then simply enqueue files to output the HTML.

function clienttheme_enqueue_css() {
  if (!is_admin()):
    wp_enqueue_style('theme-mobile');
    wp_enqueue_style('theme-desktop');
    wp_enqueue_style('theme-desktop-ie');
  endif; //!is_admin
}
add_action('wp_print_styles', 'clienttheme_enqueue_css'); 

function clienttheme_enqueue_js() {
  if (!is_admin()):
    wp_enqueue_script('theme-custom');
  endif; //!is_admin
}
add_action('wp_print_scripts', 'clienttheme_enqueue_js');

Adding CSS and JavaScript to our themes the WordPress way enables us to keep track of exactly what’s going on at a glance.

A Slight Limitation

If you use a JavaScript framework in your theme or plugin, then you’re stuck with the version that ships with the current version of WordPress, which sometimes falls a version or two behind the latest official release of the framework. (Upgrading to a newer version of the framework is technically possible, but this could cause problems with other themes or plugins that expect the version that ships with WordPress, so I’ve omitted this information from this article.)

While this prevents you from using any new features of the framework that were added after the version included in WordPress, the advantage is that all theme and plugin authors know which version of the framework to expect.

A Single Point Of Registration

Register your styles and scripts in a single block of code, so that when you update a file, you will be able to go back and update the version number easily.

If you use different code in different parts of the website, you can wrap the logic around the enqueue scripts.

If, say, your archive pages use different JavaScript than the rest of the website, then you might register three files:

• base JavaScript (registered as theme-base),
• archive JavaScript (registered as theme-archive),
• general JavaScript (registered as theme-general).

Again, the base JavaScript adds nothing to the website. Rather, it is a group of default functions that the other two files rely on. You could then enqueue the files using the following code:

function mytheme_enqueue_js(){
  if (is_archive()) {
    wp_enqueue_script('theme-archive');
  }
  elseif (!is_admin()) {
    wp_enqueue_script('theme-general');
  }
}
add_action('wp_print_scripts', 'mytheme_enqueue_js');

Using The Google AJAX CDN

While using JavaScript the WordPress way will save you the problem of common libraries conflicting with each other, you might prefer to serve these libraries from Google’s server rather than your own.

Using Jason Penny’s Use Google Libraries plugin is the easiest way to do this. The plugin automatically keeps jQuery in noConflict mode.

Putting It All Together

Once you’ve started registering and outputting your scripts and styles the WordPress way, you will find that managing these files becomes a series of logical steps:

1. Registration to manage:
   • version numbers,
   • file dependencies,
   • media types for CSS,
   • code placement for JavaScript (header or footer);
2. Enqueue/output files to HTML:
   • logic targeting output to specific WordPress pages,
   • WordPress automating dependencies.

Eliminating potential JavaScript conflicts from your WordPress theme or plugin frees you to get on with more important things, such as following up on sales leads or getting back to that hash-tag game that was so rudely interrupted.

(al)

© Peter Wilson for Smashing Magazine, 2011.

Editor’s note: This article is the first piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community. Lea Verou is well-known for her experiments with CSS and JavaScript and in this post she presents her recent tool, prefixfree which will hopefully help you break free from the CSS prefix hell.

So What’s the Problem With Prefixes?

I’m sure we all agree that CSS3 is pretty cool and that it enables us to do things that were previously impossible. But those of us who use CSS3 a lot have surely experienced prefix hell, as seen in the snippet below (from a real style sheet!):

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-shadow: .1em .2em .4em -.2em black;
   -moz-box-shadow: .1em .2em .4em -.2em black;
   box-shadow: .1em .2em .4em -.2em black;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -ms-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -o-transform: rotate(15deg);
   -ms-transform: rotate(15deg);
   transform: rotate(15deg);
   -webkit-animation: none;
   -moz-animation: none;
   animation: none;
}

I’m not saying that prefixes are bad. We need them. But the reality is that, in most cases, they cause maintenance troubles, they bloat CSS files, and they make it harder to tweak values (because you have to do it five times or more).

A Solution: prefixfree

The code I write in my live demo slides and presentations doesn’t have any prefixes, even for things like @keyframes or the transition property, which aren’t yet supported anywhere prefix-less. To be able to do this, I wrote a script that detects the prefix of the current browser and adds it where needed. Recently, I thought, why not adapt the script to process all of the CSS code on a page, so that the CSS in my style sheets is as elegant as the code in my demos? Shortly after, prefixfree was born.

The script essentially does everything in JavaScript’s power to allow you to completely forget about vendor prefixes. It processes linked style sheets (except the ones in @import rules), embedded style sheets, inline styles, even CSS added afterwards (such as in new elements, CSSOM property changes and lookups). And if, in rare cases, you want to use a different definition for a different engine (for example, because one’s implementation is buggy), you can still use prefixed CSS.

The good thing about prefixfree is that once the browser vendors drop their prefixes for CSS3 properties, you can just remove the script and your CSS will still work. Your code will continue to be valid CSS3 (so valid that it will even pass a CSS validator). Your code does not depend on it (unlike CSS preprocessors); rather, it functions more like a polyfill, smoothing out browser differences for the time being.

Another useful feature is that the script auto-detects which properties need prefixing. Its code has no property list. It detects which properties are supported and which of them are supported only with a prefix. Values, selectors and @rules are based on predefined lists, but they are still prefixed only when needed. No browser sniffing is involved; everything is based on feature detection.

Unlike other solutions, prefixfree adds the current prefix at runtime, so the user downloads a much smaller CSS file. Some might argue that pre-processed CSS is faster because no client-side processing is involved. To some extent, this is true, but in my experiments there was no significant lag. With the borderline exception of Opera, it was hardly noticeable.

Also, there are a few server-side solutions, but there are two main issues with those. Firstly, the file size of the CSS file is still huge, as it has to contain all the prefixes (and the unprefixed versions). And secondly, the server-side script has to maintain lists of properties at all times, because they cannot be automatically detected, like with prefixfree.

So, what does the rule above become with prefixfree? It becomes this beauty:

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   border-radius: 50%;
   box-shadow: .1em .2em .4em -.2em black;
   box-sizing: border-box;
   transform: rotate(15deg);
   animation: none;
}

Download the Script on GitHub!

You can download prefixfree from GitHub. The minified version is less than 5 KB, which becomes less than 2 KB after Gzip’ing. Please keep in mind that it’s still a very early beta and might have bugs. You can help fix them, or at least report them in the issues tracker. Have fun!

(al)

© Lea Verou for Smashing Magazine, 2011.

They say the grass is always greener on the other side, but which side suits you and your needs best? Before making a potentially life-altering decision, read on to discover the differences between, benefits to, and drawbacks of being full-time or freelance designer.

 

The In-House Designer

Due to the varying nature of business models, responsibilities appropriated to the in-house designer varies greatly from company to company. On the most basic level, however, an in-house design position includes meeting with internal and external customers, creating concepts, mocking up proofs, presenting those ideas to the team, executing the overall layout, processing proofs, production of final files, archiving of native and final files, and updating all projects as needed. Further responsibilities can also include acquiring bids from printers, illustrators, photographers, and other freelance designers, press checks, project management, and image or topic research.

The upside?

• The team succeeds or fails as one. Everyone is in the foxhole together. Working in such close and constant contact propagates a feeling of camaraderie with coworkers. The team environment comes with a vested interest in the company as a whole and includes everything the company releases for public consumption.

• The in-house designer is often more involved with varying projects which don’t necessarily fall under the “design umbrella� as well as the conceptual or brainstorming process than a freelance designer may be. Fulltime, in-house designers are often valued by other departments as an equal team members whose opinions carry more weight. With this level of involvement, the designer can take pride and ownership in their work and give them a receive a true feeling of career fulfillment which some freelance designers find lacking in their day-to-day transactions.
• There is something to be said for getting to know a brand and style so well the designer becomes the go-to style expert. Once the brand requirements are second nature, a new layer of design can begin. On this level, constantly refreshing and updating projects or pages is an art in and of itself. Success as an in-house designer often means appreciating the little things, and understanding that small changes make big differences.

• And most obviously, a consistent paycheck is quite favorable and reassuring. The security of knowing that the next paycheck is only a few days away helps to keep many-a-graphic-artist from starving, not to mention the added benefit of paid vacations and sick leave. Many companies also subsidize part of the employees’ health, short-term and long-term disability insurance, and provide a group retirement plan (in some cases, they even match the employee contribution up to a certain percentage) and reimburse continuing education efforts.

The downside?

• Working within the same style can feel repetitive, and it is difficult to keep the design feeling original and fresh.

• Organizations sometimes confuse design with production, and designers are often expected to simply execute what has been dictated.

• The constant proximity to coworkers can be difficult if the tense and subjective design environment causes personality conflicts.

• Most positions are salaried instead of compensated on a per-hour basis, and the modern day in-house designer will be working far more than the standard 40-hour week without any additional monetary gains. The economy also plays a role in the designer’s day-to-day workload. When companies down size, the responsibilities of the remaining staff are exponentially increased.

• Typically, an in-house designer makes less per hour than their freelance counterpart, they have to work more and take home less. This trade off is made to finance the aforementioned benefit package.

The Freelance Designer
Freelancing truly requires a jack-of-all-trades mentality because the designer’s success or failure depends on how well they advertise and sell their skills long before the actual act of designing is able to begin. In addition to the networking and marketing necessary to grow a client base and build lasting business relationships, the freelance designer is also responsible for their own administration and accounting needs. The freelancer must also be comfortable creating and writing bids for projects, presenting proposals and ideas, and be available to the client at all times. Once a client and project have been won over, the actual design work can begin and includes spec and design work, reworks, proofs, production and archiving.

The upside?
• A freelance designer gets the luxury of variety. The variety of projects, styles, clients and hours is a great way to keep day-to-day work and a portfolio fresh impressing.

• There is great independence in working for one’s self. The designer may not be calling all the shots (after all, it is the client’s project), but they are definitely at the helm and as such can create a work environment, flow and process of their choosing.
• Repeat business is the equivalent to money walking in off the street and is a marker of a job well done. The in-house designer does not get paid per project or hour, so repeat business doesn’t always feel like a positive, but to the freelance designer it means dollar signs. The trust a client shows by returning validates the designer’s design skill and business acumen. As client lists grow, the designer is able to spend less time on marketing and advertising and more on the design work. As these relationships solidify and grow, natural working relationships and rhythms emerge and speed the process as well as underscore the client’s confidence in the designer.

• The ability to truly control one’s income is quite empowering. Freelance designers can make as much or as little as they want by effectively managing time to achieve whatever goals they may choose.

The Downside?
• All business ventures have highs and lows, emotionally and economically. A freelance designer must be prepared to withstand inconsistent paydays, delinquent clients, and poor communicators.

• Building relationships, winning projects, and proving not only design agility but also professionalism are all important and time consuming pieces to the freelance puzzle. A considerable amount of time and energy must be devoted at the outset of a freelance career to things not necessarily design- related but instead to tasks that don’t qualify as billable hours which makes a long day feel even longer.

• When bidding on projects, the designer must track the pulse of the economy and constantly price themselves within the competitive ballpark without under or over charging for their services. Charge too little and the quality of work may come into question, charge too much and business may be driven away.
• There is not a benefit package waiting to backup the designer should they fall ill or take a holiday.

When it comes down to it, every position has both positive and negatives. The trick to finding your niche in the design community is to be perfectly honest with yourself about your strengths, weaknesses, and career expectations. Armed with the guide above and the career goals you’ve set for yourself, you should have all tools you need to get started on the right path for your future.

The post Full-time or Freelance? appeared first on Design Reviver.

Updating your Twitter profile can give you really unnecessary headaches. In today’s post, we proudly present to you a Twitter UI GUI template, designed by Shelby White which has exclusively been released for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.

Download the Template for Free!

The template is released as freeware. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the template as you wish.

• Large Preview (.png)
• Download the .zip-package (zip, 0,4 Mb)
• release post on designer’s website
• download from the designer’s site

Behind the Design

As always, here are some insights from the designer:

“Time after time I dealt with the headache of updating my Twitter profiles. After searching thoroughly for an alternative to editing live, it was clear that there weren’t any great solutions or intentions by anyone to create a pixel-perfect template for anyone to use. Not to mention, a template that would remain up-to-date as the website evolved.

This PSD includes grouped elements by name respective of their location in the HTML of Twitter.com. The profile images utilize smart objects to ease the pain of changing images. Update the image once and it will proportionally scale the images across the whole PSD. Hope this template makes mocking up your profile a lot easier. Enjoy!”

Thank you, Shelby White. We appreciate your work and your good intentions.

(il) (vf)

© Smashing Editorial for Smashing Magazine, 2011.