Applied Vitals

One of Garmin Connect’s recent enhancements is the embed widget – a snippet of code that allows you to post activity details on your website or blog.

This is a great new feature, but one that may be proving difficult for WordPress users to take advantage of.  There is a solution!!!

So the “embed” widget code from Garmin Connect is a small chunk of HTML code for an iframe.  The problem with embedding this code within a WordPress blog post is that the code gets scrubbed or deleted as soon as you toggle from the HTML view back to the Visual view.

If you stay in HTML view and save the post, you’re fine.  But if you need to return to the post to edit at any point and admin page opens in Visual view, then your embed snippet is removed.

The solution is Custom Fields.  You may have always wondered what the Custom Field component below the main post content field was used for.  Well here is a perfect use for it.

More about how I’m using the WordPress blogging platform to run this adventure racing website

In short, entering code into a Custom Field, removes it from the main blog post body that the toolbar editor controls.  This allows the embed code to be added separately from formatted content and thereby avoid toolbar editor minipulation.

To assist with the WordPress plumbing and behind the scenes coding, I have used the plugin Get Custom Field Values that allows you to use a widget or template tags to easily retrieve and control the display of any custom field values/meta data for posts or pages.

First, install and activate the plugin.  Then follow these steps on:

How to embed a Garmin Connect activity into a WordPress blog post

Step 1: Copy embed code from your Garmin Connect activity page

Step 2: Go to Custom Field admin section

Step 3: Enter Custom Field name, paste Garmin Connect embed widget code and click "Add Custom Field" button

Step 4: In the Get Custom Field Value admin sidebar widget, enter your Custom Field name, select "This Post" check box and click "Send shortcode to editor" button

Step 5: The shortcode to embed your Custom Field will be pasted into your post content - move around within your post as needed

Recap:
Step 1: Copy embed code from your Garmin Connect activity page
Step 2: Go to Custom Field admin section
Step 3: Enter Custom Field name, paste Garmin Connect embed widget code and click “Add Custom Field” button
Step 4: In the Get Custom Field Value admin sidebar widget, enter your Custom Field name, select “This Post” check box and click “Send shortcode to editor” button
Step 5: The shortcode to embed your Custom Field will be pasted into your post content – move around within your post as needed

Following is an embed Garmin Connect activity in WordPress using the Custom Field method.