New FITM Website – technical notes

by on 16/03/2011

In a previous post, we discussed why we built a new FITM website, especially one that appeared not to have changed that much.

Warning – this is a technical post, so read on if you’re sure.

Content Management System (CMS)

WordPress logoWe went with WordPress (WP). It is arguably the most powerful of the free open-source CMSs available. It powers over 25 million websites, has 55% of the CMS market and has a huge following of loyal programmers who develop plugins to do anything that WP can’t do itself.

The whole FITM site is powered by WP. All pages, including the home page, the contact us page and the blog are generated by the system.

This enables website content and structure to be maintained by anyone, technical or non-technical. There is no need for knowledge of HTML, CSS, PHP, SEO or any other TLAs.

Of course, WP can’t do this on its own. For that it needs a series of plugins, the most important of which is…

Thesis Theme Framework

Thesis is described as “a premium template system for WordPress that is designed to serve as the rock-solid foundation beneath any kind of website”.

It is a framework that makes it easy to create a custom design without having to build the guts of a new Thesis theme.

It isn’t free, but at $87 it saves hours and hours of technical fiddling and is well worth every cent.

Other WordPress Plugins

At the time of writing, the FITM website has the following active plugins:

  • Akismet. Out of the box spam filtering for post comments and trackback spam.
  • Blackbird Pie. Embed Tweet visualisations in pages and blog posts. E.g. here.
  • Broken Link Checker. Checks entire site for internal and external broken links. It even emails you when it finds one so that you can fix it before anyone notices.
  • Contact Form 7. Build sophisticated “contact us” and other forms. E.g. here.
  • Google XML Sitemaps. Generate a new sitemap whenever anything changes and automatically submit it to Google and other search engines.
  • Subscribe Widget. Adds various subscribe icons to the sidebar. We have links to our RSS feed, RSS comments feed and Twitter.
  • W3 Total Cache. Adds caching functionality to speed up delivery of pages. The difference is dramatic!
  • WordPress Database Backup. Automate the backup of the site. We have it set to email us a backup every day.

All of these are free.

WordPress / Thesis Configuration

All configuration of the website is done using the Thesis GUI or by amending the two Thesis files:

  • custom.css. Standard CSS formats to control the formatting of the entire site. Required configuration is minimal – at the moment this file has just over 50 lines.
  • custom_functions.php. This is where you do clever things over and above what WordPress, Thesis and plugins can provide.

WordPress Templates

We use 2 WP templates:

  • custom template. Used on all the static pages of the site. This is defined in custom_functions.php and uses a small bit of php to control the images that you see on the right hand side of every page.
  • default template. Used on the main blog page and all posts. This uses standard WP functionality to provide the sidebar you see.

Author Box

The following code in custom_functions.php automatically adds the author box you see below after each post.
function post_author() {
if (is_single())
{
?>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 100 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_description(); ?></p>
<p class="hlight"><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> posts for FITM.</p>
</div>
<?php
}
}
add_action('thesis_hook_after_post_box', 'post_author');

404 Page

The default 404 page is changed with the following code in custom_functions.php.
function custom_thesis_404_title() {
?>
This page does not exist or has moved.
<?php
}
remove_action('thesis_hook_404_title','thesis_404_title');
add_action('thesis_hook_404_title','custom_thesis_404_title');
function custom_thesis_404_content() {
?>
<p>I'm afraid that this page does not exist or has moved.</p>
<p>Please <a href="http://fitm.co/"><span class="style3">try again</span></a> and <a href="mailto:webmaster@fitmltd.com">email us</a> if you still can't find what you are looking for.</p>
<?php
}
remove_action('thesis_hook_404_content', 'thesis_404_content');
add_action('thesis_hook_404_content', 'custom_thesis_404_content');

Custom Footer

The FITM footer you see at the bottom of each page is controlled by the following code in custom_functions.php.
function custom_thesis_footer () {
?>
<p>&copy; 2011 FITM Limited. Company number: 6912367. VAT number: 972 4818 87.</p>
<p>t&nbsp;&nbsp;<span class="telephone">020 7193 7324</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e&nbsp;&nbsp;<a href="mailto:info@fitmltd.com">info@fitmltd.com</a></p>
<p>Registered address: 13 Thornbury, Harpenden, Hertfordshire. AL5 5SN</p>
<?php
}
remove_action('thesis_hook_footer', 'thesis_attribution');
add_action('thesis_hook_footer', 'custom_thesis_footer');

Move NAV Menu After Header

By default, the Thesis NAV menu is at the very top of the page.  This code in custom_functions.php moves it to after the header.
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

Tweet Button

The following custom_functions.php code adds a Tweet button to each blog post.
function twitter_button() {
if (is_single()) { ?>
<div class="tweetbutton">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="fitmltd">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<?php }
}
add_action('thesis_hook_before_headline', 'twitter_button');

Conclusion

And that’s it. To recap:

  • We are using WordPress, which is free, and a variety of plugins, all of which are also free.
  • We are using Thesis, which costs $87 but saves huge amounts of time and effort.
  • There are a few bits of hand-crafted code which make the site look different from every other site, but these are minimal and all code if easily available on the Internet.

We now have the basis for the future – a site that allows easy addition and change.

FITM would encourage any SME to adopt a similar approach and we’re only too happy to discuss what we did in far more detail. Please comment or get in touch.

Leave a Comment

Previous post:

Next post: