Announcing Spots

Imagine that you’re building a theme, and in various places in that theme you have small elements that you’d just love to content manage.  It could be items in a footer, in the header, or for use as widgets.  Things like a copyright notice, a credit line, some free form spaces and so on.

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

Comments
  • Dan 30 / Jul / 2012 at 2:50 pm

    Has this plugin been tested on a WordPress multisite network?
    I’ve created a template called spots-features.php and it works on the base site, but not on any sub-site. Any ideas why?

    • David Coveney
      David Coveney 1 / Aug / 2012 at 12:05 pm

      Yes, the plugin is tested in multisite and we use it like that in many instances ourselves. Where did you put the template?

  • pete 14 / May / 2012 at 2:37 pm

    Nice work… now, if you could incorporate some logic into the Spot widget, that would be *really* smart – you know – ‘show on page x, hide on page y’ e.t.c.

    • Robert O'Rourke
      Robert O'Rourke 15 / May / 2012 at 11:19 am

      Thanks Pete. The logic stuff gets really complicated really quickly UI and settings wise and is something I’d tend to apply as a generic interface for all widgets rather than build it into spots.

      There are plugins out there to do this – I think there’s one called “Widget Logic” but I’ve not used it extensively.

  • [...] in the plugins page, it is By Robert O’Rourke. You can read more about Spots at the interconnect site. There is another post for [...]

1 2
css.php