The Great Escape of Houdini (the dog)

Minnows and dogs just go together.

Last week, we got an email from the fabulous (and minnow-y) designer who helped us with the Rocket Dog Rescue redesign, and lots of other projects. It read like this:

I am hoping you can help me. I know you have connections at Rocket Dog and I hoped you may be able to ask them on my behalf for help.

2 months ago someone dumped a small dog into our neighborhood. I saw him when I pulled up to my house and immediately could tell he was lost. No collar, his tail between his legs, he was terrified. I tired to get him, but he was too fast. I roamed the street for an hour and finally went home. There he was sitting on my porch as my wife came home. He ran off, of course, and I have been chasing him since. I put out flyers and received dozens of calls. I figured out his roaming schedule and decided to set a trap. I drove back and forth all day hoping I’d catch him, but nothing. He figured out how to get the food without triggering the trap. He knew when I would come and go. Needless to say, he was getting fat and I was getting tired. I told myself I would have to stop pursuing him by Friday and said a long prayer. As part of my last ditch I bought a better trap, went to KFC for chicken nuggets and set the trap one final time. Sure enough, I caught him! He’s now at the Berkeley shelter and being evaluated. We named him “Houdini”.

Now I’ve been talking with a dozen rescue groups to try and find him a foster home and NOBODY will take him because they are all full! I’ve offer medical help. I’ve offered to hire a trainer. NOTHING. He is fading FAST there. They said his chances of getting adopted are slim to NONE. He’s changes of euthanasia are HIGH. He needs to be socialized and to feel safe. He likes other dogs. Being under pressure and stress at the shelter he is now growling and unapproachable. He just sits in the corner. They haven’t even bathed the poor guy after a week of being there.

Do you think Rocket Dog can pull him, foster him and rehabilitate him? They are my last chance.

Needless to say, a few emails, a few texts, and a bit of logistical rigamarole later, Houdini is in the safe arms or Rocket Dog Rescue, where he will be evaluated, nurtured, and cared for until he can find his forever home.

It feels great to have our networks come together in this way. We have been pretty immersed in Rocket Dog Rescue for the last few years, and because they do the amazing and admirable work they do, we have invested in their success. But their work hadn’t yet touched our lives this personally. In this unique moment, when Kathy, a lover and protector of dogs (and a minnow), came upon a dog in need, Rocket Dog Rescue swung into action to do what we know they always do, what we’ve been helping them to do, and it felt magical.

Kudos to Kathy, who couldn’t leave a helpless dog out there alone in the world, no matter how inconvenient it was for her. And kudos to Pali (“the dog whisperer”, according to Kathy) for giving her life over to the welfare of dogs in need, and for inspiring so many other people to do the same.

We have long since been proud to be the pro-bono web team of Rocket Dog Rescue, and to help facilitate the wonderful work they do. But we are all the more pleased, proud and grateful now that their work has touched our lives so personally.

PART_1401421498960_PART_1401406148980_IMG_19671

Pali & Houdini

PART_1401421423555_PART_1401406471464_IMG_13741

Houdini getting a well-deserved rest

PART_1401421464724_PART_1401406423842_IMG_42201

Kathy and Houdini, reunited at the shelter.

UPDATE June 1, 2014: A few short days after Rocket Dog Rescue accepted Houdini, he was adopted at a weekend adoption event. Renamed “Virgil”, he has already found his forever home.

Houdini / Virgil and his new girl!

Houdini / Virgil and his new girl!

How to Properly Move the Entire Site Footer in Genesis

How to properly move the Genesis site footerWe recently had the need to move the entire .site-footer div in Genesis. There are various tutorials out there that suggest using the following code to relocate your footer content:

However this won’t actually move the entire .site-footer div. On the contrary, it will only relocate the contents of the div, which means you’ll end up with:

  1. An empty .siter-footer div
  2. Your site-footer content orphaned somewhere on your page with no good semantic classes or IDs

Not good, right?

So if you want to properly move the entire site footer, use the following code (making sure to substitute the desired hook in place of new_hook below):

Mm Plugin: HTTP URLs

Use the simple [http-url] shortcode to convert any URL to either HTTP or HTTPS.

Why Use This Plugin?

The most common case for using this plugin is in conjunction with social media sharing/commenting plugins, in which data is tied to a specific URL. On sites that are visible via both HTTP and HTTPS, this means that two different sets of differing data are created for every page. HTTP URLs provides a handy solution to this common problem.

Visit the Plugin Page »

Mm Plugin: Dashboard Notes

Dashboard Notes lets you create super simple notes and instructions for your clients within the WordPress dashboard. Choose the color of the notification, whether or not to include a logo, and exactly what pages to include the notification on (uses simple URL matching).

