We would like to showcase two of our most recent websites that make good use of WordPress: Golden Bough, Intellectual Property Solutions and Precious Cargo, a sub site of The Laurence Sterne Trust.

Golden Bough

Golden Bough, Intellectual Poperty

This is a small brochure style website that required an easy to use and archived latest news system, with certain news items to appear on the home page, as well as a Chinese translated version of the site which was to be translated by the client themselves, i.e not an automatic translation.

To achieve the news management we made use of WordPress’ blog features, creating new posts for each news item. These are automatically archived and can easily be outputted by Month, Year or Date. We then fed all posts which have the tag ‘featured’ to the home page, including their featured image, with a default image for those without one. We then displayed these featured news items as a slideshow using Javascript with the jQuery Cycle plugin.

The archived news system

The featured news items display in a slideshow

For the Chinese version of the site we used a WordPress plugin called qTranslate. There are plenty of Translation plugins for WordPress although most of them provide an automatic translation of some sort, using various online services, qTranslate enables the client to write the translation themselves, as you can see in the screenshot below.

The edit panel with Chinese version of the content

The plugin also creates a user friendly URL for the Chinese version, simply adding the folder ‘/zh/’ to the URL, for example: http://www.goldenboughip.com/GBIP/zh/services/.

The only issue we had was that only the text contained within the WordPress database is translated. We also needed to load a different banner for the Chinese version, as well as other little bits of text such as the contact form labels. For this we used some custom php to detect which language was currently being viewed and then serve up the appropriate text snippet or set of banners.

Precious Cargo

The Precious Cargo Letters

Precious Cargo has been a huge task and we are all very pleased with the result. The one installation of WordPress actually manages 2 different sub sites of The Laurence Sterne Trust, Precious Cargo and The Collection.

The main focus of the Precious cargo sub site was to be the ‘Letters from Yorick to Eliza‘, which are scans from a book. Each scanned page is set up as a different page in WordPress (all sub pages of the same parent). Each of these pages has a featured image attached (the scanned image), as well as some content (the page notes). A number of the letters also have YouTube videos associated which are added via a custom field.

This all works well within the template we set up, however, what was required was a more sophisticated system of browsing the letters, without needing to load a new page each time and then scroll down to the letter. For this we created a custom Javascript slideshow which allows us to browse the letters without having to load a new page, this includes the page notes and a link to the embedded YouTube video (if one exists), the YouTube embed code is cleverly added to a popup window.

One of many informative pages on the Precious cargo exhibit

Alongside the letters we needed a number of pages, each with a gallery of images and extra ‘page notes’ at the bottom, the page notes being created with custom fields and the Custom Field Template plugin (which adds WYSIWYG editing to custom fields). One of these pages also needed to display certain events and exhibitions from the main Laurence Sterne Trust website. We had built a custom event management system for them last year so for this we added the ability to tag an event as ‘precious cargo’ we then fed all the precious cargo tagged events through to this page.

For two of the pages we also required a  ‘mini blog’, with one of them having comment functionality. As these only needed to be single category blogs we simply output the posts from the relevant category in each page’s template, along with the featured image and the usual social bookmarking links.

This left the ‘posts’ in WordPress relatively free and enabled us to use these for the second sub site, The Collection. This is a showcase of books and various other items, ‘The World’s largest collection of editions of the 18th century writer Laurence Sterne’s work.’

These are split into 9 categories just like the usual blog posts, the categories are all sub categories of a top level ‘the collection’ category. Each item has a featured image and a set of images displayed in a gallery format. We made use of custom fields to display extra information, such as object history, dimensions, date, author etc.

We also included the WordPress search function, limiting the results to the Collection categories only, rather than the entire WordPress databse which would give us precious cargo pages aswell.

The Collection home page

An item in The Collection

Bookmark this post:

Hats off to WordPress 3.0 as this upgrade has been a dream, not one of the plugins tested (so far) has been incompatible with WordPress 3.0 and as usual the automatic upgrade function ran smoothly.

