Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jordan Gillman: Know Enough to be Dangerous - Tweaking your WordPress site

Jordan Gillman: Know Enough to be Dangerous - Tweaking your WordPress site

Over the last 12 months Jordan has moved from creating really basic theme tweaks on his site to getting deeper into code.

He has very generously agreed to share some of his knowledge with our user stream to encourage them to start getting a little more adventurous in terms of some of the tweaks you can make to a theme to make it your own.

Jordan has written a follow up blog post about his talk and addresses the issue of child themes which was raised in the Q&A that day. Read all about it here http://www.jordesign.com/know-enough-to-be-dangerous-safely/

073054d5848746e939c7165bc90a507b?s=128

WP Australia

April 28, 2013
Tweet

Transcript

  1. HI, MY NAME IS JORDAN

  2. A LITTLE BIT ABOUT ME

  3. None
  4. None
  5. None
  6. None
  7. COLDFUSION PHP ASP JAVA RUBY JAVASCRIPT image: http://reactiongifs.com/?p=996

  8. DANGEROUS TO BE KNOW ENOUGH

  9. DANGEROUS TO BE KNOW ENOUGH TWEAKING YOUR WORDPRESS THEME

  10. HOW WORDPRESS WORKS image: http://harriespotters.tumblr.com/

  11. HOW WORDPRESS WORKS DATABASE THEME YOUR CONTENT HOW THINGS LOOK

  12. YOUR THEME image: http://tom-raider.tumblr.com/

  13. ANATOMY OF A THEME image: http://thelissomelightofevening.tumblr.com/

  14. ANATOMY OF A THEME YOUR AWESOME THEME 404.php archive.php footer.php

    header.php index.php images page.php search.php sidebar.php single.php style.css scripts.js
  15. SCARED YET? image: http://www.bukk.it/cat-dramatic.gif

  16. ANATOMY OF A THEME YOUR AWESOME THEME 404.php archive.php footer.php

    header.php index.php images page.php search.php sidebar.php single.php style.css scripts.js
  17. PHP / HTML YOUR AWESOME THEME 404.php archive.php footer.php header.php

    index.php images page.php search.php sidebar.php single.php style.css scripts.js
  18. PHP / HTML

  19. PHP / HTML

  20. COPING? image: speakinginternet.tumblr.com

  21. HTML AN AWESOME TITLE A FANTASTIC BYLINE In hac habitasse

    platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit.
  22. HTML AN AWESOME TITLE A FANTASTIC BYLINE In hac habitasse

    platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. <h1> </h1> <h2> </h2> <p> </p> <div> </div> Adding Structure and Meaning
  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 Elements
  24. CLASSES & IDs <div id=”aSingleID”> ... </div> <div class=”oneOfManyClasses”> ...

    </div> <div class=”oneOfManyClasses”> ... </div> Something to grab onto
  25. PHP <?php ... ?> Doing all the Hard Work

  26. PHP & The Loop <?php if ( have_posts() ) while

    (have_posts()) : the_post(); ?> .... magic! ... <?php endwhile; endif; ?> You’ll see this a lot.
  27. PHP & Template Tags You’ll see these a lot. <?php

    the_title(); ?> <?php the_permalink(); ?> <?php the_content(); ?> <?php the_excerpt(); ?>
  28. image: http://bukk.it/applause.gif

  29. JAVASCRIPT YOUR AWESOME THEME 404.php archive.php footer.php header.php index.php images

    page.php search.php sidebar.php single.php style.css scripts.js
  30. JAVASCRIPT image: http://bukk.it/productivity.gif

  31. Cascading Style Sheets YOUR AWESOME THEME 404.php archive.php footer.php header.php

    index.php images page.php search.php sidebar.php single.php style.css scripts.js
  32. Cascading Style Sheets from this...

  33. Cascading Style Sheets to this!

  34. Cascading Style Sheets

  35. Cascading Style Sheets image: http://bukk.it/blinkhomer.gif

  36. Cascading Style Sheets Remember those classes and IDs? <div id=”aSingleID”>

    ... </div> <div class=”oneOfManyClasses”> ... </div> <div class=”oneOfManyClasses”> ... </div>
  37. Cascading Style Sheets Hooking In! (selectors) #aSingle ID { ....

    } .oneOfManyClasses { ... }
  38. Cascading Style Sheets Adding style (property and value) color: #ff0000;

    text-align: left;
  39. Cascading Style Sheets Putting it Together #aSingle ID { color:

    #ff0000; text-align: left; background-color: #0000ff; border: 1px solid #111111 padding: 10px 10px 5px 8px; }
  40. Cascading Style Sheets image: http://bukk.it/clap-nj.gifit

  41. Editing Your Theme

  42. Editing Your Theme image: http://ano.lolcathost.org/thumbs//code-25.gif

  43. Tools You’ll Need FTP Editor CyberDuck (MAC) FileZilla (PC)

  44. Tools You’ll Need Text Editor Text Wrangler (MAC) NotePad ++

    (PC)
  45. Tools You’ll Need Browser Inspectors Chrome Developer Tools Firebug (for

    Firefox) Safari Developer Tools
  46. Let’s Get Started

  47. Let’s Get Started

  48. Let’s Get Started Add Picture Add Dates Less Gap Bigger

    Type
  49. Connect to the Server Using your FTP Client

  50. Connect to the Server wp-content > themes > your_theme

  51. Connect to the Server

  52. WARNING: Cowboy Coding image: http://gif-central.blogspot.com.au/2012/09/cowboy-shaking-head.html

  53. WARNING: Cowboy Coding Duplicate/Backup the Theme Folder!! Duplicate/Backup File You’re

    Editing!!
  54. Adding The Picture Add Picture

  55. Adding The Picture <img src = “jordan.jpg” alt = “A

    picture of Jordan” id= “sidebarPhoto”> sidebar.php
  56. Adding The Picture

  57. Adding The Picture #sidebarPhoto { float:left; width:100px; margin-right:10px; } styles.css

  58. Adding The Picture

  59. Adding The Picture image: http://bukk.it/struttin.gif

  60. Tweaking the Excerpt Less Gap Bigger Type

  61. Tweaking the Excerpt Using Developer Tools

  62. Tweaking the Excerpt Using Developer Tools

  63. Tweaking the Excerpt #blog .meta { font-size: 13px; line-height: 14px;

    margin-bottom: 14px; color: #b8ada0; } styles.css
  64. Tweaking the Excerpt #blog .meta { font-size: 18px; line-height: 14px;

    margin-bottom: 5px; color: #b8ada0; } styles.css
  65. Tweaking the Excerpt #blog .meta { font-size: 18px; line-height: 14px;

    margin-bottom: 5px; color: #b8ada0; } styles.css
  66. Tweaking the Excerpt

  67. Tweaking the Excerpt image: http://bukk.it/blues.gif

  68. Adding Published Date to List Add Date

  69. Adding Published Date to List

  70. Adding Published Date to List

  71. Adding Published Date to List <li> <a href="<?php the_permalink(); ?>">

    <?php the_title(); ?> </a> </li>
  72. Adding Published Date to List <li> <a href="<?php the_permalink(); ?>">

    <?php the_title(); ?> </a> <p class="meta"><?php the_date(); ?></p> </li>
  73. Adding Published Date to List <li> <a href="<?php the_permalink(); ?>">

    <?php the_title(); ?> </a> <p class="meta"><?php the_date(); ?></p> </li>
  74. Adding Published Date to List

  75. Adding Published Date to List image: http://bukk.it/celebration.gif

  76. Resources: http://www.jordesign.com/be- dangerous http://codex.wordpress.org/

  77. Thanks! Questions?