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
   

   View Slide

2. A LITTLE BIT
   ABOUT ME
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. COLDFUSION
   PHP ASP
   JAVA
   RUBY JAVASCRIPT
   image: http://reactiongifs.com/?p=996
   

   View Slide

8. DANGEROUS
   TO BE
   KNOW ENOUGH
   

   View Slide

9. DANGEROUS
   TO BE
   KNOW ENOUGH
   TWEAKING YOUR WORDPRESS
   THEME
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

15. SCARED YET?
    image: http://www.bukk.it/cat-dramatic.gif
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. PHP / HTML
    

    View Slide

19. PHP / HTML
    

    View Slide

20. COPING?
    image: speakinginternet.tumblr.com
    

    View Slide

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.
    

    View Slide

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.
    
    
    
    
    
    
    Adding Structure and Meaning
    

    View Slide

23. HTML
    
    Link Text
    
    List Item Text
    List Item Text
    
    Some More Elements
    

    View Slide

24. CLASSES & IDs
    ...
    ...
    ...
    Something to grab onto
    

    View Slide

25. PHP
    
    Doing all the Hard Work
    

    View Slide

26. PHP & The Loop
    
    .... magic! ...
    
    You’ll see this a lot.
    

    View Slide

27. PHP & Template Tags
    You’ll see these a lot.
    
    
    
    
    

    View Slide

28. image: http://bukk.it/applause.gif
    

    View Slide

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
    

    View Slide

30. JAVASCRIPT
    image: http://bukk.it/productivity.gif
    

    View Slide

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
    

    View Slide

32. Cascading Style Sheets
    from this...
    

    View Slide

33. Cascading Style Sheets
    to this!
    

    View Slide

34. Cascading Style Sheets
    

    View Slide

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

    View Slide

36. Cascading Style Sheets
    Remember those classes and IDs?
    ...
    ...
    ...
    

    View Slide

37. Cascading Style Sheets
    Hooking In! (selectors)
    #aSingle ID { .... }
    .oneOfManyClasses { ... }
    

    View Slide

38. Cascading Style Sheets
    Adding style (property and value)
    color: #ff0000;
    text-align: left;
    

    View Slide

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;
    }
    

    View Slide

40. Cascading Style Sheets
    image: http://bukk.it/clap-nj.gifit
    

    View Slide

41. Editing Your Theme
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. Let’s Get Started
    

    View Slide

47. Let’s Get Started
    

    View Slide

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

    View Slide

49. Connect to the Server
    Using your FTP Client
    

    View Slide

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

    View Slide

51. Connect to the Server
    

    View Slide

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

    View Slide

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

    View Slide

54. Adding The Picture
    Add Picture
    

    View Slide

55. Adding The Picture
    id= “sidebarPhoto”>
    sidebar.php
    

    View Slide

56. Adding The Picture
    

    View Slide

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

    View Slide

58. Adding The Picture
    

    View Slide

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

    View Slide

60. Tweaking the Excerpt
    Less Gap
    Bigger Type
    

    View Slide

61. Tweaking the Excerpt
    Using Developer Tools
    

    View Slide

62. Tweaking the Excerpt
    Using Developer Tools
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

66. Tweaking the Excerpt
    

    View Slide

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

    View Slide

68. Adding Published Date to
    List
    Add Date
    

    View Slide

69. Adding Published Date to
    List
    

    View Slide

70. Adding Published Date to
    List
    

    View Slide

71. Adding Published Date to
    List
    
    
    
    
    
    

    View Slide

72. Adding Published Date to
    List
    
    
    
    
    
    
    

    View Slide

73. Adding Published Date to
    List
    
    
    
    
    
    
    

    View Slide

74. Adding Published Date to
    List
    

    View Slide

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

    View Slide

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

    View Slide

77. Thanks!
    Questions?
    

    View Slide