1. Completing Your Design
with WordPress
or why coding your own designs
shouldn’t be scary

2. Can’t I Hire Someone To Do This?
if you trust them enough.

3. But I’m a Right-Brain person.
XHTML and CSS were built for
designers
It’s all about the look
XHTML and CSS are tools, not
programming languages
No algorithms and calculations

4. XHTML BASICS
XHTML tags give content structure
opens the div
<div>
This is content inside the div tag.
The next line closes the head tag with a /
</div>
closes the div

5. ITS A BOX.
opens the div
<div>
This is content inside the div tag.
</div>
closes the div

6. Tags with Properties
We can add properties to tags.
We can use properties to name each box.
<div id=”sidebar”> <div id=”main”>
This is content
inside a div This is content inside a div
with an id of with an id of main.
sidebar.
</div> </div>

7. THE CODE

8. CSS BASICS
HTML indicates structure.
CSS indicates look & feel.
Typography
Color
Size
Placement
Spacing

9. CSS BASICS
object {
property: value;
property: value;
}
#sidebar { color: red }
finds an object with an ID of sidebar
and makes the text color red

10. CSS BASICS
#sidebar { color: red }
<div id=”sidebar”> <div id=”main”>
This is content
inside a div This is content inside a div
with an id of with an id of main.
sidebar.
</div> </div>

11. THE CODE

14. TEMPLATES
Each template controls a di erent part
of the site
page.php
controls the look of regular pages
index.php
controls the look of of the homepage/unspecified templates
single.php
controls the look of of single posts

15. TEMPLATE HIERARCHY
http://codex.wordpress.org/Template_Hierarchy

16. TEMPLATE TAGS
Placeholders for dynamic pieces of content.
http://codex.wordpress.org/Template_Tags
<div id=”sidebar”> <div id=”main”>
<?php get_sidebar(); ?> <?php the_content(); ?>
</div> </div>

20. CHELSEA OTAKAN
@chexee
anythingwonderful.net