Category Archives: wordpress

My WordCamp UK 2011 Review

So last weekend (16-17 July 2011) I upped and offed to my 2nd WordCamp. The previous one was in Manchester (UK) in 2010 and I had an absolute blast… so much so that there was no way I was going to miss out on some of the key things that a WordCamp has to offer;

  • Meeting new folk who love WordPress (and beer)
  • Re-acquainting myself with the lovely peeps I met last year
  • The opportunity to learn some things about WordPress
  • A stonkingly well designed T-Shirt!
Chatting at WordCamp UK 2011
Happy Campers

This years WordPress followed a familiar “3 track” structure which was semi-logically split in terms of the talks and discussions that were held in each. Being a developer of WordPress themes and plugins I had planned to mostly stay on the “developer” track but started my Saturday off listening to a panel chat about “WordPress in the Enterprise”. This was an interesting opportunity to hear about issues that I had never been exposed to before and was glad to have listened… even if it turned into a “how can WordPress play nicely with a Microsoft core IT setup” stalemate.

Next up I listened to Rachel McCollin chat about “WordPress and Mobile”. She covered the numerous ways in which devs and users can get a more optimal experience on mobile devices. I was particularly thrilled to have my Responsive TwentyTen plugin mentioned. This session also gave rise to some very helpful discussions from the audience on their experience and approaches to dealing with mobiles. In my personal opinion I think that actually all approaches are currently flawed… it seems that users and the device market are all running off at lightning speed and it’s leaving web designers and developers a little flat footed in truly understanding the ins and outs of it all.

StinkyInk WordCamp UK Swag
StinkyInk WordCamp UK Swag

I then jumped back to the “general” track to hear Nick Garner talk about advanced SEO. This was a real eye-opener it terms of me realising that my knowledge is very shallow compared to someone of Nick’s calibre. His talk covered some extraordinarily useful WordPress plugins which I will certainly be looking into.

Another session I took in on the first day was Noel Tock’s thoughts on “running your own theme marketplace”. He was a very engaging speaker and presented some very thought provoking lessons from his time at ThemeForce. Oh, for info on the slides etc from WordCampUK 2011 head on over to the wiki.

It was during this session that I actually missed my second fifteen seconds of fame from WordCamp 2011 as over in the main room Kimb Jones‘ popular “WOW plugins” session included my Widgets on Pages plugin. I was honoured to have this mentioned along with plugins some as Gravity Forms and the like… though I ‘spose I should own up and say that I’d been pestering Kimb all year to get it included!

The Saturday social was another great chance to chat to folk I hadn’t yet caught up with and I was lucky enough to be sat at the same table as Scott Cariss who turns about to be keen on security and told me of File Monitor Plus which is one of his plugins… I suggest that one and all install this right now!

The social also gave me the chance to retain my title of “last man standing” which I earned the previous year… though to be honest the competition was light and with the help of the lovely WP Sites folk I had the title (or at least a 1/3 of it) in my pocket for another year.

The Sunday kicked off despite my tiredness inflicted by the night before at some place called Fuzzy Ducks and I dived straight into a session on setting up and running local WordPress meetups. I soon discovered that one was already running in London and I hope to be going along to their meetings in the future. If you’re looking for local WordPress meetups in the UK then head on over to the WordCampUK wiki.

The day then took a more technical spin with Rob O’Rourke showing off how you can pretty much bring all content needed in a site into the welcoming arms of WordPress’ CMS capabilities. It was in this talk that I learnt of Custom Nav Walkers… something incredibly powerful that I think would benefit most theme developers doing bespoke work.

Dave Coveney was up next in the main room talking about some of WordPress designers and developers biggest mistakes… along with some sensible talk and humour this got us all thinking about how we could be doing things better.

The last core session was that where the “site doctors” give a lending hand to the (very brave) few who have queries on topics spanning everything to do with WordPress and websites in general. This is one of the most valuable sessions I believe as the floor is pretty much opened up to everyone to give their tupence on how to improve SEO, better help clients, increase security and pretty much anything else you could imagine.

And there you have it… my views (or at least the cutdown version) of WordCamp UK 2011. Big thanks should go to the WordCamp UK core team, the speakers and sponsors and all who helped put such an engaging and enjoyable weekend together.

WordPress Upgrade Error – Incompatible Archive Solution

Just a quick post to highlight the solution to a recent WordPress issue I had when trying to upgrade WordPress release using the “Upgrade Automatically” option. The error I was seeing was:

Incompatible Archive.: PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

Even for someone who may be technically minded this is a little unhelpful… but thankfully the solution (in my case at least) was to free up some space on my hosting account. So it seems that the cause of the issue (or at least one of the causes) is that there was not enough space available for the automatic WordPress upgrade to take place.

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.

[widgets_on_pages id=”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]

WordPress 1 Minute Wonder – Adding Gravatar Hovercards

WordPress One Minute Wonder

As a sequal to the debut entry of the “WordPress 1 Minute Wonder” series which talked about styling author comments differently to other comments this post extends the usefulness of your comments by adding Gravatar Hovercards to you site/blog. This posts presumes that you know what Gravtars are (if not check them out).

Again, in true WordPress 1 Minute Wonder fashion this is a dead simple thing to enable and involves nothing more than copy and paste and (s)FTP access to your site. In fact before I show you the steps I should credit the guys at WebBlogToolsCollection for this… in this case I simply a messenger.

So to get this working simply copy and paste the following code into your theme’s function.php file (create one if it doesn’t exist).

wp_enqueue_script( 'gprofiles',
'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ),
'e', true );

This should give your comments’ avatars a nice hovercard affect if you hover over them.

WordPress Gravatar Hovercard

It’s that simple and useful… brilliant.

To get the most out of this feature (on your site and on others that you comment on) make sure you update the info on your Gravatar profile.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this tip and now have Gravatar hovercards working on your WordPress powered website or blog why not subscribe to my feed or check out the first item in the WordPress 1 Minute Wonder series?[/jbox]

WordPress 1 Minute Wonder – Styling Author Comments

This is the first in the series of my 1 Minute Wonder series for WordPress where I’ll be showing simple and quick tricks for WordPress to add a little extra to your blog or WordPress powered website. And in this series debut I’ll be showing you how to add extra styling to the comments made by the post author.

So a quick caveat… this trick depends on your theme’s implementation… hopefully it’s been created with all the correct semantic markup needed. If you find this doesn’t work then to resolve the issue may take slightly longer than the one minute.

So here we go, all you really need to do is add the following to your current theme’s style.css file (usually located in ~/wp-content/themes/<theme_name>/ directory);

.commentlist li.bypostauthor {
  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;
}

What we’ve done here is added extra styling to give the author’s comments a background specific background colour with a nice rounded border and a subtle box shadow. The rounding of the corners and the shadow are created using CSS3 so may not show on older browsers.

Styled Author Comment
Styled Author Comment

This styling can be seen on this very blog over at this post on the Responsive TwentyTen child theme for WordPress. Of course the comment can be styled in any manner of ways depending on the CSS you apply.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this technique on your site for styling comments then please leave me a comment below with a link so I can take a peak.[/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

[widgets_on_pages id=4]

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]

Goals for 2011

Inspired by a few folk around the web I’ve decided to put together a post outlining some of the goals I have for 2011. My thinking was to list here some personal and non-personal goals I’d like to complete and as such set myself up for fall if I fail… hopefully meaning I’ll have more motivation to complete them.

  • Complete work on our house – I’d like for us to complete our intial phase of improvements to our house, this includes replacing all the internal doors, replace all the carpet, fit the new (enlarged) loft hatch, insulate and board the loft and finish making good the works we’ve already started in the kitchen.
  • Give blood – This has been on my long-term list for some years now but I keep chickening out… that has to stop,
  • Slight weight loss – I’d like to get down to around 11 stone, this year I dropped 2 stone but feel a slight further drop would be good.
  • Take up drawing – This is a little vague… I suppose I just want to improve my drawing/illustrating. Perhaps I’ll go on a course or 2… perhaps I’ll just practice more.
  • Release a WordPress theme – Would be nice to have a fully developed theme released into the WordPress theme directory. I have built many themes for projects but all have been bespoke so far.
  • Create another Android App – Following the release (and subsequent lessons learnt) from the development and release of Asssist I’d like to take on a new Android project. I’m still at a loss in terms of what the project could be so please let me know if you have any ideas.
  • Get listsed in the next Web Designer’s Ideas Book – On the face of it this seems a tad vain, and perhaps it is. The core idea behind this is to keep pushing myself to create sites which have that extra punch. To be inspired yourself check out the either volume of the Web Designer’s Ideas Book
  • Get Drafted to DribbbleDribbble is a “show and tell” for designers and I’d just love to be invited into the community… especially as I’ve developed the Android client for the site (Asssist). At present the membership of the site is by invite only. My 1st step to getting drafted is my recently published 3 Pointers page which I’ll keep updated with my latest design snippets which I hope I can share and impress with.

WordPress Ribbon Menu with CSS

For a recent project I was asked to replace a Flash site with a CSS/HTML version which was to match the existing look as closely as possible. This was essentially straight forward apart from the menu that was needed. The menu had a ‘wrapped ribbon’ affect on the currently visited item.

Flash Ribbon menu
Flash Ribbon menu

What I’m going to do here is run you through how I replicated this in CSS/HTML on a WordPress powered site. The finshed menu should look like the following;

CSS WordPress Ribbon Menu
CSS WordPress Ribbon Menu

The approach I took was to use the built in wp_nav_menu hook in WordPress to display the menu (which gives a lot of control) but to pass in an extra parameter to the call to define an extra div with a class defined which would be output before the link text.

wp_nav_menu( array( 'container_class' => 'menu-header','theme_location' => 'primary','link_before' => '<div class="ribbon"></div>') ); 

With some fairly standard CSS (all source can be found below) I now had a menu which looked like the following;

CSS Ribbon Menu Work in progress

The trick now was create the actual wrapped ribbon affect… and to do this I gave the selected item negative left margin

