{"id":2846,"date":"2019-08-01T13:57:39","date_gmt":"2019-08-01T13:57:39","guid":{"rendered":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-admin-panel\/"},"modified":"2021-11-30T21:52:29","modified_gmt":"2021-11-30T21:52:29","slug":"wordpress-plugins-and-tomtom-the-admin-panel","status":"publish","type":"post","link":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-admin-panel\/","title":{"rendered":"WordPress Plugins and TomTom: The Admin Panel"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2846\" class=\"elementor elementor-2846\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-450be0cc elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"450be0cc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1cd80214\" data-id=\"1cd80214\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6b08e2d elementor-widget elementor-widget-text-editor\" data-id=\"6b08e2d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 30-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>In today&#8217;s digital-first world it&#8217;s important to connect your online presence &#8212; website, blog, or social media account &#8212; with the physical presence of your business: stores, offices, or events.<\/p><p><a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-setting\">Our previous article<\/a>\u00a0looked at the process of adding a map to a business website in order to display the locations of all storefronts for a business. We chose WordPress as a popular, flexible, and easily extended publishing platform for our site and chose TomTom&#8217;s Maps API for its ease of use and industry leading map resources.<\/p><p>To put these technologies together, we started creating a WordPress Plugin that makes adding the functionality of the TomTom Maps API to any WordPress-based website quick and easy. In the previous article we created the basic Plugin elements that allow the Plugin to appear in the WordPress administrative interface. We also\u00a0<a href=\"https:\/\/developer.tomtom.com\/user\/register\">registered<\/a>\u00a0our application with TomTom and got developer keys to access the Maps and Search APIs.<\/p><p>In this article we&#8217;ll:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Walk through the steps required to start creating the administrator-facing interface of the WordPress Plugin.<\/li><li style=\"font-size: 16px;\">Create a way to save our API key.<\/li><li style=\"font-size: 16px;\">Work on displaying a map in the Plugin admin panel.<\/li><\/ul><h2>Prerequisites<\/h2><p>For this part, you will need to have an understanding of HTML, CSS, JavaScript, jQuery, and PHP. It will help if you\u2019ve done some WordPress development before.<\/p><p>We\u2019ll walk through the basic steps to activate the Plugin, but we\u2019ll skip code that is just plain HTML, JavaScript, and PHP and unrelated to implementing the map portion of the Plugin.<\/p><h2>Saving the API key to the database<\/h2><p>In the previous article we registered our application and got a developer API key. We\u2019ll need to save it to the database so our Plugin will be able to use it.<\/p><p>We\u2019re going to create a new admin page to do this. You already saw the function\u2019s name referenced:\u00a0<code>ttlocator_sdk_setup_page_html()<\/code>. It\u2019s a simple function that generates an HTML form where the user can enter their TomTom API key:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-629f2ef elementor-widget elementor-widget-code-highlight\" data-id=\"629f2ef\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function ttlocator_sdk_setup_page_html() { \r\n\r\n  $plugin_directory = plugin_dir_url(__FILE__); \r\n\r\n  $stylesheet = $plugin_directory . &quot;styles\/styles.css&quot;; \r\n\r\n  ?><link href=\"<?php echo $stylesheet ?>\" rel=\"stylesheet\" \/><h1>TomTom SDK Setup<\/h1>\r\n<h2>SDK Key<\/h2>\r\n<p>Please enter your TomTom API key:<\/p>\r\n<form action=\"options.php\" method=\"post\"> \r\n\r\n      <?php settings_fields( 'tomtom-map-plugin-sdk-setup' ); ?> \r\n\r\n      <?php do_settings_sections( 'tomtom-map-plugin-sdk-setup' ); ?> \r\n\r\n       <input class=\"ttlocator-sdk-key-input\" name=\"tomtom_locator_api_key\" type=\"text\" value=\"<?php  \r\n\r\n                echo esc_attr(get_option( \r\n\r\n                  \"tomtom_locator_api_key\"))  \r\n\r\n              ?>\" \/> \r\n\r\n       <?php submit_button() ?><\/form> \r\n\r\n  <?php xmp=\"\">\r\n<\/?php><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3283771 elementor-widget elementor-widget-text-editor\" data-id=\"3283771\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Note that we\u2019re calling the\u00a0<code>settings_fields()<\/code>\u00a0and\u00a0<code>do_settings_fields()<\/code>\u00a0functions from the WordPress API at the beginning of our form. We also set the name of our input field equal to the name of the setting we\u2019ll be saving. Together, these API calls ensure that WordPress is able to generate a form that will save our setting.<\/p><p>We also use the API\u2019s\u00a0<code>get_option()<\/code>\u00a0function to pre-populate the text field with our API key if one has already been saved to the database. Using WordPress\u2019 Options API is a huge time saver here, because it means we don\u2019t have to create a new database just to hold our API key.<\/p><p>Finally, we call the WordPress API\u2019s\u00a0<code>submit_button()<\/code>\u00a0function. This generates a button that will submit our form to the WordPress admin options page. And with that, we have a fully functioning page that will let users save their TomTom API key or update a key they have already entered.<\/p><h2>Using the maps SDK for web<\/h2><p>Next, let&#8217;s<a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web\">\u00a0download the TomTom Maps SDK<\/a>\u00a0for Web files and copy them to the Plugin project.<\/p><p>The Maps SDK for Web includes all of the code files and resources you need to quickly add TomTom maps to a website. Rather than creating all the resources yourself, the Maps SDK for Web includes prepackaged JavaScript libraries, CSS stylesheets, images, glyphs and all the other resources needed to display maps. All you need to do is add a few lines of HTML and call the Maps SDK script.<\/p><p>Next, unpack the ZIP file, rename the SDK files folder \u201ctomtom-sdk\u201d, and copy the entire folder of SDK files to the WordPress Plugin project folder, wp-tomtom-stores-map. The files should look like this:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48190644136_a1bfce7a8a.jpg\" alt=\"WordPress1\" \/><\/p><p>The scripts and styles folders here are part of our Plugin project and will be explained later in this article.<\/p><h2>Adding maps to the admin panel<\/h2><p>Now, let\u2019s circle back to the ttlocator_config_page_html() function. Previously, all it did was show a title. Let\u2019s crank it up to 11:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-164d071 elementor-widget elementor-widget-code-highlight\" data-id=\"164d071\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function ttlocator_config_page_html() { \r\n\r\n   $plugin_directory = plugin_dir_url(__FILE__); \r\n\r\n   $stylesheet = $plugin_directory . \"styles\/styles.css\"; \r\n\r\n   $locator_js = $plugin_directory . \"scripts\/locator.js\"; \r\n\r\n   $tomtom_sdk_dir = $plugin_directory . \"tomtom-sdk\/\"; \r\n\r\n   $map_stylesheet = $tomtom_sdk_dir . \"map.css\"; \r\n\r\n   $tomtom_js = $tomtom_sdk_dir . \"tomtom.min.js\"; \r\n\r\n   $locations = ttlocator_get_locations(); \r\n\r\n \r\n\r\n   wp_enqueue_script(\"jquery\"); \r\n\r\n   wp_enqueue_style(\"ttlocator-styles\", $stylesheet); \r\n\r\n   wp_enqueue_style(\"ttlocator-tomtom-map-styles\", $map_stylesheet); \r\n\r\n   wp_enqueue_script(\"ttlocator-tomtom-sdk\", $tomtom_js); \r\n\r\n   wp_enqueue_script(\"ttlocator-locator-page-script\", \r\n\r\n       $locator_js, array(), false, true); \r\n\r\n \r\n\r\n   \/\/ add jQuery UI dialogs for deletion confirmation \r\n\r\n   wp_enqueue_script( 'jquery-ui-dialog' ); \/\/ \r\n\r\n   wp_enqueue_style( 'wp-jquery-ui-dialog' ); \r\n\r\n \r\n\r\n   ?>\r\n<div class=\"ttlocator_locator_page\"><h1>TomTom Store Locator<\/h1>\r\n<div id=\"map\" style=\"height:500px;width:95%\"> <\/div> \r\n\r\n   <script> \r\n\r\n       var tomtomSdkKey = '<?php echo esc_attr(get_option(\"tomtom_locator_sdk_key\")); ?>'; \r\n\r\n       var tomtomSdkPath = '<?php echo $tomtom_sdk_dir; ?>'; \r\n\r\n       var storeLocations = <?php echo json_encode($locations); ?>; \r\n\r\n   <\/script>\r\n<div class=\"ttlocator-stores-table\"><h2>Stores<\/h2> \r\n\r\n  <?php if (sizeof($locations) === 0): ?>\r\n<p> \r\n\r\n           You haven&#39;t added any stores. Would you like to add one now?<\/p> \r\n\r\n  <?php \r\n\r\n   else: \r\n\r\n       echo ttlocator_store_table_html($locations); \r\n\r\n  endif; ?>\r\n<div class=\"ttlocator-add-store-button\"><button class=\"button button-primary ttlocator-add-store\"> \r\n\r\n               Add Store<\/button><button class=\"button bu\" id=\"ttlocator-delete-selected\"> \r\n\r\n               Delete Selected<\/button><\/div><\/div><\/div> \r\n\r\n   <?php echo=\"\" xmp=\"\"><\/?php><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3701536 elementor-widget elementor-widget-text-editor\" data-id=\"3701536\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>There\u2019s a lot going on here, but if we break it down, it\u2019s not so bad. Aside from a few WordPress API functions, it is mostly plain HTML.<\/p><p>The key thing to notice is the call to\u00a0<code>plugin_dir_url()<\/code>. This is a WordPress API call that, as its name implies, provides the URL of the currently executing plugin. This is important because of all the assets our admin page needs \u2014 both JavaScript and CSS \u2014 are in subfolders of our plugin directory. We can\u2019t hard code this because our plugin may be running on many different sites, each with a custom domain. Asking WordPress for our plugin\u2019s URL ensures that we\u2019re always loading our assets from the correct location.<\/p><p>Next, we set up variables that store the locations of resources our page will need: our own JavaScript and CSS, along with the\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0and CSS required by the TomTom Web SDK.<\/p><p>Then, you\u2019ll notice several calls to\u00a0<code>wp_enqueue_style()<\/code>\u00a0and\u00a0<code>wp_enqueue_script()<\/code>. This is the preferred way of loading scripts and stylesheets in a WordPress plugin. Instead of inserting your own link and script tags all over the place, you can rely on WordPress to place them correctly on the page.<\/p><p>After this, you see a\u00a0<code>div:<\/code><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2be3825 elementor-widget elementor-widget-code-highlight\" data-id=\"2be3825\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div id=\"map\" style=\"height:500px;width:95%\"> <\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e60ba5 elementor-widget elementor-widget-text-editor\" data-id=\"9e60ba5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">It may look unassuming, but this is where our admin page\u2019s map will live!<\/span><\/p><p>After the\u00a0<code>div<\/code>, we set a few JavaScript variables that our map will need to create itself:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6ba687 elementor-widget elementor-widget-code-highlight\" data-id=\"b6ba687\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script>\r\n\r\n   var tomtomSdkKey = '<?php  \r\n\r\n     echo esc_attr(get_option(\"tomtom_locator_api_key\"));  \r\n\r\n   ?>'; \r\n\r\n   var tomtomSdkPath = '<?php echo $tomtom_sdk_dir; ?>'; \r\n\r\n   var storeLocations = <?php echo json_encode($locations); ?>; \r\n\r\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dddfaeb elementor-widget elementor-widget-text-editor\" data-id=\"dddfaeb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>First, we\u2019re setting up the\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0key that our setup page saved in the database. This key must be accessible to JavaScript in order for your map to work. Next, we\u2019re saving the exact URL where the TomTom SDK is located. The map will also require this in order to work. Finally, we\u2019re saving a list of store locations that we loaded from the custom WordPress table that our plugin creates when it is activated.<\/p><p>The real magic happens\u00a0<code>locator.js<\/code>\u00a0&#8211; conveniently located in our plugin\u2019s scripts subdirectory. Starting on line 5, you\u2019ll see the following code:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c77a057 elementor-widget elementor-widget-code-highlight\" data-id=\"c77a057\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>tomtom.setProductInfo('Store Locator', '1.0'); \r\n\r\nvar map = tomtom.L.map('map', { \r\n\r\n   key: window.tomtomSdkKey, \r\n\r\n   source: 'vector', \r\n\r\n   basePath: tomtomSdkPath, \r\n\r\n   center: [39.8283, -98.5795], \r\n\r\n   zoom: 3.5 \r\n\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-652b3854 elementor-widget elementor-widget-text-editor\" data-id=\"652b3854\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre lang=\"php\" style=\"font-size: 16px;\"><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">We start by telling the SDK a little about the product that will be using it, and then we dive right into the code that creates the map. It\u2019s fairly self-explanatory: to create a map with the TomTom Web SDK, you simply make a call to the&nbsp;<\/span><code style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">tomtom.L.map()<\/code><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">&nbsp;function.<\/span><br><\/pre>\n<p>The first argument to the function is a string containing the id of the div where the map should be created. The second argument is a JavaScript object containing additional data the map needs.&nbsp;<code>key, source,<\/code>&nbsp;and&nbsp;<code>basepath<\/code>&nbsp;are all required.&nbsp;<code>key<\/code>&nbsp;and&nbsp;<code>basepath<\/code>&nbsp;use the variables we set up earlier in our PHP code.&nbsp;<code>source&nbsp;<\/code>can be either \u2018vector\u2019 or \u2018raster\u2019.<\/p>\n<p>Discussing the difference between vector and raster maps is beyond the scope of this article, but in general when working with maps on the web, you should default to using vector maps unless you have a specific reason not to.<\/p>\n<p>The two final properties,<code>&nbsp;center<\/code>&nbsp;and&nbsp;<code>zoom,<\/code>&nbsp;are optional, and give our map a bit of information about how to render itself. As expected,&nbsp;<code>center<\/code>&nbsp;gives the map a set of latitude and longitude coordinates on which to center itself. We\u2019ve set the map center to the exact middle of the United States in the map above, but feel free to customize it to your needs or even make it a configuration option in your own plugin.<\/p>\n<p><a title=\"WordPress2\" href=\"https:\/\/www.flickr.com\/photos\/182278316@N07\/48190696282\/in\/dateposted-public\/\" data-flickr-embed=\"true\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48190696282_d9703ec539.jpg\" alt=\"WordPress2\" width=\"500\" height=\"310\"><\/a><\/p>\n<p><span style=\"font-weight: bold;\">Side note:<\/span>&nbsp;you may have noticed that we called&nbsp;<code>tomtom.L.map()<\/code>&nbsp;when creating the map. That L stands for Leaflet, a JavaScript open source mapping library that the TomTom Web SDK uses to render maps. When interacting directly with the map to do things like add markers, you\u2019ll be using functions of the Leaflet API.<\/p>\n<p>After the map setup, the remainder of&nbsp;<code>ttlocator_config_page_html()<\/code>&nbsp;is bog-standard PHP and HTML \u2014 nothing WordPress specific. We even outsource some of our HTML generation to two functions named&nbsp;<code>ttlocator_add_store_html()<\/code>&nbsp;and&nbsp;<code>ttlocator_delete_location_confirm_dialog_html()<\/code>&nbsp;to prevent&nbsp;<code>ttlocator_config_page_html()<\/code>&nbsp;from becoming too unwieldy.<\/p>\n<h2>Next steps<\/h2>\n<p>In this article we started creating a basic WordPress Plugin admin panel that enables a site administrator to configure the stores map for a website. We downloaded and installed the TomTom Maps SDK for Web and started using the SDK and APIs to build our map.<\/p>\n<p>In the next article we&#8217;ll create the database table that will save store locations. We\u2019ll add an interface to create the list of store locations, converting addresses to coordinates with the TomTom Search API, and displaying locations on the map.<\/p>\n<p><em>This article first appeared on&nbsp;<a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%C2%A0\">TomTom&#8217;s Developer Blog<\/a><\/em>.<\/p>\n<p><em><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\">If you\u2019re interested in developing expert technical content that performs,&nbsp;<\/span><a href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\">&nbsp;today.<\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article we start creating a basic WordPress Plugin admin panel that enables a site administrator to configure the stores map for a website.<\/p>\n","protected":false},"author":3,"featured_media":5348,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[273,272,270,309],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress Plugins and TomTom: The Admin Panel &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel\u00a0\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Plugins and TomTom: The Admin Panel &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article we start creating a basic WordPress Plugin admin panel that enables a site administrator to configure the stores map for a website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel\u00a0\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-01T13:57:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-30T21:52:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-admin-panel\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"WordPress Plugins and TomTom: The Admin Panel\",\"datePublished\":\"2019-08-01T13:57:39+00:00\",\"dateModified\":\"2021-11-30T21:52:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-admin-panel\/\"},\"wordCount\":1418,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png\",\"keywords\":[\"HTML\",\"JavaScript\",\"Mapping\",\"WordPress\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-admin-panel\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0\",\"name\":\"WordPress Plugins and TomTom: The Admin Panel &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png\",\"datePublished\":\"2019-08-01T13:57:39+00:00\",\"dateModified\":\"2021-11-30T21:52:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Plugins and TomTom: The Admin Panel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Plugins and TomTom: The Admin Panel &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel\u00a0","og_locale":"en_US","og_type":"article","og_title":"WordPress Plugins and TomTom: The Admin Panel &#183; Technical Content Marketing | ContentLab","og_description":"In this article we start creating a basic WordPress Plugin admin panel that enables a site administrator to configure the stores map for a website.","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel\u00a0","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-08-01T13:57:39+00:00","article_modified_time":"2021-11-30T21:52:29+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#article","isPartOf":{"@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-admin-panel\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"WordPress Plugins and TomTom: The Admin Panel","datePublished":"2019-08-01T13:57:39+00:00","dateModified":"2021-11-30T21:52:29+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-admin-panel\/"},"wordCount":1418,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png","keywords":["HTML","JavaScript","Mapping","WordPress"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/wordpress-plugins-and-tomtom-the-admin-panel\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0","name":"WordPress Plugins and TomTom: The Admin Panel &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png","datePublished":"2019-08-01T13:57:39+00:00","dateModified":"2021-11-30T21:52:29+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/wordpress-plugins-and-tomtom-admin-panel%c2%a0#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Plugins and TomTom: The Admin Panel"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/08\/6.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2846"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2846"}],"version-history":[{"count":7,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2846\/revisions"}],"predecessor-version":[{"id":6166,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2846\/revisions\/6166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5348"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2846"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}