Theme customisation – how to store javascript externally when it utilises php variables? [on hold]

I have been developing a custom extension for my theme over the last few weeks.

This is my first time “developing” with WordPress. All works fine and I am happy with the resulting functionality, albeit it needs some tidying.

I am nervous to make it live as I have some concerns whether the code presents some security issues and major inefficiencies in it’s structure.

I will break down the specific questions using code snippets:

main-block.php

This section is my security concern and general best coding practice. The form is contained within a modal (for clarity):

<form name=”customForm”>
Validation Code:<br>
<!– <input type=”number” name=”inputcode”><br> –>
<input type=”password” name=”inputcode” id=”inputcode” maxlength=”6″ inputmode=”numeric”>
<input type=”text” name=”message” id=”message” style=”display:none; background-color: #FFCCCC;”><br>
<input type=”button” name=”submitbutton” value=”Submit” onClick=”customfunction()”>
<div id=”errors”></div>
</form>
**Question 1**
<script type=”text/javascript”>

**Question 2**
var i = 0

var myDots = “<?php echo $custom1 ?>”;
var dots = $(‘.points’)
for (var i = 0; i < myDots; i++) {
dots.eq(i).addClass(‘points-on’)
}

**Question 3**
function customfunction() {
const userInput = document.customForm.inputcode.value;
const pid = “<?php echo $postid ?>”;
const userid = “<?php echo $userid ?>”;
fetch(`http://…../wp-json/api/v1/customfunction?code=${userInput}&pid=${pid}&userid=${userid}`).then(r => r.json()).then(data => {
if (data.Data.message === “Correct”) {
//Close the modal automatically if the code is correct
document.querySelector(“.close-button”).click();
//Increase points by one
var points = $(“.points”)
for (var i = 0; i < data.Data.dots; i++) {
points.eq(i).addClass(‘points-on’)
$(‘#points’).text($(“.points-on”).length)
}
window.location.reload();
} else if (data.Data.message !== “Correct”) {
//Unhide the message form field which will display the incorrect message
document.getElementById(“message”).style.display = ‘block’;
}
//Empty the code input box
document.customForm.inputcode.value = “”
document.customForm.message.value = data.Data.message
})
};
</script>

Question 1:

I really dislike having this javascript declared inline. You can see all the code in the page source and don’t feel like this is normal or best practice. I have tried so many different ways of storing it separately but cannot get it to work. I would prefer it to be stored in child theme’s custom.js file but after adding this to my child functions.php, the functions still do not run:

add_action(‘wp_footer’, function () {
wp_enqueue_script(‘custom’, get_stylesheet_directory_uri() . ‘/custom.js’, array(‘jquery’), ‘1.0’, true);
});

I think perhaps it is because of a mixture of question 3 and question 4? Would love someone to walk me through this.

Question 2:

This code just sits there and works as needed when called in-line, but in an external javascript file (custom.js), how would main-block.php know how to use it as it is not wrapped in any kind of function. Is this normal? Perhaps this will work itself out if I get help with question 2.

Question 3:

As the customfunction() uses inline php code to build variables, I feel this could be the reason the external custom.js will not work properly?

const pid = “<?php echo $postid ?>”;
const userid = “<?php echo $userid ?>”;

How would custom.js create these variables to send to the API?

The API compares the value of inputcode from the form and performs an add/update_user_meta process based on whether inputcode matches a value in the database stored against the post.

TLDR

How can I achieve using an external js file without losing functionality?
Are there any security issues with the existing code if no alternatives are available?
Is this just awful and I should start again using “x” methods?

Thank you if you got this far.

Read more here:: Theme customisation – how to store javascript externally when it utilises php variables? [on hold]

Leave a Reply

Your email address will not be published. Required fields are marked *