PHP echo's javascript as text?

Question

I am trying to echo some javascript but it is making it as text, it works fine on my test page but when I add it to wordpress it turns it into text. But I have another part where the script runs fine.

    echo ' 
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: \'short_name\',
  route: \'long_name\',
  locality: \'long_name\',
  administrative_area_level_1: \'short_name\',
  country: \'long_name\',
  postal_code: \'short_name\'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById(\'autocomplete\')),
      { types: [\'geocode\'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, \'place_changed\', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = \'\';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

if (typeof jQuery != \'undefined\') {

    alert("jQuery library is loaded!");

}else{

    alert("jQuery library is not found!");

}

jQuery(document).ready(function () {initialize();});

    </script>
   <style>

      #autocomplete {
        top: 0px;
        left: 0px;
        width: 350px;
      }

    </style>

  </head>

  <div>

';

I know that the code works, just that the echo doesn't. Please help.

Sorry for the sloppy code :[

Output :

<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&#038;sensor=false&#038;libraries=places"></script><br />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><br />
   <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.</p>
<p>var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};</p>
<p>function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}</p>
<p>// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();</p>
<p>  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }</p>
<p>  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]</p>
<p>if (typeof jQuery != 'undefined') {</p>
<p>    alert("jQuery library is loaded!");</p>
<p>}else{</p>
<p>    alert("jQuery library is not found!");</p>
<p>}</p>
<p>jQuery(document).ready(function () {initialize();});</p>
<p>    </script></p>
<style>
<p>      #autocomplete {
        top: 0px;
        left: 0px;
        width: 350px;
      }</p>
</style>

Answer 1

There are a couple of different ways you can do this.

1) Create a variable heredoc string with all your javascript code in it. Then echo that string. Test to see if that works.

2)The proper way to add scripts to WordPress whether it's a plugin or a theme is to use the wp_enqueue_scripts function (documentation here) and call .

WordPress syntax is as follows:

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Step 1: Place your script into its own js file, for example your-map-canvas.js.

Step 2: Create a new function.

function your_map_canvas(){}

Step 3: In the function, create your own handle (can be anything). For this example I'll use map-canvas. You will want to make the name unique enough that other plugins/themes won't use the same function and cause conflicts.

Step 4: Add the source to the file. If it's a plugin (as you've indicated), use plugin_dir_path(); (documentation here) to get dynamically get the path to your plugin folder. $src should look something like this now: plugin_dir_path(__FILE__).'path/in/plugin/folder/to/your-map-canvas.js'.

This is what you should have so far:

function your_map_canvas(){ wp_enqueue_script('map-canvas', plugin_dir_path(__FILE__).'your-map-canvas.js'); }

Step 5: Call your function with the wp_enqueue_scripts hook

add_action( 'wp_enqueue_scripts', 'your_map_canvas' );

The final code should look something like this:

function your_map_canvas(){
    wp_enqueue_script('map-canvas', plugin_dir_path(__FILE__).'your-map-canvas.js');
}

add_action( 'wp_enqueue_scripts', 'your_map_canvas' );

Answer 2

Wordpress converts it to text even when I add it directly into the text editor, because of the spaces and newlines in the code. So I had to use a raw html plugin that allows the code to go through untouched by wordpress. So I added the code in between the plugin snippets and it worked.