I also set up a one-page website recently for my good friend Kris of McDermaid Design. This was a little more complex as I used Wordpress as a CMS so he could update the page himself, but still a very cost-effective way of setting up a site.

Wizard Smoke from Salazar on Vimeo.

The script working on the site I created for Working Group. Each image caption is pulled in from the caption's set in NG Gallery.

I also used it on my own website on my portfolio pages - here each image is represented with a clickable dot. This could easily be changed for a number or thumbnail image if desired.

Installation and setup

Click here to download a package containing all the necessary files. There is some PHP code you’ll need to insert into your Wordpress page template (usually page.php), some to go into your header.php, and images, a stylesheet and Javascript file for upload into your theme’s folder.

Just go into the NG Gallery plugin’s ‘Manage Gallery’ page, select a gallery, and set the ‘Page Link’ to your desired page. You may also need to tweak the CSS file depending on your gallery’s image dimensions.

Be sure to set the "Page link to:" field to your desired page.

This package includes Javascript code from Dynamic Drive’s Featured Content Slider.

I continue to use Wordpress as my primary choice for a website CMS. Occasionally, a website’s needs exceed the core functionality. Luckily it’s core functions are written with PHP so extending them is an easy job (unlike ExpressionEngine… cough!). I’m going to list some custom functions I’ve created on this blog to help you fellow Wordpressers out there.

Today I needed use the ‘wp_list_pages’ function, but to only list the tree (ie. itself and it’s children) of a certain post. The existing function has arguments for ‘include’, ‘exclude’, ‘exclude_tree’ – but ‘include_tree’ is missing. Therefore I created my own function to do this.

Usage:

Place this inside /wp-content/themes/<theme folder>/functions.php:

<?php

function js_list_pages_include_tree($args){
$defaults = array(
'depth' => 0, 'show_date' => '',
'date_format' => get_option('date_format'),
'child_of' => 0, 'exclude' => '',
'title_li' => __('Pages'), 'echo' => 1,
'authors' => '', 'sort_column' => 'menu_order, post_title',
'link_before' => '', 'link_after' => '',
'include_tree' => 0
);

$r = wp_parse_args( $args, $defaults );

// Print the parent page
$pages = get_pages('title_li=&include='.$r['include_tree'].'&depth=0');

// Print the children
foreach ($pages as $pagg){
echo '<li><a href="'.get_page_link($pagg->ID).'">'. $pagg->post_title.'</a>';
echo "<ul>";
wp_list_pages('title_li=&child_of='.$r['include_tree'].'&depth='.($r['depth']-1));
echo "</ul>";
echo '</li>';
}

}

?>

And place this inside your template PHP (amending the ‘include_tree’ argument for the post tree you wish to display:

<?php js_list_pages_include_tree('include_tree=10'); ?>

Leave me a comment if you find any bugs.

(incidently, this post uses the SyntaxHighlighter Evolved plugin to display the pretty PHP code)

Old website - homepage

Old website - thumbnail menu

Old website - project page

Five years on, and I’m pleased with how the website has aged. By keeping the layout simple and refraining from using stylistic cues, it doesn’t look outdated. However the company wished to refresh the design, a cosmetic facelift if you like.

New website - homepage

The layout was simplified, some extraneous pages removed, and thumbnail image menus reduced to simple text navigation. The typography was simplified to Akzidenz-Grotesk for titles (via the excellent Cufon method) and Arial for body copy. The result is a simple, to-the-point website which lets the work speak for itself.

New website - project page

By converting the website from Flash to HTML, the company have already seen increased traffic through improved SEO. Building with Wordpress means the company staff can easily update project text and manage the images using the NextGen Gallery plugin.

New website - project page

After quickly getting tired of copying settings across manually, I developed a tool which will output a Lightroom or Photoshop preset file based on the metadata found for that Flickr photo. Simply enter the full URL of the photo into the tool below and you’re away!

It is limited to photos which have metadata publicly available. Also custom point tone curve information isn’t converted- as the Flickr metadata page unfortunately doesn’t show all it.

Let me know if you have any suggestions or find any bugs. If you find it useful and have a website, please link to this blog post.

http://www.flickr.com/photos/oliviaaboone/3413132355/

http://www.flickr.com/photos/darad/3647545934/

http://www.flickr.com/photos/mrbokeh/3431041361/

http://www.flickr.com/photos/luke_photos/3253547711/

http://www.flickr.com/photos/andrewfphoto/3083636655/

http://www.flickr.com/photos/jup3nep/3183738239/

http://www.flickr.com/photos/moretrees/2924950280/

http://www.flickr.com/photos/superbaka/2881682850/

http://www.flickr.com/photos/21963462@N07/2584732746/

http://www.flickr.com/photos/kayodeok/2084089437/

http://www.flickr.com/photos/virtualbiscuit/3516078086/

http://www.flickr.com/photos/22553353@N00/3618847572/

Click here to download (you may need to right click- save as)