Refactoring Google Maps in WordPress | Tom McFarlin

Up to this point, a fair amount of work has been done in terms of introducing Google Maps in WordPress:

Twentyfifteen is setup to communicate with the Google Maps API
A map is being displayed in a custom template
There are two markers that are placed on the map
Each marker has its own InfoWindow used to display some information

There’s still more content that could be covered, and I’ll talk about some of the advanced content in another article but, for now, it’s time to refactor some of the code so that it’s more manageable, is organized in more of the “WordPress way,” and lays the foundation to more easily introduce new features.

Namely, all of the work that’s been done up to this point can be moved into a child theme and all of the code that’s been placed in the template can be abstracted out into its own files.

A Child Theme Google Maps in WordPress

I’m going to continue moving forward with working on a child theme for WordPress by introducing a child theme based off of Twentyfifteen.

Naturally, you can use whatever theme you’d like but for the purposes of this series, I’m going to continue with the theme that that’s been used throughout this series.

Create The Child Theme

This series of article assumes that you know the basics of creating a child theme. If not, the Codex has a good article on where to start.

From here, we’re going to create a directory in wp-content called twentyfifteen-maps and we’ll introduce a few files and subdirectories. Specifically, add the following files:

`functions.php`
`style.css`
`template-maps.php`

And then add the following subdirectories

`css`
`js`

Ultimately, the directory structure for the child theme should look something like this:

twentyfifteen-maps

Of course, this won’t actually work (let alone even show up in WordPress right now), but we’ve got the necessary files in place in order to create the child theme.

Define The Stylesheet

In order to make the theme accessible via the WordPress Dashboard, we need to add some information to style.css.

This will display the theme in the dashboard; however, there still won’t be a lot of functionality to the theme beyond what the base Twentyfifteen theme offers.

Next, the base theme styles need to be included in the child theme. To do this, adding the following function to the child theme’s functions.php file:

Now we can start actually moving the functionality that we’ve added to the base theme into the new theme.

The Google Maps API Library

Up until this point, the Google Maps API has been added using a normal script tag, but a better way to do it would be to use wp_enqueue_script so add this to functions.php:

Next, the code that’s been powering Google Maps can be added to its own file:

And then it can be included in functions.php:

If you’re new to child theming, notice the call to get_stylesheet_directory_uri(). This is being used in place of get_template_directory_uri() because we’re including files that are in the context of the child theme.

The rule of thumb is this:

If you’re working with files in a theme or in a base theme, use `get_template_directory_uri()`. If you’re working with files in a child theme, then use `get_stylesheet_directory_uri()`.

Anyway, notice that these two files pass true as to whether or not to load them in the footer of the page or not. This is because the library and the Google Maps code need to be loaded and fired after the page has loaded (this also improves page performance, but that’s a topic outside the scope of this article).

Add The Stylesheet

There’s a small bit of styling that exists in the template file from previous articles in this series that can be moved into its own file. In the css directory, create style.css and then add the following code to it:

Next, updating functions.php so that the add_twentyfifteen_maps_styles function includes the file as well:

This will ensure that the map looks the same in the child theme as it did in the parent theme.

Introduce The Template

Finally, add the template file to the child theme’s root directory. To do this, add template-maps.php – the file should be really simple and include nothing but the following:

Now the child theme can be activated, a page can be created, the template can be applied, and the Google Map will load.

Is That All?

In terms of the basics of using Google Maps within the context of WordPress, yes. This provides a way to keep all of the code abstracted into its own files, uses the proper WordPress APIs to include theme all, and also retains the same functionality that’s been used throughout this series.

There are plenty of advanced topics as it relates to Google Maps in terms of what can be achieved (such as calculating distances, getting directions, and so on) which may be interesting for a future set of article. If you’re interested, leave a comment; otherwise, that brings this series to an end.

Refactoring Our Code For Google Maps in WordPress