NewBCamp09: Turning your design into a WordPress Theme

Turning your design into a WordPress Theme

Adam DarowskiBatchBlue 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?

3

WordPress CodeThe inner workings that you don’t

want to touch.

ThemesChange how it looks.

PluginsChange how it acts.

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?

5

Tabigail Themehttp://tabigail.com

What is a theme made of?

6

What is a theme made of?

7

header.php

What is a theme made of?

8

header.php

footer.php

What is a theme made of?

9

header.php

footer.php

sid

ebar

.ph

p

What is a theme made of?

10

header.php

footer.php

sid

ebar

.ph

p

index.php(Home Page)

What is a theme made of?

11

header.php

footer.php

sid

ebar

.ph

psingle.php(Single Post)

comments.php(Comments)

What is a theme made of?

12

header.php

footer.php

sid

ebar

.ph

ppage.php(Static Page)

comments.php(Comments)

What is a theme made of?

13

header.php

footer.php

sid

ebar

.ph

p

archive.php(Archive Pages)

What is a theme made of?

14

header.php

footer.php

sid

ebar

.ph

p

search.php(Search Results)

What is a theme made of?

15

header.php

footer.php

sid

ebar

.ph

p

404.php(Page Not Found)

What is a theme made of?

16

header.php

footer.php

sid

ebar

.ph

p

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!

25

Adam DarowskiUser Experience DesignerBatchBlue Software, LLC

email: adarowski@batchblue.comgtalk: adarowski@gmail.comtwitter: @adarowski

business blog: blog.batchblue.compersonal blog: darowski.com