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

1. Removing the auto capitalisation of ‘WordPress’

   When version  3.0 was released a fairly simple filter appeared called capital_P_dangit. This was committed to the core by Matt Mullenweg for the purposes of brand reinforcement. Suffice to say many in the community weren’t thrilled by this passive-aggressive pedantry for a multitude of very good reasons but that’s another story (you can read all about it in Justin Tadlock’s article on the subject).

   // remove capital_P_dangit
   foreach( array( 'the_content', 'the_title', 'comment_text' ) as $filter )
       remove_filter( $filter, 'capital_P_dangit' );

2. Change excerpt length

   The default excerpts in WordPress are reasonable but rarely fit with the design you are working to. Alter the number of characters returned in an excerpt with the following snippet.

   function theme_excerpt_length( $length ) {
       return 80; // 80 characters long
   }
   add_filter('excerpt_length', 'theme_excerpt_length');

3. Change the excerpt truncation text

   You can alter the text that appears at the point of truncation, ie. ‘[...]‘, to anything you want, including a useful link to the post page.

   function theme_excerpt_more( $more ) {
       global $post;
       return '&hellip; <a class="read-more" href="'. get_permalink($post->ID) . '">' . __('Continue reading') . '</a>';
   }
   add_filter('excerpt_more', 'theme_excerpt_more');

4. Adding contact methods to the user profile

   On every recent project we have had there has been a need for extra user data, such as Twitter username, FaceBook URL and so on. The user profile screen can be edited using a combination of action hooks but WordPress also has a very simple way to add extra contact methods.

   function more_contactmethods( $contactmethods ) {
       $contactmethods['twitter'] = 'Twitter username';
       $contactmethods['facebook'] = 'Facebook URL';
       return $contactmethods;
   }
   add_filter( 'user_contactmethods', 'more_contactmethods' );

5. Removing the inline stylesheet from galleries

   By default WordPress spits out an inline stylesheet whenever the gallery shortcode is used within a post. The reasoning is that users can control the number of columns each gallery has and the sizes of the images within them as well as a few other options. While it is a noble quest to give users more power over their images it also allows them to screw things up in new and exciting ways when using a custom theme. Adding style tags within the body of an HTML document is also invalid markup.

   Thanks to Safirul Alredha for this code:

   // remove gallery shortcode styling
   add_filter('gallery_style',
       create_function(
           '$css',
           'return preg_replace("#<style type=\'text/css\'>(.*?)</style>#s", "", $css);'
       )
   );

6. Replacing the gallery shortcode handler

   While the above snippet does a good enough job in many cases I still find the built in gallery shortcode function to be questionable. For example you can change what HTML tags the gallery outputs with (the default being a semantically poor series of definition lists) but there is no way to set theme defaults without parsing post/page content and adding the attributes to the shortcode programmatically. This is a bad idea for general use themes because it will screw up peoples sites if they switch to another theme in future.

   The shortcode can be rescued however by simply removing it and replacing it with your own callback:

   // replace gallery shortcode
   remove_shortcode('gallery');
   add_shortcode('gallery', 'theme_gallery_shortcode');
   
   function theme_gallery_shortcode( $attr ) {
       global $post, $wp_locale;
       // create your own gallery output...
   }

   You can alternatively use the built in shortcode’s internal filter ‘post_gallery’ to change the output and handling of the standard shortcode attributes.

7. Adding custom post types to search results

   Hopefully any custom post types that are set as publicly queryable will be included in the search results by default in future releases of WordPress but for now you can use the following code:

   function search_post_types( $query ) {
       if ( $query->is_search )
           $query->set( 'post_type', get_post_types( array( 'publicly_queryable' => 1 ) ) );
       return $query;
   }
   add_filter( 'the_search_query', 'search_post_types' );

8. Adding custom post types to the main RSS feed

   This can make sense for some sites if you want an amalgamated feed of all your content. We use an array filter in this case to get only those post types that have taxonomies so page-like content is ignored.

   function feed_post_types( $vars ) {
       if ( isset($vars['feed']) && !isset($vars['post_type']) )
           $vars['post_type'] = array_filter( get_post_types( array( 'publicly_queryable' => 1 ) ), 'get_object_taxonomies' );
       return $vars;
   }
   add_filter( 'request', 'feed_post_types' );

