WordPress Theme Development for Designers

3,397 views

Published on

My half-day workshop from FOWD NYC 2009

Published in: Design, Technology, Business
1 Comment
5 Likes
Statistics
Notes
  • Very nice presentation about wordpress for beginners. I love the visual style of it! It shows someone has put some effort in putting the styles together.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,397
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
146
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

WordPress Theme Development for Designers

  1. 1. Hello 9.00 - 9.15 1 An introduction to WordPress 09.15 - 09.30 2 The core components of a theme 09.30 - 10.00 3 Using WordPress as a proper CMS 10.00 - 10.30 Morning tea 10.30 - 11.00 4 A portfolio powered by WordPress 11.00 - 11.30 5 Building a brand new theme 11.30 - 12.00 Q&A / discussion 12.00 - 12.30
  2. 2. An introduction to WordPress
  3. 3. Setting up WordPress on your local machine
  4. 4. MAMP (OSX) mamp.info XAMPP (Windows) apachefriends.org/en/xampp.html (or WAMP at wampserver.com)
  5. 5. Dummy content
  6. 6. Dummy content on the Starkers demo elliotjaystocks.com/starkers/demo/
  7. 7. themeshaper.com/wordpress-theme-development-tools-tutorial/
  8. 8. The basics of WordPress
  9. 9. The dashboard on a fresh WordPress installation
  10. 10. The core components of a theme
  11. 11. The template files in the ‘default’ theme
  12. 12. The only files you actually need in a theme
  13. 13. index.php
  14. 14. The ‘loop’
  15. 15. Use WordPress to power your entire site
  16. 16. Utilise the simple stuff
  17. 17. Built-in elements you can use Post title Category title / description Use naming conventions to avoid repeating yourself
  18. 18. Custom fields Custom fields for content (to call in images, etc.) Custom fields for definitions (should this be featured on the home page? etc.)
  19. 19. Conditional tags
  20. 20. Template tags
  21. 21. Basic if/else statements
  22. 22. Say it in English What am I trying to accomplish? If a certain situation occurs, do X; if it doesn’t occur, do Y What’s the easiest way to accomplish this?
  23. 23. START. If the page slug is 'design-network', use the word ‘Design’ as my network name; but if the page slug is 'photography-network', use the word ‘Photography’ as my network name; or, if it’s neither of those, just use the word ‘Default’ as my network name. END. Think of things in plain English
  24. 24. <?php if (is_page('design-network')) { $network="Design"; } elseif (is_page('photography-network')) { $network="Photography"; } else { // default $network="Default"; } ?> Set up a variable you can use later on
  25. 25. <h2> Fusion Ads delivered <strong>17,737,824</strong> ad impressions in July across its dedicated <strong>Design</strong> network </h2> Set up a variable you can use later on
  26. 26. <h2> Fusion Ads delivered <strong>17,737,824</strong> ad impressions in July across its dedicated <strong>PUT_THE_NETWORK_NAME_HERE</strong> network </h2> Set up a variable you can use later on
  27. 27. <h2> Fusion Ads delivered <strong>17,737,824</strong> ad impressions in July across its dedicated <strong><?php echo $network; ?></strong> network </h2> Set up a variable you can use later on
  28. 28. START. If the page is the ‘home’ page, use the word ‘home’ as my body’s classname; but if it’s in the ‘portfolio’ category, use the word ‘portfolio’ as my body’s classname; unless it’s in the ‘speaking’ category, then use the word ‘speaking’ as my body’s classname; or if it’s the ‘publication’ page, use the word ‘publication’ as my body’s classname; but if it’s a 404 or search results page, use the word ‘results’ as my body’s classname; or if it’s none of the above, just use the word ‘default’ as my body’s classname. END. Set up a variable you can use later on
  29. 29. <?php if (is_home()) { // Home $bodyclass="home"; } elseif (is_category('portfolio')) { // Portfolio $bodyclass="portfolio"; } elseif (is_category('speaking')) { // Speaking $bodyclass="speaking"; } elseif (is_page('publication')) { // publication $bodyclass="publication"; } elseif (is_404() || is_search()) { // 404 or search $bodyclass="nothing"; } else { // default $bodyclass="blog"; } ?> Set up a variable you can use later on
  30. 30. is_home <?php if (is_home()) { // Home $bodyclass="home"; } elseif (is_category('portfolio')) { // Portfolio $bodyclass="portfolio"; } elseif (is_category('speaking')) { // Speaking $bodyclass="speaking"; } elseif (is_page('publication')) { // publication $bodyclass="publication"; } elseif (is_404() || is_search()) { // 404 or search $bodyclass="nothing"; } else { // default $bodyclass="blog"; } ?> Set up a variable you can use later on
  31. 31. is_category <?php if (is_home()) { // Home $bodyclass="home"; } elseif (is_category('portfolio')) { // Portfolio $bodyclass="portfolio"; } elseif (is_category('speaking')) { // Speaking $bodyclass="speaking"; } elseif (is_page('publication')) { // publication $bodyclass="publication"; } elseif (is_404() || is_search()) { // 404 or search $bodyclass="nothing"; } else { // default $bodyclass="blog"; } ?> Set up a variable you can use later on
  32. 32. is_page <?php if (is_home()) { // Home $bodyclass="home"; } elseif (is_category('portfolio')) { // Portfolio $bodyclass="portfolio"; } elseif (is_category('speaking')) { // Speaking $bodyclass="speaking"; } elseif (is_page('publication')) { // publication $bodyclass="publication"; } elseif (is_404() || is_search()) { // 404 or search $bodyclass="nothing"; } else { // default $bodyclass="blog"; } ?> Set up a variable you can use later on
  33. 33. is_404() || is_search <?php if (is_home()) { // Home $bodyclass="home"; } elseif (is_category('portfolio')) { // Portfolio $bodyclass="portfolio"; } elseif (is_category('speaking')) { // Speaking $bodyclass="speaking"; } elseif (is_page('publication')) { // publication $bodyclass="publication"; } elseif (is_404() || is_search()) { // 404 or search $bodyclass="nothing"; } else { // default $bodyclass="blog"; } ?> Set up a variable you can use later on
  34. 34. <body> Set up a variable you can use later on
  35. 35. <body class="PUT_THE_CLASSNAME_HERE"> Set up a variable you can use later on
  36. 36. <body class="<?php echo $bodyclass; ?>"> Set up a variable you can use later on
  37. 37. WP Candy Template hierarchy diagram j.mp/wphierarchy
  38. 38. WP Candy WordPress Help Sheet j.mp/wphelpsheet1
  39. 39. WP Candy Advanced WordPress Help Sheet j.mp/wphelpsheet2
  40. 40. <li class="blog"> <a href="http://elliotjaystocks.com/blog/"> Blog </a> </li> <li class="portfolio"> <a href="http://elliotjaystocks.com/portfolio/"> Portfolio </a> </li> <li class="speaking"> <a href="http://elliotjaystocks.com/speaking/"> Speaking </a> </li> Set up a variable you can use later on
  41. 41. <li class="blog"> <a href="<?php bloginfo('url'); ?>/blog/"> Blog </a> </li> <li class="portfolio"> <a href="<?php bloginfo('url'); ?>/portfolio/"> Portfolio </a> </li> <li class="speaking"> <a href="<?php bloginfo('url'); ?>/speaking/"> Speaking </a> </li> Set up a variable you can use later on
  42. 42. Custom page templates
  43. 43. category-X.php
  44. 44. Multiple single.php templates
  45. 45. Multiple single.php templates j.mp/multiplesingle
  46. 46. Essential plugins
  47. 47. Plugins for basic use Akismet Author Highlight Comment Timeout Google XML Sitemaps Maintenance Mode
  48. 48. Advanced plugins for CMS use Advanced Excerpt Duplicate Post Improved Include Page Top Level Categories
  49. 49. Start with an existing theme (starting from scratch = scary)
  50. 50. Integrating scripts & stylesheets
  51. 51. Including jQuery the right way j.mp/jquerywp
  52. 52. A quick word on child themes
  53. 53. A portfolio powered by WordPress
  54. 54. Building a brand new theme
  55. 55. If you liked this, you’ll love...
  56. 56. The ultimate tutorial themeshaper.com/wordpress-themes-templates-tutorial/
  57. 57. Shameless plug! Sexy Web Design by Elliot Jay Stocks Expert reviewers: Jina Bolton & Dan Rubin Published by SitePoint
  58. 58. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158/ Paint textures from The Stock Exchange - sxc.hu Set in FS Clerkenwell - fontsmith.com/font_details.php?font_num=251

×