Designing a WordPress Blog from Scratch

Hacker News LinkedIn Google+ Facebook Twitter by Abby Fichtner

Custom WordPress Theme It turns out that if you can do HTML, CSS, and a bit of scripting then you can totally design your own WordPress blog from scratch. Forget browsing the 1,193 free WordPress themes and trying to pick the one that best fits your style. I mean, seriously, wow! in the time it takes to browse them and figure out how to customize them, I’d rather just learn to create one myself.

Okay. I know. You’re not all code-crazed hacker chicks.

But, I found it amazingly powerful to have complete control over the look & feel of my blog while taking advantage of WordPress’s built-in capabilities so that all the standard blog functions are automatically handled for me. So, I thought I’d share a bit of what it looks like to build your own WordPress design from scratch and how I did this for The Hacker Chick Blog.

The first and most important thing to know is that WordPress files are just regular ol’ HTML and CSS with PHP script embedded in them. So, if you’re comfortable building web pages, then you’re going to be comfortable working with WordPress.

In fact, it’s possible to have your entire blog could consist of nothing more than an index.html and a styles.css file. That is, you can create it first as a plain ol’ web page and then just insert PHP script tags to pull the dynamic data you need to display like blog titles, blog post bodies, list of categories, etc.  This is a bit overly simplified (we’ll really want to use more than just those 2 files, and the index.html will really be index.php) but it’s a good mental model to start from.

Don’t get too nervous about the PHP because you’re going to start from a barebones set of files that WordPress provides in its default theme and that’s going to give you 80% of what you need. And then, wow, the online docs for both WordPress and PHP are really good. And, if you’re too impatient to pour through them (yeah, we are the NOW generation), just google (bing!) “anything you can think of AND wordpress” (or PHP) and boom! you’ll have multiple code samples to chose from.

If this sounds good then stay tuned. I’ll walk through the steps I took in creating The Hacker Chick Blog so you can dive into more detail as you’d like:

1. Moving from idea to Photoshop design to HTML/CSS that is formatted in a WordPress friendly way.

2. Understanding how WordPress themes work (which files you’ll implement/how WordPress decides which file to load, etc.)

3. Converting our HTML/CSS into a WordPress theme, using WordPress’ “default” theme to guide us.

4. Adding extras like twitter feeds & related posts.