How should I use a wordpress child theme template to display js-driven html page?
I'm trying to move a web-app built in html, css and js to Wordpress running the Genesis Theme.
The app uses Leaflet.js to display a map on which the user can navigate and click to perform an action with that place.
In the original web-app, all the css and scripts required were loaded in the header section of the html page. In the Wordpress version they are called from a php file in the plugin which uses
The Wordpress version is available to view at https://notetheplace.app - if you go there you will see it displays the map OK. But nothing happens when you click on it. looking at the browser console, you will see the error - "leaflet.js?ver=1.3.1:5 Uncaught TypeError: t.addLayer is not a function" - so it appears to be having trouble reaching the leaflet script even though it is loaded when the page loads.
If you look at the page source, you'll see that the actual html for the map section, plus the javascript required to render it, have been embedded after the closing </body> tag.
So I'm obviously doing something wrong...
Can anyone explain to me how I should structure this page as a Child Theme template so that the scripts can be called when the map is clicked?
This is the current structure of the template page. What structure should it have to ensure the html appears within the <body> tags instead of after them... if indeed that is the problem - its likely there may be more than one... can anyone help?
The app uses Leaflet.js to display a map on which the user can navigate and click to perform an action with that place.
In the original web-app, all the css and scripts required were loaded in the header section of the html page. In the Wordpress version they are called from a php file in the plugin which uses
wp_register_script(ScriptName, scriptURL)wp_enqueue_script(ScriptName)The Wordpress version is available to view at https://notetheplace.app - if you go there you will see it displays the map OK. But nothing happens when you click on it. looking at the browser console, you will see the error - "leaflet.js?ver=1.3.1:5 Uncaught TypeError: t.addLayer is not a function" - so it appears to be having trouble reaching the leaflet script even though it is loaded when the page loads.
If you look at the page source, you'll see that the actual html for the map section, plus the javascript required to render it, have been embedded after the closing </body> tag.
So I'm obviously doing something wrong...
Can anyone explain to me how I should structure this page as a Child Theme template so that the scripts can be called when the map is clicked?
This is the current structure of the template page. What structure should it have to ensure the html appears within the <body> tags instead of after them... if indeed that is the problem - its likely there may be more than one... can anyone help?
<?php
/**
Template Name: Map Page
*/
genesis();
/* This template counts on there being the Note The Place plugin installed.
*/
?>
<div id="map" class="mapFull"> </div>
<!--Lyric Section Panel Here-->
<div id="LSection" class="LyricPanel hiddenStart">
<div id="lClose" class="closeLyBtn clickable" onclick="hideLyricPanel()">X</div>
<div class="frow row-start">
..... rest of html and homepage js here...ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.