What is wordpress?
It’s a content management system widely used over the web, mainly for blogging. It allows users to easily create blog posts, tag those posts with keywords, etc. It also allows for a wide variety of widget, plugins, and themes that extend the initial functionality.

Why don’t I just use a premade theme?
If you’re really strapped for time a premade theme can often work fine. But there is a finite amount of good quality clean themes and it can become easy to spot clean theme that is used over and over again. If you’re hosting your process work / design work / inspiration you will want to add in a little bit of yourself to differentiate from the generic.

How hard is it?
There are several ways to go about making a theme. The first way is to build it entirely from scratch from photoshop, slice it into dreamweaver and then create the php files to generate it. This can become long and laborious. What we will be doing is basing our new design off of a previous theme. This allows us to sidestep a lot of the tedious work and be able to take advantage of work that others have done before.

If your interested in building it completely from scratch it is a good refresh on slicing, html, and php. There are lots of tutorials available online here are a few to get you started:

Theme Nation Tutorial
NetsPlus Tutorial
WP Designer Tutorial

The first step is to grab a previous theme
look for themes that have the generic look you might want ( two vs one column layout, etc )

For our example we will be using The Titan Theme
It comes with a flickr feed at the bottom, a simple header and a two column layout.

If  we look inside the folder we can see all of our files. The .php files communicate with a database on your server to retrieve all your blog details and content.

We will mainly be concerned with:
stylesheets/master.css
images/

Inside the images folder we can see all the icons and background images that are used to generate the HTML pages. By just simply editing these files we can quickly customize all of our icons and background. Let’s say we want to make all of these slightly more purple we can bring them into photoshop and colorize them, which we won’t go into here but use creative license to alter these icons, find, or make your own. The next step is to get wordpress up and running.

First download wordpress and unzip the file. Change the folder name if you want to “blog” or something, then upload it to your account through FTP. If your not sure how to do that you just use this login information with your DCE password assuming you have webspace.

If you don’t have webspace you can request it and you will receive unlimited hosting while you are a student at RIT.

Navigate to the folder that you dragged wordpress on your CIAS account. Click through until you get to this screen and fill out the information with your information.

To check on your database name navigate to cias.rit.edu/~DCEName/phpMyAdmin
By default your password is set to your DCE when you request the account. If you forgot that password contact web services at CIAS and they can reset it for you.

Once logged in look in the left column there should be a database name ( your DCE account ) that we will use for wordpress.

And you are all set! You should now receive an email with your username and password and can login to your dashboard.

Time to load our theme! Open up FTP again and navigate to the wp_content/themes  directory and upload the whole folder.

Now inside our dashboard we can see our “Titan Theme”. Apply the theme and see what your site looks like.

Not bad! We have a blog with a theme. Now to start customizing components. Changing the files in photoshop and re uploading in photoshop is easy.

Now navigate to your theme’s folder under stylesheets/master.css
Hit open with Dreamweaver and now we can edit the CSS, save it and refresh the page to see the results. But what if we’re not sure which part of the CSS we want to change? Enter Firebug.

Firebug is a extension built for Mozilla Firefox and Google Chrome that allows for web designers to debug CSS, it is invaluable to discover bugs. In the bottom Right corner we see the firefly icon, click on it to bring firebug panel up:

Just by looking at this panel you can see there are a lot of tools at our disposal.

The component inspector is especially useful as it allows you to see the code in HTML of the selected div. Firebug will then show you the CSS for that div and let you change it right in the browser and see the immediate effect.

Once we tweak the CSS how we want it we copy and paste the style definition back into dreamweaver in our link master.css file and save it. Voila! All your changes are saved.

Below are some links to plugins that we find the most useful.
Sitesketch – 15 Incredible WordPress Plugins
Six Revisions – 6 Critical WordPress Plugins

WP Super Cache
Creates static HTML pages that can be crawled, increases SEO.

Askimet
Anti-spam comment filter.

WP Spam Free
Another anti-spam that can catch things Askimet sometimes misses.

Google Sitemap
This helps create sitemap.xml read by google will make individual pages show up under search results

All in one SEO
Adds a lot of meta tags, h1 and other SEO goodies for free

WP Touch iPhone Plugin
Lets your wordpress be accessible to iphones and other mobile browsers.

A few searches should find your various articles letting you know some of the more useful plugins. There are pluigins to integrate vimeo , flash, youtube, presentations almost anything you can think of.

Now you have all the tools at your disposal start skinning themes!