Usage

  • Install the Dashboard Notes.
  • Go to Appearance > Widgets where you will see a new “Dashboard Notes” sidebar.
  • To create a note, simply drag a new widget into the sidebar and give it some content (we typically use a text/HTML widget).
  • Once you’ve added content to the widget, click save, and the Dashboard Notes settings for this widget will appear.
  • Adjust the settings to meet your needs, and click save when you’re done.
  • Refresh, or navigate to any page to see your new note in action.

Visit the Plugin Page »

How to Synchronize Social Media Shares, Counts, and Comments Across HTTP and HTTPS

Social Media

The Issue

I use a social media, sharing, or commenting plugin and it shows different data on HTTP and HTTPS versions of the same page/post.

Viewed via HTTP

Viewed via HTTP

Viewed via HTTPS

Viewed via HTTPS

Why Does This Happen?

We build a lot of sites that use social media sharing and commenting plugins, such as:

And if you really want to boil it down to the basics, each of these plugins essentially does the same thing: associate data (comments, share counts, likes, etc) with a specific URL. Pretty simple, right?

The issue described at the very beginning of this article arises because HTTP and HTTPS versions of the same page look like two separate URLs to most of these plugins.For all intents and purposes, these two URLs are treated as separate pages by most plugins, even though they point to the exact same content. That little ‘s’ makes all the difference.

I imagine there are times when this separation is desirable, however we typically want HTTP and HTTPS versions of a page to be treated the same, so that all comments, likes, shares, etc. appear the same, regardless of which protocol is being used in the URL. If that’s what you’re looking to do, then read on. . .

The Solution

To solve this problem, we essentially have to do two things:

  1. Get the HTTP version of the current page/post URL.
  2. Pass this URL to the plugin.

1. Get the HTTP URL

This is the easy part. We generally use the following bit of code (which can be placed in functions.php):

In this snippet, we’re doing two things:

  1. Defining a function, get_http_url( $url ), which converts any URL to HTTP.
  2. Creating a shortcode, [http-url], which outputs the HTTP version of the current post/page URL.

Note: We could have combined these into one simple shortcode, however I prefer separating each bit of functionality out into it’s own function, so that we can use them later if so desired.

2. Pass the HTTP URL to the plugin

Now that we can generate the HTTP version of a post/page URL, we need to basically tell our plugin to use this URL (always HTTP) instead of the auto-generated URL (HTTP or HTTPS). How we accomplish this varies from plugin to plugin, so we’ll outline the basic steps and then give two examples below.

The Steps

  1. Figure out how to inject your HTTP URL in place of the auto-generated URL used by your plugin. Good plugins will have a well-documented way to do this. Decent plugins will have a way to do this. Bad plugins will have neither a way to do this, nor documentation (if this is the case, time to switch plugins).
  2. Use the shortcode you created above to insert your HTTP URL.

Examples

We’ll look at two examples: Share Buttons by AddThis and Facebook Comments Box.

Example 1: Share Buttons by AddThis

Share Buttons by AddThis
By default, this plugin will automatically use the current post URL to send and retrieve associated share counts. Fortunately, this plugin falls into the “good” category, as it provides a simple method and clear documentation for overriding the default URL using the addthis:url attribute.

So, say we’ve created a text widget that displays our share buttons. Out of the box, the HTML looks like this:

If we want to ensure that our sharing buttons will always reference the HTTP version of a page’s URL, and likewise ensure that our share counts are the same regardless of which protocol we’re using to view the page, then we can easily use the addthis:url attribute along with our [http-url] shortcode like so:

NOTE: you’ll need to make sure shortcodes are enabled inside widgets, which you can do by adding add_filter('widget_text', 'do_shortcode'); to functions.php.

Presto! Our share counts are now the same whether we’re viewing HTTP or HTTPS.

Example 2: Facebook Comments Box

Facebook
This plugin is a little trickier, and falls somewhere between “good” and “decent”. The plugin does provide us with a handy filter, facebook_rel_canonical, however the documentation is pretty tough to track down. According to the plugin’s readme.txt file, the facebook_rel_canonical filter “affects Open Graph protocol URL definitions, URL references sent in Open Graph actions, and more.” Kind of obscure, but sounds like we’re in the right place.

So, whereas before we we’re simply outputting some custom HTML, this time we have to use WordPress’ native filters API to substitute our HTTP URL for the plugins default URL:

Just include this snippet in functions.php and you’re ready to go! Comments will now all be associated with the HTTP URL of any given post/page.

In Conclusion

