78
HELLO, MY NAME IS MOR10 people tend to spell it with an ‘o’, but that’s just plain wrong 10 THEME HACKS TO IMPROVE YOUR SITE Morten Rand- Hendriksen Creative Director, Pink & Yellow Media www.designisphilosophy.com Twitter: @mor10

10 WordPress Theme Hacks to Improve Your Site

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: 10 WordPress Theme Hacks to Improve Your Site

HELLO,MY NAME IS MOR10

people tend to spell it with an ‘o’, but that’s just plain wrong

10 THEME HACKS TO IMPROVE YOUR SITE

Morten Rand-HendriksenCreative Director, Pink & Yellow Media

www.designisphilosophy.comTwitter: @mor10

Page 2: 10 WordPress Theme Hacks to Improve Your Site

1REPLACE TITLE WITH A LINKED IMAGE

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.

Page 3: 10 WordPress Theme Hacks to Improve Your Site

Link

Not link (Grrr)

Page 4: 10 WordPress Theme Hacks to Improve Your Site

1REPLACE TITLE WITH A LINKED IMAGE

<a href="<?php echo home_url( '/' ); ?>" title="<?php get_bloginfo( 'name' ); ?>" rel="home">

… the image …

</a>

Page 5: 10 WordPress Theme Hacks to Improve Your Site

1REPLACE TITLE WITH A LINKED IMAGE

Page 6: 10 WordPress Theme Hacks to Improve Your Site

1REPLACE TITLE WITH A LINKED IMAGE

Page 7: 10 WordPress Theme Hacks to Improve Your Site
Page 8: 10 WordPress Theme Hacks to Improve Your Site

1REPLACE TITLE WITH A LINKED IMAGE

Page 9: 10 WordPress Theme Hacks to Improve Your Site
Page 10: 10 WordPress Theme Hacks to Improve Your Site

2ENABLE WP 3 MENUS

Page 11: 10 WordPress Theme Hacks to Improve Your Site

2ENABLE WP 3 MENUS

Step 1: Add to functions.php:

register_nav_menus(

array(

'menuName' =>__('Menu Name'),

' primary' =>__('Primary Menu'),

'2ndMenu' =>__('2nd Menu'),

)

);

Page 12: 10 WordPress Theme Hacks to Improve Your Site

2ENABLE WP 3 MENUS

Step 2a: Add to theme file:

<?php

wp_nav_menu(array(

'theme_location' => 'primary'

));

?>

(targets name set in functions.php)

Page 13: 10 WordPress Theme Hacks to Improve Your Site

2ENABLE WP 3 MENUS

Step 2b: Add to theme file:

<?php

wp_nav_menu(array(

'name' => 'Menu Name'

));

?>

(targets name as set in WP menu admin)

Page 14: 10 WordPress Theme Hacks to Improve Your Site

3MENUSOUTSIDE THE BOX

Menus don’t have to be boring!

WordPress 3 menus allow you to add HTML to the Navigation Label.

This can be exploited utilized.

Page 15: 10 WordPress Theme Hacks to Improve Your Site
Page 16: 10 WordPress Theme Hacks to Improve Your Site
Page 17: 10 WordPress Theme Hacks to Improve Your Site
Page 18: 10 WordPress Theme Hacks to Improve Your Site
Page 19: 10 WordPress Theme Hacks to Improve Your Site
Page 20: 10 WordPress Theme Hacks to Improve Your Site
Page 21: 10 WordPress Theme Hacks to Improve Your Site

3MENUSOUTSIDE THE BOX

Page 22: 10 WordPress Theme Hacks to Improve Your Site

3MENUSOUTSIDE THE BOX

Page 23: 10 WordPress Theme Hacks to Improve Your Site

3MENUSOUTSIDE THE BOX

Page 24: 10 WordPress Theme Hacks to Improve Your Site

3MENUSOUTSIDE THE BOX

