Categories
Speaking Engagements Tutorials WordPress

WordCamp Victoria Presentation: 10 Theme Hacks to Improve Your Site


Above is the slide deck for my WordCamp Victoria presentation entitled “10 WordPress Theme Hacks to Improve Your Site”. Unlike my regular presentation this one is entirely slides based which means if you just read the slides, you’ll get the gist of it. Below are all my code examples along with links to further information, example sites and related tutorials to give you some context. Knock yourself out!

Replace Site Title with a Linked Image

This is my number one pet peeve. When people visit a site they intuitively expect the logo or header image to be a link back to the home page, and it should be. When it’s not they (and I) get annoyed. Making your header image link back to your home page is not hard. All you have to do is wrap the header image code in a simple anchor tag that leads back to your root URL and you’re good to go. For simplicity the code looks like this:


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

… the image code …



For a more in-depth explanation check out the tutorial Twentyten Header Image as Home Button.

Enable WordPress 3 Custom Menus

The WordPress 3 custom menu function is built into the TwentyTen theme and most newer themes, but older themes usually just have hard-coded menus. Adding WP 3 custom menus to a theme is not hard though. It requires a function call in the functions.php file and a template tag in the template file of your choice (usually header.php and/or footer.php). Here’s that code:

In functions.php:


register_nav_menus(
        array(
                'menuName' =>__('Menu Name'),
                ' primary' =>__('Primary Menu'),
                '2ndMenu' =>__('2nd Menu'),
        )
);

Where menuName is the identifying slug for WordPress and Menu Name is the actual displayed name in WordPress Admin.

To display a menu you can either call it based on the slug:


<?php 
        wp_nav_menu(array(
                'theme_location' => 'primary'
        )); 
?>

… or the name defined in the Menus admin area:


<?php 
        wp_nav_menu(array(
                 'name' => 'Menu Name'
        )); 
?>

Menus Outside the Box

Menus don’t have to be regular boring one or two word one-line elements. Because WordPress allows HTML in the Navigation Label you can add more interesting designs like we did on the 12×12 Vancouver Photo Marathon site. On this site we added a simple span tag around the text that displays under the menu heading and then used CSS to change how it displays. Sorry, no code examples – it’s just straight up CSS and out of context it makes no sense.

WordPress 3 Custom Background Images and Colours

The TwentyTen theme introduced a very cool custom background function built right into the admin interface (under Appearance -> Background). This is not a function found in TwentyTen but a core function found in WordPress. That means you can activate it in any theme. All you have to do is call it from the functions.php file:


add_custom_background();

The function injects CSS style code right into the HTML pages which means it’ll override your theme CSS file no matter what. That in turn is why it’ll work on any theme as long as you run WordPress 3.0 or higher.

Adding Featured Image (post-thumbnail) Functionality

Featured images are great, if you know how to use them. They also do way more than just displaying thumbnails (which is why I think the function should be renamed).

To activate the function add the following code to your functions.php file:


add_theme_support( 'post-thumbnails' );

This will add the function to you Admin panel. To display the featured image (in the size you want) in your theme use one of the following functions:


<?php the_post_thumbnail(); ?>

Variations:


<?php the_post_thumbnail('thumbnail'); ?>




Custom Page Templates

Custom page templates allow you to individualize the look of different pages on your site. They can be used to create custom front pages, differentiated legal pages or even custom query pages that pull in posts from multiple categories.

A custom page template is basically a regular page template with a commented out tag at the very top that looks like this:


<?php 

/* Template Name: Whatever */ 

?>

Custom Category Templates

Custom category templates can be used to create differentiated category index sections in a site. Some good examples are the Reeltime Videoworks show reel page and testimonials page and Design Schooled Kids’ press page.

A custom category template can be made in one of two ways. Either create a file with the name category-ID.php where ID is the ID number of the category or category-slug.php where slug is the slug for the category. These files will automatically become the category tempaltes for the defined categories.

Custom Header, Sidebar and Footer

You can also create custom headers, sidebars and footers sort of the same way. You make and call them the same way. For example if you want a custom header you create a new header file called header-custom.php and then call it using the standard get_header() function with a small difference:


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

where ‘custom’ can be anything.

Better Context Links

