Upload
adam-darowski
View
5.802
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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: [email protected]: [email protected]: @adarowski
business blog: blog.batchblue.compersonal blog: darowski.com