Completing Your Design with WordPress

or why coding your own designs shouldn’t be scary

Can’t I Hire Someone To Do This?

if you trust them enough.

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

XHTML BASICS

XHTML tags give content structure

<div> This is content inside the div tag. The next line closes the head tag with a / </div>

opens the div

closes the div

ITS A BOX.

<div>

</div>

opens the div

closes the div

This is content inside the div tag.

Tags with PropertiesWe can add properties to tags.

We can use properties to name each box.

<div id=”sidebar”>

</div>

This is content inside a divwith an id of

sidebar.

<div id=”main”>

</div>

This is content inside a divwith an id of main.

THE CODE

CSS BASICSHTML indicates structure.CSS indicates look & feel.

TypographyColorSize

PlacementSpacing

CSS BASICSobject { property: value; property: value;}

#sidebar { color: red } finds an object with an ID of sidebar and makes the text color red

CSS BASICS#sidebar { color: red }

<div id=”sidebar”>

</div>

This is content inside a divwith an id of

sidebar.

<div id=”main”>

</div>

This is content inside a divwith an id of main.

THE CODE

TEMPLATESEach 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

TEMPLATE HIERARCHY

http://codex.wordpress.org/Template_Hierarchy

TEMPLATE TAGSPlaceholders for dynamic pieces of content.

http://codex.wordpress.org/Template_Tags

<div id=”sidebar”>

</div>

<?php get_sidebar(); ?>

<div id=”main”>

</div>

<?php the_content(); ?>

CHELSEA OTAKAN@chexeeanythingwonderful.net