Aug 12
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.
<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.
Apr 28
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.
Apr 05
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.
<?php query_posts('posts_per_page=8&offset=1'); ?>An explanation: The carousel is populated using the standard query_posts() function. By using the offset variable in conjuction with posts_per_page I can define how many posts the query should “skip” before starting the list. And since I just wanted to skip the first (front page) post, that value should be 1. Problem solved.
Adding an Author Box
Because Frugalbits is a magazine it has both “normal” articles and also columns written by a select group of columnists. The request was that for these columns there be a box at the top right under the title with a photo, name and a short bio for that columnist. WordPress doesn’t have a standard function to add such an author box and though there are plugins that do it they are clunky, full of garbage code and not easy to style. I chose to go hard core on this one and just write it right into the single template using a conditional custom field. The result was the nice chunk of code below which produces a nice CSS styled box with the author Gravatar, category name, author name and WordPress user bio when activated with a custom field with the name “author” and the value “true”:
<?php if((get_post_meta($post->ID, 'author', true))) { ?> <div id="authorbox"> <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?> <div class="authortext"> <h4><?php the_category(' '); ?> is by <?php the_author_posts_link(); ?></h4> <p><?php the_author_description(); ?></p> </div> <!-- END #authortext --> </div> <!-- END #authorbox --> <?php } ?>
Custom templates
One of the most important features of the Frugalbits site is actually something you hardly notice: The custom templates. Depending on where you are in the site the layout changes subtly. The front page features the carousel, the single post pages have the optional author box, the category pages have only the right sidebar and show thumbnails for each story and the legal pages have an entirely different sidebar from the rest. To top it off the F Spot category has an entirely separate tempalte that looks nothing like the other ones. All this is done by using conditional statements and creating custom theme files for individual pages and categories.
Now that it’s launched I’m looking forward to hearing what people have to say about Frugalbits and it’s functions. Feel free to leave your questions and comments below and please visit the site and learn how to be frugal yourself!
Mar 23
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.
Mar 14
MIX10 Session and Supporting Documents
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;
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.
