Tuesday 24th January @ 6.30

SWIG started off as a purely WordPress based community group meeting at the interconnect/it offices.  It’s clearly become something more than just that and is of interest to anybody who works and lives on the web. With speakers on topics as diverse as copywriting and business management as well as the continued WP interest we’ve now decided to run a larger occasional paid ticket event called bigSWIG.

Leaf is a great venue in central Liverpool, with excellent food, alcohol and soft drinks available, making for a convivial and relaxing atmosphere.

Speakers:

• Dan Donald
  Reactive web design – designing for context
• Jake Smith
  WordPress in the wild - megadrive.me
• Lydia Bates
  Writing for the web
• Chris Hough
  Creating a theme options panel

Q&A session

Get the answers to any burning questions you have about web design and WordPress.

Tickets

• £5
• £4 for students

This is the first time we’ve tried to run SWIG as a larger event so please please please spread the word!

One day we'll do a proper logo

SWIGmas is the end of year get together for all SWIGgers – we’ll relax a little, have a drink, and watch some entertaining and thoughtful videos on a range of web and design related subjects. Nothing too heavy, and we’re not planning on anyone giving a talk as we know how hard it is to prepare in the run-up to Xmas.

This month the event is being held on the fifteenth, rather than the normal last Thursday because… well, we all know that an event in the middle of the holidays will be quiet to say the least.

In January we have Dan Donald from Speak the Web presenting on an as yet undisclosed topic so don’t miss it! Tickets for the January BIGSwig will be announced shortly.

Meeting Location

This meet-up takes place at the interconnect/it offices. The SWIG meeting room takes place on the first floor of the Liverpool Science Park (meeting room 1, up the stairs to the first floor once you enter the building, through the propped open door and then first on your right).

Agenda for this Meeting, starting at 6:30pm

1. Welcome and Introductions – tell us who you are and what you do, and something cool you learned about WordPress recently like new plugins or themes
2. “F*ck You, Pay Me” – The Happy Cog way of dealing with getting paid. Chosen because we can all have these problems.
3. “Can we eat to starve cancer?” – TED talk by William Li, chosen because you never know, a blow-out Xmas dinner could save your life!
4. “Design and Discovery” – TED talk by David Carson
5. Q&A
6. Drinks at a nearby pub and open forum

Don’t forget to get in touch if you want to present something at one of friendly meetings, it doesn’t strictly have to be to do with WordPress so talks on design, copywriting, marketing, case studies or just fun web stuff are all fair game. We’ve had some great talks over summer, and the event just keeps getting better and bigger.

If you’d like to add anything to the agenda – just mention it in the comments. Please use the form below to register (it’s free to attend!) If you can’t make it to a meeting and have booked a ticket please do let us know as numbers are strictly limited and it’s disappointing to have five no-shows on a sold out night.

Services Provided

There's a lot of functionality here, but it's made readily available.

• Design feedback
• Design detail completion
• Development of sophisticated WordPress Theme
• Development of Events plugin
• Custom taxonomies
• Hosting
• User training
• Ongoing user support
• Links to newsletter subscription systems
• Ongoing content management support

Site Build

The overall site design was built by the team at Capita, while we were responsible for some finishing touches along with the final build and back-end design where appropriate. We created an accessible, easy to use site which would perform well in search engines.

The biggest challenge, however, was the event management. Repeating, frequent events that needed to be categorised according to location, accessibility, price, type and so on. It’s always difficult to know what the best options for categorising things like this will be, but Greenwich had researched and tested a number of ideas and came to us with their preferred structure that allows visitors to quickly find their preferred events.

Three Months in

The site has been running successfully since May 2011, and has attracted a growing readership. Not only that, but the newsletter subscription has been a huge success and means that thousands of newsletters are now regularly sent out to residents and health professionals. The site is frequently updated, and support overhead is minimal. Overall, a huge success and interconnect/it is now listed as a preferred supplier of web services to the Greenwich PCT – that’s always nice to see!

Visit the Greenwich Healthy Living Service website and see for yourself why it’s doing so well.

Although there are developer notes on the WordPress.org repository, we’ve decided to maintain a page here where we can possibly show a broader range of information in the future, depending on the take-up of the plugin.

Template tags

Spots provides 2 template tags for developers named icit_spot and icit_get_spot.

icit_spot

This template tag echos out a spot:

icit_spot( $id_or_name, $template );

It takes the following parameters:

• $id_or_name: Required. A numeric ID or the name of a spot as a string.
• $template: Optional. A string used in a call to get_template_part()

icit_get_spot

This template tag performs the same function, but it allows the developer to specify wether to echo the result, or return it as a variable:

icit_get_spot( $id_or_name, $template, $echo );

It takes the following extra parameter:

• $echo: Optional. Defaults to false. A boolean to indicate whether to echo the spot content or just return it.

Basic Usage

You can use spots to replace boilerplate text in your themes. If you have areas in your themes where typically you would hard code the text you could use the following code:

if ( function_exists( 'icit_spot' ) )
    icit_spot( 'Copyright' );

The above code would output the contents of a spot titled ‘Copyright’. If the spot does not exist it will be created as a draft. Spots in draft mode are only visible to logged in users with editing capabilities.

Templates

The plugin will initially look for a file in your theme using the get_template_part() function. If you have a file called spot.php in your theme that will be the default template for all spots. The icit_spot() function can take a second parameter for the template part to use for example:

if ( function_exists( 'icit_spot' ) )
    icit_spot( 'Copyright', 'copyright' );

The above code will make the plugin look in your theme folder for a file called spot-copyright.php to use for the output. If not available it will fall back to spot.php and if that is not available it will simply output the spot contents.

Use templates when you want to display a featured image from a spot or if you require some additional/alternative markup for the spot. Spots are just like posts, so in the templates you retrieve the contents of the spot using the_content() just as would in the loop.

Basic spot template example:

<div class="spot">
    <?php the_content(); ?>
</div> 

Spot template with featured image:

<div class="spot-with-image">
    <?php
    if ( has_post_thumbnail() )
        the_post_thumbnail( 'medium' );
    the_content(); ?>
</div> 

Additional

There are many filters and hooks available to get even more out of spots, so drop by the plugin homepage or use the forums if there is something you need to do with spots but aren’t sure how.

In the past, coding for this was a pain – you either needed to add an options page on your theme leaving your users with an HTML content area or deal with the weight of adding WYSIWYG support, or you’d just hard code these elements.

interconnect/it Spots solves this.  By adding a new content type to WordPress and using the familiar WP interface, you can now quickly and easily make these Spots into content managed elements.

A simple template call is all you need to instantiate a Spot:

if ( function_exists('icit_spot') ) {
 icit_spot('Copyright');
 }

This will then create a Spot which the user can edit using the familiar WP WYSIWYG tools.  If another theme comes along that requires the same Spot, then the content is already there and ready.

This is all built as part of the interconnect/it principle of “Content Manage Everything.” We hate hardcoding, and we’re sure most of you do.  But sometimes it happens because there’s only so much time available in a project.  With interconnect/it Spots you’ll be able to handle these items quickly and elegantly.

It’s Not a Developer Tool Only!

Spots also comes with its own widget, allowing you to assign your spots to any widget space available.  The widget even has its own WYSIWYG editor, allowing you to quickly tweak your Spots widgets without leaving the widget admin page.

Let's do this!

OK, Sounds Great, Now Give Me Some Examples!

So, let’s say you’re using the 2011 theme and you want to add a Copyright notice to your sidebar.  Easy-peasy.  Simple install Spots, activate it, then go to Appearances | Widgets.

From there you will drag the Spot widget into your sidebar space.

Now, if you’ve already created your Spot you can simply select the spot you want and away you’re done. But if you haven’t already created your Spot the widget will offer to let you go and create a new Spot.

The Spots Widget

Here you’ll find yourself at a familiar WP editor.  Simply give it a sensible title and then put in what you like.  You want an image there?  Go for it.  You want special symbols?  The editor will help you.  Here we’ll call the spot Copyright, and we’ll input the content saying “This site is copyright 2011.”  Then hit Publish, just as you would for a post.

Once you’ve saved your spot, return to the widget administration page, go to the widget and from the dropdown select the spot you’ve just created.

The full Spot widget showing the editor.

Hit Save.  And once you do, you’ll notice something else.  The widget now features a WYSIWYG editor.  This means that you can quickly and easily edit your spot right there, without breaking your widget admin workflow.

If you now visit your site, you’ll see that the Copyright notice is where you’ve placed it.

Why Not Just Use the Text Widget?