Page 25: 10 WordPress Theme Hacks to Improve Your Site

3MENUSOUTSIDE THE BOX

Page 26: 10 WordPress Theme Hacks to Improve Your Site

4WP 3 CUSTOM BACKGROUND

Background control from AdminYou’ve seen it in TwentyTen … Changing background colour and even background images …But did you know you can add this function to any theme?

Page 27: 10 WordPress Theme Hacks to Improve Your Site
Page 28: 10 WordPress Theme Hacks to Improve Your Site
Page 29: 10 WordPress Theme Hacks to Improve Your Site
Page 30: 10 WordPress Theme Hacks to Improve Your Site

4WP 3 CUSTOM BACKGROUND

Add to functions.php:

add_custom_background();

Page 31: 10 WordPress Theme Hacks to Improve Your Site
Page 32: 10 WordPress Theme Hacks to Improve Your Site
Page 33: 10 WordPress Theme Hacks to Improve Your Site
Page 34: 10 WordPress Theme Hacks to Improve Your Site

4WP 3 CUSTOM BACKGROUND

Add to functions.php:

add_custom_background();

Page 35: 10 WordPress Theme Hacks to Improve Your Site

5FEATUREDIMAGES

a.k.a Post Thumbnails

The Featured Image (post thumbnail) function is so much more than just thumbnails.

I propose a name change.

Page 36: 10 WordPress Theme Hacks to Improve Your Site

5FEATUREDIMAGES

Add to functions.php:

add_theme_support( 'post-thumbnails' );

Page 37: 10 WordPress Theme Hacks to Improve Your Site

5FEATUREDIMAGES

Page 38: 10 WordPress Theme Hacks to Improve Your Site

5FEATUREDIMAGES

Page 39: 10 WordPress Theme Hacks to Improve Your Site

5FEATUREDIMAGES

Page 40: 10 WordPress Theme Hacks to Improve Your Site

5FEATUREDIMAGES

Add to template file:

<?php the_post_thumbnail(); ?>

Variations:

the_post_thumbnail('thumbnail');

the_post_thumbnail('medium');

the_post_thumbnail('large');

the_post_thumbnail(array(nnn,nnn));

Page 41: 10 WordPress Theme Hacks to Improve Your Site

5FEATUREDIMAGES

Page 42: 10 WordPress Theme Hacks to Improve Your Site
Page 43: 10 WordPress Theme Hacks to Improve Your Site
Page 44: 10 WordPress Theme Hacks to Improve Your Site
Page 45: 10 WordPress Theme Hacks to Improve Your Site
Page 46: 10 WordPress Theme Hacks to Improve Your Site

6CUSTOMPAGETEMPLATE

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.

Page 47: 10 WordPress Theme Hacks to Improve Your Site

6CUSTOMPAGETEMPLATE

Add to the top of template file:

<?php

/* Template Name: Whatever */

?>

Page 48: 10 WordPress Theme Hacks to Improve Your Site

6CUSTOMPAGETEMPLATE

Page 49: 10 WordPress Theme Hacks to Improve Your Site

6CUSTOMPAGETEMPLATE

Page 50: 10 WordPress Theme Hacks to Improve Your Site

6CUSTOMPAGETEMPLATE

Page 51: 10 WordPress Theme Hacks to Improve Your Site
Page 52: 10 WordPress Theme Hacks to Improve Your Site
Page 53: 10 WordPress Theme Hacks to Improve Your Site
Page 54: 10 WordPress Theme Hacks to Improve Your Site
Page 55: 10 WordPress Theme Hacks to Improve Your Site

7CUSTOMCATEGORYTEMPLATE

Add some Information Architecture

Custom Category Templates let you create different looks depending on what category index is displayed.

Portfolio gallery anyone?

Page 56: 10 WordPress Theme Hacks to Improve Your Site

7CUSTOMCATEGORYTEMPLATE

Create a new file with the name:

category-slug.php

or

