Completing Your Design with WordPress

1,090 views

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,090
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Completing Your Design with WordPress

  1. 1. Completing Your Design with WordPress or why coding your own designs shouldn’t be scary
  2. 2. Can’t I Hire Someone To Do This? if you trust them enough.
  3. 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. 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. 5. ITS A BOX. opens the div <div> This is content inside the div tag. </div> closes the div
  6. 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. 7. THE CODE
  8. 8. CSS BASICS HTML indicates structure. CSS indicates look & feel. Typography Color Size Placement Spacing
  9. 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. 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. 11. THE CODE
  12. 12. 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
  13. 13. TEMPLATE HIERARCHY http://codex.wordpress.org/Template_Hierarchy
  14. 14. 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>
  15. 15. CHELSEA OTAKAN @chexee anythingwonderful.net

×