Develop Reference

CSP and script localization in wordpress

I want to properly use Content Security Policy on my Wordpress site, but also not hardcode URIs.
I am moving all my inline scripts to one file, and adding hashes to all script tags to use with Subresource Integrity.
The ajax localization gives me a hard time; It runs PHP to get the JS file name, and outputs it inline to an object (which gets used by ajax calls).
In order to make admin-ajax available, I have
global $wp_query;
wp_localize_script('project-js', 'ajax_object', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'some_vars' => json_encode($wp_query->query)
));
Which outputs:
<script type="text/javascript" id="project-js-js-extra">
/* <![CDATA[ */
var ajax_object = {"ajaxurl":"http:\/\/domain.tld\/wp\/wp-admin\/admin-ajax.php","some_vars":"[]"};
/* ]]> */
</script>
I need to be able to add a hash to this tag but I cannot find the right way.
I'm able to generate it in PHP like:
global $wp_scripts;
$l10n_candidate = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'some_vars' => json_encode( $wp_query->query )
);
$script_content = "/* <![CDATA[ */
var ajaxpagination = " . wp_json_encode( $l10n_candidate ) . ';
/* ]]> */';
$script_hash = hash('sha256', $script_content);
But I don't know how to add this to the page correctly, and also, this feels too hacky.
Without either outputting this hash, or moving this object creation to my main JavaScript file, the page will not pass my CSP and script will not run.
How do I accomplish this?

As of this moment the only way I could solve it is by using [wp_enqueue_scripts][1], which is the hook used by [wp_enqueue_script][2] when utilizing [wp_localize_script][3]
Doesn't feel like the best solution but it does work.
function abr_ajax_pagi_obj(){
global $wp_query;
$l10n_candidate = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'some_vars' => json_encode( $wp_query->query ),
);
$script_content = "/* <![CDATA[ */
var ajaxpagination = " . wp_json_encode( $l10n_candidate ) . ';
/* ]]> */';
$script_hash = 'sha256-' . base64_encode(hash('sha256', $script_content,true));
?><script integrity="<?php echo $script_hash?>"><?php
echo $script_content;?></script><?php
}
add_action( 'wp_enqueue_scripts', 'abr_ajax_pagi_obj', 5, 5 );
[1]: https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
[2]: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
[3]: https://developer.wordpress.org/reference/functions/wp_localize_script/

How do I retrieve the current user in wordpress through Javascript?

I have the following code which works. (When I press the button "test" is displayed on the input form.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/6.1.19/browser.min.js"></script>
<script>
function btn1() {
document.getElementsByName("admin-status")[0].value = "test";
}
</script>
I want to retrieve the username, so I thought I added it correctly, but it says not defined.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/6.1.19/browser.min.js"></script>
<script>
global $current_user;
$current_user = wp_get_current_user();
function btn1() {
document.getElementsByName("admin-status")[0].value = $current_user;
}
</script>
What am I missing? Thanks. Noob here.

The better way to add localize script
add_action( 'wp_enqueue_scripts', 'wp12311_enqueue_scripts' );
function wp12311_enqueue_scripts() {
wp_enqueue_script( 'wp12311-scripts', 'your_script_path/test.js', array( 'jquery' ), false, true );
wp_localize_script( 'wp12311-scripts', 'test', array(
'current_user' => wp_get_current_user()
) ) );
}
Now in test.js file you can access current user data like
var displayName = test.current_user.display_name;

You'll probably see a " is undefined" in js console and/or other errors. Note that you forgot the php <?php and ?> around the php code, and the $current_user would be "<?php echo $current_user ?>
If you are doing anything more than one line script you really should enqueue script and then localize script to a variable you can use in js on the page anywhere, not mix php and js!

Adding javascript to php (wordpress)? [duplicate]

This question already has answers here:
How to get JavaScript variable value in PHP
(10 answers)
Closed 5 years ago.
So I am helping my friend with his woocommerce WordPress site. He has some short javascript code that needs to be added to the thank you page for the site.
The javascript code takes three variables (totalCost, orderId and setProductId). I can not get to the HTML. So how do I add this code to the PHP and also, how do I access the variables from the PHP and write them into the javascript?
And where in the already existing code should I add it? Is it in the functions.php file for the theme?
I would be super thankful for help!
EDIT:
So would this work?
add_action( 'studentkortet_tracking', 'my_custom_tracking' );
function studentkortet_tracking($order_id){
?>
<script id="pap_x2s6df8d" src="http://URL_TO_PostAffiliatePro/scripts/trackjs.js" type="text/javascript">
</script>
<script type="text/javascript">
PostAffTracker.setAccountId(’xxxxxx’);
var sale = PostAffTracker.createSale();
sale.setTotalCost('<?php echo ($order->order_total - $order->order_shipping); ?>');
sale.setOrderID('<?php echo $order->id; ?>');
sale.setCurrency('<?php echo $order->get_order_currency(); ?>');
PostAffTracker.register();
</script>
<?php
}

Here is some working code, answered here
<script>
var p1 = "success";
</script>
<?php
echo "<script>document.writeln(p1);</script>";
?>