A good question!  The text widget is great.  Simple, quick, and easy to use.  But it’s HTML only.  And that means that a user who has access to administer widgets can, by virtue of a bit of bad HTML code render the site completely broken.  They can do this using the editor, of course, but it’s *much* harder to do so.

The editor also means you can easily insert media.

A Spot widget, with an image in it.

Let’s take an example using the above.  Imagine we’re using the default WP 2011 theme, and the user decides to put a big image in his post.  What happens?  Well, it’s not a problem – most well-written themes (and we accept that many aren’t) will sort this out.  But what’s nice is that if you’re using a suitable shadowbox plugin the full size image, if it’s linked to, will pop up.  Try it for yourselves.

I’m Happy In Code – What Can I Do?

Ah, well, it gets better for you.

Let’s take the 2011 theme again.  Say you wish to place an Awesomeness element in the footer instead of the line saying “Proudly Powered by WordPress.”  This is so easy, it’s daft.

First, you need to get the footer.php file for the theme.

Then, find the div: <div id=”site-generator”> and remove everything that goes in-between that and the closing </div>

Replace the code with the following:

<?php if ( function_exists('icit_spot') ) {
 icit_spot('Awesomeness');
 } ?>

What’s nice is that if you visit a page on the site and the Spot called ‘Awesomeness’ hasn’t been created, the plugin will create a blank Draft version of the Spot ready for completion.

All the user then needs to do is to go in and edit that Spot and hey presto, the footer now looks like this:

See that? VERY.

So Can I Try It?

Sure!  We released the production version of Spots at the beginning of October 2011 and it is now available directly from the WordPress back-end or for download from the WordPress Extend repository.

Get WordPress Spots from the WordPress.org Repository

So here’s the first – launched in mid-Spring 2011, the new corporate Informa Telecoms & Media was built by us over winter. It’s our most sophisticated ever WordPress implementation, offering a huge range of functionality that allows the marketing team at the company to quickly and easily show off the wide range of products and services on offer.

Lots going on here. And you see that Digital TV Europe announcement they're highlighting? We built that too.

• Adds WordPress Sections – a new tool by us
• Dramatic extension of the WP widgets system
• Powerful aggregation tools
• Easy to create alternative sites for other brands
• Large range of banner and image options
• Social integration
• WordPress Multisites
• Mega menus
• Lots of other clever stuff we can’t tell you about!

The front-end design was supplied to us by Informa’s internal design team. We then took this, added WordPress specific design elements, and developed the workflow, plugin suite and theme that now allows Informa Telecoms & Media to quickly promote events and new product ranges throughout their website.

A large part of the job centred around a blogging platform for Informa’s analysts, with author specific taxonomies allowing for a more sophisticated way of allowing visitors to drill down into information. As a consequence, the Analysts Blogs element of the site adds a range of features that isn’t commonly seen in WordPress based blogs.

Events Promotion

Informa Telecoms & Media run a huge range of events. Their website previously failed to drive traffic to events and, where it did, failed to capture the interest of visitors. Consequently, we developed functionality to allow for the quick and easy aggregation of events and the automatic creation of .ics files allowing visitors to add events to their diaries.

The site is almost too big to describe fully, so why not just go and take a look?

The SWIG logo - we

The first Liverpool WordPress Interest Group took place at the end of March and, with a good turnout, will now be a regular event held on the fourth Wednesday of each month at the interconnect/it offices.

Wow – it’s hard to believe that another SWIG event is just around the corner.

Agenda for this Meeting, starting at 6:30pm

1. Welcome and Introductions
2. Quick discussion about ideas and get things arranged for the next month’s event
3. PRESENTATION: How to content manage everything in WordPress, by Robert O’Rourke
4. Q&A
5. Drinks and open forum

If you’d like to add anything to the agenda – just mention it in the comments.

The registration form will disappear once the event is fully booked. If you want to be added to the reserve list just let us know in comments.

Places are strictly limited – if you can’t make it, please please cancel the ticket or let us know so that somebody else can take your place.

Are you wondering why it’s called SWIG and not LWIG? To find out you’ll just have to attend. It’s a secret only attendees can ever know.

Version two brought a smarter UI and better workflow

When you’re migrating WordPress (or any other platform using serialized PHP strings in the database) between domains, you must use a safe search and replace method that preserves the integrity of the serialized string lengths. A simple of a dump file for http://localhost to, for example, http://thenewdomain.com is problematic because the length of the string changes but the indexes for the serialized strings does not. Consequently settings are lost and widgets disappear. Not good.

This script can now also handle multiply nested serializations, which can happen in transient values in WP at times, and it can also handle multi-byte Unicode changes safely. This is important now that internationalised domain names are allowed.

It’s Not Only for WordPress

It’s worth mentioning that the code will work for any platform that stores PHP serialized arrays in a MySQL database. You can easily use this script on Drupal, Joomla and many other systems where you need to change items across a database without messing up your stored arrays.

Download Search Replace DB v 2.1.0

Contribute!

A lot of developers now use this plugin. If you feel you can add something, there is now an official Github repository for this script at https://github.com/interconnectit/Search-Replace-DB

Version 2.1.0 (released Dec 2011) Improvements

The latest version 2.1.0 introduced a number of key improvements:

1. Added charset support, helping in all sorts of places (thanks Sergey Biryukov!)
2. Added option to skip guid column for migrating already live sites
3. Removed use of deprecated functions.
4. Other bug & comment fixes

Changes being prepared for Version 2.2.0

1. Support for BLOBS/Objects to give Drupal compatibility
2. Minor tweaks and corrections

github Repo – DRUPAL devs please test master branch!

To see how you can use this tool to aid migrations, check out our article on WordPress migrations or visit the WP Tuts+ article that mentions this script.

If you are in any doubt whatsoever about how to use this plugin, then please consider getting an expert in.  It’s a really powerful bit of code that if used badly can damage a WP install beyond repair.  If you want help, get in somebody like us, for example, or any of the other great guys listed over at CodePoet.

IMPORTANT: This code is supplied with no warranty or support implied. You use it entirely at your own risk. Currently it is supplied under the WTFPL but this will change to the GPL eventually. And when you’ve finished using the script, PLEASE delete it as it can pose a serious security risk to your site.

Download Search Replace DB v 2.1.0

Changelog:

// Version 2.1.0:
// – Changed to version 2.1.0
// * Following change by Sergey Biryukov – merged in and tested by Dave Coveney
// – Added Charset Support (tested with UTF-8, not tested on other charsets)
// * Following changes implemented by James Whitehead with thanks to all the commenters and feedback given!
// – Removed PHP warnings if you go to step 3+ without DB details.
// – Added options to skip changing the guid column. If there are other
// columns that need excluding you can add them to the $exclude_cols global
// array. May choose to add another option to the table select page to let
// you add to this array from the front end.
// – Minor tweak to label styling.
// – Added comments to each of the functions.
// – Removed a dead param from icit_srdb_replacer

// Version 2.0.0 – returned to using unserialize function to check if string is serialized or not
// – marked is_serialized_string function as deprecated
// – changed form order to improve usability and make use on multisites a bit less scary
// – changed to version 2, as really should have done when the UI was introduced
// – added a recursive array walker to deal with serialized strings being stored in serialized strings. Yes, really.
// – changes by James R Whitehead (kudos for recursive walker) and David Coveney 2011-08-26

// Version 1.0.2 – typos corrected, button text tweak – David Coveney / Robert O’Rourke
// Version 1.0.1 – styling and form added by James R Whitehead
// Version 1.0.0 – original version by David Coveney

To Be Done

Ensure UTF8 encoding is enforced (see comments). Added in v2.1.0
Self/deletion or security system to prevent accidental security risks.
Release CLI version for use on non-WP sites, or for other purposes (already supports use on any MySQL DB.)
Change to GPL V3.
Eliminate warnings and remove deprecated function calls. Added in v2.1.0
Add facility to subscribe to interconnect/it Newsletter.

Download Search Replace DB v 2.1.0

The LinkedIn WordPress application picking up old content from the wrong place.

We had an interesting one today. The LinkedIn WordPress application is a widget that allows you to have your latest WordPress posts on your site. The references within it all relate to WordPress.com – however, I knew it worked full well with self-hosted WordPress.org sites as well as I use the application.

So I was a bit bemused when a client called today to say that they were only getting old posts in LinkedIn. My initial reaction is to consider this a LinkedIn/Automattic problem because they’re the ones that supply the application, not us. However, a support contract is a support contract.

