Your SlideShare is downloading. ×

10 WordPress Theme Hacks to Improve Your Site

4,995

Published on

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

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

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

No Downloads
Views
Total Views
4,995
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
84
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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…
  • Transcript

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

    ×