0

I originally posted this issue on Stack Overflow but my issue wasn't solved so I'm also posting it here as this site is more relevant to WordPress development:

I'm making a WordPress plugin which uses Google maps JavaScript API to show multiple locations in a map. For this reason it needs to have javascript in the plugin's frontend for the map to work.

To make javascript work with my plugin, at first I included my PHP code in a WordPress page using the plugin "Insert PHP" and my Javascript and CSS in the same page using the plugin "Scripts 'n Styles". Now, it's obvious that this approach isn't correct because i can't upload my plugin to the WordPress directory this way and ask the users to install all these plugins.

So I transfered my PHP code to my plugin's main PHP file and the PHP code works great. However, trying to load my external JS file DynamicMap.js and also my external CSS file DynamicMap.css doesn't work at at all. Now I don't know about the CSS but I know that the JS file doesn't load at all because I have an alert command at the first line of the JS file which should indicate that the file was loaded succesfully. So what could be the issue here?

Here is the relevant code in my plugin's main PHP file: (Note that I use the add_shortcode function to show the plugin's frontend elements in any page or post I add the shortcode to.)

<?php 


// register jquery and style on initialization
add_action('init', 'register_script');

function register_script()
{
  wp_register_script( 'custom_jquery', plugins_url('DynamicMap.js', __FILE__), array('jquery') );

  wp_register_style( 'new_style', plugins_url('DynamicMap.css', __FILE__), false, '1.0.0', 'all');
}

// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');

function enqueue_style()
{
  wp_enqueue_script('custom_jquery');

  wp_enqueue_style( 'new_style' );
} 



function RenderPluginFrontend()
{

  //PHP code to connect to the database.

  //PHP code that allows the user to select a city and area from the database, to show the selected area's stores on the map.

}

add_shortcode('DMOSL', 'RenderPluginFrontend');


function oscimp_admin()
{
  include('map_of_resellers_admin.php');
}

function mapofresellers_admin_actions()
{
  add_options_page("Map of Resellers", "Map of Resellers", "read", "Map of Resellers", "oscimp_admin");
}

add_action('admin_menu', 'mapofresellers_admin_actions');


?>

I think that there is no need to include the code in my JS file because like I said I have an alert command at the very first line of the file and it doesn't appear at all in the browser. Thanks in advance for any help.

Edit: I was advised from a Stack Overflow user to var_dump the location of my script path by calling var_dump( plugins_url('DynamicMap.js', __FILE__) ). And I found out that the var_dumb didn't include the htdocs folder after the base URL. e.g. the correct url was http://codescapes.byethost3.com/htdocs/wp-content/plugins/Map_of_resellers/DynamicMap.js while the var_dumb printed http://codescapes.byethost3.com/wp-content/plugins/Map_of_resellers/DynamicMap.js. So I corrected this by adding /htdocs to the WordPress URL in Settings -> General Settings. But that didn't solve my issue. Then I tried inserting manually the full path of my DynamicMap.js file into the wp_register_script function and this didn't work either. My script still didn't load.

Update: Turns out that my issue wasn't in my code itself, but due to the fact that the changes I was making to my external JS file didn't apply unless i cleared my browser's cache.

See my relevant question here: The changes I make to an external JS file of my WP plugin are only applied after I clear my browser's cache.

When I initially created the JS file it didn't have any alert commands to let me know that it loaded successfully but the Google map wasn't showing due to an error in my CSS file. When I later added alert commands to debug it, the alert commands weren't showing because my browser used the initial cached version of my JS file, so I was fooled into thinking that it wasn't loaded. So problem solved and thanks to all the people that answered my questions.

  • when you look in the source of the page in the browser, you don't found DynamicMap.js ? – mmm Apr 20 '18 at 21:19
  • @mmm No I don't find it, nor do I find the source of my plugin's main php file. – Stavros Skamagkis Apr 20 '18 at 21:21
  • Does your theme call wp_head() to output scripts and styles? – Milo Apr 20 '18 at 21:28
  • @Milo I just use one of WordPress built-in themes, Twenty-Twelve. How do I find out if the theme calls wp_head()? Sorry, I'm new to WordPress development. – Stavros Skamagkis Apr 20 '18 at 21:31
  • I just try you code and it works as expected. try to put only this code in your plugin and remove everything else to see if you see a difference. – mmm Apr 20 '18 at 21:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.