Web Presence Partners

We’re at WordCamp Miami!

Daniel — Sat, 18 Feb 2012 13:29:14 +0000

We’re at WordCamp Miami 2012 today! We’ll be posting a few random thoughts and photos as we go.

The CSS Image Map Generator is Back

Daniel — Thu, 29 Dec 2011 00:44:33 +0000

After a brief hiatus, our CSS Image Map Generator tool is back online. We took it offline while transitioning to the new site design and are happy to be bringing it back!

Access it here.

If you haven’t used it before, it’s an easy-to-use GUI tool to create CSS-based “image maps.” Rather than using the HTML map and area tags, it uses CSS positioning to achieve a very similar effect by layering HTML anchor (“a”) elements over an image.

The interface consists of four tabs (plus a fifth Feedback and Credits tab):

Upload Image – Upload the image you’d like to place links on. Once the image is uploaded successfully, you’ll automatically jump to the next tab.
Visual Editor – A nice, drag-and-drop interface that allows you to place your links anywhere on the image. You can move, resize, edit, and delete the link from here. Click the Pencil icon and set the link text, title, and URL. Otherwise your link will be pretty pointless!
Preview – Just as you’d expect, you can preview your creation here before moving on. If you’re not happy with your work, you can always click back to the Editor tab and make changes.
Generated Code – Provides you with ready-made HTML and CSS code that can be copied and pasted onto your website. Be sure to change the path to the image to something that makes sense on your website!

That’s all folks. If you use this tool and have some feedback for us, we’d love to hear it.

Creating a WordPress Post Meta Widget, Part 2

Daniel — Thu, 22 Dec 2011 21:22:18 +0000

This is the final installment of our two part series on building a simple WordPress widget that displays the current post’s meta information. You can see part one here.

In this post, we’ll be adding some user-selectable options to our post meta widget. If you’re familiar with the widgets that are included with WordPress, most of them allow you to customize their title as it appears in your blog’s sidebar area. We’ll be adding that option to our widget, as well. In addition, we’re going to add the option to use the current post’s title as our widget title.

WordPress Functions We’ll Be Using

How It Works

Creating an options form for our widget (or a “control” function as the WordPress internals call it) is just as simple — if not simpler — than creating the widget itself. If you have some experience creating and consuming forms in PHP, this really is a snap.

Your options form is really just a standard HTML form that posts back to itself when the user clicks the save button. So, your control function has to do two things:

Save any option values that have been posted to us.
Output the form that allows the user to set option values.

Once we have a control function, we just need to let WordPress know about it using wp_register_widget_control and we’re all set.

The Code

First, a couple notes regarding this particular implementation: To store the option values for our widget, I’m going to use WordPress’ built-in options database. We’ll be adding two options: my_post_meta_widget_title and my_post_meta_widget_use_post_title. Verbose? Yes. Chances of colliding with another option? Pretty slim.

WordPress is even more hands-off with our control function than it is with our widget function. There are no parameters passed to it, and it does not have any constraints regarding its output.

As mentioned previously, the first thing you’ll want your function to do is check the $_POST array to see if we have new values for our options. If there are new values present, we’ll update the values stored in the database. Let’s take a look at what our function will look like with just that code included:

Pretty standard PHP so far. Notice, however, that we did use WordPress’ esc_attr function to escape the user-supplied title string, just in case. Notice also that we’re casting my_post_meta_widget_use_post_title to an integer because the form control we’re about to use is a checkbox. That should also take care of any potential strangeness our users might attempt to introduce.

Okay, but what if there were no new values submitted? We need to retrieve the existing values from the database so we can pre-fill the form with our user’s previously selected options or default values if they’ve not made a selection previously. Let’s add that little bit of magic to our function and see what it looks like.

else {
            $use_post_title = (int) get_option('my_post_meta_widget_use_post_title');
        }
        if (isset($_POST['my_post_meta_widget_title'])) {
            $widget_title = esc_attr($_POST['my_post_meta_widget_title']);
            update_option('my_post_meta_widget_title', $widget_title);
        } else {
            $widget_title = get_option('my_post_meta_widget_title');
        }
        $widget_title = ($widget_title) ? $widget_title : 'About This Post';
    }
?>

Cool. So, if the user gives us new values via $_POST, we write them to the database and use them. Otherwise, we pull the existing values from the database. If we come up empty there, we use a default value for the title. Since the checkbox is just a simple boolean, we don’t bother setting a default.

Side note: If you’re having a little trouble with that last line, I’m using PHP’s ternary operator to assign a default value to the title. More information is available on the ternary operator in the official PHP docs.

Now we’ve got all the info we need to show the user an options form, so let’s do that:

/> Use Post Title as Widget Title

Widget Title

} ?>

We’re using a pretty standard HTML form laced with a little PHP magic to show the user the values they’ve previously selected (or the defaults.)
If you take a close look at our boolean option (the option we used a checkbox to represent) you’ll notice something a little out of the ordinary: a hidden input with the same name as our checkbox and a value of 0 (zero). A checkbox’s value is only included in a form’s post data if the box is checked; otherwise, nothing about the checkbox is sent. Here, we’re taking advantage of another behavior to substitute a 0 value. If the browser encounters two values for the same named form element, it only includes the last one with the post data. So, if the box is checked, the hidden input’s 0 value is ignored, and the checkbox’s 1 is used. However, if the checkbox is unchecked, it is ignored and the 0 is used.

So, we’ve pulled in our new settings if they’re present, and given the user a form to use to change them. All that’s left is to let WordPress know that all this wonderful code exists! For that, we register our function using wp_register_widget_control, like so:

/> Use Post Title as Widget Title

Widget Title

wp_register_widget_control('my_post_meta_widget', 'my Current Post Meta', 'my_post_meta_widget_control'); ?>

Revisiting Our Widget Code and Adding our Options

In part one, we created a function to display our post-meta widget in our blog’s sidebar. Combine that with the code we just wrote, and you’ll get something like this:

