WordPress Plugins: Setting Up and Adding Location to Your Website

It's easy to add a map to your WordPress website! Learn how in this tutorial.

WordPress + TomTom Plugins - Part 1

Today, an online presence for your business is required, and it's never been easier to create a web site, blog, or social media account to take part in the digital economy. What if your business has a physical presence as well? You want to connect your online presence to your stores, offices, or events in the physical world so customers can find you. Adding a map to your website solves that problem.

Let’s take a look at one solution to mapping your digital business to your real-world business: creating a WordPress Plugin that makes adding TomTom maps to any WordPress-based website quick and easy. In this article we'll:

• Explain why WordPress is a great option for building an online presence and how a Plugin works.
• Create a basic Plugin.
• Register the developer API keys that we’ll need to use the Map Display API.

WordPress Websites

We decided to start with WordPress (https://wordpress.org) because, although there are many ways to set up a website, WordPress offers some distinct advantages regardless of the size of your business and the technical abilities of your team.

WordPress is a popular open-source web publishing platform used as the basis of almost 1/3 of all websites. WordPress is extremely flexible, made for building anything from a simple blog to an enterprise ecommerce site. In addition, WordPress is available as hosted solutions on wordpress.com, as a turnkey application through many web hosting services, or as a self-hosted web publishing framework.

Once set up, a WordPress site provides a simple back-end administrative interface that gives non-technical users the ability to manage and customize the site without having to write code or alter files directly. WordPress Plugins are optional software packages that enable users to "plug in" additional functions, automation, or customizations that aren't provided in the base WordPress platform.

There's an official WordPress Plugin Repository from which users can find and install Plugins written by other users. WordPress Plugins are easy to write with a little knowledge of HTML, PHP and maybe some JavaScript. In fact, we'll get started on a basic WordPress Plugin that adds maps to a website by the end of this article.

Maps with TomTom

The next step is deciding how to add a map to the website. The map will appear on our "Contact Us" page and will support displaying markers for locations defined in a list or database.

For this project we’re using TomTom's Map Display API to implement the stores map WordPress Plugin. TomTom is one of the most experienced companies in GPS navigation and mapping, and they provide some of the best maps available today. TomTom's Map Display API and other supporting APIs are easy to use and have a free tier appropriate for testing, personal use, and small businesses. In addition, you'll find excellent documentation, tutorials and examples for using the Map Display API.

At the end of this article we’ll register our application (in this case the Plugin) with TomTom and get developer keys that allow us to use the TomTom Maps and Search APIs.

Creating a WordPress Plugin

Now that we have some basic decisions made, let's dig into implementing the actual WordPress Plugin. You'll need the following to continue:

• A working WordPress installation in an environment where you have access to the file system. For writing a new Plugin, a local test environment is okay.
• Register your user account and get a free API key at the TomTom developer site.
• A text editor or development environment for creating and editing the Plugin code files.
• Basic knowledge of PHP and JavaScript programming languages is helpful, but not necessary. We'll provide the important code details.

In your WordPress installation, all Plugins will be installed in the /wp-content/plugins folder. Plugins that are contained within a single PHP file can be installed directly in this folder. Plugins that require additional resources (code files, images, and so on) live in their own subfolders within the /plugins folder.

We're going to start out with a simple one-file Plugin. However, in future articles we'll add features to the Plugin that will require supporting code files, so we'll need to create the following folder:

/wp-content/plugins/wp-tomtom-stores-map

Within this folder, create a new file:

/wp-content/plugins/wp-tomtom-stores-map/store-locator.php  

The wp-tomtom-stores-map.php file contains the following code:

  Plugin Name: TomTom Stores Map Creator 
  Plugin URI: http://developer.tomtom.com/ 
  Description: Creates a map showing store locations. 
*/ 
,?>

Once you save this file, the WordPress Plugin will appear in the admin panel of your site.

It won't do anything yet, but you've created the basic possible Plugin. We'll build on this foundation in future articles.

Creating the Plugin Admin Panel

The basic WordPress Plugin file we just created does very little so far. It identifies the Plugin and makes it appear in the list of available Plugins for our WordPress site. You can even activate and deactivate the Plugin. But, so far, it does nothing else.

The next step is to tell WordPress to add the Plugin to the menu bar when it's activated. The add_action function takes care of this:

/wp-content/plugins/wp-tomtom-stores-map/store-locator.php  

The add_action() function is a hook that WordPress runs at specified times, in this case when the Plugin is activated.

We’re going make add_action() run a function that will create one admin menu item with two sub-menu items based on the ttlocator_pages_init() function, which looks like this:

function ttlocator_pages_init() { 
  add_menu_page( "TomTom Map Configuration", 
     "TomTom Store Locator", 
     "manage_options", 
     "tomtom-map-plugin"); 

  add_submenu_page("tomtom-map-plugin", 
       "TomTom Store Locations", 
       "Store Locations", 
       "manage_options", 
       "tomtom-map-plugin", 
       "ttlocator_config_page_html"); 

  add_submenu_page("tomtom-map-plugin", 
       "TomTom SDK Setup", 
       "SDK Setup", 
       "manage_options", 
       "tomtom-map-plugin-sdk-setup", 
       "ttlocator_sdk_setup_page_html"); 

  if (is_admin()) { 
      add_action('admin_init', 'ttlocator_register_settings'); 
   } 
}  

The options in this function define the admin pane title, admin menu title, user capability required to configure the Plugin, a unique internal name for the menu item and function that defines the contents of the admin page.

We also add an action to call the ttlocator_register_settings()function. This function registers a setting with WordPress, which will let us save our TomTom Map Display API key to the database.

The ttlocator_config_page_html() function will call the actual contents of the page.

function ttlocator_config_page_html(){ 
  ?>

Right now, this just prints a heading in the pane. Next we'll add some additional functionality to the pane.

Registering a TomTom Map Display API Key

The next steps will require access to the TomTom Map Display API and software developer kit (SDK), so you'll need to register as a developer, register your application with TomTom, and get an API access key.

To register as a developer, go to the TomTom for Developers registration page and create a new user account. If you're already registered, to go the TomTom for Developers login page and log in.

Once you're logged in, go to your Dashboard and click the "+ Add a new app" button. You'll be asked for some information about the application. Enter "TomTom Stores Map Plugin" for the App Name.

You can select the check boxes for any of APIs you want to use for your project. For the WordPress Plugin, check Map Display API and Search API. We'll use the Map Display API to display the map with pushpins for store locations. We'll use the Search API to find the map coordinates for store addresses.

On the dashboard you can see your app's Consumer API Key. This is used to authorize calls to the API in your code.

An important security note: it's important to keep your Consumer API Key secure within your organization and your code. Any API transactions made with your key count against your API use credits, so securing your key properly makes sure that only your app is using those credits.

Next Steps

At the beginning of the article we set out to create a map solution that would link a business's online web presence to its real-world storefront presence. Using WordPress as an easily accessible web publishing platform, we created the starting elements of a WordPress Plugin that will use the TomTom Map Display API to display a map on the website.

We also registered our application with TomTom and got the developer keys needed for the Plugin to access the Map Display and Search APIs.

At this point the Plugin can be activated and has an admin panel interface but isn’t able to do any work. In the next article we'll add more functionality to the Plugin including an admin panel interface that includes a map and the ability to create a list of store locations.

This article originally appeared on developer.tomtom.com. The original author is Gregory De Jans.