Categories
Speaking Engagements WordPress as CMS

Custom Post Types – Vancouver WordPress Meetup Slides

Categories
Projects WordPress as CMS

Everybody Dance – From static to dynamic with WordPress

Everybody Dance - the new siteThis summer Vancouver Ballroom Dance Coach Elaine Carson of Everybody Dance approached us asking for help with her website. She got a site build several years ago that at the time was top-of-the-line, but in the past few years she saw a dramatic decrease in the number of visits to the site and the number of new dancers coming through her doors after finding her online.

The old Everybody Dance siteA quick look at the site and the code behind it painted an all too familiar picture that I keep seeing again and again: The site was build using tables (correct some time ago, absolutely wrong today) and was static in every sense of the word. As a result the Google rankings were stagnant, the site was hard to index and even harder to find and it was pretty much impossible to update without a lot of workarounds and fixes. I say this is an all too familiar sight because more and more clients come to us at Pink & Yellow Media with sites of just this type: Built with old software to old standards and often in a way that makes them almost impossible to update and manage. The bad news is these kinds of sites are pretty much writeoffs today and can actually be detremental to the success of a business, both online and in real life. The good news is you can always get a new dynamic site built and reinvigorate your online presence in the process. Which is exactly what we did with EverybodyDance.ca.

There were three major components to this project: First we needed to update the site to a modern look and make it dynamic so that Elaine and her staff could go in and change the content when they needed to. Secondly the site needed a dynamic calendar so current and prospective students could see what classes were available and when. Finally we needed to up the profile of the site through quality content, optimized code and good old fashioned marketing.

As with most of our small to medium scale projects we used WordPress as the base for this one. That way we could develop a sturdy theme with valid code and provide a platform from which Elaine and her staff could easily add, change and manage their own content. As a bonus WordPress has excellent search engine optimization built in, and with the addition of the All In One SEO Tag plugin this optimization reaches whole new levels. For the design we chose to go with the general red theme of the old site but brought it up to modern standards with a grey gradient wash in the back, more whitespace and a livelier look. The site also features a number of different page layouts depending on what type of content is displayed.

In addition to the site itself our new marketing manager Anny also developed a business and marketing platform for Elaine. Doing an analysis of current customer numbers, income and expenses Anny analyzed the growth potential of the business as a whole and made a whole range of recommendations to help boost student numbers and revenue. As part of this plan was a tiered Google AdWords and Facebook Ads strategy that will be implemented and monitored over the next year. This strategy aims to boost the rankings and visits to the site and is designed to help Vancouverites looking for a good dance school find Elaine and Everybody Dance. In a market with hundreds of options that’s not an easy task but with the new site and the new marketing strategy Elaine is guaranteed to see more eager dancers enter her school in the coming year.

And just for full disclosure: The reason I can say Elaine is a great dance instructor is because Angela and I have been going to her for 3 years and in that time we’ve gone from people who had no idea how to dance to someone who is at Silver 2 level in 12 different dances.

Categories
WordPress as CMS WordPress Themes

What would you want in the perfect WordPress photo theme?

After having finished a myriad of enormously time consuming projects I have decided I need to do something just for fun. So I’m going to build an advanced (and free) WordPress theme for photographers. I’ve noticed over the last couple of years that photographers really love WordPress but that the themes out there, great as they are, are quite inflexible and uniform. As a result a lot of photographers go out and buy a premium theme customized for photographers and advertised as being the greatest thing since the SLR only to realize they are just clunky and inflexible WordPress themes built on top of other clunky and inflexible free themes. So, because I have a lot of photographer friends and because I like building WordPress themes I’m going to build a rock solid WordPress theme specifically for photographers that has tons of customizability and functionality built in.

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!

Categories
Events Speaking Engagements WordPress WordPress as CMS WordPress Themes

Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks

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

Replace blog title with a linked image

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


Add WP 3.0 menus to non-WP 3.0 themes

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

Add to functions.php:

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

Add to template file:

 'primary'
	)); 
?>

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

 'Menu Name'
	)); 
?>

Highlight current page or category in menu

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

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

Custom page template in 5 lines of code

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


Add Featured Image (thumbnail) functionality to your theme

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

In functions.php:

add_theme_support( 'post-thumbnails' );

In theme file:


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

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

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

Categories
Projects WordPress as CMS

BellevueGallery.ca – A WordPress Site Showcasing Fine Art

One of our early clients as Pink & Yellow Media was a small fine arts gallery in West Vancouver called Bellevue Gallery. At the time they were looking for a website that reflected their style and sophistication and that showcased both their past, current and upcoming shows and also the individual artists represented by the gallery. In accordance with the trend at the time we built them a fancy and dynamic Flash-based website that had all the bells and whistles where moving menus, active backgrounds and an interactive experience were concerned. But that was then. Today the web consumer is no longer looking for flashy intros and moving elements – they want content. Immediately. Today’s web consumer expects a search on Google to take them straight to the content they are looking for. And to boot they want to be able to interact with the content, whether it be sending it to a friend by email, posting it on Facebook or raving about it on Twitter. Suffice it to say the art of designing Flash-based web sites is quickly fading to the bright star of dynamic CMS-based sites like those built on WordPress.

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.

Categories
News WordPress as CMS

Frugalbits.com – WordPress as a Magazine CMS

Last year I was contacted by two veterans of the publishing business with an idea for a new online magazine called “Frugalbits“. It would be a daily publication in which readers would find deals and ideas on how to be more frugal – a virtue I think we all wish we had more of. They were looking for a highly customizeable web solution for the site and had realized that the answer might be WordPress. Smart ladies.

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.


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”:

ID, 'author', true))) { ?>
	

is by

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!

Categories
Expression Web Speaking Engagements WordPress as CMS

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

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

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

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

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

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

Register Today!

Categories
Speaking Engagements WordPress as CMS

MIX10 Session and Supporting Documents


Get Microsoft Silverlight


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

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

The Unholy Quatern

The Unholy Quatern consists of 4 basic elements;

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

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

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

WordPress Code Snippets for Expression Web

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

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

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

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

Categories
News services WordPress as CMS

Design Schooled Kids – Pushing WordPress to the edge

dsk1A couple of months ago I got a tweet from Tracy Sullivan of Design Schooled Kids about creating a web site for her line of stationery for kids. It was an interesting project both because of the products themselves – stationery that teaches kids to read and write – and because it posed some unique challenges where design and development was concerned.

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

dsk3The 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

dsk2Tracy 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.

dsk4This 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.

Categories
WordPress as CMS

BCIT Class Materials

I’m teaching two classes on WordPress at BCIT Friday August 21st. Below are the key code snippets along with a zipped archive of the famous Twitter box featured on this blog and in Computer Arts Magazine.

Replace the default heading with a clickable image

Alternate image text

The get_bloginfo(); template function


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

Custom Page Template


Standard PHP Include


Insert Custom Field in Template

ID, '$key', true); ?>

Conditional Custom Field

ID, 'divName', true))) { ?>
		
ID, 'divName', true); ?>

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!

Categories
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 WordPress.tv 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 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.

Categories
WordPress WordPress as CMS

New WordPress-based Site: AnnyChih.com

AnnyChih.comTwo weekends ago my sister-in-law Anny Chih asked for some help sprucing up her WordPress blog. She wanted to apply for The Best Job in the World – the Tourism Queensland online video contest where you post a 1 minute video application to become the island caretaker of the beautiful Hamilton Island in Australia – and use the blog to showcase her talents and provide information about both herself and the islands.

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

Custom FieldsAt 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

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.