Need a WordPress website this weekend? Start here...

DIY WordPress: What’s Your Toolchain Look Like?

(Reading time: 4 – 7 minutes)

When all you have is a hammer, everything looks like a nail. Or something like that, according to Lofti Zadeh.

WordPress is a pretty big hammer, and even when you have screws instead of nails, the hammer still works.

And you, dear reader, are most likely a do-it-yourselfer. Kind of goes with the “website in a weekend” territory.

Sometimes you need more than a hammer. WordPress isn’t always enough. You need more tools in your toolkit. As any good DIYer, you make a point of mastering the selected tools in your toolkit.

Here’s a few of the tools in my WordPress DIY toolkit:

  • GIMP, the Gnu Image Manipulation Program. Disclaimer: I was across the street from the Berkeley XCF when Peter and Spencer first wrote the GIMP. I’ve dabbled since version 0.56. GIMP has come a long way!
  • Inkscape, SVG done right. Every good pixel program (i.e., GIMP) needs a vector program to drive it. Inkscape fits my bill. While SVG hasn’t gotten the traction it deserves (this is a political problem, not a technical problem), it’s got enough traction to make it worthwhile. And Adobe stiffed me hard on the update from Illustrator 8 to the Creative Suite programs (i.e., no upgrade incentive, so I’m not upgrading).
  • Aptana Studio, best of a bad breed. Aptana has succeeded in taming Eclipse, a long running Java Integrated Development Environment which seems to introduce as many problems as it solves from release to release. I’ll probably get flamed for that one, but I’ve tried (unsuccessfully) off and on to like Eclipse since it was first announced – with much fanfare – about 10 years ago. Aptana works beautifully, and it’s free for a basic edition (all you probably need as a small business person).
  • Winmerge for Windows, DeltaWalker for MacOSX. Do you know the difference between those two custom.css files? No? How do you plan to find out? I do it the easy way and use a differencing tool. On MS Windows, I use the free Winmerge application. On MacOSX I use DeltaWalker, which is around $40 US, and a very good value.
  • Filezilla. FTP is a critically important in every DITer’s toolkit, and Filezilla is one of the best.
  • Trac wiki, from Edgewall. Trac is the same software used by Automattic for WordPress development. I also lean heavily on the bug and issue tracking capability of Trac, which is integrated into the wiki. Super convenient!
  • Subversion source code control. Think of subversion as “collaborative backups, with complete version history.” It’s more than that, but that’s good enough for now. Take home: you need to have a back up plan in place, and using it, before you go banging away on your WordPress files. Really, you do.
  • Notepad/TextEdit: these come with your computer, no need to link. Both of these are invaluable for snapping out fast notes without having to think very much. For example, this blog post was mostly written in TextEdit on my Macbook, then copied into WordPress.

Some DIY Theme Work

I need to add some updates to Thesis theme custom.css that Amanda Farough sent along a couple of weeks ago. As it turns out, I’ve added a large number of modifications to her work, so I can’t just copy her file into my WordPress theme. Everything would break. It would be nasty and you would think “WTH is Dave smoking?”

You may or may not be thinking that anyway…

While we’re at it, let’s upgrade to Thesis 1.8 along the way.

Here’s the order of business:

  1. Download current custom.css to Desktop.
  2. Compared and merged remote version to Amanda’s version.
  3. Compared merged version to version in repository. Woops. That’s no good. The repository is out of date! time to change course, time to install WordPress locally!
  4. Started MAMP server.
  5. Rebuilt WordPress Whitepaper 6: Develop WordPress Plugins on Windows with WAMP Environment. (I use these whitepapers. Dogfood. [link])
  6. Create database for WiaW on localhost.
  7. Download WordPress 3.0.1, copy into localhost (MAMP/htdocs) directory.
  8. Woops, doesn’t work, install fails. What gives? Bad MySQL command is what gives:

    mysql> grant all privileges on *.* to 'wiaw'@'loclahost' with grant option;

    “loclahost?”

    I don’t think so. It’s “localhost.” Fixed.

  9. WordPress installed! Yahoo!
  10. Copy Thesis 1.8 into themes. This was done by checking out the Thesis code from the subversion repository. That way, when I’m done, I can check it back in and have a archival record of it. (No, I can’t recall why I didn’t do this after the last update to Website In A Weekend. Pretty slack if you ask me, and if you forget back up or archive your junk, I’ll certainly harsh you up about it. =)
  11. Copied the “correct” custom.css file into thesis_18 on the new localhost installation.

And that’s enough for my hour. As usual, getting one thing done (theme modification) requires doing something else first (building development environment).

Remember, this DIY hour includes writing this blog post!

And back to you:

How much DIY do you do? What’s in your toolkit? What’s your favorite tool?


Update September 22, 2010: As it turns out, I’m reviewing the Scribe SEO plugin for the next release of Blog Post Engineering. This is the first article I’ve checked. Scribe SEO scored this blog post at 96%.

DIY WordPress: How to Make a Blog Banner in About an Hour

(Reading time: 3 – 4 minutes)

As a DIY WordPress’er building your website in a weekend, you need to get things done Right Now, and worry about the details later.

And unless you’re a graphic design wizard, your banner is probably going to be a great, big, pain in your tailfeathers. (Technically, a “PITA.”)

Now, there’s some serious irony here, because I’m doing the same sort of thing, working for about an hour to get both a new banner and this blog post describing the banner posted.

Let’s see how far we get.

Blog banner in an hour or less

The key is starting from a known working banner… and by “known working” I mean using Photoshop or GIMP files which are ready-to-go. Helpful blogger that I am, I’m providing you with just such.

Or get both!

The next thing to notice is that each of the elements of the banner are on different layers. There’s layers for:

  • Background (white, not used)
  • Overlay color (green)
  • Woodgrain texture
  • “Website In A Weekend” text
  • “Web Zero to Web Hero” text.
  • Blackie and I enjoying a moment together.
  • Others, not important right now.

Cut and paste layers

Now, just cut and paste for each layer as you will:

  • Use your own image. Move it around.
  • Use your own blog title and tag line.
  • Change the color and texture.

Once you have all your layers, export your png or jpg file, and you have a brand, new banner.

What’s cool: once you get a basic image file going, you have created an asset for your website or web business.

Get professional help

I do graphics when necessary. It’s not my strength. Here, changing the image in the Website In A Weekend banner was pretty simple, as I had the base file. In any case, simple graphics is, well, simple.

Its the design that’s hard!

When I need to design, I get professional help. Here’s two of my favorite professionals:

  • Amanda Farough, the brilliance driving violetminded design. Amanda designs for accessibility and connection, and did the conceptual design and implementation of the current Website In A Weekend. She’s on a brief sabbatical, make sure to get on her list.
  • Roberto Koci, the powerhouse behind Red Diamond Studios. Roberto designs for energy and excitement. I’ve worked with Roberto for years, cannot recommend him highly enough.

An hour’s work, more or less

Recall from yesterday I’m experimenting with working 1 hour per day maximum on Website In A Weekend, including writing blog posts.

I’m finishing up right here with 12 minutes to go, which included:

  • Redoing the banner for Website In A Weekend.
  • Uploading the banner to Website In A Weekend Thesis theme custom/images directory.
  • Updating W3 Total Cache to use the new banner. I want to see how it looks now.
  • Writing this blog post, some of which was done while I was working.

Now it’s time for a little split-shifting. Off to surf, will check email later!

Meantime, how are you getting your bloggy chores done fast and efficiently? Leave a note in the comments, let’s compare!