Your SlideShare is downloading. ×
×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Know Enough to Be Dangerous

465
views

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
465
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