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?

WordPress 3.0 menus simplify everything… once you understand them

One of the major improvements shipped in WordPress 3.0 was the custom menu functionality. In the past menus were restricted to either simple page or category lists, hard-coded menus stored in the theme files or cumbersome 3rd party plug-ins. No such trouble any more. Custom menus are now available from right within the WordPress admin panel, found under the Appearance tab. And even if you have an older theme that doesn’t support the new menus you can still use them in your sidebar as widgets.

I’m not going to cover how to use the menus from within the admin panel. For that I recommend you read this WordPress Codex article that explains it quite well. Instead I’m going to talk about what you can do with these menus styling wise.

Dissecting the stock menu output

To see what’s possible with these new menus let’s first take a look at the code output from the stock menus. In this example I’ve created one menu with the name “My First Menu” and added it to the site using a sidebar widget. The menu has three buttons; Home pointing to the home page, About pointing to the About page and Contact pointing to the Contact page. (To make the code easier to read I’ve removed the sidebar <ul> and <li> tags so you only see the actual menu output.)

<div class="menu-My-First-Menu-container">
	<ul id="menu-My-First-Menu" class="menu">
		<li id="menu-item-37" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-37">
			<a title="Home" href="http://mysite.com/">Home</a>
		</li>
		<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38">
			<a title="About" href="http://mysite.com/about/">About</a>
		</li>
		<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39">
			<a title="Contact" href="http://mysite.com/contact/">Contact</a>
		</li>
	</ul>
</div>

The key information for this tutorial can be found on line 4:

The first list item has an ID attached to it and then a huge array of classes. They are: “menu-item”, “menu-item-type-custom”, “current-menu-item”, “current_page_item”, “menu-item-home” and “menu-item-37″. Of these the three that matter to us are “current-menu-item”, “current_page_item” and “menu-item-home”. Using these custom classes you can create custom styles that highlight or otherwise affect only certain elements:

.current-menu-item { } targets only the menu item the visitor pressed to get to the menu. This goes for categories as well as pages.

.current-page-item { } targets only the current menu item if that menu item is pointing to a page and the visitor is on that page.

.menu-item-home { } targets only the menu item that points to the root or home page of the site.

So, to answer the question from the original artice: How do I highlight the current page in my menu? The answer is create a custom class style with the name .current-menu-item.  As a bonus this style will not only target your pages but also your category index pages and your home page. In the past you had to create separate styles for these.

Going deeper with child pages

But this is just the beginning. With the new WordPress menus you can create custom styles that target more than just pages and category indexes. It turns out the code output for these custom menus is highly dynamic and it interacts with all the content on your page whether you actually use the menus or not. The code output above was generated after clicking on the home page and thus resulted in the three classes listed above (notice those three classes are not present in the two other list items). But what if you went to a page that was a child of one of the menu pages? In the past that would mean the parent page would not be highlighted in the menu. But now it can.

The code below was grabbed from the same site as before after I opened a page for which the About page is the parent:

<li id="menu-item-38" class="menu-item menu-item-type-post_type current-page-ancestor menu-item-38">
	<a title="About" href="http://mysite.com/about/">About</a>
</li>

Look closely at the class array and you’ll find this new class: “current-page-ancestor”. This class is activated every time the visitor opens a page that has a parent page that is featured on the menu. That means you can use this class to highlight the parent in the menu. The easiest way to do this is by simply adding the new class to the style of the original .current-menu-item class:

.current-menu-item, current-page-ancestor { } targets either the menu item for the current page or the menu item for the parent page if a child page is visited.

Category highlighting for single posts

It gets even more interesting when we look at category menu items. Like in the past you can create menus that point to category archives. And you can use the .current-menu-item class to highlight the current category in the menu if you’re on the category index page. But what if you want to highlight the category (or categories) of a particular post when that post is open? Again there are custom classes for this:

<li id="menu-item-40" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-40">
	<a title="Commercials" href="http://mysite.com/category/commercial/">Commercial</a>
</li>

Here the three classes “current-post-ancestor”, “current-menu-parent” and “current-post-parent” are what matters. Either of the three will allow you to highlight the category (or categories) the current post belongs to, but they each work in different ways:

.current-post-ancestor { } targets the menu item as long as the category the menu item points at is an ancestor of the post (so regardless of whether the post is in the category or in a sub-category under the category)