One of the things that bug me about standard WordPress themes is that they display links to the next and previous posts in the single post view. These links don’t really provide a lot of value. Instead you should be displaying the two latest posts from the current category. So I made a small theme add-in you can dump into your theme for some better context. The add-in adds links to the two latest posts in the current category including the title, publishing date and short description. To install it download the related.php file here (right-click and choose “Save As” – it’s a straight up php file), add it to your theme directory and call it using the following code in your single.php file:


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

That’s all you have to do.

Categories
Speaking Engagements

Meet me at WordCamp Victoria

One of the great things about working with WordPress is the huge community that surrounds the platform. Everywhere you look there are people using, talking about, teaching, learning, reading and writing about WordPress and the community is open to anyone and everyone.

At the core of the WordPress community lies the events that allow WordPressers to meet and interact. And paramount among them are the WordCamps – independently organized and hosted WordPress conferences that are open to anyone wanting to meet other WordPressers and learn more about the platform.

On January 22nd just such a conference, WordCamp Victoria, is happening in, well, Victoria – the fair capital of our province. I will be there, both to give a talk, help out at the Genius Bar and connect with other attendees, and I urge you to come too.

Before I rattle on, go to the WordCamp Victoria site and sign up. As of this writing there are still seats available.

My Talk: 10 WordPress Theme Hacks to Improve Your Site

I’m going to be giving a talk entitled “10 WordPress Theme Hacks to Improve Your Site” that will feature, well, 10 WordPress theme hacks that can improve your site. The list of the actual 10 hacks I will be presenting is not complete yet so if you have any requests or suggestions feel free to leave them in the comments below and I’ll see if I can add them.

The general premise of my talk will be to provide 10 code blocks that add features or elements to your site that will improve some aspect of it. I’ll make the code blocks as stand-alone as possible and as always they will all be made available right here on Design is Philosophy so people in the crowd and at home can play along.

My presentation this time will be mainly slides based rather than the regular live code show I do. This is a bit of an experiment but I think you’ll find it’s easier to follow and easier to digest later (the slides will also be made available online post talk). But don’t worry, there will be plenty of explanation of how to include the code blocks and what they do.

Why you should go

If you’ve been to a WordCamp before you already know why you should go. If this is your first time and you’re not sure if this event is right for you, consider these statements:

  • I don’t know anything about WordPress
  • I need to know more about WordPress
  • I’m a blogger
  • I own a static HTML website but it’s not doing anything for me
  • I want to upgrade my website
  • I use WordPress all the time
  • I know everything there is to know about WordPress
  • I am human

If any of these statements apply to you, you will get something out of WordCamp and you should go. WordCamp is the perfect place to meet up with other peole in your situation, learn new things, refine your knowledge and make new friends. They are lively, interactive and full of people just like you so don’t be intimidated. And do not make the mistake of thinking that you won’t fit in: WordPress is a platform used by all kinds of people from all walks of life. It’s called “Open Source” for a reason my friend.

Talks I’m looking forward to

All the talks at WordCamp Victoria look great, but there are a few in particular I’m looking forward to:

Charles Frees-Melvin

Topic: Advanced Theming: Teaching Your Theme to Beat WordPress with a Stick

This sounds right up my alley, and I’m a sucker for good titles.

George Plumley

Topic: The Ten Most Forgettable Things About WordPress

As a WordPress educator I need to know everythign there is to know, and I’m sure I’ve missed some stuff so hopefully George can re-remind me of all the nuggest I’ve lost.

Alex Blackie

Topic: Building a Portfolio With Custom Post Types

Custom post types are interesting and will become even more interesting with the release of WordPress 3.1 so this talk is a definite must for theme developers.

Rebecca Bollwitt

Topic: Securing WordPress & Cleaning Up Hacks

Rebecca’s blog Miss604.com got hacked and downed by a DDoS attack last year and subsequently thousands of other blogs on several major hosts fell victim to a range of code insertion attacks. Security is an ongoing problem for anyone with a dynamic website and Rebecca’s experiences and solutions are vital for any WordPress site owner.

Categories
Events Speaking Engagements WordPress WordPress as CMS WordPress Themes

Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks

