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
twentyfifteen-maps and we’ll introduce a few files and subdirectories. Specifically, add the following files:
And then add the following subdirectories
Ultimately, the directory structure for the child theme should look something like this:
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
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
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
Next, the code that’s been powering Google Maps can be added to its own file:
And then it can be included in
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:
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.