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/

WP Australia

April 28, 2013
Tweet

More Decks by WP Australia

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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.
  5. 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
  6. 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
  7. CLASSES & IDs <div id=”aSingleID”> ... </div> <div class=”oneOfManyClasses”> ...

    </div> <div class=”oneOfManyClasses”> ... </div> Something to grab onto
  8. PHP & The Loop <?php if ( have_posts() ) while

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

    the_title(); ?> <?php the_permalink(); ?> <?php the_content(); ?> <?php the_excerpt(); ?>
  10. 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
  11. 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
  12. Cascading Style Sheets Remember those classes and IDs? <div id=”aSingleID”>

    ... </div> <div class=”oneOfManyClasses”> ... </div> <div class=”oneOfManyClasses”> ... </div>
  13. 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; }
  14. Adding The Picture <img src = “jordan.jpg” alt = “A

    picture of Jordan” id= “sidebarPhoto”> sidebar.php
  15. Tweaking the Excerpt #blog .meta { font-size: 13px; line-height: 14px;

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

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

    margin-bottom: 5px; color: #b8ada0; } styles.css
  18. Adding Published Date to List <li> <a href="<?php the_permalink(); ?>">

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

    <?php the_title(); ?> </a> <p class="meta"><?php the_date(); ?></p> </li>