Looking a bit more deeply I could confirm what was happening.  If you put http://janbritton.org into the field it got changed to http://janbritton.wordpress.com – how peculiar.

Domain Mapping

So as is my usual approach to this, I wondered what it could be that could relate the domain janbritton.org to the old blog they had on WordPress.com – and I could think of only one possibility.

When we migrate a WordPress.com site to WordPress.org the first stage is to get the domain and map it on the original blog.  We then take leave the site running like that for a month before then pointing the domain at the site’s new server.  It’s a simple way to maintain your link juice, and is very effective.

But what happens when you use the LinkedIn WordPress app is that for some reason it looks up the domain on WordPress.com and uses the WordPress.com URL rather than the mapped domain.  I guess there are reasons for this, but if you’ve migrated your blog from WordPress.com this could be mighty confusing.

The answer is to delete the WordPress.com domain mapping extra.  You can’t just change your primary domain – you have to delete the domain you’re using for the live site.  Otherwise the application won’t work correctly.  This may well cause us some future migration headaches for heavy LinkedIn users of WordPress.com going self-hosted.

Typically Snarky Image (source not known - found all over the interwebs, so let me know if it's yours)

Online snark towards IE, particularly in Twitter, is really common and I keep seeing comments in my timeline like these:

Love that WordPress might be dropping IE6 support in 3.2. You might as well take care of IE7 while you’re at it.

- @jschuller

or

sometimes I wonder if going around the globe, uninstalling every single copy of IE, is less time-consuming than debugging

- @RobPoort

or

What’s sad is how much of a time suck #IE really is for developers. Think of the billions spent on just debugging for IE!

@Dr_Overdose

And they used to really wind me.  Happily they don’t any more.  I’m over it.

So why did they wind me up?  Because the amount of time and energy expended in whinging about Internet Explorer in the industry is ridiculous.  It hasn’t changed in five years either.  The whinging is still there. It just never stops. And it needs to.

It’s an Environment Problem, Stupid

This is where I’m going to no doubt draw some criticism, quite possibly from my colleagues even, but here goes:

Internet Explorer, from version 6, is as much a limiting part of our web environment as the potholes and bumps in our roads are a limiting part of car design.

A car designer is powerless to change the roads in your city or country, just like you and I are powerless to make enterprises change their browser of choice. They don’t care about whether it makes a bit of extra work for us, they care about how much extra work upgrading will be for them.

Of course we can take the moral high ground. IE8 is more secure than IE7. IE9 is faster and more standards compliant. Good, solid reasons for upgrading. But no more likely to be listened to than the advice a car designer from Lotus might give to Greece about the environmental and safety benefits that surfacing their roads to a higher standard might bring. Greece has other priorities than listening to a car designer, and enterprises have higher priorities than listening to the advice of web developers.

So What’s the Real Answer for Enterprise Users?

We found a very real problem for our clients – the back-end of WordPress is a pretty poor place to work in with IE6 and sometimes poor in IE7.  It’s usually passable in the latter, but in some enterprises we found that IE7 installs were so locked down that some functionality, particularly within third party plugins, just wouldn’t work well or was so slow as to be unusable.

In the end we recommended that content teams should be allowed to use Firefox or Google Chrome internally. In all cases so far this advice has been heeded. With Chrome it even has the advantage that it can be installed by users even on Windows PCs with very locked down permissions because of the way it’s coded to not need any admin access. That means you can probably get your content managers running a decent browser without any involvement from IT. Portable Apps on USB sticks can also be run, meaning Firefox and other tools can be made available.

But do check whether that might not be in breach of local IT rules – I wouldn’t want any of you to get into trouble now.

And for Web Developers and Designers?

In terms of web development we’re all going to have to do our best with progressive enhancement. The interconnect/it site works perfectly well in IE6, but has different features to when it’s view in Firefox, and different again if viewed in Chrome.

There are points when you have to make a judgement call. Is it worth supporting that last 5% using out of date browsers? Well, that depends. It’s simple maths – if, say, the cost of supporting a browser with 5% share of your site’s traffic is less than the profit you make from those visitors then you continue to support it. Don’t complain, just do it. That’s the only possible business case you have to make. It may not be fun, but if you’re a professional it’s the only thing you can do. If you’re a hobbyist then support whatever browser you feel like – it’s entirely your choice, and don’t feel obliged to support minority browsers when you’re not making any money from your sites.