At NewBCamp '09, I live-built the front page of a WordPress theme. Here are the slides I used before building to explain the parts of a WordPress theme.

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

2. 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

3. 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

4. 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

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

6. What is a theme made of?
6

7. What is a theme made of?
header.php
7

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

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

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

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

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

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

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

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

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

17. What is a theme made of?
17

18. What is a theme made of?
18

19. What is a theme made of?
19

20. Hooking it up
Header logo
•
<h1>
<a href=quot;http://www.darowski.com/
tracesofinspirationquot; title=quot;Traces of
Inspirationquot;>Traces of Inspiration</a>
</h1>
20

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

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

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

24. Now, let’s play!
24

25. 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