WordPress 3.0 boasts “1,217 bug fixes and feature enhancements”, personally I didnt find it very buggy to begin with and I am still getting to know some of its standard features. However there are a few major additions that should prove to be very useful, especially when using WordPress as a Content Management System. The most notable of these being ‘Custom Menus’, ‘Header and Background API’s', ‘Custom post types’ and the ‘WordPress MU (Multisites)’.

We havent yet had the chance to build a blog or site from scratch using WordPress 3.0 (and I imagine not many people have yet) and so these features have yet to be thoroughly tested, but its looking good none-the-less. If you would like to read more about WordPress 3.0, take a look at the WordPress Blog.

Bookmark this post:

Akismet
http://wordpress.org/extend/plugins/akismet/
This one comes with WordPress ‘out of the box’, but it is well worth activating as it is basically an anti spam tool. It simply requires that you enter an API key, available by registering on the WordPress site or the Akismet site. The API keys are reusable across domains so you need only do it once for all your blogs.

All in one SEO pack
http://wordpress.org/extend/plugins/all-in-one-seo-pack/
Pretty essential for any blog really, this adds meta description and meta keyword tags to your template (which seem to be missing from some themes) as well as canonical URLs. Title, Description and Keywords tags are automatically written, based on the plugin’s settings. All these can be overwritten individually for each post and there are a number of other useful settings, such as excluding pages and adding noindex for archives.

Google Analytics for WordPress
http://wordpress.org/extend/plugins/google-analytics-for-wordpress/
You may choose just to add your Analytics code to the footer in your template, but using this plugin gives you more control over what data is tracked – for example you can exclude admin visits. It also supports AdSense tracking and Urchin.

No 404 Errors
http://wordpress.org/extend/plugins/no-404-errors/
There is a bug that affects some shared hosting, whereby rather than displaying 404 Errors, raw html is sent to the browser. This clever plugin changes 404 errors to 301 errors and redirects to a custom WordPress page.

TinyMCE Advanced
http://wordpress.org/extend/plugins/tinymce-advanced/
This adds buttons to WordPress’s limited TinyMCE setup and also allows you to control what buttons are used with a drag-and-drop interface. It also has the option to import styles from the stylesheet and to stop WordPress’s annoying habit of stripping out <p> and <br> tags, making it easier for users to add spacing in a post.

Breadcrumb Trail
http://wordpress.org/extend/plugins/breadcrumb-trail/
Some designs require a ‘breadcrumb’ navigation, showing you the route you took from the homepage to the current page. They can be very useful, since it’s easy to get lost when navigating a complex blog. WordPress doesn’t supply this feature out of the box, but this plugin gives you a breadcrumb trail function that you can add anywhere in your theme. It’s simple to customize via the plugins files.

Add Lightbox
http://wordpress.org/extend/plugins/add-lightbox/
This automatically adds rel=”lightbox” to all images linked to in your posts and pages, grouped by post ID. You have to add the javascript files manually. The code can easily be modified in order to use your preferred image pop up script, for example, colorbox.

WP-Syntax
http://wordpress.org/extend/plugins/wp-syntax/
Great for posts of a technical nature, this allows you to highlight code by wrapping it in ‘pre’ tags and specifying a language from the GeSHi library, for example, XML, PHP, CSS.

NextGEN Gallery
http://wordpress.org/extend/plugins/nextgen-gallery/
Wordpress already has a pretty useful gallery function, whereby each post or page can have a number of pictures associated and displayed in a simple Gallery layout. NextGEN gallery allows you to insert any Gallery, or a selection of Galleries (an Album) into any post or page. It also comes with a number of Javascript slide shows already set up (some of which require  you to install the javascript files manually) and the ability to add watermarks, arrange your pictures and albums, create RSS Feeds, add photos to the sidebar etc. For any blog where images are an essential part of their content, you should be using this. It is a little daunting when you first try to use it but you’ll soon get the hang of it.

WP-Print
http://wordpress.org/extend/plugins/wp-print/
Adds a button to the bottom of every post and/or page that generates a printable version of your content. You can choose whether to display comments, images and links or not.

Social Bookmarking
There are many social bookmarking plugins and it is an essential feature for blogs and indeed any website these days. There are the well known buttons such as AddThis and ShareThis that you will see all around the web, as well as the specific WordPress plugins. These add a clickable list of social networking icons to the bottom of each post. The ones we tend to use are Social Bookmarks, which you can see on this site, and Sociable, which I feel is the better choice as there are more sites to choose from and the icons are a little nicer, plus the user can manually disable it for individual posts. Another one which I rather like is Sexy Bookmarks, although this isn’t for all sites. At the end of the day there are many to choose from and its up to you to find one you like.

Lock Pages
http://wordpress.org/extend/plugins/lock-pages/
Thanks to Mark for finding this one, “Lock Pages prevents specified pages (or all pages) from having their slug or parent edited, or from being deleted, by non-administrators.” Really handy when using WordPress as a CMS, as we all know what could happen if top level pages start being removed and renamed.

Excerpt and Content Word Limit
http://wordpress.org/extend/plugins/content-and-excerpt-word-limit/
You can’t always rely on a client making use of either the ‘excerpt’ or the ‘more tag’ and as useful as the excerpt is, it relys on it being set up in the theme. I had played around with word limit plugins before but been unsatisfied, mostly due to the limits of the options. This plugin is great, you can use it anywhere you like, by swapping the usual ‘the_content()’ to ‘content(25)’ in your theme, where 25 is the number of words to limit the post by, this is handy because you can have different word limits in different places and can also limit the excerpt. The only downside of this plugin is that the word limit, is itself limited by 27, i.e. it wont go any higher than that.

Maintenance Mode
http://wordpress.org/extend/plugins/maintenance-mode/
“Adds a splash page to your blog that lets visitors know your blog is down for maintenance. Logged in administrators get full access to the blog including the front-end.” Says it all really, very useful as without messing with the .htaccess file you can’t just add an index.html page to appear before the .php, and even then i’m not sure that will work. You can of course edit the standard template that comes with the plugin, it is also easy to switch on and off and includes other settings I haven’t needed to play with.

WP-Paginate
http://wordpress.org/extend/plugins/wp-paginate/
Pagination is a great way to navigate lots of pages of a ‘list’ kind of style, i.e. blog posts. WordPress page navigation out of the box is, in my opinion, a bit naff, simply going from previous to next page. This is easy to install and easy to style. Use this and the breadcrumb nav and you’re sorted.

Thats it for now
Although I will leave you with this: Although most of these plugins have settings to customize the look and functionality they can still be quite restricted. However remember that CSS can do some pretty clever things and in many cases the plugin’s code itself is quite straightforward, so it’s worth having a little play around to get things just as you like.

Bookmark this post:

This makes WordPress a great, highly fexible content management system, take a look at our post on using WordPress as a content management system here.

But WordPress is just as useful ‘out of the box’, it contains everything you need to set up and manage a successful blog and can be a great asset to your website, giving it an up-to-date feeling, while increasing repeat visits and improving SEO. There are thousands of plug-ins available for WordPress which do a range of things from running automatic backups and basic security, to automatically updating your Twitter account and turning your blog into a photo gallery.

Some examples:

Button Bag
Blog for Button Bag, Craft Kits for Children e-commerce website, this was added to their current website with a slightly modified design, makes use of plugins WP-print and Sexy Bookmarks, as well as Breadcrumb trail and All in one SEO pack.

Get Cycling News
Wordpress was added to the Get Cycling website to handle their latest news. It is a simple, single category blog which feeds the latest 4 posts onto the home page.

