Retain your visitors by using related post thumbnails!

A while ago I was doing some research into how I could better design the layout of my blog to encourage new visitors to read more posts, rather than just bouncing away (i.e. leaving after reading one post).

I already used a plug-in called YARRP (Yet Another Related Posts Plug-in), to show a list of posts that were similar to the one the reader was looking at. Although I found this blog post describing how you could customise your related posts layout to include thumbnail images for each post.

Depending on your PHP & CSS skills, the customisation could either take you 20 minutes to implement, or a whole evening. It also depends on what formatting problems your theme has would would need working around. In my case, I think it took me five hours, on and off. My CSS skills were a little rusy, and my theme had an issue which made different posts have different issues. So it took a lot of systematic experimentation to mess around with CSS margins to make sure everything stayed where it was supposed to be!

Note that you need to be self-hosting to be able to do this one.

You’ll be able to see the results of my implementation of this at the bottom of the page, and it I have noticed an objective benefit in having done this. According to Google Analytics, comparing the month before and the month after making this change, my bounce rate fell by 4.4%, my page views per visit ratio increased by 3.4%, and my average time per visit went up by 25%.

Doing this hasn’t gained me more visitors, but that’s not the point. From where ever they come, this layout change is designed to make your visitors stick around and see more of your work. Going by the above results, it really does seem to work.

So, all that’s left to say is thanks to Zach at buildinternet.com for posting about this, as it’s been a good help to me.

References:

• Display Thumbnails For Related Posts in Wordpress

Wordpress

If you have a self-hosted Wordpress blog, I hope that you are thinking about security. The best thing you can do is to use the automatic updates so you always have the current version of Wordpress.

One of the most pernicious hacks someone can do to your blog is to access to your wp-admin folder. This folder contains the back-end PHP pages of your site where you control everything and write your posts.

Via your web-host’s control panel you might be able to password protect this directory, although that could still be brute forced. An alternative method, which is well documented (see reference links below), is to create a “.htaccess” file in your wp-admin directory, with which you can limit access to a specific set of IP addresses. E.g. your home IP address and your work IP address. See the references below for links on how to write this.

This method is perfect for locking down and restricting who can access your admin pages without having to go through any sort of manual authentication. I held off doing this for a long time because my ISP assigns dynamic IP addresses, and my Netgear router needs frequent reboots. So my IP address changes a lot, so I’d keep getting locked out of my own blog!

To get around this, I thought of a script I could write to keep my wp-admin’s .htaccess file automatically updated! You could even use this if you took your laptop away from home and connected on another network, as your laptop will have your ssh keys installed. Try to stickto using a secure VPN though, just on principal

Sorry, it’s a bash script, so if you use Windows you’ll be stuck unless you install the cygwin environment and PuTTY. If you use a Mac, I’m sure you can switch on the bash shell.

Without further ado, here’s the script:
Note: make sure you have cURL installed first.

#! /bin/bash
# Auto-update .htaccess in http://your-blog/wp-admin/
# Run this from cron on a short interval.
# This will grab your IP address, and then rewrite the
# .htaccess file and use scp to upload to your server.
#
# David.R.Gilson 3rd October 2009
# http://www.davidgilson.co.uk
# I distrobute this under the Creative Commons Attribution Share Alike license.
# http://creativecommons.org/licenses/by-sa/3.0/

cd ~

# Grab your external IP address.
ip="$(curl www.whatismyip.org)"
ip="$(curl -s checkip.dyndns.org|sed -e 's/.*Current IP Address: //' -e 's/<.*$//')"

# Write the file.
echo "AuthUserFile /dev/null" > htacc.txt
echo "AuthGroupFile /dev/null" >> htacc.txt
echo -e "AuthName \042Limit wp-admin access\042" >> htacc.txt
echo "AuthType Basic" >> htacc.txt
echo "<LIMIT GET>" >> htacc.txt
echo "order deny,allow" >> htacc.txt
echo "deny from all" >> htacc.txt
echo "# Whitelist home router" >> htacc.txt
echo "allow from "$ip >> htacc.txt
echo "</LIMIT>" >> htacc.txt

# Copy to server
scp htacc.txt [YOUR SSH LOGIN HERE]:"~/www/wp-admin/.htaccess"

# Clean up
rm htacc.txt

Once you’ve pasted all that into a file (I named mine htaccessupdate.sh), remember to make it executable by typing chmod +x htaccessupdate.sh.

References

• script to get the external IP address
• adding strings in bash
• BASH escape characters
• Protecting the Wordpress wp-admin folder
• Three tips to protect your WordPress installation
• Protect Wordpress From Hackers Safe wp-admin folder
• cURL
• PuTTY
• Cygwin

Happy 1st Birthday Blog!

A year ago today, my website as it is now, went live. People always say this, but it is hard to believe that a year has gone by – that I’ve actually been writing for that long. Ah, you got me, I have had a couple of breaks. Although, in that time I’ve managed to clock up over 190 posts, and with around 460 comments there’s been a lot of chat (mostly thanks to Spotify!).

Still though, this has been a fantastic experience. It is helping me to stay active and hone my writing skills. It has also helped me rediscover how much I actually enjoy writing.

There’s a few people I should thank. Nate Lanxon for suggesting that I switch to using Wordpress, Ryan Hitch for hosting this site, and my mother Carol for listening to me go on about my ideas. I’d also like to thank everyone who regularly reads me (you’re an exclusive group!) and who has linked to me over the past year.

What’s for the next 12 months? I am going to continue to cover the same general topics as I do already. I’m planning that Tip of the week will close at the end of the 2009, but I’m hoping to write more hardware and software reviews. Tips may come back in a less frequent but more in-depth form. I am hoping that I can develop writing relationships with other sites too, so you may find that I have less actual posts on here, but instead posting links to what I’ve written elsewhere. All this is subject to change

Once again, thanks for reading and supporting me.

It all boiled down to running out of storage quota on my server. My server account had crept over its quota limit without me knowing. Things were still working like this, but since Wordpress 2.8 (the software that runs this website) came out on Thursday I ran the upgrade, and then we hit problems.

Anyway, lots of technical details later storage quota was extended and the site was put back as it was, and subsequently upgrade to WP 2.8.

Why am I telling you all this? Well the moral of the story is that no matter what you’re doing – keep backups of everything you do! Had I not had backups of this site, it would be trashed now. Moreover, had my backups been better organised, the site would have been up several hours sooner.

I’ve now improved my file backup procedures to be automatic so they’re always up to date. Fortunately, I was already using a Wordpress plugin which e-mailed me a daily backup of my database.

Make sure you keep your stuff backed up too.

However, I haven’t abandoned things; I’ve been busying myself with making some subtle changes to the looks of the site. This post is more for myself than anything, as a record of what I’ve done. Also, I’d like to thank my friend and server admin, Ryan, for suggesting most of the things I’ve done to the site.

Header - before

Header - after

Header

I’ve done two things to the header, and I’m very pleased with both.

First of all, I’ve created a search box (one less widget to put on the sidebar). I also created a custom background for the text box so that it fitted in with the theme design. The submit button looks like text, although it is actually an image of text. This is because no matter how I set the style of the basic button, I could not get rid of the edge shading effect. So instead I made some text in the same font as the page links, and used it as an image.

Secondly, I changed the RSS link. Before it was a simple line of text with an RSS icon. Although now, I have taken the Feedburner counter that was on my social networks widget and put that in place. Then also, I have replaced the standard RSS icon with one lovingly drawn by yours truely.

Custom social networking widgets

Sidebar

I have dropped several unnecessary widgets, including my free-form text boxes with the QR codes and campaign badges. I’ve added a collapsible archive widget, I wanted to have a collapsible category widget too, although I just could not find one that worked properly, shame!

My “social networking” (a simple Text WP widget) has gone back to the original version – a collection of favicons. The first time I had it like that, I eventually dropped it as I thought it too much work to keep maintained. I still feel that way although I developed a spreadsheet to help me manage all the lines of text. So now, I just enter any new social networks into the spreadsheet, and then copy-paste the final cell of the sheet into my text box.

After having such a massive traffic spike last week (1,432 visitors!), I thought I should put up a “most popular” widget (rather than just a recent posts widget). It took a lot of experimenting to find a plugin that worked the way I wanted it to. I ended up settling with a plugin called Recently Popular. I also modified my Twitter Widget to show my Twitter counter. With these changes, I didn’t loose the counters I had in my social networks widget, but instead distrobuted them around the page!

Finally, just to try and save on more space, I have reduced the line height and font size (1.1em & 90% respectively).

The great spike of January 10th 2009

Popularity

I didn’t finish reporting my traffic surge properly, but I just thought I’d show the spike before I let anymore time slip by. I’m dissappointed things have slipped back to normal, but there is a small improvement on my mean daily visitors, and I’m hoping to get writing more soon to pull more people in from search engines. (Chart created by Piwik.)

I was recently trying to add images with captions to my blog, and I had a problem getting them to align how I wanted them to. A little research uncovered that a change which came with Wordpress 2.6 meant that a lot of themes had been broken when it came to aligning captioned images.

A little more research uncovered a solution. According to this WP support article, you need to add the following code to the styles.css file of your theme.

/*
The following is a fix for changes form WP 2.6 that broke a lot of themes.
Have had to fix some colours for this particular theme.
*/

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 2px solid #000000;
text-align: center;
background-color: #292b2e;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

I upgraded this site, and foreverfifteen.com (which is a site I help out with), and also installed it as-new for my good friend Rachael Eldritch-Böersen, on tweeduizendzes.nl. Manually upgrading was rather intimidating, seeing as I had not done it before, although it seems that it was the first and last time I’d need to do it, because with the advent of Wordpress 2.7, it can no upgrade itself when new versions are released.

Anyway, without further ado, you can sit back and releax and watch a video to tell you all about Wordpress 2.7.

In terms of upcoming material, I have some old material from my LiveJournal which I shall be reposting here (and deleting from the LiveJournal). Although some of those pieces are actually so long, that I am breaking them ~500 word sections and serialising them. Also, as mentioned before, I am also researching a piece about social bookmarking. I will probably not publish that until the older material has gone out first. Between now and then, I’m considering whether to try and get this upcoming story (when it’s done) published on a bigger site. In which case I probably won’t post it here, but I shall certainly post a link to it. If it does get posted here, I may well serialise that too.

I have some other types of serialised content in mind, but you’ll just have to wait and see!

I want to become a good, and well read, blogger, and I know that my personal qualities tick all but one of the boxes to achieve it. The one short coming I do have is that I am not a consistent writer, I have patches where I will produce a lot of material, and then long periods of nothing. So, I am hoping that the scheduled publishing facility in Wordpress will help smooth out my output, and make the reading of my material more satisfying for you.

P.S.
As and when I do any major work on the blog itself, I shall still post about it. Not only do I like to have a record of what I’ve done, but I also like to think that blogging about blogging could be of interest to other people who are starting out like I am.

Anyway here’s what I’ve done to save you going crazy looking for differences:

• I’ve set up with Feedburner and edited the theme to point at my Feedburner feeds accordingly. I’ve done three Feedburner feeds, one for the blog, one for comments and the other for my Friendfeed. You can access them all via your browser’s feed auto-discovery system. I’ve also linked the Feedburner feed of the blog into the big Subscribe link in the top right of this theme.
• I’ve expanded the set of Web2.0 icon links in that sidebar widget over there, top-right. I’ve now split them up into named categories, and I’ve also added a couple of badges underneath.
• Speaking of badges in the top widget. The contact me page has gone. The contact page was merely displaying my Retaggr card, so I’ve now put an image link which you can click to display said card. It seemed a worthwhile trade, a static page for a sidebar badge. Let me know if you think it’s cluttered.
• The “About” page has been renamed to “About David”, for obvious reasons.
• I’ve also suspended the “miniBlog” page, which displayed the entries of my Friendfeed. I haven’t deleted it, merely marked it as “pending review”. I wasn’t sure if the page was too unweidly to make sense of. I also reasoned that if someone knew enough about current web services to know what a Friendfeed was, then they could just click the icon in my sidebar and go directly to my Friendfeed page, rather than seeing a much rougher Javascript rendered version on my site.

So all in all, I’m two static pages down, and just up a little by some sidebar clutter

Feedback is welcomed, as ever.

First of all, the footer; The footer originally only had information about the theme. I added a creative commons licence and a XFN compliance link. Although today I tried taking those plus a couple of other chicklets and putting them in the sidebar. Looked okay, but also looked like sports-wear with logo’s spattered all over it. So, they’ve gone back into the footer and are aptly headed with “The Small Print!“.

The search widget was broken, because the header was incorrectly placed, I’ve now fixed this.

I’ve removed the “Recent posts” sidebar widget. My reasoning was you’re looking at the damn thing, you can see what was recent! In it’s place I’ve put a Twitter widget. Only showing the latest post, just as a sign that I’m alive and to catch reader’s attention.

Finally the contact page. I had three candidates posted. The first was a manually written list of all my profiles, I was manually linking the favicons and site names. The second was a widget from Retaggr, which also did the same thing, but automated (thus giving me the Retaggr site as a profile management tool). The final candidate was an embedded copy of my Retaggr card.

Most of the feedback went for the second candidate. I am always highly grateful of feedback and I will abide by it 99% of the time. Although this time was that 1%, therefore I would like to give my reasons.

1. I wanted to embed Retaggr code for two reasons:
   1. It provides an e-mail me link which is CAPTCHA protected.
   2. It provides an automated way of presenting all the sites I use.
2. I wanted something clean and simple (which I think you’d all agree with).
3. The Retaggr widget profile links didn’t link to the indicated sites, instead they launched a copy of my card, most of the time saying something like “Retaggr doesn’t yet have a widget for this site”.
4. Given the choice I didn’t want to maintain the manual list. This was despite that it provided page that functioned as you’d expect the Retaggr widget to (merely on first sight).

The only disadvantage with the embedded card is that it’s bright white, and doesn’t blend in with the site.

Anyway, In The GIMP I re-drew the header background (had to re-scale the grey gradient), and shifted the orange strip upwards. This meant that the blog title and slogan were off-centre. After much poking around in the HTML and CSS code, I couldn’t work out how the title was getting positioned as it was. As such, I couldn’t find any way of moving it without it shooting off in inexplicable directions! I really wanted to learn something about writing themes from studying this problem. Although in the end I just had to admit that it was working in a very strange way, and do the fudging solution by using a <span> tag to shift both lines up by 5 pixels.

Moving on, so that’s my minor adjustment, I’ve shifted stuff up 20 pixels. Although what it has left me with is a desire to learn how to write my own theme. I’m editing this theme, which was written by someone else, and I don’t know what in there is their kludges and what is text-book style coding. So I feel like I’d like to write my own code, and make it very clean and precise. That’s how I feel about it, but I don’t know if I’ll have the time or comprehension to do it. Be sure that I’ll let you know!

First I added a profile picture to my about page. I’m not sure about this one, but I’ve had one shot of good feedback.

Second, I went into this theme’s style sheet and simply altered the text alignment for posts and lists. The default was to the left, although I thought that pages and posts would benefit from being justified to both sides. Indeed, I think the result was quite pleasing. However, I didn’t think that lists benefitted from this, so I had to explicitly set them back to left align.

Moving a blog isn’t that hard at all. I’ve been playing around with the local server. I see now how all the documentation I have read, is actually correct. Now that, in retrospect, I see what they mean by certain terms. Although I only understand what they mean by having tried doing things the hard way first. So, they weren’t that helpful, by the time I’d understood them, I’d figured it out for myself!

Anyway, suffice to say I know how to move this to a new domain, I am no longer scared by the task, and I’m pretty much ready as I don’t know what else I could need to do with this blog that I could really need to do inside a sandbox (which is what this domain is all about).

Using “Xampp” I’ve installed a local Apache server on my laptop, to have a go at importing this on-line version of my blog, to my local machine. Having had a quick look at the guides on Wordpress.org, I couldn’t really follow it. Therefore, I just tried the simple export/import feature of the Wordpress dashboard. It seemed to get all of the essential data imported (took three attempts to do it without timing out on my laptop though). Although quite a lot wasn’t brought across.

The main things that didn’t work this way were my themes and plugins. Sure, I downloaded them via FPT from this server to my local server, although their settings didn’t come with them.

I need to work out a more comprehensive way of moving a wordpress site. More reading to do!

Firstly, I discovered this is where the auto feed discovery code is hidden. So, you will now find that as well as Atom and two versions of RSS, there is also a link to my Friendfeed … feed … (ahem) which is a catch all for everything I do on-line. I’m really pleased I could work out how to do this as it’s something I’ve wanted to do from day one.

Secondly, I’ve added an RSS subscribe link to the top-right corner. This has enabled me to remove the “Subscribe Me” sidebar widget. I was using 10 sidebar widgets, I’m now down to 7 with all the changes I’ve made in the last 24 horus.

Lastly, even though the post headings act as a permalink, I’ve added “permalink” permalinks to every post now.

• miniBlog : This simply shows my Friendfeed (via the Friendfeed widget). I mentioned earlier, that it’s called “miniBlog” as it’s more than a micro-blog (i.e. Twitter), but it’s less than a blog. So mini is between micro and full.
• Links : Here I have taken the favicon links that were atop of the sidebar and but them as a simple list.