Your SlideShare is downloading. ×
0
×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Know Enough to Be Dangerous

482

Published on

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

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
482
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HI, MY NAME ISJORDANThursday, 25 April 13
  • 2. A LITTLE BITABOUT METhursday, 25 April 13
  • 3. Thursday, 25 April 13
  • 4. Thursday, 25 April 13
  • 5. Thursday, 25 April 13
  • 6. Thursday, 25 April 13
  • 7. COLDFUSIONPHP ASPJAVARUBY JAVASCRIPTimage: http://reactiongifs.com/?p=996Thursday, 25 April 13
  • 8. DANGEROUSTO BEKNOW ENOUGHThursday, 25 April 13
  • 9. DANGEROUSTO BEKNOW ENOUGHTWEAKING YOUR WORDPRESS THEMEThursday, 25 April 13
  • 10. HOW WORDPRESS WORKSimage: http://harriespotters.tumblr.com/Thursday, 25 April 13
  • 11. HOW WORDPRESS WORKSDATABASE THEMEYOUR CONTENT HOW THINGS LOOKThursday, 25 April 13
  • 12. YOUR THEMEimage: http://tom-raider.tumblr.com/Thursday, 25 April 13
  • 13. ANATOMY OF A THEMEimage: http://thelissomelightofevening.tumblr.com/Thursday, 25 April 13
  • 14. ANATOMY OF A THEMEYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  • 15. SCARED YET?image: http://www.bukk.it/cat-dramatic.gifThursday, 25 April 13
  • 16. ANATOMY OF A THEMEYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  • 17. PHP / HTMLYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  • 18. PHP / HTMLThursday, 25 April 13
  • 19. PHP / HTMLThursday, 25 April 13
  • 20. COPING?image: speakinginternet.tumblr.comThursday, 25 April 13
  • 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. 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. 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. CLASSES & IDs<div id=”aSingleID”> ... </div><div class=”oneOfManyClasses”> ... </div><div class=”oneOfManyClasses”> ... </div>Something to grab ontoThursday, 25 April 13
  • 25. PHP<?php ... ?>Doing all the Hard WorkThursday, 25 April 13
  • 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. 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. image: http://bukk.it/applause.gifThursday, 25 April 13
  • 29. JAVASCRIPTYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  • 30. JAVASCRIPTimage: http://bukk.it/productivity.gifThursday, 25 April 13
  • 31. Cascading Style SheetsYOUR AWESOME THEME404.phparchive.phpfooter.phpheader.phpindex.phpimagespage.phpsearch.phpsidebar.phpsingle.phpstyle.cssscripts.jsThursday, 25 April 13
  • 32. Cascading Style Sheetsfrom this...Thursday, 25 April 13
  • 33. Cascading Style Sheetsto this!Thursday, 25 April 13
  • 34. Cascading Style SheetsThursday, 25 April 13
  • 35. Cascading Style Sheetsimage: http://bukk.it/blinkhomer.gifThursday, 25 April 13
  • 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. Cascading Style SheetsHooking In! (selectors)#aSingle ID { .... }.oneOfManyClasses { ... }Thursday, 25 April 13
  • 38. Cascading Style SheetsAdding style (property and value)color: #ff0000;text-align: left;Thursday, 25 April 13
  • 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. Cascading Style Sheetsimage: http://bukk.it/clap-nj.gifitThursday, 25 April 13
  • 41. Editing Your ThemeThursday, 25 April 13
  • 42. Editing Your Themeimage: http://ano.lolcathost.org/thumbs//code-25.gifThursday, 25 April 13
  • 43. Tools You’ll NeedFTP EditorCyberDuck (MAC)FileZilla (PC)Thursday, 25 April 13
  • 44. Tools You’ll NeedText EditorText Wrangler (MAC)NotePad ++ (PC)Thursday, 25 April 13
  • 45. Tools You’ll NeedBrowser InspectorsChrome Developer ToolsFirebug (for Firefox)Safari Developer ToolsThursday, 25 April 13
  • 46. Let’s Get StartedThursday, 25 April 13
  • 47. Let’s Get StartedThursday, 25 April 13
  • 48. Let’s Get StartedAdd PictureAdd DatesLess GapBigger TypeThursday, 25 April 13
  • 49. Connect to the ServerUsing your FTP ClientThursday, 25 April 13
  • 50. Connect to the Serverwp-content > themes > your_themeThursday, 25 April 13
  • 51. Connect to the ServerThursday, 25 April 13
  • 52. WARNING: Cowboy Codingimage: http://gif-central.blogspot.com.au/2012/09/cowboy-shaking-head.htmlThursday, 25 April 13
  • 53. WARNING: Cowboy CodingDuplicate/Backup the Theme Folder!!Duplicate/Backup File You’re Editing!!Thursday, 25 April 13
  • 54. Adding The PictureAdd PictureThursday, 25 April 13
  • 55. Adding The Picture<img src = “jordan.jpg” alt = “A picture of Jordan”id= “sidebarPhoto”>sidebar.phpThursday, 25 April 13
  • 56. Adding The PictureThursday, 25 April 13
  • 57. Adding The Picture#sidebarPhoto {float:left;width:100px;margin-right:10px;}styles.cssThursday, 25 April 13
  • 58. Adding The PictureThursday, 25 April 13
  • 59. Adding The Pictureimage: http://bukk.it/struttin.gifThursday, 25 April 13
  • 60. Tweaking the ExcerptLess GapBigger TypeThursday, 25 April 13
  • 61. Tweaking the ExcerptUsing Developer ToolsThursday, 25 April 13
  • 62. Tweaking the ExcerptUsing Developer ToolsThursday, 25 April 13
  • 63. Tweaking the Excerpt#blog .meta {font-size: 13px;line-height: 14px;margin-bottom: 14px;color: #b8ada0;}styles.cssThursday, 25 April 13
  • 64. Tweaking the Excerpt#blog .meta {font-size: 18px;line-height: 14px;margin-bottom: 5px;color: #b8ada0;}styles.cssThursday, 25 April 13
  • 65. Tweaking the Excerpt#blog .meta {font-size: 18px;line-height: 14px;margin-bottom: 5px;color: #b8ada0;}styles.cssThursday, 25 April 13
  • 66. Tweaking the ExcerptThursday, 25 April 13
  • 67. Tweaking the Excerptimage: http://bukk.it/blues.gifThursday, 25 April 13
  • 68. Adding Published Date to ListAdd DateThursday, 25 April 13
  • 69. Adding Published Date to ListThursday, 25 April 13
  • 70. Adding Published Date to ListThursday, 25 April 13
  • 71. Adding Published Date to List<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>Thursday, 25 April 13
  • 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. 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. Adding Published Date to ListThursday, 25 April 13
  • 75. Adding Published Date to Listimage: http://bukk.it/celebration.gifThursday, 25 April 13
  • 76. Resources:http://www.jordesign.com/be-dangeroushttp://codex.wordpress.org/Thursday, 25 April 13
  • 77. Thanks!Questions?Thursday, 25 April 13

×