Below you’ll find the code examples for my Vancouver WordPress Meetup group talk Simple Yet Powerful WordPress Hacks held on August 12, 2010. This article will be expanded after the talk but for now it consists only of the code examples themselves.

Replace blog title with a linked image

One of my top 10 pet peeves is sites where you can’t click the logo to get to the home page but have to click the “Home” button. This code block can be inserted in the header.php file and it will insert an image (logo) that links back to the home page and also has the alternate text and link title set to the name of the site.


Add WP 3.0 menus to non-WP 3.0 themes

To add WP 3.0 menus to themes that were built before the new version of WordPress or don’t have them built in you need to activate the menu function in functions.php and then add a call to the menu in your template file.

Add to functions.php:

register_nav_menus(
	array(
		'menuName' =>__('Menu Name'),
		'2ndMenu' =>__('2nd Menu'),
	)
);

Add to template file:

 'primary'
	)); 
?>

Note that the theme_location call points to the name of the menu as set in functions.php. To target the menu name set inside WordPress use this code instead:

 'Menu Name'
	)); 
?>

Highlight current page or category in menu

I’ve already written an extensive article on this subject that can be found here. The core of the CSS code is this style:

.current-menu-item,
.current-page-ancestor,
.current-post-ancestor {
	... style info goes here ...
}

Custom page template in 5 lines of code

To create a custom page template simply insert the following 5 lines of code at the top of your template file and give it a name other than “whatever”. Once saved (as something other than page.php) it will appear as one of your template options inside WordPress.


Add Featured Image (thumbnail) functionality to your theme

To activate the Featured Image panel in WordPress admin an enable the function you need to add a small piece of code to the functions.php file. Once this is done and Featured Images have been defined you can call them from within any template file using one of the calls below.

In functions.php:

add_theme_support( 'post-thumbnails' );

In theme file:


The above call will produce the thumbnail in the size defined inside WordPress admin under Settings -> Media. To call a different size use one of the following:

the_post_thumbnail('thumbnail');
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail(array(nnn,nnn));

For the last one replace ‘nnn’ with any pixel width and height.

Categories
Events Speaking Engagements

The Unholy Quatern at Web Not War 2010 in Montreal

UPDATE: The Unholy Quatern session I did at Web Not War 2010 was loosely based on an article I wrote for the Microsoft Expression Newsletter last year. To get a more in-depth walk-through of my work process and some more code examples etc take a look at the original article found here.

After 8 years in Canada I finally find myself in the mythical French portion of the country, more specifically the Beaumont district in Montreal, Quebec. Why? To talk WordPress and Expression Web to the attendees at the Web Not War conference. I’ll be posting more on this later but for now here are the vital links for my talk. The slides will be here shortly. Check back for updates.

Links

WordPress template tools for Expression web

WordPress itself

The WordPress Codex

WordPress on your computer: Web Platform Installer or BitNami

Sync your files: Live Mesh

Categories
Expression Web Speaking Engagements WordPress as CMS

Webcast: An Intimate and Enlightening View into Microsoft Expression Web 3

I’m doing a 1 hour live webcast with Microsoft Canada demonstrating advanced WordPress customization with Expression Web 3 on April 6th, and you are welcome to join. It will be an extended version of my MIX10 session with more demos and more time for questions. All you have to do to participate is register. Full writeup below:

REGISTER
Invitation Code: 0781DA
Tuesday, April 6th, 2010
Start Time: 11:00AM PST (02:00 PM EST)

Webcast Duration: 60 min
Questions about these events?
Call us at 1-888-789-7770

A follow up to Paul Laberge’s “101” webcast, Expression Web MVP and WordPress hacker Morten Rand-Hendriksen takes you through an intimate and enlightening look into his day-to-day work process. He specializes in building solid standards-based websites on the WordPress platform using Microsoft web technologies and Expression Web. The session takes you through real-life examples of customer projects and pulls back the curtain on a work process that employs what Morten jokingly refers to as the “Unholy Quatern” – Microsoft’s Expression Web 3, Web Platform Installer and Mesh combined with the open-source publishing platform WordPress. Combining these four technologies Morten has developed a process in which rapid site debugging, prototyping and implementation becomes a reality.

Learn the inner workings of WordPress and how to use its theme engine to build pretty much any website you can think of using Expression Web 3 and see how using simple web technologies like WPI and Mesh can make your life as a CMS dev/igner much easier.

Register Today!

Categories
Speaking Engagements WordPress as CMS

MIX10 Session and Supporting Documents


Get Microsoft Silverlight


Above is my MIX10 session A Case Study: Rapid WordPress Design and Prototyping with Expression Web 3 in its entirety in Silverlight video format. It can be blown up to full screen and I highly recommend it as there are code examples.

In the session I referenced a bunch of different technologies and applications I use on a day-to-day basis. For those in attendance and those watching on the web here is the exhaustive list of links and tools for you to play around with. I will post a link to the video version of my session when it becomes available approximately 24 hours after the session itself.

The Unholy Quatern

The Unholy Quatern consists of 4 basic elements;

  1. WordPress
  2. Microsoft Expression Web 3
  3. Microsoft Web Platform Installer
  4. Live Mesh

If you are only installing WordPress on your local computer there is no need to get WordPress from the original source – the Web Platform Installer will handle the installation for you. The same applies if you are using a different CMS under the WPI.

NOTE: If you are working in Windows 7 it will be necessary to run Expression Web 3 as Administrator if you want to set up the WPI version of WordPress as a site. Otherwise Expression Web 3 will not have permission to write to the folder and you’ll be banging your head against a wall for hours trying to figure out why it’s not working.

WordPress Code Snippets for Expression Web

I have created a downloadable version of the WordPress code snippets used in the session. They are availalbe – and frequently updated – at the Expression Gallery. The snippets work with any version of Expression Web and are quite literally plug-and-play. The current version of the WordPress Template Tools comes with a special snippet that lets you create new snippets. Snippets in the current version are:

  • Custom Page Template tag
  • Custom Field tag
  • PHP parsing Custom Field
  • Conditional Custom Field
  • Image as Header
  • Get blog/site URL
  • Get current theme URL
  • Get blog/site name
  • Get blog description
  • PHP include

Most of these are plug-and-play and those that are not are fairly easy to understand. They are all 100% standards-based and use current and up-to-date WordPress template tags.

I update the WordPress Template Tools on a random basis whenever I feel there is a new tag that will be useful for other people. If you have an idea for a template tag not currently in the list feel free to contact me with the suggestion.

Categories
Events Expression Web Speaking Engagements WordPress Themes

MIX10 Proposal: I Reject Your Stylesheet and Substitute My Own

I reject your stylesheet and substitute my own t-shirt

Ever since I was invited to attend Microsoft’s web design and development conference MIX in 2008 I’ve been itching to submit my own session proposal and get on the podium to share with other developers and designers my experiences working with Expression Web and WordPress. The plan was to submit a proposal for MIX09 but life and work intervened and made it impossible for me to even attend (truth be told I was going to a wedding in Hawaii the same week so I really shouldn’t complain). But this year March is wide open and I’ve jumped in head first and submitted a talk with the modest title “I Reject Your Stylesheet And Substitute My Own – Rapid site design and prototyping with Expression Web 3 and WordPress” to the OpenCall portion of MIX10. And now I need your help to get my proposal accepted so I can get in and do my thing.

OpenCall is literally a popularity contest: The ten most voted on proposals get a slot at the conference and the rest are left by the wayside. As far as I can tell my proposal is the only one focusing on Expression Web (at least it’s the only one that shows up on a search) and also the only one talking about WordPress so my hope is that both those interested in the web authoring application and those interested in WordPress specifically or open-source or CMS design in general will find it compelling and want to vote for it. Only time will tell.

To vote for I Reject Your Stylesheet and Substitute My Own visit the OpenCall ballot page found here and click the Add session to ballot button. You can vote for a total of 5 sessions with one ballot. The rest of the sessions can be found here. Once you’re done voting, spread the word and get all your friends to vote for me as well. Voting ends on the 15th of January so there’s little time but I am certain with your help my name will appear on the roster alongside the many other fantastic speakers at MIX10.

Oh, and if you’re interested the extremely limited edition I Reject Your Stylesheet and Substitute My Own T-shirts are available in green, blue, tan and black sizes S, M and L (Fruit of the Loom, heavy cotton) for $20. Contact me with your name and mailing address and I’ll wrap one up and send it to you.