Turning your design into a
WordPress Theme
Adam Darowski
BatchBlue Software, LLC
NewBCamp 2.8.09

What is WordPress?
Open source publishing platform
•
Two “versions”:
•
WordPress.com
-
WordPress.org
-
Other publishing platforms:
•
- Drupal, TypePad, Movable Type, Expression Engine, and many,
many more.
2

What is a WordPress Theme?
WordPress Code
The inner workings that you don’t
want to touch.
Themes Plugins
Change how it looks. Change how it acts.
3

What is a theme made of?
PHP files
•
Grabs info from database to make HTML.
-
CSS styles
•
Defines how that HTML should look.
-
Images
•
For the template only
-
4

What is a theme made of?
Tabigail Theme
http://tabigail.com
5

What is a theme made of?
6

What is a theme made of?
header.php
7

What is a theme made of?
header.php
footer.php
8

What is a theme made of?
header.php
sidebar.php
footer.php
9

What is a theme made of?
header.php
sidebar.php
index.php
(Home Page)
footer.php
10

What is a theme made of?
header.php
single.php
sidebar.php
(Single Post)
comments.php
(Comments)
footer.php
11

What is a theme made of?
header.php
page.php
sidebar.php
(Static Page)
comments.php
(Comments)
footer.php
12

What is a theme made of?
header.php
sidebar.php
archive.php
(Archive Pages)
footer.php
13

What is a theme made of?
header.php
sidebar.php
search.php
(Search Results)
footer.php
14

What is a theme made of?
header.php
sidebar.php
404.php
(Page Not Found)
footer.php
15

What is a theme made of?
header.php
sidebar.php
footer.php
16

What is a theme made of?
17

What is a theme made of?
18

What is a theme made of?
19

Hooking it up
Header logo
•
<h1>
<a href=\"http://www.darowski.com/
tracesofinspiration\" title=\"Traces of
Inspiration\">Traces of Inspiration</a>
</h1>
20

Hooking it up
Header logo
•
<h1>
<a href=\"<?php echo
get_settings('home'); ?>\" title=\"<?php
bloginfo('name'); ?>\"><?php
bloginfo('name'); ?></a>
</h1>
21

Hooking it up
Header logo
•
<h1>
<a href=\"<?php echo
get_settings('home'); ?>\" title=\"<?php
bloginfo('name'); ?>\"><?php
bloginfo('name'); ?></a>
</h1>
22

Hooking it up
Header logo
•
<h1>
<a href=\"<?php echo
get_settings('home'); ?>\" title=\"<?php
bloginfo('name'); ?>\"><?php
bloginfo('name'); ?></a>
</h1>
23

Now, let’s play!
24

Thank you!
Adam Darowski
User Experience Designer
BatchBlue Software, LLC
email: adarowski@batchblue.com
gtalk: adarowski@gmail.com
twitter: @adarowski
business blog: blog.batchblue.com
personal blog: darowski.com
25