WordPress path url in js script file

Question

I added custom script    wp enqueue script  functions   get bloginfo  template url       js functions js    search   null  false     It works great  except in the functions js I have   Reset style background    url     images searchfield clear png   no-repeat top left     This used to work before  until I changed to pretty permalinks and  htaccess  The folder hierarchy is like      themename js themename images  the images and js folder are in themename folder    I tried    images -   image -  images   Normally it should go back 1 level wherever the js file is located      I don t want to use full path   Is there another way that WordPress can recognize in the javascript file to have the correct path   Currently I am just confused what I am doing wrong

User · Answer

According to the Wordpress documentation, you should use wp_localize_script() in your functions.php file. This will create a Javascript Object in the header, which will be available to your scripts at runtime.

See Codex

Example:

<?php wp_localize_script('mylib', 'WPURLS', array( 'siteurl' => get_option('siteurl') )); ?>

To access this variable within in Javascript, you would simply do:

<script type="text/javascript">
    var url = WPURLS.siteurl;
</script>

User · Answer

wp register script  custom-js  WP PLUGIN URL   PLUGIN NAME js custom js  array   NULL true       wp enqueue script  custom-js          wnm custom   array   template url    gt  get bloginfo  template url          wp localize script   custom-js    wnm custom    wnm custom      and in custom js  alert wnm custom template url

User · Answer

You could avoid hardcoding the full path by setting a JS variable in the header of your template  before wp head   is called  holding the template URL  Like    lt script type  text javascript  gt  var templateUrl     lt    get bloginfo  template url      gt     lt  script gt    And use that variable to set the background  I realize you know how to do this  I only include these details in case they helps others    Reset style background     url    templateUrl   images searchfield clear png

User · Answer

If the javascript file is loaded from the admin dashboard  this javascript function will give you the root of your WordPress installation  I use this a lot when I m building plugins that need to make ajax requests from the admin dashboard   function getHomeUrl       var href   window location href    var index   href indexOf   wp-admin      var homeUrl   href substring 0  index     return homeUrl

User · Answer

For users working with the Genesis framework   Add the following to your child theme functions php  add action   genesis before    script urls      function script urls       gt       lt script type  text javascript  gt       var stylesheetDir     lt    get bloginfo  stylesheet directory      gt         lt  script gt   lt  php     And use that variable to set the relative url in your script  For example   Reset style background     url    stylesheetDir   images searchfield clear png

[javascript] WordPress path url in js script file

Examples related to javascript

Examples related to wordpress

Examples related to wordpress-theming