I’ve finally got the functionality on this site pretty much the way I wanted, so now is probably a good time to explain what I’ve done and why. As a web developer there is generally a feeling that your own site should be designed and built entirely by yourself. There’s no technical reason why I/you shouldn’t be able to. Some might consider it laziness, but the reality is time constraints. I would much rather spend free time working on other people’s projects or my own more interesting projects, that a little personal blog/introductory website, so for that reason, I chose to install a CMS instead.
The CMS in my particular case is WordPress, which ordinarily is considered mostly a blog system, but is so powerful and flexible that with a little bit of customising you can effectively create an entire site without needing to get your hands dirty with code.
So, once I had installed the default WP site, on the root of my web space, I then set about customising it. Again, the argument here is to get your hands dirty with modifying code, but the same time management arguments apply. I decided to apply two rules:
1) Don’t re-invent the wheel – use existing WordPress plugins if they meet the requirements – if they don’t, live with what they do, or if it really bothers me, relent and tweak it.
2) No premature optimisation – the main reason for writing your own code directly into a theme is to optimise it and make it more efficient. Usually less overheads compared to plugins. However, the traffic on this site will be so low, the need for optimisation isn’t so pressing. Writing my own code would waste time that could be spent doing other things.
Default Settings
I’ll start with the initial setting configuration, and explain my reasons for setting them.
Settings > Media > Uploading Files:
I’ve changed the default page from wp-uploads, to a specific folder called media, then created a subdomain for media.andrewjohns.co.uk and pointed it to the same folder. I think it looks more professional this way, and give some speed benefits when loading pages as browsers limit the number of connections per domain, so putting them on a different domain to scripts and html files will in theory mean more of the page downloading simultaneously.
Permalinks
Permalinks are important because it helps identify pages easier, they’re cleaner and SEO friendly. I’ve gone with the following structure:
/blog/%year%/%monthnum%/%postname%/
The initial part of the url is because I installed WordPress in the root, but want my blog posts to be under the Blog folder. I decided to leave the year and month in there as it helps identify the age of the page directly from the url, though some people prefer to leave it out for really clean urls.
Presentation and usability for site visitors
I’ll start with the appearance. I opted for a great theme from digitalnature, called Mystique, which comes in two flavours, but for greater flexibility, you need the extended version. Once this was installed I had a number of options to customise the layout, default colour scheme, page widths, column sizes, and so on. It comes with some easy to configure options for social media links, and some other modules, and also gives you an easy way to tweak the css and functionality of wordpress without actually needing to modify any files directly.
Plugins
Next came the plugins.
Child Pages Shortcode – With a simple shortcode dropped onto a page, it automatically creates a list of sub pages, including support for Excerpts and featured images. Just one problem – WordPress doesn’t actually provide a way to add Excerpts for pages. The backend system supports page excerpts, it just needs to be enabled. You can do this by simply adding the following line into your user functions, something that Mystique allows you to edit simply in the theme’s advanced settings.
add_post_type_support('page', 'excerpt');
Disable Comments – I didn’t want visitors to be able to comment on every page or media. This plugin let me turn it off across the entire site, then enable it specifically on certain pages.
Contact Form 7 – This was another example of a plugin that is very flexible, and with potential overheads, but it was still faster than spending 30 minutes writing custom code for a contact form. The admin interface let me define what fields I wanted, and where the submission would be sent to, then a shortcode enabled me to drop it onto my contact page.
Flickr Gallery – Though I don’t do it that often, I have a Flickr app on my smartphone which lets me take pictures and upload to my Flickr account. From here it then automatically shares to Facebook, and, with this gallery plugin, automatically displays on my site in a “lightbox” style. Again, I could have written the code and streamlined everything. I could have even had my photos upload to my own webspace, but uploading to Flickr saves on bandwidth, and time.
RDFa Breadcrumb – Displays a breadcrumb at the top of the page to indicate your location in the structure of the site, but better yet, adds metadata that enables Google to understand a page’s place on the site, which it can display in search results.
Smart Youtube PRO – Enables quick and easy way of embedding videos from a range of sites including Youtube and Vimeo, with clean valid HTML, that also works on iPads and iPhones.
Syntax Highlighter Evolved – I doubt I’ll post code snippets very often, but when I do, it’d be good if they were presented in a nice way. This plugin does the job nicely.
Table of Contents Plus – Some of my posts/pages, particularly industry articles, and this one, are split into sections with headings. So to make the articles easier to navigate through, TOC+ provides an easy way to place a contents box at the top of your page (or before the first heading) which creates links from the headings. You can define the level it creates them to if you have multiple heading levels, but H2s were enough for me.
WPTouch – WPTouch automatically renders your WP site using a theme that resembles the sort of app interface you’d find on a touchscreen phone, such as iPhone, iPad, Android, and so on. You can customise the devices that it responds to. You have to be careful with this when combining it with the WP Super Cache, but a little bit of configuration and it works fine.
SEO and Analytics
Google Analytics for WordPress – Easily add in tracking code for Google Analytics, with plenty of options for tweaking how it works.
Security and Spam
Akismet – This plugin comes preinstalled with WP, but needs to be activated with an API key. It filters a lot of comment spam into a spam folder.
Limit Login Attempts – This bans an IP if a user tries unsuccessfully to log in to the admin system, too many times in a row.
WP Security Scan – This plugin identifies and suggests vulnerabilities in your WP installation, and offers guidance on making it more secure.
Easier Admin
Simple Page Ordering – When I created this site and was re-ordering the page order regularly, this little plugin was handy. I could drag and drop the order of pages in the admin view, instead of updating a text box with it’s order number. Once the order was finalised, I removed the plugin again.
Simple Tags – I installed this so that I could tag pages, which WordPress doesn’t make available in the admin area, but can handle it in the backend. This plugin also added additional functionality, most of which I don’t use, but it does provide suggestions for tags based on the content of the page which can be useful.
Performance
Feedburner FeedSmith Extend/Feedburner for RSS – Outsourcing your RSS feeds to Feedburner saves on bandwidth (if you have a site that has a lot of RSS traffic) and provides better stats/metrics for subscriptions. the FeedSmith plugin then ensures all ways to access your site’s RSS feeds are redirected to that feedburner URL.
WP Smush.it – Smush.it is a really handy tool recommended by Yahoo! for optimising images and reducing image file sizes so that they are web-ready, reducing bandwidth and making pages load faster. This plugin automates the process of smushing any images uploaded.
WP Super Cache – One of the common caching plugins available for WordPress. From what I can tell there’s never a good reason NOT to use something like this, once configured correctly, whether you have a small site with lots of plugins, or a large popular site, you’ll find this plugin is essential.
CloudFlare – Cloudflare is a service that was initially designed to make websites more secure by blocking spam and hack attempts. They then discovered that they could use the technology to speed up websites by optimising and caching code, and allow website owners to enable third party services such as Live Chat facilities, backup, and uptime reports, just by switching it on in the control panel. Cloudflare would then automatically insert the required code without any code changes required to your actual pages. It works by pointing your your Domain Nameservers to Cloudflare’s Nameservers. I use it specifically for the optimisation and security benefits it supposedly brings. The Cloudflare WP plugin is required if you use Cloudflare with WP, as it fixes the originating IP addresses for comments, but the benefit is that it also adds additional protection against spam, and adds optimisation for your WP database.
A couple of other thoughts
- Ensure you keep plugins and WP up to date at all times, to reduce any chances of your site being exploited by known vulnerabilities in old versions. I tend to log into my admin panel daily so I always see the latest updates, but if you don’t maintain such a schedule, at the very least Keep an eye on the blog (http://wordpress.org/news/) for updates on new WP releases, or perhaps try something like http://wordpress.org/extend/plugins/update-notifier/.
- If you download free themes, ensure you download them from decent reputable websites. The article at http://wpmu.org/why-you-should-never-search-for-free-wordpress-themes-in-google-or-anywhere-else/ has done some great research into this.
- You’ll be surprised what you can do with WordPress, and in the right hands, can be crafted into something that isn’t too scary for clients to maintain their own websites. If you’re considering a website for a small business, WordPress may be the right solution for you.
