From a Problem to 100,000 Downloads

It was 1054 days ago that I first wanted to place a WordPress widget into a post I was writing. Whether it was for a client site or personal one I can’t remember… the important thing is that out of the solution I came up with emerged the Widgets On Pages WordPress plugin.

The plugin has undergone very little change since it’s 0.0.1 check-in to the WordPress.org plugin repository but since then it’s had very favourable reviews and been included in several blog posts and conference talks. But more importantly, for today at least, it’s now been downloaded over 100,000 times!

It has a current rating of 4.7/5 and at the time of writing sits as the 105th most highest rated plugin on the WordPress.org repository. 105th might not seem too good but it should be noted there are over 23,800 plugins in the repo.

Lanyrd Splat WordPress Widget Plugin

Lanyrd info as a WordPress widget

Last night I noticed that the Lanyrd event info that was meant to be listed in my blog sidebar was no longer working. I was, at the time, using the My Lanyrd Widget which was up to a time working well… but then I noticed it had just stopped working.

I had a quick browse on the Lanyrd site and noticed that had some official JS and code which could be used to display a badge on your site showing pretty much the same info as the above mentioned widget had been doing.

And so, after an hour or so of coding the Lanyrd Splat Widget plugin for WordPress was born. I immediately requested a repo on the WordPress.org site and as soon as this was approved my checked in the code and the Lanyrd Splat Widget was launched!

Lanyrd info as a WordPress widget
The Lanyrd Widget in action

The plugin has settings for the maximum number of events to show as well as the format and of course the Lanyrd username of the info to use.

Lanyrd Widget Settings
The Lanyrd Widget Settings

The plugin pulls the info from Lanyrd  every time the page is loaded, which is obviously not ideal. I had toyed with the idea of using the ics feed which Lanyrd provides and then using transient storage inside WordPress to temporarily cache the data. I decided to not use this for the time as the route I’ve taken pulls only the data needed and also supports richer data. My view on this may change in time… we will just have to see how this performs.

The Lanyrd Splat Widget can be downloaded from the official WordPress.org plugin repository.

WordPress 1 Minute Wonder – Quick Performance Boosts

WordPress One Minute Wonder

This latest WordPress 1 Minute Wonder installation covers a couple of quick alternative steps that can be taken to dramatically increase your site performance… and yes I’ll be honest and say that actually to cover all 3 steps here it takes more like 10 minutes.

In the below investigation I based “performance” on Google’s PageSpeed rating and Yahoo’s YSlow and this was run against a newly launched online craft store site called Designs and Such.

Step 1 – Optimise Images

Using the PageSpeed tool (in Chrome) it was possible to  see that I had several un-optimised images on my site. I processed these with the free optipng tool and instantly saw an increase in 6 PageSpeed points and  2 YSlow points. Not bad for something which anyone can do.

Step 2 – W3-Total-Cache Plugin

Now there is some stigma around having lots of plugins on your WordPress site and the detrimental affect it can have on performance… now whether you back this line of thought or not* sometimes plugins can really benefit your site in this context. Now please be sure to backup your DB (or entire site) before using any plugins which might modify you’re .htaccess and potentially other files in your installation.

For my investigation I installed the W3-Total-Cache plugin and configured it just to cache and minify my HTML, JS and CSS. The results were staggering… I saw an overall increase of 11 Google PageSpeeed points and 12 YSlow points

Step 3 – .htaccess Tweaks

Another step, this time plugin-free, should immediately give some good results. Simply by adding the following lines to one of my site’s .htaccess file I saw a further 4 point increase in my PageSpeed score and a 1 point increase in Yahoo’s YSLow rating.

The following lines do 2 things, add expire headers to static files such as CSS, javascript and images and also removing ETags. Of course please backup your .htaccess before doing any of this.

#Expire Header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

FileETag none

This is defining a 1 month expiry for all content covered by the files types listed above. Note if you do this there’ll be implications if you want to modify any of the files, like CSS, and have the changes to affect immediately.

This technique (and more info on it) was found over at Tips & Tricks HQ

The overall results

So in total by carrying out the above steps I saw the following performance increase. Of course the results will vary site by site but I believe that with Search Engines using site performance as a factor when ranking your site that 10 minutes spent here will be of value.

Google PageSpeed Increase = 21

Yahoo YSlow Increase = 15

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this technique on your site for performance reasons and have some results then please leave them in the comments.[/jbox]

* When speaking to @westi at WordCamp UK (or WordCamp Manchester) in 2010 he said that putting code in plugins rather than the core should result in no performance hit… of course it depends on the quality of code

WordPress 1 Minute Wonder – Styling Widgets on Pages Horizontally

WordPress One Minute Wonder

In this edition of WordPress 1 Minute Wonders I will answer a question which I frequently get emailed about… and that is how to style widgets next to each other when using my Widgets on Pages WordPress plugin.

In this post I have 3 widgets in one of the sidebars created by the plugin. I have named the sidebar horiz.

To get the Widgets to display as they do above there was some extra CSS that I had to add to my theme’s style.css file to get them to display like this… here it is.

#horiz {
  overflow: auto;margin: 10p;padding: 10px;
}
#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  background: #f1f1f1;
  border:1px solid #999;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 3px 3px 7px #999;
  -webkit-box-shadow: 3px 3px 7px #999;
  -o-box-shadow: 3px 3px 7px #999;
  box-shadow: 3px 3px 7px #999;
  margin: 0 1%;
 }

I have put a fair amount of styling in there to make them look a bit more appealing but essentially the important bit that makes the widgets sit next to each other can be done with just the following;

#horiz {
  overflow: auto;
}
#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  margin: 0 1%;
 }

In the first section we style the whole sidebar (you would replace .horiz with whatever you had called your sidebar), making sure that the content overflow is set to auto. This makes sure that any content following the sidebar does not also creep up alongside the widgets.

The second section styles the widgets (all three in this case). The key part here is the float:left; which makes them site alongside each other.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this tip why not subscribe to my feed or check out the first item in the WordPress 1 Minute Wonder series?[/jbox]

5 Tricks to Spice up your WordPress Blog

By adding a few lines of code or installing a plugin or two you can add some extra spice to your WordPress blog (or other WordPress powered site) and at the same time  bring a lot more value to your readers.

Wordpress LogoOf course these tips are dependant on your ability to install plugins/widgets etc and some are also only applicable to themes with certain functionality, but you should see at least one tip here that you can apply nice and easily.

1) Enhance your Sidebar

If your blog has a sidebar (and let’s face it most blogging themes proide at least one) then this gives you prime screen real estate to give extra information to your readers about you and your blog or subject matter. There are many, many plugins out there which cater for all sorts of users and content type.

As you can see on my sidebar I provide a list of events that I’m attending, giving hopefully some more context to the things that I’m interested in. This is powered by the My Lanyrd Widget and as such pulls information from my Lanyrd account.

As I’ve said, there are many sidebar widgets available… so what are you waiting for, go get some!

2) Put Widgets in your Posts

Following on from Step 1 is the perfect tip for adding extra “dynamic” content to otherwise fairly static blog posts or pages… Add your widgets to them!

All you need to do is install the Widgets on Pages plugin and then add the widgets that you want to the newly created sidebars and then place a simple shortcode in your post content and your widgets will be displayed inline. For example I’m displaying my “posts calandar” right here

3) Shortcodes

Shortcodes can be extremely powerful and can provide you with a quick way to add extra content/design to your posts and pages. There are many “shortcode” plugins available and a lot can be downloaded for free from WordPress.org. A simple example is the J Shortcodes plugin which among other things enables you to quickly add styled areas to your posts.

[jbox]This text is in a nice styled box using the J Shortcodes plugin[/jbox]

4) Customise your Feed

A key way to give your readers more is to improve the default RSS feed that goes out to them. This is done by adding some short code to the functions.php file (located in your WordPress theme’s directory). I add the featured image to my articles as well as a short finishing line to thanks the reader for the time and to send them to my blog.

The options here are really only limited by your imagination, you could add links to related posts for example.

The code to add a nice sign off is as follows;

function feedFilter($query) {
if ($query->is_feed) {
add_filter('the_content', 'feedContentFilter');
}
return $query;
}
add_filter('pre_get_posts','feedFilter');
function feedContentFilter($content) {
$content .= '<p>Thanks for reading, check out <a href="'.
get_bloginfo('url') .'">'. get_bloginfo('name') .
'</a> for more from Todd Halfpenny</p>';
return $content;
}

5) Make it Device Ready

With every day that goes by there are more and more Internet-ready devices on the market and these come in all sorts of sizes. And it’s with this in mind that having your blog ready to display optimally on this wide range of fixed and mobile devices you should really start thinking about making your blog “responsive”… or at least mobile phone friendly.

There are various free and paid for ways of getting your site to work well for readers who aren’t just using their PC at home or work, but I’m gonna focus on just 2 here.

Make you Site Responsive

This is the best place for your site to be… it means that your site is future-prrof (ish) for devices of all various sizes to access it. Implementing this generally means having to get a theme tweaked to utilise media queries and various other CSS techniques… but I have a cunning plan for those using the default TwentyTen WordPress theme… the Responsive TwentyTen plugin. This plugin (free) instantly turns your site into a responsive one and means that as the browser window size changes your site re-formats itself to display in the most optimal fashion. Don’t believe me? Just try it on this site.

WordPress Mobile Plugins

There are several plugin available which will server up optimised content for mobiles. A decent review of different plugins and approaches can be seen over at WP Candy.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Get Started”]So what are you waiting for?

Get downloading the great Widgets on Pages plugin and check out check out how to make your site look good on mobiles.[/jbox]

Advanced WordPress Page Layout Experiment

Screenshot of layout

Styling WordPress page and post layouts can be daunting for the novice… especially if you don’t want to dirty your hands with PHP and the like. I wanted to experiment with what was possible to do using only the default WordPress theme 2010 and plugins alone (OK, some CSS was needed).

So I set myself the challenge of mirroring something which is a classic layout across news sites and ended up with the perfect example from the BBC News web pages (please someone let me know if I’m NOT allowed to publish the below pic).

Extract of the BBC News site, the desired layout
Extract of the BBC News site, the desired layout

The desired layout is essentially a main news article with a supporting image followed by a couple of secondary articles and then a listing of tertiary articles.

My initial ideas came from using the Widgets on Pages WorPress plugin that I had developed which allows the addition of sidebar areas to be inserted inline in pages and posts. Using this plugin I was able to essentially define multiple areas in a standard page (using a standard template) which could then have independant content defined and (with some tweaks to the live version of the Widget on Pages plugin) could be styled each in it’s own way. This, by itself, was limited though as I really needed some mechanism to pull in the desired stories… I needed something to support it.

Then at the recent WordCampUK 2010 I was lucky enough to be attending Michael Kimb Jones‘ presentation on WOW Plugins when the Query Posts plugin (by the incredible Justin Tadlock) was brought to my attention. The plugin provides a widget can be set up to be populated with the result of a query against the posts in the database. Kimb actually mentioned that he had thought of producing an entire WordPress site just through widgets… a very similar one to the train of investigation I was pursuing. This Query Posts plugin was the answer.

I put this plugin to work (with some slight mods to now use WordPress featured image feature) alongside my own Widgets on Pages plugin and some additional CSS to the 2010 theme to come up with a layout that is indeed on the way to what I was after.

Screenshot of layout
Adv layout with no template messing

The page content actually consists of only the following content;

[widgets_on_pages id="featured_news"]
[widgets_on_pages id="also_in_the_news"]

To support this I have 2 sidebar areas defined (featured_news and also_in_the_news) which each have Query Posts widgets in which pull in the news feed with each one offset to allow idea of one single feed.

The CSS used to stylize these is as follows (yes I know it’s not clean… this is an experiment remember);

.featured_news {
width:650px;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
padding-bottom: 8px;
}

.also_in_the_news ul li {
float: left;
width:290px;
padding: 0 0 0 0
}

.also_in_the_news  {
margin: 5px 0px 10px 0;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
width:650px;
}

.also_in_the_news ul li:first-child {
float: left;
width:290px;
margin: 0 0px 0 0;
}

.widgets_on_page ul {
list-style: none;
}

.widgets_on_page h2.widgettitle  {
font-size:1.2em;
}

.widgets_on_page h2.post-title a  {
font-size:0.9em;
}

.featured_news h2.post-title a   {
font-size: 1.5em;
}

.widgets_on_page .entry-summary {
clear: both;
padding: 0px 0 0 0;
font-size: 0.8em;
line-height: 1.5em;
font-family: arial;
}

.widgets_on_page  {
font-size:0.9em;
}

.widgets_on_page .hentry  {
margin: 0 0 5px 0;
}

#content .widgets_on_page  p,
#content .widgets_on_page  ul,
#content .widgets_on_page  ol,
#content .widgets_on_page  dd,
#content .widgets_on_page  pre,
#content .widgets_on_page  hr {
margin-bottom:5px;
}

img.attachment-thumbnail {
float: left;
}

.also_in_the_news img.attachment-thumbnail {
display: none;
}

.featured_news .words {
margin: 0 0 0 20px;
clear: none;
float: left;
width: 440px;
}

li.widget li a {
font-family: arial;
text-decoration: none;
font-weight: bold;
font-size: 0.8em;
}

li.widget li ,li.widget li:first-child  {
margin-bottom: 0.8em;
}

li.widget li a:hover {
font-family: arial;
text-decoration: underline;
}

The demo page

How to display Widgets inside posts and pages

I was faced the need to be able to place extra manageable content inside a wordpress page’s core content… and without an existing plugin available to do this I thought I’d write one of my own.

The output was the Widgets on Pages wordpress plugin which is at time of writing at version 0.0.4. The plugin basically allows the author to add a shortcode to their wordpress page or post which will then add the content of a predefined Widget area (or sidebar) at that point in the post/page

Widgets on Pages Options

The plugin approach allows the user to add a lot of extra control to their wordpress sites without the need for any coding or markup skills (PHP, MySQL, HTML etc).

UPDATE: In version 0.0.4 you are able to define an unlimited number of separate sidebars and call these all separately within the wordpress content.