Date post: | 17-May-2015 |
Category: |
Design |
Upload: | chelsea-otakan |
View: | 876 times |
Download: | 0 times |
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 [email protected]