margin-left: -20px;

CSS Ribbon menu work in progress

The next step was to creat an image to make it look like the ribbon wrapped back around the menu. This is simply a triangle image with a radial gradient along it’s angled edge to give a feel of depth. For my menu the image I used was this one.

I then assigned this image as a background to the div element we added earlier in our wp_nav_menu call for the selected menu item.

#access ul li.current_page_item .ribbon {
float:left;
background:url(../images/ribbon_triangle_02.png)  no-repeat;
position:relative;
top: 38px;
left: -11px;
width: 20px;
height: 20px;
}

And there you have it… our finished article

CSS WordPress Ribbon Menu
CSS WordPress Ribbon Menu
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 0px;
	width: 100%;
}
#access .menu-header ul,
div.menu ul {
	margin: 0;
}
#access a {
	color: #fff;
    background: #333;
    background-image: -moz-linear-gradient(-65deg, rgba(51, 51, 51, 1), rgba(51, 51, 51, 0.6)20%, rgba(0, 0, 0, 0.8) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(51, 51, 51, 1)), to(rgba(0, 0, 0, 0.8)), color-stop(20%, rgba(51, 51, 51, 0.6)));
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
    border-bottom: 1px solid #000;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #ccc;
    background-image: -moz-linear-gradient(-65deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)30%, rgba(0, 0, 0, 0.6) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0)), to(rgba(0, 0, 0, 0.6)), color-stop(30%, rgba(0,0,0,0.4)));
	color: #000;
    border-bottom: 1px solid #000;
}
#access ul li.current_page_item .ribbon {
  float:left;
  background:url(../images/ribbon_triangle_02.png)  no-repeat;
  position:relative;
  top: 38px;
  left: -11px;
  width: 20px;
  height: 20px;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #444;
    background: #15c692;
    background-image: -moz-linear-gradient(-65deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)50%, rgba(0, 0, 0, 0.3) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0)), to(rgba(0, 0, 0, 0.3)), color-stop(50%, rgba(0,0,0,0.2)));
    border-bottom: 1px solid #000;
    margin-left: -20px;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #444;
    border-bottom: 1px solid #000;
    background: #15c692;
    background-image: -moz-linear-gradient(-65deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3)30%, rgba(19, 185, 136, 1) );
}

How not to get our support

I just received an email from a lovely guy/gal complaining about how they wasted some time trying to get one of our plugins working. Sadly in this case we’re not going to even bother to help them sort out the issues but instead are going to use them as an example on how to not get our support.

So here we go… things to remember or take note of when wanting help;

  • Ask us… yup that’s quite important!
  • Our plugins are free
  • We generally do not charge people for adhoc support for our free plugins
  • Be polite… ’nuff said on that one
  • Even if we can’t help there’s a huge community at WordPress.org that are more than likely to be of some assistance

And there we have it… it’s not a tough list to take in and we believe that most of the things on there are common sense too.

Oh, almost forgot… here’s the mail that we received… so if you do want our help it’s best not to use this as a template.

Wasted 2 hours trying to figure out your instructions for pages plugin. When you make something you really should try to write more the what you did for this. I just erase of the site and gave up.

A Responsive Twenty Ten WordPress Theme

UPDATE: Although the following still exists and is available I have now released a WordPress plugin which gives the same output as the child theme but with the added benefit that it is hosted on the WordPress.org repository. The plugin can be downloaded here.

After reading about Jon Hicks implementation of media queries on his site to make it more responsive to user’s browsing context and the release of the (highly recommended) latest WordPress build I thought it was time to get my feet wet with Responsive site design.

After toying with the idea of implementing this on one of my client sites I thought “Hey! hold on I’m using WordPress 3.0 default theme on my blog… why not extend this?”. And so that’s exactly what I’ve done. I’ve created a child theme for TwentyTen which not only makes it fluid (up to 940px) but also makes it more responsive at smaller sizes. As well as these I’ve added some extra CSS to make it handle iphone and android browsers too thanks to some interesting articles by The CSS Ninja and riklaunim

The result of this the current 0.1 version of the Responsive Twenty Ten WordPress theme. It should be noted that this is a current work in progress which is one of the reasons that I’ve not published it to the WordPress.org themes directory just yet. There are a few known issues still too;

  • IE fluidity is not implemented – seemed to cause issue with the CSS introduced to pick up mobile resolutions (portrait and landscape).
  • Mobile (read Android and iPhone) have some issues dealing with the orientation. Still looking into this. Update – fixed 😉
  • Requires use of some JS for IE (though I’ve disabled this at the moment.]
  • Not got round to validating the CSS yet (naughty naughty, yes I know). Update – fixed 😉

The theme is essentially a fluid version of the default Twenty Ten theme with a fixed maximum width. The extra “responsive” magic comes in when the browser viewport width drops below 661px. What then happens is that the primary and secondary sidebars drop below the main content and appear just above the footer. Some tiny extra rules come into play for iphone and android browsers too to make the page layout flow better.

By all means download the theme in it’s alpha state and let me know your views. Of course you can just have a play with this site as I’m using it at present too.