.current-menu-parent { } targets the menu item if it is the parent of the menu to which the post belongs (yes, it’s confusing).

.current-post-parent { } targets the menu item only if the category is the direct parent of the post (menu item will not be highlighted if the post only belongs to a category that is a child of the category the menu item points to).

Bottom line: The style that highlights pages, categories and parents

Because of how this new menu system is set up, and because it works so well you only really need to create one custom style if you want to highlight the current page, current category, page parent and category parent in your menu:

.current-menu-item,
.current-page-ancestor,
.current-post-ancestor { }

To get more advanced you can also create separate highlighting styles depending on what type of menu item it is or what relationship it has to the page, post or index. And if you have multiple menus you can create entirely separate style sets for each of these, complete with current page, post and category highlighting. The posibilities are if not endless then at least quite extensive.

Upon first inspection the code output of the new WordPress 3.0 menu system may look quite messy but now that you see what it’s all for I think you’ll agree with me that this heralds in a whole new age of menu customization for theme developers.

If you want to see this stuff in practice head on over to the website for the 12×12 Vancovuer Photo Marathon where I’ve implemented tons of custom menu highlighting.

Related posts:

1. Highlight current page in WordPress menus
2. Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks
3. New WordPress based site: The Reader’s Companion

After designing and building the Fancy Profile Box for the Pink & Yellow Media site I published an article on how to recreate it as a cool author box in your WordPress blog. This tutorial spurred a lot of interest and I got several emails and tweets asking me to convert it to a plugin. So I did.

As of right now the virst version (0.0.1) of the Cool Author Box plugin is available for download from the WordPress plugin directory. It is pre-beta and comes without any warranty or guarantees, but I’ve tested it on 4 very different blogs and it works fine on all of those.

The Cool Author Box WordPress plugin has been submitted to the WordPress Plugin Directory and I’ll announce it once it is accepted.

Click here to download the Cool Author Box WordPress plugin

Here’s the full rundown

The Cool Author Box plugin adds a stylish author box after the content in posts and/or pages. The box displays author name, author bio, author gravatar and a link to other articles by the author.

The Cool Author Box plugin adds information about the author to the bottom of the content of posts and/or pages. The information is gathered from the profile info set inside WordPress.

Items displayed are:

• Display name of the author of the post or page
• Gravatar of the author (set at www.gravatar.com)
• Link to other posts by the same author
• Link to author’s website

To make the author box appear you need to activa the plugin and go to the Cool Author Box settings under Settings and select if the box should appear under posts, pages or both.

Related posts:

1. Build a fancy WordPress author box
2. Introducing WaveFront – a new free WordPress theme
3. Typograph – new WordPress Theme

The final result

The goal of this tutorial is to create an author box like the one you see at the top of this article. The box above is the actual output of the working code and as you can see it works quite well. The box is conditional and activated by a custom field so it will only appear when you want it to. The bio is the standard profile bio entered in the WordPress user profile area. The name is the chosen display name of the user and links to the author index for the author. The website link opens the user defined website in a new window. The Twitter link goes to the user Twitter profile. And finally the image is the user Gravatar. The Twitter link is a bit wonky – I’ll get back to that later.

If you don’t want to go through the entire tutorial and learn how this all fits together just jump to the bottom of the article and get the source code.

Building the code

We already have the baseline for the code, both HTML and CSS, from the Fancy Profile or Author Box tutorial but this is going to be a dynamic box so we need to replace the static content with WordPress functions.

Let’s start with the baseline code:

<div class="profile">
	<div class="profileText">
		<!-- Author bio goes here -->
	</div> <!-- END .profileText -->
	<div class="profileStats">
		<!-- Author photo goes here -->
		<div class="profileName">
			<!-- Author name linking to author post index goes here -->
		</div> <!-- END .profileName -->
		<div class="profileJob">
			<!-- Author info (website and Twitter handle) goes here -->
		</div> <!-- END .profileJob -->
	</div> <!-- END .profileStats -->
</div> <!-- END .profile -->

Retrieving the dynamic author elements

To generate the dynamic content we are going to use a set of standard WordPress functions. These have changed over the last year or so and as a result the ones featured in many older tutorials are now deprecated.

To get the author bio we use the_author_meta():

<?php the_author_meta('description'); ?>

To get the author Gravatar we use a custom code block that gets the user email address and retrieves the correct Gravatar based on that address:

<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>

To display the author name as a link to the author index page we use the the_author_post_link(). It’s an all-in-one solution that outputs the name with the correct link attached:

<?php the_author_posts_link(); ?>

For the links to the author website and Twitter account we use the_author_meta() again interspersed with some plain text. Note that you have to combine several functions to get the name displayed as well as the link created:

<a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br />
Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a>

A caveat: The Twitter handle is a bit of a cheat!

If you look at the last line of the last code example you’ll see that for the Twitter name I’m actually calling the AIM value (AIM being America Online Messenger). This is because the standard WordPress profile page only asks for your e-mail, website, AIM, Yahoo IM and Jabber / Google Talk information. I wasn’t aware anyone was using AIM any more and I have a feeling this is a leftover from way back so I chose to use this field to output the Twitter handle because it has the least chance of anyone actually using it. There is a way to add Twitter and other handles properly but this requires the use of plugins – something I’m not a big fan of. If you’re interested there is some information on it in the WordPress Codex.

Putting it all together

Now that we have the source code and all the correct dynamic tags it’s time to put it all together. The end result (barring any changes you decided to make on your own) should look like this:

<div class="profile">
	<div class="profileText">
		<?php the_author_meta('description'); ?>
	</div> <!-- END .profileText -->
	<div class="profileStats">
		<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
		<div class="profileName">
			<?php the_author_posts_link(); ?> 
		</div> <!-- END .profileName -->
		<div class="profileJob">
			<a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br />
									Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a>
		</div> <!-- END .profileJob -->
	</div> <!-- END .profileStats -->
</div> <!-- END .profile -->

Making it conditional

If you cut and paste the code above into your page or post template it will appear in every page or post. Which I’m pretty sure is now what you want. To make it elective you need to make a conditional statement in the code. I do this by using Custom Fields, in this case a field with the name “author” and the value “true” or “false”:

<?php if((get_post_meta($post->ID, 'author', true))) { ?>
	<!-- Code goes here -->
<?php } ?>

This small function asks “if this current post has a custom field with the name “author” that is set to “true”, do what I say”. That way your box will only appear if the custom field has been defined.

The final HTML/PHP markup

With the conditional statement in place the complete markup to be pasted into your theme file looks like this:

<?php if((get_post_meta($post->ID, 'author', true))) { ?>
	<div class="profile">
		<div class="profileText">
			<?php the_author_meta('description'); ?>
		</div> <!-- END .profileText -->
		<div class="profileStats">
			<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
			<div class="profileName">
				<?php the_author_posts_link(); ?> 
			</div> <!-- END .profileName -->
			<div class="profileJob">
				<a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br />
									Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a>
			</div> <!-- END .profileJob -->
		</div> <!-- END .profileStats -->
	</div> <!-- END .profile -->
<?php } ?>

Where to put the code

Like I said, this code has to be inserted into your theme files for the box to work. The easiest way to do this is actually to place it in a separate PHP file called something like “profile.php” and then call in from the theme files in question. That way you don’t have to edit the core theme files if you want to make a change to the box and adding it to new files means adding just one line of code.

If you placed this code (and only this code) in a file inside your theme called “profile.php” calling it from one of your core theme files is as easy as adding this one line of code:

<?php include ('<?php echo get_bloginfo('template_url') ?>/profile.php'); ?>

Where you insert it depends on where you want the box to appear in relation to your post content. If you want it to appear directly above you insert it before the the_content() function call. If you want it to appear after you insert it after and so on. Since you’re only inserting one line of code it’s easy to experiment and move it around for the best placement. And since the CSS is flexible width it will work properly pretty much regardless of the width of your post area.

The only thing to keep in mind is that the author box must be called from within the loop, otherwise it will not work.

The final CSS markup

The CSS markup for the author box is pretty much identical to the CSS in the original tutorial. I’ve just added some specifications to avoid conflicts. All you need to do is paste this into your styles.css file, get the blue background image file and place it in your theme image folder and make sure the call to the file has the correct image folder name.

/* AUTHOR BOX STYLES */
 
.profile {
	border: 1px solid #CCCCCC;
	position: relative;
}
 
.profileText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 10px;
	line-height: 1.4em;
	text-align: justify;
}
 
.profileStats {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	text-align: right;
}
 