Cyclorama
Get Cycling sister company, Cyclorama wanted a blog to run alongside their current website, the blog was designed to look like the rest of the site and has been made good use of, with plenty of articles, links to other blogs, a feed from their Twitter account and ‘share this’ social bookmarking links.

Web Analytics Consultancy
Facts and Figures is a feature rich blog, making good use of Twitter Syndication, RSS feeds by Feedburner, email subscription to feeds and comments, share this social bookmarking, print this post, all in one SEO pack and vipers video quick-tags. The theme was chosen by the client from the WordPress theme directory and modified to meet the blogs requirements.

This one!
You may have noticed you are reading a WordPress blog, this one is fairly ‘out of the box’ but uses the following plug ins: all in one SEO pack, Add lightbox, Google Analytics for WordPress, Lightbox 2, Limit login attempts and WP-Syntax.

Bookmark this post:

Lets begin with Facebook, you can do this on either your personal profile, or a Facebook ‘page’, you cannot currently do this on Groups. Go to your profile or page and look for ‘notes’ on the tabs at the top, if you can’t see notes you can add it by clicking the add button. Go into notes then look to the bottom left for a link titled ‘edit import settings’ click on this, then input your blogs RSS feed url and bobs yer uncle, each new post now appears on your wall! You can take a look at it in action here.

Import your blogs RSS feed into your Facebook Notes

Next, Twitter, for this we use a plugin called Twitter Tools. This enables you to automatically ‘tweet’ everytime you create a new blog post, you can also disable this for individual posts and it works the other way round too, i.e. everytime you tweet, a new blog post is created. It also gives you the option to update Twitter only, direct from WordPress. After following the plugins installation we then have to create an ‘application’ in Twitter.

Login to Twitter, scroll to the bottom of the page and click on ‘Twitter API’ click on register an app and fill in the required information. For application type, choose Browser, for default access type, choose read and write and use your blogs address for the callback url. Once you have submitted this information you will be given a Consumer Key, Consumer Secret, Access Token and Access Token Secret. Copy these details into Twitter tools and you are good to go.

You need to create a Twitter application, in order to get Twitter Tools working

Finally, LinkedIn. For this there are 2 methods, the first one simply displays a list of your latest posts on your profile, for this you simply need to add the WordPress application to your LinkedIn account and then input your blog details, you can do so here. That is all well and good, the only issue is that people need to be viewing your profile in order to see your latest posts. The second method, makes use of your Twitter account, login to LinkedIn and go to your update status box, click on the blue Twitter logo and you will see your Twitter settings, you can now add your Twitter account, follow the instructions and your ready to go.

Access your Twitter account settings and also send your status updates to Twitter

This is how we have set up Web Dev Blog, we always use WordPress to post and everything else follows. However, if you set Twitter Tools to create a new blog post from tweets you can then do everything from either Twitter or LinkedIn (take a look at the diagram below). Also please note that with regards to Twitter and LinkedIn, there are settings to control how the updates display, wether to use tinyURLs etc.

There are 3 ways to update all 4 websites

Bookmark this post:

We aim to keep you up to speed about:

• what’s going on at Semlyen IT – what we’re up to, and what we’re thinking about. Everything from reflections on running a technology company in York, to the new services we’re offering.
• the latest interesting ideas for website design – should you believe the hype, or will the latest widgets really take your site into orbit? Our reviews will help you navigate the confusing world of web-development.
• tips, tricks, and FAQs – want to know how things are done, but were afraid to ask? We’ll put it simply and easily for you in our guides to doing things on the web.
• fun and interesting stuff – five minutes to kill, or just looking for ideas? We’ll post links to other sites, articles, and web-content that will entertain or inspire you.

Each new article posted to this blog will belong to a ‘category’, relating to the list above – news, ideas, tech-tips, or fun-stuff. You can browse posts through the categories menu on the right, or through the calendar.

The staff at Semlyen IT – Jim, Richard, Andy and Jamie – hope you enjoy this new blog. Please get in touch if there’s anything you’d like us to write about.

Bookmark this post: