Tutorials Video Tutorials WordPress as CMS WordPress Themes

Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation

Finally, after a full week of catching up, here is the video tutorial version of my presentation at WordCamp Whistler 09 for those who were there and those who couldn’t come. The video is also available on if you’d rather watch it there. I recorded the video over the weekend and it contains the entire presentation including all my fancy slides as well as the code examples and demos. The only thing you won’t see is me waving my hands around and messing up the code like I did at the actual event ;o)

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.


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.

 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.

ID, 'centerBox', true); ?> 
'.$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 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.

WordPress WordPress as CMS

6 Must Have WordPress Plug-ins

WordPress is a powerful blogging platform and CMS that can be used for simple blogs as well as advanced websites. One of the things that makes WordPress my chosen platform for all my projects – from personal blogs to massive business websites – is the seemingly endless expandability through free 3rd party plug-ins. Over time I’ve tried many and discarded most, but some have stood the test of time and become compulsory installs in all the WordPress projects I work on.

Here is the list of Pink & Yellow approved must-have WordPress Plug-ins:

Akismet – Ninja Spam Killer

Since this blog was launched in February 2008, Akismet has caught an incredible 20,800 spam comments. At present it filters out about 100 – 200 spam comments per day. With such a high number you would think a lot of the comments are “false positives” – real comments mistaken for spam – but that’s just not the case. So far Akismet has been right 98% of the time and has saved me countless hours of sifting through garbage comments.

Akismet comes standard with WordPress. To activate it you need a account to generate an API key so your spam results can be tracked.

All In One SEO Pack – Get noticed

WordPress’ SEO is mindboggling to begin with. I’ve launched blogs that were listed on Google less than 30 minutes later without me lifting a finger! But unless you add an SEO plug-in, you have little control of how the meta data for your blog appears. Well, look no further than the All In One SEO Pack. Just like the name says this plug-in is an all-in-one solution to your problems. It allows you to define meta data such as title, description and keywords for any and all pages and posts in your blog or site independently of the actual page content. In addition it lets you set a default title, description and keywords for your blog or home page so you don’t get a pile of different stuff from all the different posts featured there. The true power of this plug-in can be seen in many of the posts on this blog where the page title (seen at the top of the browser window or browser tabs) and description is different from the title and body of the post itself. This is ideal if you want to push or customize only the most interesting or most important info to search engines for more hits.

Sociable – All the social networks in one place

A quick way to get some attention for your blog or website is by getting people to list it in social networks. However, this only happens if people either have browser applications installed or take the time to manually post your links to these sites. To make this step easier and increase the chance of getting posted you should add bookmarking buttons directly on your pages and posts. And that’s what Sociable does. This plug-in serves up a huge and expanding list of social networks with icons that can be placed at the end of every post or only on certain posts as defined by you. It is easy to manage and quite effective when implemented. Unfortunately it also clashes with OIO Publisher, a popular advertising plug-in that I use on this blog. For this reason Sociable is currently offline here at Design is Philosophy. Hopefully this will be solved shortly and I can get the tags back on my posts for some increased attention.

WordPress Automatic Upgrade

One of the great things about WordPress is that it is constantly updated and improved. Just this year alone we have seen what… 5 or 6 new releases? But while updates are great, actually performing the task of updating your blog can be a bit of a pain, especially if it is highly customized like this one is. Well fret not my fried: WordPress Automatic Upgrade is here to help. This plug-in guides you through a complete upgrade of your WordPress powered site from right inside the WordPress admin panel. Through a series of steps it lets you run backups of important files and your database, deactivates plug-ins, takes the site offline while the update is happening, downloads the latest version of WordPress, updates the application, reactivates the plug-ins and puts the site back online. The whole process takes two minutes tops. Which is far less than the manual upgrade procedure. And it keeps all your custom settings and themes intact. Stats – Keep track of your visitors from within your blog

There are hundreds of excellent site stats services like Google Analytics out there for you to use. But they all require you to go to a separate service to track your visitor activity. Stats runs stats from within your blog and lets you access them right from your dashboard. Your blog is tracked via the same API Akismet uses and by applying the same API to numerous blogs you can get stats from all of them from within any of the other ones. Very convenient. Stats tracks visits as well as page views and gives you stats on the most popular pages, search engine search words, incoming links, clicked links and a lot of other info that gives you a better idea of how your visitors are using the site. It is by no means the perfect solution, but neither is most of the other options out there. So for pure convenience it is great.

WP-Syntax – Display code as code

When you write coding tutorials it is important to not only make the code stand out visually from the rest of the text but also to help the reader understand what kind of code it is they are looking at. WP-Syntax does just that. This plug-in styles a huge list of code languages with colours, tabs and markers to make it easier to read and easier to display. I use it heavily in my tutorials and it works great once you figure out how to use it properly. WP-Syntax runs an independent style sheet so you can also customize the styles for your own site if you want. The only catch is that you have to write your posts in HTML view to avoid massive coding conflicts. But that’s a small price to pay for a professional look and better user interaction.

These are the plug-ins I always install on blogs and sites I create. If you haven’t been there before I recommend you take a look at the plug-ins page in WordPress Extend where thousands upon thousands of plug-ins for pretty much every purpose is served up free of charge.

My list is by no means a complete and I’m sure there are many other plug-ins out there that deserve some attention. If you know of any or think I’ve missed some, post them in the comments below and I’ll take a closer look.