… +1’s from friends and contacts can be a useful signal to Google when determining the relevance of your page to a user’s query. This is just one of many signals Google may use to determine a page’s relevance and ranking …

and if that isn’t enough, consider the limited Field Trial of Google+ already reaching an estimated user base between 10 and 20 million, adding a +1 button to your content becomes even more important.

While there are plugins that exist to add +1 buttons to your WordPress blog, I will explain how to modify your theme and add the +1 button without using plugins.

Note: If you are modifying themes, you should do so using child themes. Child themes help to preserve your modifications during upgrades, and make backing out your changes easier if you break something.

Begin by adding the script tag, just prior to your closing body tag in footer.php.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</body>
</html>

Next, if you want to add the +1 button to your single posts, edit loop-single.php, you’ll want to decide where to place the button, in this example it will appear immediately to the right of the post title.

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?> <g:plusone></g:plusone></h1>

<div class="entry-meta">
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->

Note the added plusone tag

<g:plusone></g:plusone>

As WordPress (since 2.9) provides a canonical link element it is not necessary to include the href attribute.

However, if you want to include +1 outside of a single post/page, like in loop.php, where the canonical link is not helpful, you can use the following.

<?php /* How to display all other posts. */ ?>

        <?php else : ?>
                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a> <g:plusone href="<?php the_permalink(); ?>" ></g:plusone></h2>

                        <div class="entry-meta">
                                <?php twentyten_posted_on(); ?>
                        </div><!-- .entry-meta -->

Note the added plusone tag

<g:plusone href="<?php the_permalink(); ?>" ></g:plusone>

For further customization, such as button size and the exclusion of counts, please refer to the Google +1 documentation.

Fortunately, this has allowed me to discover one of the more useful options, the results only layout. With this option and a few minor modifications, you will be able to leverage Google’s search with your existing WordPress search box.

So to begin, if haven’t done so already, create your own custom search engine. I’ll leave it to you to decide on the name, description, sites to index, etc. and focus on the settings that impact you integrating your custom search into WordPress.

First, when you’re creating (or editing) the look and feel of your custom search, you will want to chose the results only layout. Here you can also customize your style or chose from one on those Google provides.

Next you’ll want to get the code necessary to display the search results in your blog. While there is probably little reason to change the query parameter name from the default of q, if you do, make sure you don’t use s as it’s used for WordPress’ built in search. Copy your generated code into the clipboard.

Next, you will want to add a new page to your blog. Here the title is less significant than the permalink, which for this example will be named google-cse. Paste the generated code into this page, disable comments, and publish it.

Note: You may want to create your own page template for the search results page to remove the title, authorship, etc.
Note 2: If you have auto-generated menus that include your pages, you will likely want to customize them to exclude your search results page.

Finally, you will want to edit your WordPress theme’s searchform.php. If this does not exist, you can create it. I removed theme specific function calls for this example, but you can adjust this as you see fit. The most important parts are the action, which must point to the permalink of the search results page we just created, and the name and id which must match the query parameter name we previously chose, in this case Google’s default q.

<form method="get" id="searchform" action="/google-cse/">
<label for="q" class="assistive-text">Search</label>
<input type="text" class="field" name="q" id="q"/>
<input type="submit" class="submit" id="searchsubmit"/>
</form>

Note 3: Since we are now using the query parameter of q, if your theme decorates the search form with css (as twentyeleven does) some modifications may be necessary. CSS entries referencing #s will have to be changed to #q. For exmaple

input#s {
    background: url(images/search.png) no-repeat 5px 6px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 14px;
    height: 22px;
    line-height: 1.2em;
    padding: 4px 10px 4px 28px;
}

Will have to be modified to

input#q {
    background: url(images/search.png) no-repeat 5px 6px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 14px;
    height: 22px;
    line-height: 1.2em;
    padding: 4px 10px 4px 28px;
}

Note 4: If you are modifying themes, you should do so using child themes. Child themes help to preserve your modifications during upgrades, and make backing out your changes easier if you break something.

Update: as reader PamL points out, if you have only “Loading” showing in the search results, remove the blank lines in the Google CSE code for your search results page.

This example determines distance between the two points in miles, however it can be modified to return distance in kilometers by replacing 3959.0 (the average radius of the earth in miles) with 6371.0 (the radius in kilometers).

This code does no validation on the existence of the zip code, and will likely return valid coordinates of something (whatever Google thinks you really meant) when you pass it a non existent zip code.

The original geocode code was found here.

Note: You will have to provide your Google Maps API key in the key variable.

import math
import urllib

def get_lat_long(location):
        key = ""
        output = "csv"
        location = urllib.quote_plus(location)
        request = "http://maps.google.com/maps/geo?q=%s&output=%s&key=%s" % (location, output, key)
        data = urllib.urlopen(request).read()
        dlist = data.split(',')
        if dlist[0] == '200':
                return dlist[2], dlist[3]
        else:
                return None, None

def calculate_distance(zip1, zip2):
        lat1, lon1 = get_lat_long(zip1)
        lat2, lon2 = get_lat_long(zip2)

        if (not lat1) or (not lon1) or (not lat2) or (not lon2):
                return -1

        lat1 = float(lat1) * math.pi/180
        lon1 = float(lon1) * math.pi/180
        lat2 = float(lat2) * math.pi/180
        lon2 = float(lon2) * math.pi/180

        return 3959.0 * math.acos(math.sin(lat1) * math.sin(lat2) + math.cos(lat1) * math.cos(lat2) * math.cos(lon2-lon1))