.profileStats img {
	position: absolute;
	right: 0px;
	bottom: 0px;
}
 
.profileName {
	padding-bottom: 5px;
	padding-right: 92px;
	font-size: 1.2em;
	font-weight: bold;
	color: #2e4672;
}
 
.profileName a {
	color: #2e4672;
}
 
.profileName a:hover {
	color:#24375B;
	text-decoration: none;
}
 
.profileJob {
	font-size: 0.8em;
	padding-right: 92px;
	padding-top: 5px;
	background-image: url('{image folder}/testimonialBlue.gif'); /* Remember to set the correct image folder here */
	background-repeat: repeat-x;
	height: 45px;
	color: #FFFFFF;
	line-height: 18px;
}
 
.profileJob a {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
 
/* END AUTHOR BOX STYLES */

That’s all there is to it. Have fun adding this box to your website or blog and customizing it to fit with your theme. And if you like, drop a comment below to show it off to the world.

Related posts:

1. Cool Author Box: Free WordPress Plugin
2. Build a fancy author or profile box with Expression Web
3. Highlight Current Page or Category in WordPress 3.0 Menus

The result was ByLandSeaOrAir.com – a WordPress based site with a theme that utilizes all the tips and techniques showcased in the book. Fact is if you go in and lift out all the code and graphics from the new site you’ll see that it matches the final project in the book almost line by line.

So the site serves two purposes: To tell the world of our travels and to show that there really is no limit to what you can do once you understand the principles behind HTML and CSS. Enjoy.

Related posts:

1. New WordPress based site: The Reader’s Companion
2. My book is featured in the Canadian User Experience Blog
3. WordPress as CMS – The Project

Problem: After Automatic Update the site turns white!

The main culprit is the automatic upgrade feature included with WordPress 2.7. For a lot of users (me included), the automatic upgrade does not fully update and/or replace the necessary core files and actually ends up putting them in the wrong place. As a result the update is not completed and the database is not updated either.

The result of this is that both the public pages of the blog as well as the admin areas are replaced by white blank pages. Not exactly what you want from a simple update, right?

Solution: Delete everything and do a manual install, then a manual database update

Unfortunately if after the auto update your blog is gone, you have to do a manual upgrade. And I mean a complete manual upgrade. I’ve done this with three separate blogs now and it’s painfully obvious that for whatever reason simply replacing files does not do the job. To get things up and running again you have to fully delete your entire WordPress install from the server and then upload a fresh new version of WordPress 2.8. And that’s not all. Even after uploading a fresh version of 2.8, your site will probably still be white. To solve this you have to manually update the database by going to http://www.yoursitename.com/wp-admin/upgrade.php. Only after this is done will you have access to the front and back end.

How to safely upgrade to WordPress 2.8

This is especially important for people with blogs hosted by 1and1.com

If you do not like the prospect of potentially spending several hours banging your head against your desk while your blog disappears and your inbox fills up with emails from people telling you your blog is gone I strongly urge you to do a complete manual upgrade if you want to go to 2.8 right now. Or better yet, just wait until whatever it is that is causing this mess is fixed. The good people behind WordPress have published a great and easy to understand guide on how to manually upgrade WordPress and I suggest you follow it to the letter (including all the backup stages – trust me, you don’t want all  your work to disappear!)

I’m confident that the problems that have been reported will be ironed out by the developers in a matter of days, but until then I’m going to ignore the “Please Update Now!” warning at the top of my admin panel.

Related posts:

1. 6 Must Have WordPress Plug-ins
2. WordPress 2.7 to be released Dec. 4th
3. WordPress as CMS – The Project

When we made the website we had three main goals in mind:

1. Strong search engine presence (a.k.a. SEO a.k.a. Search Engine Optimization)
2. Striking appearance – no matter what people say, having a website that looks good increases the chances of people actually visiting and reading what’s on it
3. Harness the power of social media

Search Engine Optimization is Snake Oil – Just use WordPress and you’re good to go!

The first point was a simple one. As I’ve said before and will repeat here, using WordPress as the base for your site pretty much guarantees good and relevant SEO right out of the box. And when coupled with the All-In-One SEO Pack plugin it is a veritable SEO powerhouse. The goal was to get the site to the top of Google searches for “best job in the world” and “vancouver” and that was achieved with minimal effort. I have to stress here that we did not do any SEO tricks or link pimping or anything along those lines: The site ranking is solely based on good coding and well written copy.

Design with the target audience in mind and people will flock to your site

The second point is always where people get stuck. And I’m no exception. But fortunately for me Anny had a very specific look in mind and with that and some of her sketches as a base it wasn’t all that hard to come up with an overall look. You can read more about the design process in this earlier post. What’s important to note here is that the entire site design was built around quick load times, semantic code and easy editability. It was built on the Typograph core and uses clean text for all its functions. I also spent a lot of time organizing the layout in such a way that it would be easy to understand and navigate for the visitors. At the end I was so happy with the overall design that I used the root of it to design my newest project StopLivingInThePast.com.

Twitter – when used correctly – can be a powerful tool

The third and final point was my first real experiment with social media. I added a Twitter box to my sidebar a while ago and it has generated both interest and a lot of followers but I never really sat down and tried to use Twitter actively to gather interest for anything (basically because I never had anything I wanted to gather interest for). With the creation of AnnyChih.com Anny and I discussed ways to build interest for her site and her application and Twitter seemed an obvious addition. So with her handle @AnnyChih she started Tweeting actively, at first by mooching off my followers and then quickly expanding to other IslandReefJob applicants and so on and so forth. And in a week or so without any deliberate campaign to build numbers she had gained a high number of followers that were actually interested in what she had to say.

In addition Anny went beyond Twitter to interact with other applicants on sites dedicated to the job search and was able to build quite a following there as well. The trick on both Twitter, in forums and in blog comments was to present a mix of funny commentary, helpful advice and information. And by providing more than just blatant self promotion and random noise she built a solid following over just a few weeks.

Just how solid didn’t really become apparent to us until the news broke earlier today that she had been shortlisted. In a matter of minutes she was getting Tweets and comments of support from all over the place and TV and radio stations were calling her for interviews. In short order she was featured on CBCs The National, Virgin Radio’s The Rush, ABC Brisbane’s All-Day Breakfast and the Afternoon Buzz on Talk 1410AM largely because the Twitter community was able to get the word out.

So what should you get out of this long self-congratulating piece? That WordPress is a great place to start if you want your site to not only work but to get noticed, that by spending some time considering your target audience and designing your sites around them you can build a larger audience and that social media, when used correctly, can greatly enhance your brand and your reach.

Now go vote!

Finally I’d just like to extend my heartfelt congratulations to Anny and ask instruct everyone to vote now and vote often (you can vote once per day from as many email addresses as you can get a hold of).

Related posts:

1. Social Media: Revolution or the End of Objective Reason?
2. Social Media Killed Google Wave
3. Mastering Social Media Part 1: Treat Your Blog Like a TV Show

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?

In my original pitch I asked for a one hour session. But unbeknownst to me Tris Hussey (who is looking for your input on favourite plug-ins etc), another WordPress as CMS expert, had pitched almost the exact same topic to the event. Rather than pick sides and give one of us the full hour, it was decided that we would each get a 30 minute session so we both get our foot in and the attendees can get two different perspectives. Which is a great idea: This is by no means an exact science and while I’m sure Tris and my approaches compliment each other they will be vastly different. And that “double perspective” will give the listeners a far broader understanding of the subject matter than if one of us were to do the session by ourselves.

So what should I talk about?

With the reduced time comes the inevitable question: What should I talk about? Those who know me know that I will take up whatever time I am given and I’ll always have plenty more to say. In the case of WordPress as CMS I could probably hold a week long seminar and still only cover the basics of what you can do. In my original pitch I outlined a series of topics that form the foundation of this technique. These include basic WordPress anatomy, theme and CSS hacks, taxonomy, custom templates, custom themes and a discussion of why WordPress is the ideal platform for “regular” web sites.

I could talk at length on all of these topics but I think the attendees would be better served with a broader approach that covers the basics of several of them for further study later on.

What do you want to learn?

Rather than set my talk in stone right now, I’d like to hear from the people who are actually going to the event and let them shape the session. So what do you want me to talk about? What do you think you would have the most use of? WordPress anatomy? Custom fields as layout tools? Theme hacks? Taxonomy? The choice is yours. Here is a preliminary break down of the session and then I’ll let you, the listener, decide the final result:

Working Title: WordPress as CMS – Building the Non-Blog WordPress Site of the Future

Suggested topics covered:

WordPress Anatomy

What does WordPress really do? How does the stuff you create in the back-end end up on the pages and posts? What is the difference between posts, pages, indexes and all the other options? And how are these things connected?

The Basic Hack: Custom Templates

Want more control of the appearance of your pages? Custom templates give you complete control with minimum effort. Learn some basic theme hacks and understand the template structure.

Custom Fields Can Be Used for Anything!

One of the most powerfull and underused functions in WordPress is the Custom Fields. By understanding how they work you can use them as a layout tool to create menus, boxes and other elements that will make your site stand out.

Make the WordPress Taxonomy Work for You

The WordPress taxonomy (hierarchial structure, i.e. categories, sub categories etc) was built for blogging. But if you reframe your thinking of what blogging really is you’ll see that the same taxonomy combined with page parenting gives you a solid base for non-blog taxonomy and dynamic page creation.

That’s what I have. Now it’s up to you! Drop your thoughts in the comments below and together we’ll create a session customized to the people who are there to learn.

Related posts:

1. WordCamp Whistler Pitch: Moving Beyond the Blog – Building Web Sites with WordPress as the CMS
2. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
3. Code snippets from my WordCamp presentation

Understanding custom fields

You can add custom fields to any WordPress post or page through the custom fields interface found right underneath the main text area. The custom field contains two elements; a name and a value. These are pretty self explanatory: When the template asks the server for the name, the value is returned. But this also means that unless the template actually asks for the field by name, nothing is returned. An example to show how this works in real life:

A web site for an art gallery requires each artist page to have a series of sub-pages containing an artists statement, bio, CV and image gallery. Although adding an unordered list directly to the text body of the page would work, it would require the addition of style elements and tags – something WordPress doesn’t like very much. Not to mention it’s also cumbersome and messy. A better solution is to place all the style tags in the template and then just feed the menu in the form of a standard unordered list from a custom field, in this case with the name “artistMenu”. Then all that’s left is to get the template to call for the info in the custom field like this:

<div id="artistMenu">
	<?php echo get_post_meta($post->ID, "artistMenu", true); ?>		
</div>

When the template is opened, the content of the custom field named “artistMenu” is placed as a string inside the artistMenu div. (To understand exactly how the php code works you can read about the get_post_meta template tag in the WordPress Codex.)

Making the custom fields conditional

The problem with the example above is that even if there is no custom field defined, the div is still placed in the page taking up space. Not a big problem when it’s just a horizontal menu but if you use a custom field to populate something larger, like an image gallery or a text box, it will look weird if the box is left empty. One way of avoiding this is to make two separate templates, one with the custom field code and one without, but that can quickly become complicated. And the whole idea here is to make things simpler, not more complicated. A better way is to make the code and the call for the custom field conditional on whether the custom field has been defined in the first place. This can be done with a simple if statement:

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

Using conditional custom fields as design elements

Now for the really cool stuff: Because we can make custom fields conditional, and because we can populate them with pretty much anything, we can use them not only to add images or text but also to add all new design and layout elements. In the site I built for Sablok & Salbok Notaries Public I used this technique to create a header element that only appears if the custom field is populated by an image or text. The actual appearance of the element is controlled by standard CSS. You can see this layout element as the blue horizontal area in the image and on the front page of the site.

In this particular example the custom field can be populated by an image. Rather than forcing the user to input all the image code in the custom field manually I added some extra code in the template that gathers the width and height of the image and creates the proper element code. As a result all the user has to do is provide the URL for the image. There is also an or condition in the if statement so that the custom field code in the template is triggered either when an image field or a text field is defined:

<?php  if((get_post_meta($post->ID, "image", true)) || (get_post_meta($post->ID, "text", true))) { ?>
	<div id="subheader">
 
		<?php if(get_post_meta($post->ID, "image", true)) {
		$size = getimagesize(get_post_meta($post->ID, "image", true)); ?>
		<img src="<?php echo get_post_meta($post->ID, "image", true); ?>" alt="" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" />
		<?php } ?>
 
		<?php if(get_post_meta($post->ID, "text", true)) {?>
		<?php echo get_post_meta($post->ID, "text", true); ?>
		<?php } ?>
 
	</div> <!-- END SUBHEADER -->
<?php } ?>

Related posts:

1. Code snippets from my WordCamp presentation
2. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
3. Build a fancy WordPress author box