function my_post_meta_widget($args) {
        if( ! is_singular() ) return;
        extract($args);
        echo $before_widget . $before_title . 'About This Post' . $after_title;
        ?>
        
            
            By 
            
            Categories: 
            Tags: 
        
        

    function my_post_meta_widget_control(){

        if (isset($_POST['my_post_meta_widget_use_post_title'])) {
            $use_post_title = (int) $_POST['my_post_meta_widget_use_post_title'];
            update_option('my_post_meta_widget_use_post_title', $use_post_title);
        } else {
            $use_post_title = (int) get_option('my_post_meta_widget_use_post_title');
        }
        if (isset($_POST['my_post_meta_widget_title'])) {
            $widget_title = esc_attr($_POST['my_post_meta_widget_title']);
            update_option('my_post_meta_widget_title', $widget_title);
        } else {
            $widget_title = get_option('my_post_meta_widget_title');
        }
        $widget_title = ($widget_title) ? $widget_title : 'About This Post';
        ?>
        
            
            />
            Use Post Title as Widget Title
        
        
            Widget Title

They look nice together, don’t they? The only trouble is that our control function is doing an awful lot of work for nothing. Right now, the widget function we created is completely ignoring our new options. Let’s drop in a few lines of code that will read our option values from the database and act appropriately:

        echo $before_widget.$before_title;

        $use_post_title = (int) get_option('my_post_meta_widget_use_post_title');
        if($use_post_title) {
            the_title();
        } else {
            $widget_title = get_option('my_post_meta_widget_title');
            $widget_title = ($widget_title) ? $widget_title : 'About This Post';
            echo $widget_title;
        }

        echo $after_title;
        ?>
        
            
            By 
            
            Categories: 
            Tags: 
        
        
        
            
            />
            Use Post Title as Widget Title
        
        
            Widget Title

Alright, all set. Drop that into your functions.php and let the magic begin!

Creating a WordPress Post Meta Widget, Part 1

Daniel — Wed, 14 Dec 2011 20:01:12 +0000

This part one of a two part series on creating WordPress widgets. Part one will cover the widget itself, and part two will cover creating the widget’s settings panel that appears in the WordPress admin.

About the Widget We’re Creating

For our website, I wanted to display the post meta information (such as the author, date, categories, etc.) in the sidebar rather than above the article. I also wanted to be able to easily move it around if need be using the widgets panel in WordPress.

So, I decided to create a custom WordPress widget that displays information about the current post, but only if we’re on a single post. That means the widget does nothing and shows nothing if used on a blog archive or index page.

The widget will end up generating code that looks something like this:


    About This Post
    
        December 13, 2011
        by Daniel
        No Comments
        Categories: foo, bar
        Tags: blee

Note that the div and h3 tags will be replaced with a few variables that allow WordPress to tell us what elements to wrap around our widget and its title.

WordPress Functions We’ll Be Using

Here’s a quick list of the WordPress functions we’ll be using below. Each item links to its page in the WordPress codex.

Note that we’re using wp_register_sidebar_widget and NOT register_sidebar_widget. register_sidebar_widget has been deprecated since version 2.8.

How it Works

Widgets are surprisingly simple to create in WordPress. There are really only two steps involved:
Create a function that echos out the code you want displayed in your widget, making sure to include the before_widget, before_title, after_title, and after_widget code that WordPress supplies you with.
Register your function with WordPress using the wp_register_sidebar_widget function.

The Code

The code inside the function is pretty much up to you to write however you see fit. However, there are a few things you need to have. First, your function must accept a single argument, which is an associative array with the following keys:

before_widget
before_title
after_title
after_widget

If you take a look at the example HTML earlier in this post (along with the note below it) and the array keys above, things should start to make some sense.

To make it easier to use the items from the array, we’re going to use PHP’s extract function to create variables from our array and its keys. Now we have access to these handy variables:

$before_widget
$before_title
$after_title
$after_widget

So far, our code looks something like this:

Now let’s make our widget function actually do something by echoing some code out to the browser. There are a few ways to accomplish this but because of the way the WordPress the_title, the_author, etc. functions work, I’m going to use a closing PHP tag output to the browser. Let’s see what that looks like:

    ?>
    
        
        By 
        
        Categories: 
        Tags: 
    
    
}
?>

Now we have a nice function that displays some info about our post, but it’s not a real widget quite yet. We still need to wrap our markup in those fancy tags that WordPress gave us. Let’s do that.

echo $before_widget . $before_title . ‘About This Post’ . $after_title;
    ?>
    
        
        By 
        
        Categories: 
        Tags: 
    
    echo $after_widget;
}
?>

Let’s register it with WordPress and drop it in a sidebar to test it out. To let WordPress know that the sidebar exists, we have to use the function wp_register_sidebar_widget, which looks something like this:

There are a few other arguments you can include, but we’re not worried about those right now. For now, let’s register our widget right after our function definition. For the id argument, we just need a unique string that will identify our widget. I’m going to use my_post_meta_widget_id. The complete code should now look like this:


    
        
        By 
        
        Categories: 
        Tags: 
    
    wp_register_sidebar_widget(‘my_post_meta_widget_id’, ‘Post Meta Widget’, ‘my_post_meta_widget’);
?>

We’re in the home stretch! Since our widget is displaying information about a single post, we only want it to appear when we’re displaying a single item, not archives, indexes, or search results pages.

Achieving this behavior is actually quite simple. We just need to add the WordPress conditional tag is_singular to our code to determine whether or not were looking at a singular item. In this case, if we’re not looking at a singular item, we do nothing.

if( ! is_singular() ) return;
    extract($args);
    echo $before_widget . $before_title . ‘About This Post’ . $after_title;
    ?>
    
        
        By 
        
        Categories: 
        Tags:

That’s all there is to it. Drop the code above into your functions.php and use the widgets panel in WordPress to place your fancy new widget on your blog sidebar.

In the next post, I’ll show you how to add options to your widget so you can customize the title or just about anything else you need!

Hey Look, a Blog!

Daniel — Tue, 13 Dec 2011 23:01:49 +0000

We just recently updated our website and are very happy to be adding a blog as well! Check this space for WordPress tips, business and marketing info, and anything else we can find that’s nerdy or business related.

If you have suggestions of your own, please let us know in the comments or by contacting us!