While the details may vary depending on what plugin you’re using, the essential principals remain the same:

  1. Get the HTTP version of the current URL.
  2. Pass this URL to your plugin.

I find that sleuthing around different plugins to figure out how to pass in my custom URL is actually a pretty enjoyable (though sometimes time-consuming) task. I inevitably learn more about how the plugin works, and usually discover a handy trick or two along the way.

And if you run into a brick wall and just can’t figure it out, always feel free to file a support request or email the plugin author.

And if that fails, you can always contact us – we love a good challenge.

And if that fails. . . well. . . time to switch plugins 🙂

New Mm Theme: Trestle

[box type=”download”]

Trestle

A handy boilerplate child theme for serious Genesis developers.

Trestle takes a lot of the grunt work out of building sites using the Genesis Framework, providing quick and easy-to-implement solutions to common problems and repetitive tasks. We’ve taken Genesis’ rock-solid foundation, integrated mobile-first CSS, responsive navigation, a full-featured settings panel, and much more. Download. Install. Enjoy.

View Demo » Download »[/box]

Features

Trestle: A handy boilerplate theme for serious Genesis developersTrestle includes tons of helpful features such as:

  • Centralized control panel (Genesis → Theme Settings)
  • Responsive navigation menu
  • Mobile first CSS
  • Custom control over post info and meta
  • Multiple page layouts
  • Auto-generating primary navigation
  • Ability to auto-install your favorite plugins
  • Helpful theme jQuery
  • Compatibility with Genesis Extender plugin
  • Optional link icons
  • Built-in shortcodes (columns, buttons, Font Awesome, etc)
  • Front-end styles appear in editor as well
  • And more!

Still to come. . .

There are some features still on the horizon as well (feel free to add a pull request if you’re interested in contributing):

  • SASS support
  • Direct logo implementation (non-CSS)

Plugin Review: blogVault

I’m just going to come right out and say it: blogVault is my new favorite way to backup, migrate, and restore WordPress websites.

We stumbled upon blogVault – or rather, it stumbled upon us – when blogVault founder Akshat Choudhary paid a visit to one of our Bay Area Web Freelancer Meetups. Long story short, Akshat demoed blogVault for us, it looked good, we signed up for a trial, and then. . . well, here’s what we found:

As Easy As It Gets

blogVault - adding a new site

Adding a new site to blogVault

One of blogVault’s defining features is its simplicity. Installing and using blogVault can all be managed from the blogVault admin dashboard. Just click the “Add Site” button, enter the URL and admin creds for your site, and blogVault will automatically install its plugin and start backing up. It’s as simple as that.

And every step of the way is surprisingly simple, which has been a welcome surprise.

Clean & Clear Interface