category-ID.php

Page 57: 10 WordPress Theme Hacks to Improve Your Site

7CUSTOMCATEGORYTEMPLATE

Page 58: 10 WordPress Theme Hacks to Improve Your Site

7CUSTOMCATEGORYTEMPLATE

Page 59: 10 WordPress Theme Hacks to Improve Your Site

7CUSTOMCATEGORYTEMPLATE

Page 60: 10 WordPress Theme Hacks to Improve Your Site

7CUSTOMCATEGORYTEMPLATE

Create a new file with the name:

category-slug.php

or

category-ID.php

Page 61: 10 WordPress Theme Hacks to Improve Your Site
Page 62: 10 WordPress Theme Hacks to Improve Your Site
Page 63: 10 WordPress Theme Hacks to Improve Your Site
Page 64: 10 WordPress Theme Hacks to Improve Your Site

8CUSTOMHEADER,SIDEBARAND FOOTER

Why use just one?

Custom headers, sidebars and footers allow limitless variations.

Who says your sidebar has to be the same throughout your site?

Page 65: 10 WordPress Theme Hacks to Improve Your Site

8CUSTOMHEADER,SIDEBARAND FOOTER

Header, sidebar and footer naming:

header-custom.php

sidebar-custom.php

footer-custom.php

Where 'custom' can be anything

Page 66: 10 WordPress Theme Hacks to Improve Your Site

8CUSTOMHEADER,SIDEBARAND FOOTER

To call from template files:

<?php get_header('custom'); ?>

<?php get_sidebar('custom'); ?>

<?php get_footer('custom'); ?>

Where 'custom' is the suffix of the file

Page 67: 10 WordPress Theme Hacks to Improve Your Site

9BETTERCONTEXTLINKS

Who cares about next and previous?

Provide links to related posts right inside your post – without a plugin.

Keep ‘em coming back for more.

Page 68: 10 WordPress Theme Hacks to Improve Your Site

Seriously, who cares?

Page 69: 10 WordPress Theme Hacks to Improve Your Site

9BETTERCONTEXTLINKS

1. Create a query that pulls the two newest articles in the same category.

2. Create a conditional statement that excludes the current post.

3. Create another conditional statement that ensures there are actually two posts to display.

4. Do all this within the post loop.

Easy as

Page 70: 10 WordPress Theme Hacks to Improve Your Site

9BETTERCONTEXTLINKS

Page 71: 10 WordPress Theme Hacks to Improve Your Site

9BETTERCONTEXTLINKS

1. Go to www.designisphilosophy.com

2. Download related.php

3. Place related.php in your theme folder

4. Open single.php

5. Paste the following line of code where you want the related posts to appear:

<?php get_template_part('related'); ?>

Page 72: 10 WordPress Theme Hacks to Improve Your Site

Actual related content!

Page 73: 10 WordPress Theme Hacks to Improve Your Site
Page 74: 10 WordPress Theme Hacks to Improve Your Site

10

BRANDYOURSOCIAL LINKS

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

Page 75: 10 WordPress Theme Hacks to Improve Your Site

10

BRANDYOURSOCIAL LINKS

Not a hack – a plugin

Quick Page / Post Redirect Plugin

by Don Fischer

Get it from the WordPress plugin directory.

Page 76: 10 WordPress Theme Hacks to Improve Your Site

10

BRANDYOURSOCIAL LINKS

Page 77: 10 WordPress Theme Hacks to Improve Your Site

GETINTOUCH

Morten Rand-HendriksenCreative Director, Pink & Yellow Media

www.designisphilosophy.com

@mor10

www.pinkandyellow.com

designisphilosophy.com/facebook

Page 78: 10 WordPress Theme Hacks to Improve Your Site

Get in touch with me

Morten Rand-HendriksenOwner & Creative Director

Pink & Yellow Media

designisphilosophy.compinkandyellow.comtwitter.com/Mor10

[email protected]