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/

Transcript

1. HI, MY NAME IS JORDAN
2. A LITTLE BIT ABOUT ME
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?