Here's the correct way of accessing PHP variables within a script. It utilises the function wp_localize_script() so that PHP variables are accessible in a script file. First include this file in your functions.php file
function example_enqueue_scripts() {
if( is_checkout() ) {
$args = array( 'total_cost' => 443, 'order_id' => 4567, 'set_product_id' => 123 );
wp_register_script( 'checkout-script', get_stylesheet_directory_uri() . '/checkout-script.js' );
wp_localize_script( 'checkout-script', 'checkout_script', $args );
wp_enqueue_script( 'checkout-script' );
}
}
add_action( 'wp_enqueue_scripts', 'example_enqueue_scripts' );
Then include this javascript in a file under your theme folder called checkout-script.js for example.
(function( $ ) {
'use strict';
$(function() {
var totalCost = checkout_script.total_cost;
var orderId = checkout_script.order_id;
var setProductId = checkout_script.set_product_id;
exampleFunction( totalCost, orderId, setProductId );
function exampleFunction( totalCost, orderId, setProductId ) {
//Do something in here
//alert(totalCost);
}
});
})( jQuery );

I don't know what setProductId is meant to be as a variable, but the hook you are looking for is woocommerce_thankyou. The $order_id is passed by default, which you can then use to grab the order object. Pretty much all the info related to the order can be accessed through the setter/getter methods on the order object.
/**
* Print Javascript on Thankyou page.
* #param int $order_id
*/
function so_47117329_thankyou( $order_id ){
$order = wc_get_order( $order_id ); ?>
<script id="pap_x2s6df8d" src="http://URL_TO_PostAffiliatePro/scripts/trackjs.js" type="text/javascript">
</script>
<script type="text/javascript">
PostAffTracker.setAccountId(’xxxxxx’);
var sale = PostAffTracker.createSale();
sale.setTotalCost('<?php echo $order->get_total() - $order->get_shipping_
(); ?>');
sale.setOrderID('<?php echo $order_id; ?>');
sale.setCurrency('<?php echo $order->get_order_currency(); ?>');
PostAffTracker.register();
</script>
<?php
}
add_action( 'woocommerce_thankyou', 'so_47117329_thankyou' );
Editing to add an alternative for enqueuing the scripts as suggested by #Andrew-Schultz. Using the woocommerce_thankyou hook gets you easy access to the $order_id, which would otherwise need to be retrieved from the URL. You will still access the javascript variables as he's shown in his answer.
/**
* Enqueue Javascript on Thankyou page.
* #param int $order_id
*/
function so_47117329_thankyou( $order_id ){
$order = wc_get_order( $order_id );
$args = array(
'total_cost' => $order->get_total(),
'order_id' => $order_id,
'set_product_id' => 123
);
wp_register_script( 'checkout-script', get_stylesheet_directory_uri() . '/checkout-script.js', array(), false, true ); // Last parameter loads script in footer
wp_localize_script( 'checkout-script', 'checkout_script', $args );
wp_enqueue_script( 'checkout-script' );
}
add_action( 'woocommerce_thankyou', 'so_47117329_thankyou' );

Run Specific Js on Specific page Wordpress

I want to run a specific js on a specific page. I.e: wwww.custom.com/english/
I've tried the following two codes (header.php and functions.php) but none of them work.
Code 1:
<script>
if(location.pathname=="/english/")
script.src = /js/custom.js;
</script>
Code 2:
function my_scripts() {
if( is_page( array( 'about-us', 'contact', 'management' ) ){
wp_enqueue_script( 'script-name', 'path/to/example.js', array(), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
The header one does not show at all, no error either.
The functions.php is a syntax error.
Any suggestions?
Much Obliged
PS: I'm using WordPress.

You code is great! You are just missing a closing parenthesis:
function my_scripts() {
if( is_page( array( 'about-us', 'contact', 'management' ) ) ){
wp_enqueue_script( 'script-name', 'path/to/example.js', array(), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
For future reference, in your wp-config.php file you can set debug to true, I believe that this will pick it up.

There is multiple other ways.
Just open your header.php and try to get current page slug or id and put simple if condition it will surely include your js
Code 1
global $post;
$post_slug=$post->post_name;
if($post_slug == 'about'){
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>
}
OR Code 2
$currentID= get_the_ID();
//instead of 10 put the your id
if($currentID == 10){
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>
}

Wordpress plugin pass javascript variable to php

Can somebody help me? I'm feeling so stupid. I took example code from WordPress codex, made a example plugin in my webpage, but there no respond...
PHP code is here:
/**
* Plugin Name: Ada Ajax Test
* Description: WP Codex based ajax example
* Version: 1.0.0
* Author: M. A. Tomas
* Author URI: http://www.matomas.cz
* License: GPL2
*/
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
if( 'index.php' != $hook ) {
// Only applies to dashboard panel
return;
}
wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') );
// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
wp_localize_script( 'ajax-script', 'ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}
// Same handler function...
add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
global $wpdb;
$whatever = intval( $_POST['whatever'] );
$whatever += 10;
return $whatever;
wp_die();
}
// shortcode pro zobrazeni na strance
add_shortcode( 'ajax-zkouska', 'my_action_callback' );
and Javascript code in external file is here:
// JavaScript Document
jQuery(document).ready(function($) {
var data = {
'action': 'my_action',
'whatever': ajax_object.we_value // We pass php values differently!
};
// We can also pass the url value separately from ajaxurl for front end AJAX implementations
jQuery.post(ajax_object.ajax_url, data, function(response) {
alert('Got this from the server: ' + response);
});
});
Where I mistake?

You have a few things mixed up.
Front End
If you are targeting the frontend, then you need to use this hook:
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
This allows you to add the needed scripts to the front end and not the admin side.
Ajax Calls
All ajax calls are executed within the admin context. So you will need to test for it and add the ajax hooks accordingly.
if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action_callback' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action_callback' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action_callback' );
// Add other back-end action hooks here
} else {
// Add non-Ajax front-end action hooks here
}
No Priv
The no_priv hook is meant for users that are not logged in. Add it if that's your intention.