9. Enable post thumbnails

   This is one is pretty straightforward. Make use of WordPress 3.0′s post thumbnail feature in your theme.

   add_theme_support( 'post-thumbnails' );

10. Enable shortcodes in the text widget

    This little trick makes the text widget into a much more powerful tool. It’s used on this site to add an author list to the widget space in the footer, avoiding the need to code a specific author list widget.

    add_filter( 'widget_text', 'do_shortcode' );

But let’s assume you’re dealing with a typical, decent developer who doesn’t take the long route, or dangerous shortcuts.

There’s some nice research covering this, such as Boem, Abts Chulani [2000] which is worth reading if you’re interested by this kind of stuff.  But it’s heavy going, and doesn’t give a nice neat figure for lay people to understand.

So now I’m going to give the answer that many want to hear:

For each line of code produced in a 3GL non RAD environment the cost of your development is likely to come to around £20-£25 per line of new code.  And about £100 per hundred lines of re-used code.

Doesn’t sound too bad… that includes testing, development, refinement, code reviews and so on.  It’s based on the idea that most good developers can produce around 50-100 lines of code in a day if left alone and in peace.  Some produce reams of code, but it’s often poorly optimised and thought out and likely to bite back in years to come.  The cost also takes into account the design of that code before anyone touched a computer, and the various support staff required.  If a developer is working entirely alone and is self-supported with his PCs and the like, then his productivity drops so the project takes longer, but the cost shouldn’t change too much.

And don’t forget that cheap code is often bulkier than expensive code.  Which means nobody can look at a 1000 line program and actually say “Oh yeah, that’s £20k’s worth.”  Somebody needs to assess the quality of that code.

What we will say is that in general, if we’ve written you 1000 lines of fresh code (ie, no cut and pasting or reuse) it could well have cost you £25k by the time it’s fully tested and delivered.  A really big project, like, say, implementing a worldwide global payroll system for a major corporation may have five million lines of code and a final bill (including analysis) of around £125 million.  Not at all unreasonable, believe it or not.

So yes, code is expensive.  And that quick report you’d like us to knock up?  Maybe it’s not so quick.

To save costs it’s worthwhile looking at RAD (Rapid Application Development) methods, but in that you’ll end up with slower, more bloated code.  However, it can be a perfectly adequate approach and we use it all the time for simple data management back-ends and the like where performance isn’t that critical.  Sometimes we’ll generate 20,000 lines of code from a three hour job… but it gets the job done.  Albeit a little slowly!

Steve McConnell in Code Complete (a book which criticizes the widespread use of the waterfall model) refers to design as a “wicked problem” – a problem whose requirements and limitations cannot be entirely known before completion. The implication is that it is impossible to get one phase of software development “perfected” before time is spent in “reconnaissance” working out exactly where and what the big problems are.

It’s worth following the link.

I think software and design processes often end up trapped within this circle where nothing’s ever perfect. The iPhone isn’t perfect, for example – it may be ever so pretty, but it’s quite rubbish at Bluetooth connectivity, for example, or sending texts. In fact, it’s rubbish at a lot of things. One of its smartphone rivals, the N95, has a habit of crashing in certain situations, and flattening its battery in two hours because it’s furiously running an application in the background.

Same with websites. Our company site, Interconnect IT, will never ever, in my opinion, be perfect. Unless we simply devoted all our energies to that site – but then we’d have no time to work on client projects. We’re still a three man company, so we can’t have a £200k site. But we can be clever and cover 95% of the requirements.

With client sites it’s even trickier – we have to interpret a clients’ requirements, write them down, and send them back in a proposal with a rough mock-up, pricing and structure. They’ll read it quickly and usually accept. But once started they’ll look at the design, try it out, and realise that actually, the front page should have a simpler message. That may mean a restructuring. A week later, someone may point out that the colours they preferred have negative connotations in certain cultures.

All these require changes, sometimes at a late stage, and sometimes involving a lot of work. At some point, someone has to simply say – “OK, that’s good enough!”

Other clients, however, quite like the waterfall method. We have forms for certain business sectors, with consistent requirements, where they simply tick off what they want and like, choose an off-the-shelf design, and a couple of weeks later we deliver the website – all loaded up and everything. They then sign-off, or they ask for some revisions – images changed, copy edited and so on. It’s particularly suited where a small and busy firm needs a website, but it’s not really crucial to their business – it simply provides a service to people who already know them. Dentists, for example.