10 WordPress Theme Hacks to Improve Your Site

Preview:

DESCRIPTION

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

Citation preview

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

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.

Link

Not link (Grrr)

1REPLACE TITLE WITH A LINKED IMAGE

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

… the image …

</a>

1REPLACE TITLE WITH A LINKED IMAGE

1REPLACE TITLE WITH A LINKED IMAGE

1REPLACE TITLE WITH A LINKED IMAGE

2ENABLE WP 3 MENUS

2ENABLE WP 3 MENUS

Step 1: Add to functions.php:

register_nav_menus(

array(

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

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

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

)

);

2ENABLE WP 3 MENUS

Step 2a: Add to theme file:

<?php

wp_nav_menu(array(

'theme_location' => 'primary'

));

?>

(targets name set in functions.php)

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)

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.

3MENUSOUTSIDE THE BOX

3MENUSOUTSIDE THE BOX

3MENUSOUTSIDE THE BOX

3MENUSOUTSIDE THE BOX

3MENUSOUTSIDE THE BOX

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?

4WP 3 CUSTOM BACKGROUND

Add to functions.php:

add_custom_background();

4WP 3 CUSTOM BACKGROUND

Add to functions.php:

add_custom_background();

5FEATUREDIMAGES

a.k.a Post Thumbnails

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

I propose a name change.

5FEATUREDIMAGES

Add to functions.php:

add_theme_support( 'post-thumbnails' );

5FEATUREDIMAGES

5FEATUREDIMAGES

5FEATUREDIMAGES

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

5FEATUREDIMAGES

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.

6CUSTOMPAGETEMPLATE

Add to the top of template file:

<?php

/* Template Name: Whatever */

?>

6CUSTOMPAGETEMPLATE

6CUSTOMPAGETEMPLATE

6CUSTOMPAGETEMPLATE

7CUSTOMCATEGORYTEMPLATE

Add some Information Architecture

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

Portfolio gallery anyone?

7CUSTOMCATEGORYTEMPLATE

Create a new file with the name:

category-slug.php

or

category-ID.php

7CUSTOMCATEGORYTEMPLATE

7CUSTOMCATEGORYTEMPLATE

7CUSTOMCATEGORYTEMPLATE

7CUSTOMCATEGORYTEMPLATE

Create a new file with the name:

category-slug.php

or

category-ID.php

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?

8CUSTOMHEADER,SIDEBARAND FOOTER

Header, sidebar and footer naming:

header-custom.php

sidebar-custom.php

footer-custom.php

Where 'custom' can be anything

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

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.

Seriously, who cares?

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

9BETTERCONTEXTLINKS

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'); ?>

Actual related content!

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

10

BRANDYOURSOCIAL LINKS

Not a hack – a plugin

Quick Page / Post Redirect Plugin

by Don Fischer

Get it from the WordPress plugin directory.

10

BRANDYOURSOCIAL LINKS

GETINTOUCH

Morten Rand-HendriksenCreative Director, Pink & Yellow Media

www.designisphilosophy.com

@mor10

www.pinkandyellow.com

designisphilosophy.com/facebook

Get in touch with me

Morten Rand-HendriksenOwner & Creative Director

Pink & Yellow Media

designisphilosophy.compinkandyellow.comtwitter.com/Mor10

morten@pinkandyellow.com