10 WordPress Theme Hacks to Improve Your Site

5,363
-1

Published on

Morten Rand-Hendriksen's WordCamp Victoria presentation showcasing 10 easy theme hacks that can improve any WordPress site.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,363
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
87
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • The header text can be replaced with this simple block of code. Simple…
  • 10 WordPress Theme Hacks to Improve Your Site

    1. 1. 10 THEME HACKS <br />TO IMPROVE YOUR SITE<br />Morten Rand-Hendriksen<br />Creative Director, Pink & Yellow Media<br />www.designisphilosophy.com<br />Twitter: @mor10<br />HELLO,MY NAME IS MOR10people tend to spell it with an ‘o’, but that’s just plain wrong<br />
    2. 2. Why does it matter?<br />When people visit a site, they expect the site logo or header image to point back to the home page.<br />That’s just the way it is.<br />REPLACE TITLE WITH A LINKED IMAGE<br />1<br />
    3. 3. Link<br />Not link (Grrr)<br />
    4. 4. <a <br />href="<?php echo home_url( '/' ); ?>"<br /> title="<?phpget_bloginfo( 'name' ); ?>" <br />rel="home"<br />><br />… the image …<br /></a><br />REPLACE TITLE WITH A LINKED IMAGE<br />1<br />
    5. 5. REPLACE TITLE WITH A LINKED IMAGE<br />1<br />
    6. 6. REPLACE TITLE WITH A LINKED IMAGE<br />1<br />
    7. 7.
    8. 8. REPLACE TITLE WITH A LINKED IMAGE<br />1<br />
    9. 9.
    10. 10. ENABLE WP 3 MENUS<br />2<br />
    11. 11. Step 1: Add to functions.php:<br />register_nav_menus(<br /> array(<br /> 'menuName' =>__('Menu Name'),<br /> ' primary' =>__('Primary Menu'),<br /> '2ndMenu' =>__('2nd Menu'),<br /> )<br />);<br />ENABLE WP 3 MENUS<br />2<br />
    12. 12. Step 2a: Add to theme file:<br /><?php<br />wp_nav_menu(array(<br /> 'theme_location' => 'primary'<br /> )); <br />?><br />(targets name set in functions.php)<br />ENABLE WP 3 MENUS<br />2<br />
    13. 13. Step 2b: Add to theme file:<br /><?php<br />wp_nav_menu(array(<br /> 'name' => 'Menu Name'<br /> )); <br />?><br />(targets name as set in WP menu admin)<br />ENABLE WP 3 MENUS<br />2<br />
    14. 14. Menus don’t have to be boring!<br />WordPress 3 menus allow you to add HTML to the Navigation Label.<br />This can be exploited utilized.<br />MENUSOUTSIDE THE BOX<br />3<br />
    15. 15.
    16. 16.
    17. 17.
    18. 18.
    19. 19.
    20. 20.
    21. 21. MENUSOUTSIDE THE BOX<br />3<br />
    22. 22. MENUSOUTSIDE THE BOX<br />3<br />
    23. 23. MENUSOUTSIDE THE BOX<br />3<br />
    24. 24. MENUSOUTSIDE THE BOX<br />3<br />
    25. 25. MENUSOUTSIDE THE BOX<br />3<br />
    26. 26. Background control from Admin<br />You’ve seen it in TwentyTen … <br />Changing background colour and even background images …<br />But did you know you can add this function to any theme?<br />WP 3 CUSTOM BACKGROUND<br />4<br />
    27. 27.
    28. 28.
    29. 29.
    30. 30. Add to functions.php:<br />add_custom_background();<br />WP 3 CUSTOM BACKGROUND<br />4<br />
    31. 31.
    32. 32.
    33. 33.
    34. 34. Add to functions.php:<br />add_custom_background();<br />WP 3 CUSTOM BACKGROUND<br />4<br />
    35. 35. a.k.a Post Thumbnails<br />The Featured Image (post thumbnail) function is so much more than just thumbnails.<br />I propose a name change.<br />FEATUREDIMAGES<br />5<br />
    36. 36. Add to functions.php:<br />add_theme_support( 'post-thumbnails' );<br />FEATUREDIMAGES<br />5<br />
    37. 37. FEATUREDIMAGES<br />5<br />
    38. 38. FEATUREDIMAGES<br />5<br />
    39. 39. FEATUREDIMAGES<br />5<br />
    40. 40. Add to template file:<br /><?phpthe_post_thumbnail(); ?><br />Variations:<br />the_post_thumbnail('thumbnail');<br />the_post_thumbnail('medium');<br />the_post_thumbnail('large');<br />the_post_thumbnail(array(nnn,nnn));<br />FEATUREDIMAGES<br />5<br />
    41. 41. FEATUREDIMAGES<br />5<br />
    42. 42.
    43. 43.
    44. 44.
    45. 45.
    46. 46. Give your pages some identity<br />Custom Page Templates let you create different looks for different pages.<br />In other words, it makes your site less boring.<br />CUSTOMPAGETEMPLATE<br />6<br />
    47. 47. Add to the top of template file:<br /><?php<br />/* Template Name: Whatever */ <br />?><br />CUSTOMPAGETEMPLATE<br />6<br />
    48. 48. CUSTOMPAGETEMPLATE<br />6<br />
    49. 49. CUSTOMPAGETEMPLATE<br />6<br />
    50. 50. CUSTOMPAGETEMPLATE<br />6<br />
    51. 51.
    52. 52.
    53. 53.
    54. 54.
    55. 55. Add some Information Architecture<br />Custom Category Templates let you create different looks depending on what category index is displayed.<br />Portfolio gallery anyone?<br />CUSTOMCATEGORYTEMPLATE<br />7<br />
    56. 56. Create a new file with the name:<br />category-slug.php<br />or<br />category-ID.php<br />CUSTOMCATEGORYTEMPLATE<br />7<br />
    57. 57. CUSTOMCATEGORYTEMPLATE<br />7<br />
    58. 58. CUSTOMCATEGORYTEMPLATE<br />7<br />
    59. 59. CUSTOMCATEGORYTEMPLATE<br />7<br />
    60. 60. Create a new file with the name:<br />category-slug.php<br />or<br />category-ID.php<br />CUSTOMCATEGORYTEMPLATE<br />7<br />
    61. 61.
    62. 62.
    63. 63.
    64. 64. Why use just one?<br />Custom headers, sidebars and footers allow limitless variations.<br />Who says your sidebar has to be the same throughout your site?<br />CUSTOMHEADER,SIDEBARAND FOOTER<br />8<br />
    65. 65. Header, sidebar and footer naming:<br />header-custom.php<br />sidebar-custom.php<br />footer-custom.php<br />Where 'custom' can be anything<br />CUSTOMHEADER,SIDEBARAND FOOTER<br />8<br />
    66. 66. To call from template files:<br /><?phpget_header('custom'); ?><br /><?phpget_sidebar('custom'); ?><br /><?phpget_footer('custom'); ?><br />Where 'custom' is the suffix of the file<br />CUSTOMHEADER,SIDEBARAND FOOTER<br />8<br />
    67. 67. Who cares about next and previous?<br />Provide links to related posts right inside your post – without a plugin.<br />Keep ‘em coming back for more.<br />BETTERCONTEXTLINKS<br />9<br />
    68. 68. Seriously, who cares?<br />
    69. 69. Create a query that pulls the two newest articles in the same category.<br />Create a conditional statement that excludes the current post.<br />Create another conditional statement that ensures there are actually two posts to display.<br />Do all this within the post loop.<br />Easy as 𝜋<br /> <br />BETTERCONTEXTLINKS<br />9<br />
    70. 70. BETTERCONTEXTLINKS<br />9<br />
    71. 71. Go to www.designisphilosophy.com<br />Download related.php<br />Place related.php in your theme folder<br />Open single.php<br />Paste the following line of code where you want the related posts to appear:<br /><?phpget_template_part('related'); ?><br />BETTERCONTEXTLINKS<br />9<br />
    72. 72. Actual related content!<br />
    73. 73.
    74. 74. Use your domain proactively<br />Why send people to facebook.com/yourdomain<br />when you can send them to <br />yourdomain.com/facebook?<br />Or Twitter, or Flickr, or anything <br />BRANDYOURSOCIAL LINKS<br />10<br />
    75. 75. Not a hack – a plugin<br />Quick Page / Post Redirect Plugin<br />by Don Fischer <br />Get it from the WordPress plugin directory.<br />BRANDYOURSOCIAL LINKS<br />10<br />
    76. 76. BRANDYOURSOCIAL LINKS<br />10<br />
    77. 77. Morten Rand-Hendriksen<br />Creative Director, Pink & Yellow Media<br />www.designisphilosophy.com<br />@mor10<br />www.pinkandyellow.com<br />designisphilosophy.com/facebook<br />GETINTOUCH<br />
    78. 78. Get in touch with me<br />Morten Rand-Hendriksen<br />Owner & Creative Director<br />Pink & Yellow Media<br />designisphilosophy.com<br />pinkandyellow.com<br />twitter.com/Mor10<br />morten@pinkandyellow.com<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×