Docs

[roman5987]

Hi, I’m working on a project where I needed some custom functionality. I added the x-child theme and began writing a short code function in functions.php. The goal is to use php to extract some numerical values from the user metadata and pass them to a java script function which will generate a graph.

I added a javascript file to the x-child directory ( same one as where functions.php is found ), but I can not reference it properly withing the php function. Console throws a 404 error.

This is the way I’ve been trying to reference it thus far:

echo '<script type="text/javascript" src="jsfunctions.js"></script>';

I’ve modified the src path in many ways but no luck so far.

[Jade]

Hi Roman,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[roman5987]

This reply has been marked as private.

[Friech]

Hi There,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[roman5987]

Hi, sorry for the confusion. I’ll try to clarify at the end of the post, but first lets take a step back and start from the initial conflict that I ran into.

This is the file structure of x-child
-framework
-jsfunctions.js
-style.css
-functions.php
-screenshot.png

In functions.php i would like to run the contents of jsfunctions.js. For testing purposes I was trying to simply show an alert message. I try to reference this javascript file by doing the following in function.php:

echo '<script type="text/javascript" src="jsfunctions.js"></script>';

This however fails as i get a 404 error as the browser is unable to find this javascript file. So my question is, given the location of this file, how should I structure my src path to access it?

End goal
The very basic idea is that I need to use google charts. In my case I need the chart to be dynamic, the output will vary based on a users metadata. I can retrieve and analyze this data in the shortcode that I am writing in the x-child functions.php. The problem that I am currently running into is how exactly can I pass this data to an external javascript file which will generate the chart.

[Rad]

Hi there,

You can’t pass data from functions.php to javascript directly. But possible through embedding and URL variables, it depends on what you wish to embed.

About the 404, you should use WordPress reserved functionality. WordPress is modular with lot of features, the relative path shouldn’t be used.

Example, it should be like this

echo '<script type="text/javascript" src="http://example.com/wp-content/themes/x-child/jsfunctions.js"></script>';

but if we will convert that to WordPress friendly path, then it should be like this

$child_full_path = get_stylesheet_directory_uri().'/';
echo '<script type="text/javascript" src="'.$child_full_path.'jsfunctions.js"></script>';

Hope this helps.

[roman5987]

UPDATE

Thank you for your help, I just wanted to update this post with the full solution that worked for me, in case anyone else may run into this issue.

To reference the external JavaScript function from within functions.php I used the code mentioned above. After obtaining the full path name I was able to use the wp_register_script(), wp_localize_script() and wp_enqueue_script( ) to pass the variables from my functions.php file to an external JavaScript file.

Code in functions.php:

$child_full_path = get_stylesheet_directory_uri().'/';
$myFilename = "/jsfunctions.js";

$fullpathname = $child_full_path . $myFilename;
// Register the script
wp_register_script( 'some_handle', $fullpathname );

// Localize the script with new data
$translation_array = array(
  'some_string' => __( 'Some string to translate', 'plugin-domain' ),
  'socialValue' => $social,
  'conventionalValue' => $conventional,
  'realisticValue' => $realistic,
  'investigativeValue' => $investigative,
  'artisticValue' => $artistic,
  'enterprisingValue' => $enterprising
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

Then in jsfunctions.js ( which is in the same folder ), I was able to use these variables by referencing them as object_name.XYZ , where XYZ is whatever variable you want to reference in the array created above.

Useful links:

wp_register_script()

https://codex.wordpress.org/Function_Reference/wp_localize_script

[Rue Nel]

Hello There,

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

Thanks for sharing your solution.

[Author]

Posts