blogVault does come packaged as a plugin to be installed on your WordPress site, however it is different from most plugins in that all site management/interaction happens outside of the WP dashboard. Instead, you log into blogVault’s own dashboard (https://webapp.blogvault.net) to manage all your sites from one centralized location. I can see how some might like the ability to manage site backups, restores, and migrations from directly within WordPress, but I’ve been pretty content with using blogVault’s dashboard on its own.

blogVault - dashboard

Sites in the blogVault dashboard

The blogVault dashboard displays each site along with its backup status and a number of actions (backup now, test restore, migrate, etc). The interface clearly puts all the options right out in front of the user, and makes it very easy to check the status of a site (last backup, current backup progress, etc) without having to dig.

Backups, Restores, & Migrations

It goes without saying that a good backup plugin should just work. No ifs, ands, or buts. Unfortunately, this has not always been our experience in the past. With blogVault, however, we’ve had a remarkably high success rate (and we’re currently using it to manage over 100 sites). Backups automatically run every 24 hours and can be manually triggered at any point in time. If something goes wonky on a site and you need to restore a backup, you can just click the “Auto Restore” button (or “Test Restore” if you’d like to see what the backup looks like before officially restoring), and that’s that. blogVault also adds a nice feature in that you can download any previous backup (files, database, or both) in case you want to do things manually.

blogVault - migrating

Migrating a site with blogVault

Similarly, migrating sites is a piece of cake. We build most of our sites locally or on dev servers, and when it’s time to take the site live we need to migrate it to the final server and/or URL. In the past, this meant downloading all files, exporting the database from the dev site, uploading the files to the live site, importing the database to the live site, running a serialized search and replace script to correct URLs in the database, and praying that nothing went wrong during the process. With blogVault, the process is simplified immensely. After clicking the “Migrate-Site” link, users are prompted for the target site’s URL and FTP credentials, and that’s pretty much the whole process. blogVault ports all files and the database, and automatically replaces all instances of old URLs with new ones. This is hands down the easiest that migrating a site has ever been for us here at MIGHTYminnow.

Helpful History

Changes are highlighted in the history panel

Changes are highlighted in the history panel

One of our favorite blogVault features is the history panel. Many backup solutions allow you to see a site’s backup history, but blogVault does a few nice things that make it stand out. For one, plugin and theme changes are highlighted, which can make all the difference when troubleshooting a broken site. Additionally, blogVault allows you to add custom notes to each backup. We use this feature quite often to do things like explicitly mark a backup right before performing some operations on the database, or to make note of the first clean backup after fixing a broken site – essentially setting backup waypoints to guide us in the future.

Fantastic Support

I tend to think that the folks at blogVault have treated us especially well because we’ve provided them with a lot of feedback and testing, but I have to say that blogVault support has been amongst the best I’ve ever received. Support requests are handled quickly and efficiently. Akshat and his team have repeatedly gone the extra mile. Whereas other premium services and hosts sometimes push issues back on us with generic suggestions, the blogVault team has typically taken it upon themselves to just plain fix an issue when we face it. They’ve also been surprisingly responsive to feature requests and bug reports.

Issues & Bugs

blogVault - layout weirdness

Some wonky aesthetics

Any good review will cover a product’s issues/bugs, and blogVault does have its share of quirks. The good news is that, functionally, the product has proved itself completely sound in our experience. The issues we have encountered are primarily aesthetic in nature. A few examples include:

  • In the dashboard, some sites seem to get thumbnails and some don’t. And at various screen resolutions, things overlap in strange ways.
  • Progress indicators can act a bit unpredictably when migrating and/or backing up a site. During one migration, the indicator seemed to be stuck at 43%, then suddenly jumped to 118%, before coming back down again to just below 100%. The migration completed just fine, but there was some funny math happening in there somewhere.
  • When migrating a site, the progress indicator overlay covers everything else, so you’re stuck waiting until the migration is complete and can’t perform any other actions on other sites.
  • For a while, backups in the history panel seemed to be mixing up timezones. We’d backup a site, and the timestamp would say it was backed up “in 8 hours” – this appears to have been fixed shortly after we submitted a bug report however.

Bottom Line

Thumbs Up!All in all, the issues we’ve encountered with blogVault are pretty trivial when compared to the immense amount of time and hassle we’ve been saving. And the product only gets better – Akshat and his team have been extremely responsive and proactive about responding to bugs and implementing new features, and we’re excited for the improvements yet to come. We highly recommend signing up for a free trial and testing out the awesomeness of blogVault for yourself.

Try out blogVault →

WordPress Captions – How to Remove Default 10px Padding

One of the things WordPress does right out of the box that we don’t always like is automatically add an extra 10px of width to all images with captions. This is great if you want to preserve the default .wp-caption styling with a nice 5px of padded gray around the image, but if you change your CSS then you can end up with something not so great, like this:

Why the extra padding!

Well here’s a quick workaround using the newish img_caption_shortcode_width filter:

 

Mm Plugin: WP Hotkeys

WP Hotkeys

WP Hotkeys provides time-saving keyboard shortcuts to help you quickly navigate the WordPress dashboard.

Download Now »

WP Hotkeys helps you navigate your dashboard as quickly as possible with fully customizable keyboard shortcuts. After installing WP Hotkeys, you will see the default hotkey hints display in brackets next to each standard menu item in the admin. Typing a hotkey will access the associated top-level admin menu item (e.g. Pages), and will display any submenu items and activate their associated hotkeys (e.g. All Pages, Add New). At any point you can use the arrow keys to navigate between menu items (left/right will enter/exit submenus), and the enter key to navigate to the active (underlined) menu item.

Features

  • Works right out of the box with built-in default hotkeys for each standard dashboard menu item.
  • Hotkey hints next to each menu item help you remember your shortcuts (can be toggled on/off).
  • Fully customizable – define your own hotkeys.
  • Lightweight – less than 4kb minified jQuery.
  • Built-in warning to let you know if you have duplicate hotkeys.

Coming Soon…

  • Export/import your favorite hotkey setup
  • Define custom URL/hotkey pairings

Equal Height Columns with jQuery

Equal Height Columns with jQueryThere are a ton of great solutions out there for creating equal heights columns – so many that it can get a bit daunting to choose one. Here’s a simple jQuery snippet we’ve started using when CSS alone won’t suffice. Thanks to Rob Glazebrook for the building blocks, to which we added some special functionality including binding the equal height-ing to orientation change (for mobile) and window resize, as well as the option to specify a breakpoint above which the functionality should work.