Know Enough to Be Dangerous

691 views

Published on

Getting Started Tweaking Your Wordpress Theme - a talk from WordCamp Melbourne 2013

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
691
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Know Enough to Be Dangerous

  1. 1. HI, MY NAME ISJORDANThursday, 25 April 13
  2. 2. A LITTLE BITABOUT METhursday, 25 April 13
  3. 3. Thursday, 25 April 13
  4. 4. Thursday, 25 April 13
  5. 5. Thursday, 25 April 13
  6. 6. Thursday, 25 April 13
  7. 7. COLDFUSIONPHP ASPJAVARUBY JAVASCRIPTimage: http://reactiongifs.com/?p=996Thursday, 25 April 13
  8. 8. DANGEROUSTO BEKNOW ENOUGHThursday, 25 April 13
  9. 9. DANGEROUSTO BEKNOW ENOUGHTWEAKING YOUR WORDPRESS THEMEThursday, 25 April 13
  10. 10. HOW WORDPRESS WORKSimage: http://harriespotters.tumblr.com/Thursday, 25 April 13
  11. 11. HOW WORDPRESS WORKSDATABASE THEMEYOUR CONTENT HOW THINGS LOOKThursday, 25 April 13
  12. 12. YOUR THEMEimage: http://tom-raider.tumblr.com/Thursday, 25 April 13
  13. 13. ANATOMY OF A THEMEimage: http://thelissomelightofevening.tumblr.com/Thursday, 25 April 13
  14. 14. ANATOMY OF A THEMEYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  15. 15. SCARED YET?image: http://www.bukk.it/cat-dramatic.gifThursday, 25 April 13
  16. 16. ANATOMY OF A THEMEYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  17. 17. PHP / HTMLYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  18. 18. PHP / HTMLThursday, 25 April 13
  19. 19. PHP / HTMLThursday, 25 April 13
  20. 20. COPING?image: speakinginternet.tumblr.comThursday, 25 April 13
  21. 21. HTMLAN AWESOME TITLEA FANTASTIC BYLINEIn hac habitasse platea dictumst. Nam pulvinar, odiosed rhoncus suscipit, sem diam ultrices mauris, euconsequat purus metus eu velit.Thursday, 25 April 13
  22. 22. HTMLAN AWESOME TITLEA FANTASTIC BYLINEIn hac habitasse platea dictumst. Nam pulvinar, odiosed rhoncus suscipit, sem diam ultrices mauris, euconsequat purus metus eu velit.<h1> </h1><h2> </h2><p></p><div></div>Adding Structure and MeaningThursday, 25 April 13
  23. 23. HTML<img src = “whereTheImageIs.jpg” alt = “description”><a href = “thePageLink.pdf”> Link Text </a><ul><li>List Item Text</li><li>List Item Text</li><ul>Some More ElementsThursday, 25 April 13
  24. 24. CLASSES & IDs<div id=”aSingleID”> ... </div><div class=”oneOfManyClasses”> ... </div><div class=”oneOfManyClasses”> ... </div>Something to grab ontoThursday, 25 April 13
  25. 25. PHP<?php ... ?>Doing all the Hard WorkThursday, 25 April 13
  26. 26. PHP & The Loop<?php if ( have_posts() ) while (have_posts()) : the_post(); ?>.... magic! ...<?php endwhile; endif; ?>You’ll see this a lot.Thursday, 25 April 13
  27. 27. PHP & Template TagsYou’ll see these a lot.<?php the_title(); ?><?php the_permalink(); ?><?php the_content(); ?><?php the_excerpt(); ?>Thursday, 25 April 13
  28. 28. image: http://bukk.it/applause.gifThursday, 25 April 13
  29. 29. JAVASCRIPTYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  30. 30. JAVASCRIPTimage: http://bukk.it/productivity.gifThursday, 25 April 13
  31. 31. Cascading Style SheetsYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  32. 32. Cascading Style Sheetsfrom this...Thursday, 25 April 13
  33. 33. Cascading Style Sheetsto this!Thursday, 25 April 13
  34. 34. Cascading Style SheetsThursday, 25 April 13
  35. 35. Cascading Style Sheetsimage: http://bukk.it/blinkhomer.gifThursday, 25 April 13
  36. 36. Cascading Style SheetsRemember those classes and IDs?<div id=”aSingleID”> ... </div><div class=”oneOfManyClasses”> ... </div><div class=”oneOfManyClasses”> ... </div>Thursday, 25 April 13
  37. 37. Cascading Style SheetsHooking In! (selectors)#aSingle ID { .... }.oneOfManyClasses { ... }Thursday, 25 April 13
  38. 38. Cascading Style SheetsAdding style (property and value)color: #ff0000;text-align: left;Thursday, 25 April 13
  39. 39. Cascading Style SheetsPutting it Together#aSingle ID {color: #ff0000;text-align: left;background-color: #0000ff;border: 1px solid #111111padding: 10px 10px 5px 8px;}Thursday, 25 April 13
  40. 40. Cascading Style Sheetsimage: http://bukk.it/clap-nj.gifitThursday, 25 April 13
  41. 41. Editing Your ThemeThursday, 25 April 13
  42. 42. Editing Your Themeimage: http://ano.lolcathost.org/thumbs//code-25.gifThursday, 25 April 13
  43. 43. Tools You’ll NeedFTP EditorCyberDuck (MAC)FileZilla (PC)Thursday, 25 April 13
  44. 44. Tools You’ll NeedText EditorText Wrangler (MAC)NotePad ++ (PC)Thursday, 25 April 13
  45. 45. Tools You’ll NeedBrowser InspectorsChrome Developer ToolsFirebug (for Firefox)Safari Developer ToolsThursday, 25 April 13
  46. 46. Let’s Get StartedThursday, 25 April 13
  47. 47. Let’s Get StartedThursday, 25 April 13
  48. 48. Let’s Get StartedAdd PictureAdd DatesLess GapBigger TypeThursday, 25 April 13
  49. 49. Connect to the ServerUsing your FTP ClientThursday, 25 April 13
  50. 50. Connect to the Serverwp-content > themes > your_themeThursday, 25 April 13
  51. 51. Connect to the ServerThursday, 25 April 13
  52. 52. WARNING: Cowboy Codingimage: http://gif-central.blogspot.com.au/2012/09/cowboy-shaking-head.htmlThursday, 25 April 13
  53. 53. WARNING: Cowboy CodingDuplicate/Backup the Theme Folder!!Duplicate/Backup File You’re Editing!!Thursday, 25 April 13
  54. 54. Adding The PictureAdd PictureThursday, 25 April 13
  55. 55. Adding The Picture<img src = “jordan.jpg” alt = “A picture of Jordan”id= “sidebarPhoto”>sidebar.phpThursday, 25 April 13
  56. 56. Adding The PictureThursday, 25 April 13
  57. 57. Adding The Picture#sidebarPhoto {float:left;width:100px;margin-right:10px;}styles.cssThursday, 25 April 13
  58. 58. Adding The PictureThursday, 25 April 13
  59. 59. Adding The Pictureimage: http://bukk.it/struttin.gifThursday, 25 April 13
  60. 60. Tweaking the ExcerptLess GapBigger TypeThursday, 25 April 13
  61. 61. Tweaking the ExcerptUsing Developer ToolsThursday, 25 April 13
  62. 62. Tweaking the ExcerptUsing Developer ToolsThursday, 25 April 13
  63. 63. Tweaking the Excerpt#blog .meta {font-size: 13px;line-height: 14px;margin-bottom: 14px;color: #b8ada0;}styles.cssThursday, 25 April 13
  64. 64. Tweaking the Excerpt#blog .meta {font-size: 18px;line-height: 14px;margin-bottom: 5px;color: #b8ada0;}styles.cssThursday, 25 April 13
  65. 65. Tweaking the Excerpt#blog .meta {font-size: 18px;line-height: 14px;margin-bottom: 5px;color: #b8ada0;}styles.cssThursday, 25 April 13
  66. 66. Tweaking the ExcerptThursday, 25 April 13
  67. 67. Tweaking the Excerptimage: http://bukk.it/blues.gifThursday, 25 April 13
  68. 68. Adding Published Date to ListAdd DateThursday, 25 April 13
  69. 69. Adding Published Date to ListThursday, 25 April 13
  70. 70. Adding Published Date to ListThursday, 25 April 13
  71. 71. Adding Published Date to List<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>Thursday, 25 April 13
  72. 72. Adding Published Date to List<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><p class="meta"><?php the_date(); ?></p></li>Thursday, 25 April 13
  73. 73. Adding Published Date to List<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><p class="meta"><?php the_date(); ?></p></li>Thursday, 25 April 13
  74. 74. Adding Published Date to ListThursday, 25 April 13
  75. 75. Adding Published Date to Listimage: http://bukk.it/celebration.gifThursday, 25 April 13
  76. 76. Resources:http://www.jordesign.com/be-dangeroushttp://codex.wordpress.org/Thursday, 25 April 13
  77. 77. Thanks!Questions?Thursday, 25 April 13

×