Download Vidunder right here!

More customization than you’ll ever need

Vidunder (means “wonder” in Norwegian) is a Twentyten child theme that takes what Twentyten does and builds on it. There are so many customization options in this theme it’s hard to list them all but here are the highlights:

Custom colours

The colour scheme of Vidunder is by default orange. But you can change it to any colour you want. Simply go to Appearance -> Background and change the colour. This will change the background colour as well as the link colours and some other elements.

Custom logo

To change the logo go to Appearance -> Header and upload your own. The logo is 87 x 87px and if you want a transparent logo like the one you’re seeing here you need to upload a PNG of exactly that size. If you don’t care about transparency you can upload any image file and WordPress will help crop it to size for you.

Twitter updates in the header

To activate Twitter updates in the header go to Settings -> General, scroll to the bottom and enter your Twitter handle. The theme will go to Twitter, get your latest tweet and display it in the header for you.

Custom header image

Using the Appearance -> Background setting you can also upload a custom header image of your choosing. This is independent of the custom colours.

Custom Author Box

Custom Author Box and Related Posts

To display the Custom Author Box underneath single posts go to Users -> My Profile and define your name, email address, website, bio and Twitter handle (yes, Twitter handle). The author box will grab your Gravatar and display it along with your info. If you don’t have a bio defined the Custom Author Box will not show.

Related Posts

If there are two or more posts in the current category the two latest ones will be displayed under the current post. The Custom Author Box and the Related Posts box can be hidden by the viewer by clicking the Hide button in the top right corner.

Sidebars Gallore

The theme features 9 widgetized areas. In addition to the standard twentyten areas there is Custom which is a full-width area jammed up against the header. You can see it displaying the graphic ads for my books and video series here. Use it with causion. In addition there are Left and Right. Experiment at your own leisure.

And last, but not least…

Download Vidunder right here!

God Jul og Godt Nytt År!

Now go install Vidunder, mess around with the settings and get your WordPress site going for the new year!

Have your say: What would the ideal WordPress theme for photographers look like?

I’m a photographer myself, but since I don’t actually sell my photography services I have chosen not to have a dedicated site for it. Therefore I am not the ideal person to make a list of what the perfect or ideal WordPress photo theme should do in terms of functionality, customizability and integration. So instead of making a list myself only to realize I left out all the important stuff I’m asking you point blank what you want.

Go to the comments below and give me your dreams, desires and crazy ideas for what a photography WordPress theme should and could do and I’ll bundle it all up and see if I can incorporate all of, or as much as possible of it into the new theme. Think of it as a collaborative effort: You provide the ideas, I make them into reality!

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.

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.

Click here to download the free WaveFront theme from the WordPress Theme Directory.

The WaveFront theme is a free generic WordPress theme designed to replicate the looks and features of the two custom WordPress sites Stop Living in the Past and AnnyChih.com.

WaveFront provides calm yet stylish layouts customized for basic CMS functionality with several custom page templates including a no-sidebar front page (Front Page template) with three bottom boxes. The theme also has a list of hidden features and extra content that can be turned on and off by editing the template files.

For a full rundown of WaveFront’s features and customization options please visit the dedicated theme page here.

Upgrade Typograph to work under WordPress 2.8

1. Download and unzip the archive with the fixed functions.php file here.
2. Access your Typograph theme directory in your hosted WordPress installation (should be under www.yoursitename.com/wp-content/themes/Typograph).
3. Delete the old functions.php file under the Typograph theme directory.
4. Upload the new functions.php file to the Typograph theme directory.

I have tested this critical fix and it works.

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.

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

Fixing the tabbed box

One of the major issues with the original Typograph theme was an unexpected one for me: It turned out that the tabbed box was conflicting with a number of popular plug-ins including Lightbox 2 and others. When these plug-ins were installed one of two things would happen: either the plug-in wouldn’t work  or the tabbed box wouldn’t work.

After much discussion both in the original post on this blog and also in the support forums on WordPress.org it became clear that the problem was caused by two separate JavaScript conflicts: First off, the NicEdit HTML editor I used for the comments section was clashing with ceartain plug-ins. Seccondly the JQuery library used to create the tabbed box effect was impinging on other JQuery based plug-ins.

To solve this I’ve done two things: The NicEdit HTML editor for the comments is gone (so no more fancy HTML editing for now, sorry. I’m looking for a solution) and I have rebuilt the tabbed box from scratch using the MooTools library instead. Extensive testing with numerous plug-ins shows that at least as far as I know the conflicts are no longer there and everything works properly. If you do find any more conflicts, please tell me so I can fix them.

Threaded Comments

One of the really cool new features in WordPress 2.7 is threaded comments. Basically this means that when you comment on a posting you can answer other comments and your answer will appear “nested” within the comment you answered rather than on the bottom of the page. This is a very cool feature that you had to use a plug-in for in the past. Upgrading to threaded comments was quite a challenge. There is very little information about it around and it took me a while to figure it out. Luckily I came across two blogs with instructions and it is these two approaches combined that formed the basis for the threaded comments in Typograph. These were Chris Harrison’s blog (for styling) and Otto’s blog for backend code. Thanks go out to the both of them for excellent tutorials and to Otto for some extra help via e-mail.

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 } ?>