Designing for WordPress

480
-1

Published on

Presented at UCDA Conference, October 2010

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

  • Be the first to like this

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing for WordPress

  1. 1. UCDA 2010DESIGNING FORWORDPRESS<br />Mike RichwalskyJohn Carroll Universitywww.highedwebtech.com@mrichwalsky<br />
  2. 2. Director of Marketing Services / JCUhighedwebtech.com/ blog@mrichwalsky/ TWITTERWEB DEV,CLOUD,SM,VIDEO/ specialities<br />10/3/10<br />MY PRESENTATION TITLE<br />
  3. 3. I <3WORDPRESS<br />10/3/10<br />MY PRESENTATION TITLE<br />
  4. 4. BLOGGING TOOLCONTENT MANAGEMENT SYSTEMSOCIAL NETWORKSUPER FLEXIBLE PLATFORMWORDPRESS<br />10/3/10<br />MY PRESENTATION TITLE<br />
  5. 5. WHY WORDPRESS?<br />OPEN SOURCE<br />Hack it into whatever you’d like it to be. Share your changes and updates for the good of everyone. <br />COMMUNITY<br />Amazingly robust community of coders, plugin developers, designers, themes, support and more. <br />10/3/10<br />MY PRESENTATION TITLE<br />
  6. 6. 10/3/10<br />MY PRESENTATION TITLE<br />
  7. 7. 10/3/10<br />MY PRESENTATION TITLE<br />
  8. 8. 10/3/10<br />MY PRESENTATION TITLE<br />
  9. 9. WORDPRESS <br />THEMES<br />Collection of HTML, CSS, PHP, Javascript that serves as the foundation of all WordPress sites. <br />TEMPLATES<br />Pages inside a theme that allow you to build any type of page or blog post you’d like.<br />10/3/10<br />MY PRESENTATION TITLE<br />
  10. 10. BUT I DON’t KNOW__________.Can I DO THIS?YES.<br />PHP / JAVASCRIPT / JQUERY / CSS<br />10/3/10<br />MY PRESENTATION TITLE<br />
  11. 11. You CAN TAKE THE EASY WAY OUT<br />
  12. 12. THE END.<br />10/3/10<br />MY PRESENTATION TITLE<br />
  13. 13. THOUSANDS OF FREE AND PREMIUM THEMES<br />The hard work has been done for you<br />You can focus on content<br />Tweak, hack, customize as necessary.<br />10/3/10<br />MY PRESENTATION TITLE<br />
  14. 14. 10/3/10<br />MY PRESENTATION TITLE<br />
  15. 15. 10/3/10<br />MY PRESENTATION TITLE<br />
  16. 16. HOW TO BUILD A THEME<br />Photoshop<br />Slice it up<br />Build your WP elements<br />Test and Deploy<br />Share?<br />10/3/10<br />MY PRESENTATION TITLE<br />
  17. 17. 10/3/10<br />MY PRESENTATION TITLE<br />
  18. 18. GENERATE A STATIC HTML FILE<br />10/3/10<br />MY PRESENTATION TITLE<br />Make sure everything looks and behaves correctly. <br />Get your CSS, Javascript, layout and test across browsers and platforms. <br />Web standards and accessibility testing<br />
  19. 19. Install Wordpress<br />One click install on many web hosts<br />5 minute easy installation<br />Download files<br />Create database<br />Copy over and install files<br />Configure.<br />Done.<br />10/3/10<br />MY PRESENTATION TITLE<br />
  20. 20. 10/3/10<br />MY PRESENTATION TITLE<br />
  21. 21. 10/3/10<br />MY PRESENTATION TITLE<br />
  22. 22. At the very least, You’ll need a filecalledindex.php<br />10/3/10<br />MY PRESENTATION TITLE<br />
  23. 23. Index.phpheader.phpsidebar.phpfooter.php<br />
  24. 24. Index.phpheader.phpsidebar.phpfooter.phpsingle.phpcomments.phpfunctions.phptag.phpcategory.php404.php<br />
  25. 25. TEMPLATE HIERARCHY<br />10/3/10<br />MY PRESENTATION TITLE<br />
  26. 26. START BREAKING UP YOUR STATIC FILE<br />Find logical breaks for headers, footers, etc.<br />Code in the calls for elements as needed.<br />10/3/10<br />MY PRESENTATION TITLE<br />
  27. 27. HEADER<br />Page title and other meta tags<br />Call CSS, Javascripts as needed<br />Header (name/logo) and Navigation<br />10/3/10<br />MY PRESENTATION TITLE<br />
  28. 28. SIDEBAR<br />Call in widgets<br />Search boxes<br />Secondary Navigation<br />Recent posts, categories, tag clouds, RSS<br />10/3/10<br />MY PRESENTATION TITLE<br />
  29. 29. FOOTER<br />Navigation<br />Copyright<br />Call in scripts such as Google Analytics<br />Close up the container DIVs, etc.<br />10/3/10<br />MY PRESENTATION TITLE<br />
  30. 30. CONTENT<br />Home page<br />Single blog post, page, or category<br />Comments<br />Built using “the loop”<br />10/3/10<br />MY PRESENTATION TITLE<br />
  31. 31. THE LOOP<br />This is where WordPress grabs whatever content you’ve asked for<br />Blog posts<br />Media<br />Pages<br />Query specific posts, categories, tags, keywords, etc.<br />10/3/10<br />MY PRESENTATION TITLE<br />
  32. 32. THE LOOP <br /><?php<br />if(have_posts() ):<br /> while ( have_posts() ):<br />the_post();<br /> // DO STUFF<br />?><br />10/3/10<br />MY PRESENTATION TITLE<br />
  33. 33. LET WP DO THE WORK<br />Use WordPress specific tags <br />Let WP enter in data specific to your site<br />If you are sharing this theme, this is important.<br /><?phpbloginfo('name'); ?><br />10/3/10<br />MY PRESENTATION TITLE<br />
  34. 34. DEMO & LIVE STUFF<br />10/3/10<br />MY PRESENTATION TITLE<br />
  35. 35. PLUGINS<br />Plugins extend WordPress to do new and different things.<br />Make life a little easier:<br />jQuery sliders<br />Backups<br />Contact Forms<br />eCommerce<br />And so, so, so, so, so, so many more.<br />10/3/10<br />MY PRESENTATION TITLE<br />
  36. 36. SHARE YOUR WORK<br />Share themes and plugins to WORDPRESS itself<br />Accessible to millions of users<br />Install & deploy from inside WP<br />10/3/10<br />MY PRESENTATION TITLE<br />
  37. 37. KEEP UP TO DATE<br />Plugins and WP itself are always being upgraded, so keep software up to date.<br />Older versions may be vulnerable<br />10/3/10<br />MY PRESENTATION TITLE<br />
  38. 38. ADDITIONAL RESOURCES<br />SixRevisions.com<br />SmashingMagazine.com<br />www.binarymoon.co.uk<br />WORDPRESS.ORG<br />HIGHEr ED EXPERTS WEBINAR - 2011<br />10/3/10<br />MY PRESENTATION TITLE<br />
  39. 39. KEEPINTOUCH<br />mrichwalsky@gmail.comwww.highedwebtech.com@mrichwalsky<br />

×