Download pdf - WordCamp Columbus 2010 - Designing a killer WordPress theme

Columbus 2010

Designing a killer WordPress theme -Todd Santoro

1

Columbus 2010


First steps... Copy and paste the DEFAULT theme folder back into the themes folder

Rename the folder you just created to your theme name. eg: cool_theme - You can name it what ever you want. No spaces:)

Open style.css and focus on the top 10 or so lines. Change all of the information to match your new theme. Most important is the actual theme name. It needs to be what ever you named the directory. In this case cool_theme

2

Columbus 2010


Login to the back-end of WP and configure the instal

Install any plug-ins you like. I use Google Site maps, WP-backup, WP-Cache, Head Space 2, Cforms II

Back everything up at this point.

3

Columbus 2010


Get some inspiration... I like to use inspiration galleries to get my mojo flowing. My favorites are CSS Zen Garden, Swell CSS, The CSS Awards

Fire up your graphics program. Think of your new site as being a header, content block and a footer

When the magic is completed isolate each graphic into its simplest form and code up your CSS.

4

Columbus 2010


Now the fun begins... Coding. Start out with basic stuff like editing the footer or taking out the sidebar.

Resources: http://net.tutsplus.com/freebies/cheat-sheets/wordpress-cheat-sheat/ http://www.wpbeginner.com/wp-tutorials/25-extremely-useful-tricks-for-the-wordpress-functions-file/ http://www.smashingmagazine.com/ http://www.wpbeginner.com/

5

Columbus 2010


Creating a custom home page will top off your design.

Open up page.php and save it as page_home.php. On the first line of the code add this line <?PHP /*Template Name: Home Page*/ ?> This will make your new page available in the backend so you can assign it to your home page.

Now you can add a jQuery slider, extra graphics or what ever you want.

6

Columbus 2010


Start populating your WP site with content and assigning your templates to certain pages like the Custom Home Page template.

Set up your sidebar with widgets.

Set up your contact form using Cforms II or something like it.

7

Columbus 2010


Finalize your setup by debugging any trouble areas.

The only way to do this is by spending some time looking at every detail in the site.

Things to look for are: Do all pixels match up? Are things showing up in the correct places?

8

Columbus 2010


Thats it!

Questions?