10 wordpress theme hacks to improve your site
DESCRIPTION
Morten Rand-Hendriksen's WordCamp Victoria presentation showcasing 10 easy theme hacks that can improve any WordPress site.TRANSCRIPT
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