Modern WordPress Development for 2012

code

When I was 17 (which would put us around 2001), I did a one-year internship in a web agency.

This was the era of full-flash sites, splash screens, and table-based layouts. It’s hard to convey just how different things were back then. There were no javascript frameworks, the Mac OS browser of choice was Internet Explorer (I know, hard to believe), and WordPress didn’t exist.

The mere idea of Content Management Systems was still so new that a lot of agencies still developed their own system in-house, or else didn’t bother at all.

This is how I ended up building a hundred-page product catalog website consisting entirely of static html pages. No database, no PHP… in fact the only thing that could help was Dreamweaver’s site-wide search and replace. However, the lack of version control (remember, it’s 2001) meant that one false move would irreversibly mess up the whole site.

Anyway, my point with all this is that it was pretty cool when WordPress came out a couple years later, in 2003. It pretty much democratized blogging, and then went on to be tweaked and adapted into a full-featured CMS.

It’s been nearly 10 years, and we’re still using our trusty old WordPress… But just because we’re using the same software, doesn’t mean our methods can’t evolve.

So I took advantage of my recent blog redesign to dig deeper and try to use modern tools and techniques instead of relying on the same old proceses.

I’m no WordPress expert by any means, so take all this advice with a grain of salt. But if you’re interested in a behind-the-scenes look at this blog, please read on.

Boilerplate Theme

My starting point was the Boilerplate theme. Based on Elliot Jay Stock’s excellent Starkers, it’s pretty much as bare-bones as it gets, except with a couple nice additions straight from the Boilerplate HTML5 template.

I mainly chose this over Starker because it seemed to have been updated more recently, but any minimalistic starter theme will do.

Git

The Mac OS GitHub app makes it easy to review changes and push to the server

At first, using version control for a simple WordPress theme might seem like overkill, but no way am I going back to the good old “make-one-false-move-and-delete-3-weeks-worth-of-work” days.

But not only does Git give you version control, it also makes deploying your site much, much easier. Provided your hosting provider supports Git (happily, Dreamhost does), all you’ll have to do to update your files once you’re setup is a quick git push origin. Goodbye FTP! I won’t miss you and your 5k/s upload speeds!

And if you’re allergic to the command line, don’t worry. GitHub has come out with a great  app for Mac OS. It’s free, and you can use it to manage your repository even if you don’t host your code on GitHub.


SASS/Compass

With SASS you can use variables, mixins, and even functions in your CSS

Not using Git feels like going back in time to the dark ages of web development, and so does writing “plain” CSS.

SASS and Compass make writing CSS so much easier it’s not even funny. Add variables and mixins to your CSS, say goodbye to vendor prefixes, and use awesome new syntaxes like nested CSS rules and the “&” character.

You can run SASS & Compass from the command line, or use this nice GUI.

Compass will automatically monitor a given folder (say, /sass) inside your theme directory and will compile your .scss stylesheets into regular .css files every time you make a change.


W3 Total Cache and Amazon CloudFront

You should probably be using this

When it comes to performance, WordPress is not top of the class, especially if you start adding fancy plugins. That’s why it’s especially important to use a caching plugin to speed up your site.

My favorite plugin is W3 Total Cache: it’s got everything you could dream of (including automatically minifying and merging CSS and JS files), yet is pretty easy to understand.

What’s more, it also integrates seamlessly with CloudFront, Amazon’s CDN.

What this means is that once you open a CloudFront account, all your static files (i.e. images, CSS, JS, etc.) will be served from whichever Amazon server across the world is closest to the user. This will speed up your site, and unless you get ridiculous traffic you won’t be paying more than a few bucks a month.

If like me you use both Git and W3TC, make sure to add w3-total-cache-config.php to your .gitignore file, otherwise W3TC’s settings will get overwritten every time you push to your server.

Backup and Sync

Please tell me you're not still using PhpMyAdmin

One of the common pitfalls of WordPress development is that as you write posts, you let your local dev install get out of sync with the remote website.

While we’re already syncing all site files with Git, we still need to take care of the database. The ideal way of doing this would be taking the local database and dumping it on the remote server, but I have to admit I haven’t found a simple way to do this yet.

So we’re going to do the reverse instead: write our posts on the remote end, then backup the remote database on our local machine. Fortunately, there’s a plugin that does just this, and it even comes with an automation script.

Oh and if you’re looking for a simple way to manage your databases, Sequel Pro is a great app for Mac (and it’s free!).


Disqus

The Disqus homepage. Show-offs!

I also decided to ditch the standard WordPress comments and use Disqus instead.

The reason is that Disqus lets people log in with their Twitter or Facebook accounts, and if they already connected on another blog using Disqus, they’ll be able to post on yours right away.

Plus, Disqus gives you a central repository for all your comments. And lastly, if you ever need to switch to another CMS, not having your comments tied down to WordPress will make it much easier.

The only downside is that using Disqus makes it a little harder to style your comments just like you want to. So if you want to get really fancy, it might not be the best option for you.


Miscellaneous Plugins

I'll just add one more plugin… Last one I promise!

Here are a couple other plugins I use:

  • Contact Form 7: I asked on Twitter for a WP contact form recommendation, and Contact Form 7 was the clear winner. Gravity Forms also had some votes, but it’s not free.
  • Raw HTML Snippets: Sometimes you just need to embed a raw HTML snippet in your post, and this plugin does just that.
  • Revision Control: If you don’t want your database to balloon up as WordPress stores revision after revision of each post, you might want to give this a try.
  • Search Regex: When you transfer a WordPress blog from one domain to another, image paths inside posts won’t be updated. This plugin fixes this by letting you search and replace across all posts.

Well, there you go. That’s pretty much all the tools I used to build this site. I know everybody has their own tips and tricks, so make sure to let me know in the comments if you have anything to add!

Share: