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.

<div id="blog-title">
	<a href="<?php echo get_bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home">
		<img alt="<?php bloginfo('name') ?>" src="<?php echo get_bloginfo('template_url') ?>/imageFolder/imageFile.type" />
	</a>
</div>

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:

<?php 
	wp_nav_menu(array(
		 'theme_location' => '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:

<?php 
	wp_nav_menu(array(
		'name' => '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.

<?php 
 
/* Template Name: Whatever */ 
 
?>

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:

<?php the_post_thumbnail(); ?>

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.

Related posts:

1. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
2. Highlight current page in WordPress menus
3. Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?

A new site is born

After some discussions with the gallery owners it was decided a new site was needed – one that not only drove web users directly to the shows, artists or even art pieces they were looking for, but one that also allowed the gallery to communicate more directly with the visitors through a news page and social media. But most importantly we wanted to create a site the gallery could manage on their own by adding shows, artists and photo galleries and write articles about the everyday goings on in the gallery itself. The natural platform for such a site was WordPress.

Based on the original site we knew we needed a front page, an exhibitions list displaying past, current and future shows, a gallery artist page with sub-pages for each artist, a news section, an artist submissions section, a page with info about the gallery itself and finally a contact page. Since the client is an art gallery and they had a huge number of photos of art pieces we needed to find a solution that would make the artwork easy to display for the owners and easy to navigate and digest for the visitors.

The design of the site needed to stay true to the visual identity of the gallery, built over several years. To help in the design process we brought in Alexandra Oosterom from Fresh Media Designs and she turned out a clean yet stylish look for the site that fit with the parameters we outlined.

Thinking in taxonomies

The challenge when using a CMS is always to come up with rational and logical taxonomies so different elements nest within each other in a rational way. Originally we planned on setting the site up as a huge list of parent and child static pages but that became cumbersome and blocked some of the features we wanted to include. The solution was to set up a parent category called Gallery Artists with a sub category for each of the artists. Because each artist would have a gallery plus a set of info pages (Artist Statement, Biography and Curriculum Vitae) but not all artists would have all the pages we also needed to come up with a way of creating a dynamic menu to display within each artist page that let the visitor jump from page to page quickly. The result was a clever little PHP hook within one of the post templates (yes, this site has 10 different single post templates depending on what category you are viewing and what page you got there from) that queried the parent category of the post (the artist name) and then listed out all the other posts within that category as a menu. This all came together to create a simple and intuitive navigational tool for the visitor.

Using NextGEN Gallery outside the norm

One of the interesting challenges of the site was to create a dynamic gallery artists page that featured the artist name as well as a photo of an art piece and a short bio that would in turn lead to a set of dedicated pages for that individual artist. After playing around with a few different solutions we decided to use the popular NextGEN Gallery plugin as the base for the gallery artist page. This plugin removes the process of image and gallery management from the pages and posts in WordPress and puts it in its own administration area. This makes it easier to manage large ammounts of content as was the case here. The output of NextGEN Gallery is also dymanic so a change in gallery order, image description or artist bio will be reflected on all the pages where that gallery or image is embedded with one change.

We set up one gallery for each artist that was then embedded into a separate post for that artist. To display the list of all the artists on the Gallery Artists page we used the NextGEN Gallery Album function. The problem was that the Album function only points to pages, not posts. To curb this problem we had to go in and rewrite a large bulk of the sourcecode in the plugin. After the fix each artist gallery could be related to any page or post by entering the post ID number.

Related posts:

1. New WordPress based site: The Reader’s Companion
2. New WordPress-based Site: AnnyChih.com
3. Highlight Current Page or Category in WordPress 3.0 Menus

Several months and many hours of nit picking code later and Frugalbits is now finally live to the world. It’s a labour of love for me as well as the crew behind the site and it is a project I am exceedingly proud to have been a part of. So, without further ado, let me walk you through some of the interesting elements of the site:

A Carousel of Stories

Early on in the process the request came in to have a featured story carousel at the top of the front page. Unlike many other such sites the Frugalbits team didn’t want to have multiple text stories on the front page but requested instead one main story, named The Daily Deal, to be featured and then have a carousel with the latest 8 stories displayed at the top. Over the years I’ve worked with many different featured story plugins and carousels and as with pretty much every other plugin I come into contact with I’ve hated them all. For this one I decided I’d go out and find something that could be customized down to the last pixel and that ran independently of the whole WordPress plugin regime. And after a lot of searching I finally found a JavaScript based carousel I could take apart and put together exactly the way I wanted it.

The carousel requested would feature 8 stories (4 and 4) and would have a square story picture, a tagline on a translucent banner and the story title itself. In addition the coloured banner the story title would go on should change depending on the category the story belonged to. This meant I needed to create a loop in which 4 fields were queried for each story: thumbnail, tagline, category and title. It quickly became apparent that apart from the title the rest of the fields had to be customized for each story. To solve this I created 3 custom fields; thumbnail, cat and tagline, and the story editor filled out each of these taglines with the appropriate content. It worked quite well and I was satisfied that this solution would work

But. After a beta launch one of the editors brought up a point I never considered: The first entry of the carousel would always be the same as the story on the front page. And since the front page only had one story this was to put it midly somewhat redundant. Fortunately WordPress has an answer for this type of situation: offset.

<?php query_posts('posts_per_page=8&offset=1'); ?>

An explanation: The carousel is populated using the standard query_posts() function. By using the offset variable in conjuction with posts_per_page I can define how many posts the query should “skip” before starting the list. And since I just wanted to skip the first (front page) post, that value should be 1. Problem solved.

Adding an Author Box

Because Frugalbits is a magazine it has both “normal” articles and also columns written by a select group of columnists. The request was that for these columns there be a box at the top right under the title with a photo, name and a short bio for that columnist. WordPress doesn’t have a standard function to add such an author box and though there are plugins that do it they are clunky, full of garbage code and not easy to style. I chose to go hard core on this one and just write it right into the single template using a conditional custom field. The result was the nice chunk of code below which produces a nice CSS styled box with the author Gravatar, category name, author name and WordPress user bio when activated with a custom field with the name “author” and the value “true”:

<?php if((get_post_meta($post->ID, 'author', true))) { ?>
	<div id="authorbox">  
		<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>  
		<div class="authortext">  
			<h4><?php the_category(' '); ?> is by <?php the_author_posts_link(); ?></h4>  
			<p><?php the_author_description(); ?></p>  
		</div>  <!-- END #authortext -->
	</div>  <!-- END #authorbox -->
<?php } ?>

Custom templates

One of the most important features of the Frugalbits site is actually something you hardly notice: The custom templates. Depending on where you are in the site the layout changes subtly. The front page features the carousel, the single post pages have the optional author box, the category pages have only the right sidebar and show thumbnails for each story and the legal pages have an entirely different sidebar from the rest. To top it off the F Spot category has an entirely separate tempalte that looks nothing like the other ones. All this is done by using conditional statements and creating custom theme files for individual pages and categories.

Now that it’s launched I’m looking forward to hearing what people have to say about Frugalbits and it’s functions. Feel free to leave your questions and comments below and please visit the site and learn how to be frugal yourself!

Related posts:

1. Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks
2. New WordPress-based Site: AnnyChih.com
3. WordPress as CMS – The Project

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 6^th, 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!

Related posts:

1. Expression Web 2 Webcast June 5th – What do you want to know?
2. Speaking at Interactive Panel Discussion: The Right Presentation Layer for Your Solution
3. Get Microsoft Expression Products 50% off for the Holidays!

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.

Related posts:

1. Code snippets from my WordCamp presentation
2. BCIT Class Materials
3. The Unholy Quatern at Web Not War 2010 in Montreal

Well, actually the design portion was already handled by Tracy herself. The challenge in that regard lay in taking Tracy’s clean and exact designs and making them appear on the web as they did on paper. As for development the main challenge was that although this was to be an online store she wanted it to look nothing like an online store.  So basically the project consisted of taking a new site concept from a paper mock-up to a fully working website. Exactly the kind of stuff I like to do.

Taking WordPress right to the edge

The result of a lot of hard work is a website that in my view takes WordPress right to the edge of what it is capable of. Every element of the site is custom built from my basic WaveFront theme to create a look, feel and operation that in no way resembles or even hints at WordPress or a regular e-commerce CMS. That said there is no real reason why any site, WordPress blog or otherwise, should look a certain way. A CMS is after all just a HTML generator that spits out whatever you want it to, and once you have the HTML you can use CSS to display it any way you want. The true challenge here was centered around getting the e-commerce portion to look, work and feel less like a boxed e-commerce solution and more like something classy and custom even though it was built on top of the WP eCommerce plugin. So while on the back end this is a fairly standard WordPress installation with pages, a blog (upcoming) and an e-commerce component, on the outside it looks like a custom site with all the bells and whistles built from scratch. Which is exactly what both Tracy and I wanted.

Ultra-clean designs pose unique challenges

Tracy is a designer of my heart: Obsessively detailed and extremely picky. (To be honest I don’t think you can call yourself a designer if you don’t fall into these categories, but that’s just me.) Her designs looked easy enough, but the true challenge lay in matching her static pages created in InDesign to live dynamic pages on the web. With such a rigid frame to work inside all the regular cross-browser problems like padding- and margin widths, positioning, font sizes etc that we normally choose to ignore or just tweak till they fit within acceptible buffer zones were all of a sudden make-it-or-break-it points that had to be done exactly right. The most notable example was that when each page loaded, whatever page content was in the “content” section of the layout had to line up perfectly with the topmost menu item. Sure, that’s easy enough if all the content is the same, but in this case we were working with four fundamentally different types of pages: Plain text pages for general info (home, about etc), dynamic index pages for each product line consisting of a header image plus a series of thumbnails for each product, single product pages with a larger image off the top with product stats and purchase buttons on the right and info underneath and finally shopping cart pages.

This meant the site demanded entirely separate style codes for the different elements depending on the type of page (or more specifically page template) was being displayed. And all these styles had to be flexible enough to be applied to the same item in different ways depending on the current template. Normally this would be easy enough to solve by using custom page templates, but in this case we were using the WP eCommerce plugin which generated all the product indexes, single product pages and shopping carts. As a result I had to dissect the eCommerce plugin pretty much line by line to find where all these elements were generated and how to go about repositioning them. What I found was a plugin that although it looks amazing on the outside was actually quite messy behind the curtain. I won’t write any further on this topic here – suffice it to say if you want WP eCommerce to do something that’s not just basic implementation you better prepare yourself for hours of decrypting bizarre code layouts and counter intuitive solutions. More on that in a different post.

In the end I created multiple theme files for the theme itself as well as the WP eCommerce plugin that allowed for micromanaged control of all the different pages. Not an easy task, but more than doable given enough time and some good background music.

Overall I’d say DesignSchooledKids.com has been my most challenging project to date, not because of the design or development elements of the baisc site but because the WP eCommerce plugin falls short in way too many places. In the end I made it all work the way it should but that was only because I spent an enormous ammount of time fixing or all together rewriting the code in the plugin so it would behave properly. It’s a bit of a disappointment really but now that I know how all the pieces fit together I should be able to reproduce it in the future.

Visit Design Schooled Kids and check out both what WordPress can do and what Tracy has to offer.

Related posts:

1. Cool Author Box: Free WordPress Plugin
2. PinkAndYellow.com resurfaces with a new design
3. Frugalbits.com – WordPress as a Magazine CMS

Replace the default heading with a clickable image

<h1 id="blog-title">
<a href="<?php echo get_bloginfo('url') ?>/" title="<?php get_bloginfo('name') ?>" rel="home">
<img alt="Alternate image text" src="<?php echo get_bloginfo('template_url') ?>/imageFolder/imageFile.type" /></a></h1>

The get_bloginfo(); template function

<?php
 echo get_bloginfo('$show')
?>

Where $show can be name, description, url, template_url etc. Full explanation in the WordPress Codex.

Custom Page Template

<?php
/*
Template Name: Whatever
*/
?>

Standard PHP Include

<?php include ('fileName.php'); ?>

Insert Custom Field in Template

<?php echo get_post_meta($post->ID, '$key', true); ?>

Conditional Custom Field

<?php  
	if((get_post_meta($post->ID, 'divName', true))) { ?>
		<div id="divName">
			<?php echo get_post_meta($post->ID, 'divName', true); ?>		
		</div>
	<?php } 
?>

The Twitter Box

Click here to download a zipped archive of the Twitter box. Remember to change the username inside twitter.php, otherwise you’ll get my tweets on your site!

Related posts:

1. Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks

Code Snippets

The last half of the presentation centers around creating Custom Page Templates and Custom Fields for layout purposes. To help you along in your own WordPress site development, here are those code snippets ready to be cut and pasted into your templates:

Custom Page Templates in 5 lines of code

This block of code is inserted at the very top of the Custom Page Template file. To get started, simply open the page.php file, save it under a different name, paste these 5 lines of code at the top of the document, save and upload to your server. To activate the new Custom Page Template just select it from the Template menu under Attributes in the Page Editor within WordPress.

<?php /*
Template Name: Whatever 
*/ ?>

Custom Fields in one line of code

This code can be used in any template file including but not limited to page.php, any Custom Page Templates, index.php, archives.php, single.php etc etc. The code returns a string of text that matches the text inserted in the custom field. Remember to replace $key with the actual name of the custom field. You can read more about Custom Fields and how to use them in the WordPress Codex.

 <?php echo get_post_meta($post->ID, '$key', true); ?>

Custom Field that parses PHP code

This code is used to parse (interpret) PHP code inserted into custom fields. It is a bit wonky – for instance it terminates any other custom field code placed directly after it in a page – so use it with caution. Otherwise it works exactly as the code above.

<?php $boxContent = get_post_meta($post->ID, 'centerBox', true); ?> 
<?php eval('?'.'>'.$boxContent); ?>

Applications Used in the Presentation

After the presentation several people came up to me and asked what applications I used, so here is a short list:

BitNami WordPress Stack

The demo site I used in the presentation was actually installed and running locally within Windows 7. To achieve this I used an ingenious application named BitNami WordPress Stack. Once installed this application will run a fully functional version of WordPress with database entry, plug-ins, custom themes and everything else you want to throw at it right inside Windows (XP, Vista and Windows 7 supported) so you don’t have to keep uploading your files to a server or hassle through complicated XAMP installs to play around with WordPress while offline. You can even install several different WordPress and other open source CMS stacks on your computer simultaneously to further increase your productivity. I have no idea exactly how it works but BitNami works incredibly well. Just remember to set the IP address to “localhost” when you install it.
You can download the BitNami WordPress Stack here. For Mac users there is a similar application called MAMP but I know nothing about it.

Web Developer Add-On for FireFox

FireFox is my absolute favourite browser and I use it for browsing as well as in the design process. One of the main advantages of FireFox is the myriad of add-ons you can install that make web site development a lot easier. The one I use the most is the Web Developer Add-On. This small application within an application lets you see and mess with CSS, turn styles and JavaScript on and off and do tons of other stuff that makes it easier to dissect and troubleshoot buggy web pages. Combine it with the HTML Validator add-on and you have a true powerhouse in a small browser window.

Microsoft Expression Web 2

My web development platform of choice is Microsoft Expression Web 2. This new offering from Microsoft is what enables me to build custom WordPress themes and web sites like AnnyChih.com from scratch in less than 24 hours. There are many great things you can talk about with Expression Web 2 but for WordPress theme development the two main features is full PHP support, unrivaled CSS integration and Standards Based CSS generation right out of the box. If you want to know more about Expression Web 2 or want to learn how to use it you can read more on this blog or pick up a copy of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours. It’s a good read, I promise.

Related posts:

1. Code snippets from my WordCamp presentation
2. Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?
3. WordCamp Whistler Pitch: Moving Beyond the Blog – Building Web Sites with WordPress as the CMS

Her blog was running the default theme but she wanted something that reflected the contest and also her own sunny disposition. She sketched up a rough draft in PhotoShop and let me get to work on it. I set aside one day to finish the entire redesign (totally crazy) and here is the result.

WordPress as CMS

Off the top you’ll notice I switched the front page to a static one to showcase the video and some info about the contest and Anny herself. The blog portion of the site has been moved to the back end and is accessible from the main menu and also from the Recent Posts box on the bottom right hand side.

Custom Field Boxes

At the bottom of the front page there are three boxes containing from left to right info on the contest, Anny’s 4 most recent tweets and the titles of the 5 most recent posts. The three fields are populated using custom fields from within the WordPress admin area so that they can easily be changed later. In the case of the Twitter box it is populated using the technique outlined in my Create a Twitter Box in Your Sidebar tutorial.

I used this site as an example during WordCamp Whislter last weekend to demonstrate how you can use custom fields for advanced layouts. The entire talk with code examples will be posted over the weekend.

Subtle Graphic Effects

I usually spend a lot of time making sure the sites I design have compelling and interesting graphics. In the case of Design is Philosophy I took the principle to the extreme but on AnnyChih.com I focused more on subtlety. For example, the background graphic with the bubbles is separated from the header image so that if you change the size of the browser window you’ll see the two images moving independently of each other. It’s a very subtle effect but it means that even people using smaller screens see the circle graphic Anny came up with.

Within the pages and posts I’ve also added graphic elements like the glowing underlines using CSS. It’s a simple trick that makes the content look more refined than simple solid lines.

Threaded Comments

One of the major upgrades in WordPress 2.7 was the inclusion of threaded comments. By activating and styling this fucntionality the visitors to the site now have the ability to carry on conversations without being confused by the comment order. Again it’s a subtle effect that greatly enhances the experience for the visitor.

Related posts:

1. New WordPress based site: The Reader’s Companion
2. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
3. Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?

Custom Page Templates in 5 lines of code

<?php
/*
Template Name: Whatever
*/
?>

Custom Fields in one line of code

<?php echo get_post_meta($post->ID, '$key', true); ?>

Custom Field that parses PHP code

<?php $boxContent = get_post_meta($post->ID, 'centerBox', true); ?>
<?php eval('?'.'>'.$boxContent); ?>

Related posts:

1. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
2. Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?
3. WordCamp Whistler Pitch: Moving Beyond the Blog – Building Web Sites with WordPress as the CMS