completing your design with wordpress
TRANSCRIPT
![Page 1: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/1.jpg)
Completing Your Design with WordPress
or why coding your own designs shouldn’t be scary
![Page 2: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/2.jpg)
Can’t I Hire Someone To Do This?
if you trust them enough.
![Page 3: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/3.jpg)
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
![Page 4: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/4.jpg)
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
![Page 5: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/5.jpg)
ITS A BOX.
<div>
</div>
opens the div
closes the div
This is content inside the div tag.
![Page 6: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/6.jpg)
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.
![Page 7: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/7.jpg)
THE CODE
![Page 8: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/8.jpg)
CSS BASICSHTML indicates structure.CSS indicates look & feel.
TypographyColorSize
PlacementSpacing
![Page 9: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/9.jpg)
CSS BASICSobject { property: value; property: value;}
#sidebar { color: red } finds an object with an ID of sidebar and makes the text color red
![Page 10: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/10.jpg)
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.
![Page 11: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/11.jpg)
THE CODE
![Page 12: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/12.jpg)
![Page 13: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/13.jpg)
![Page 14: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/14.jpg)
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
![Page 15: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/15.jpg)
TEMPLATE HIERARCHY
http://codex.wordpress.org/Template_Hierarchy
![Page 16: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/16.jpg)
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(); ?>
![Page 17: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/17.jpg)
![Page 18: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/18.jpg)
![Page 19: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/19.jpg)
![Page 20: Completing Your Design with WordPress](https://reader034.vdocuments.net/reader034/viewer/2022042714/5558a91fd8b42a2a738b524b/html5/thumbnails/20.jpg)
CHELSEA [email protected]