ZodomaticaBits of Tzaddi's Life

Display a Google Map in a WordPress page without it breaking

If you’ve tried putting a Google map in your WordPress site’s contact page, you might have noticed that sometimes it breaks when you edit the page in visual mode later. Here’s a quick fix I just used in a site I’m working on.

This solution uses custom fields. Here’s a tutorial on custom fields in case you need it.

First, I took the code from Google Maps and put it into a custom field in my contact page.

Then I edited my theme by adding a bit of code into page.php, just after where the line which outputs my title. Yours would look something like this:
<h1>the title();</h1>

So after the title I inserted the following to get my custom field which I had called “floatright”:

$customField = get_post_custom_values("floatright");
if (isset($customField[0])) {
      echo '<div class="alignright">'.$customField[0].'</div>';
}

So basically that checks if I’ve set a value for that custom field in the current page, and if so it inserts the field wrapped in a div which is floated right.

Of course I could have just hard-coded the map into page.php when the page is “contact us”. But this is a flexible solution that could be used on other pages and for any item that we want to float over to the right. And, the client can update that map area if they want to later without breaking that wrapper HTML. If you’re savvy enough to do this on your own site you might just put the div into your custom field for even more flexibility.

Posted: December 6th, 2009 under WordPress Tips.
Comments: 1

Comments

Previous post: « Beautifully animated music video – Neko Case
Next post: Three Years Later »