Best locations for placing files when integrating Javascript into Wordpress

I have been struggling to make JavaScript work and determine the correct location to place the files.

After attempting various methods, I am now wondering what the most logical approach would be. Despite spending a week on this task, the lack of a tutorial has left me uncertain. I suspect the solution is actually quite simple.

My focus is solely on comprehending the appropriate file placement before delving deeper into the world of coding.

Any assistance provided would be greatly appreciated!

Here is what I have accomplished so far:

  • I developed a Child theme and inserted the hook code into the functions.php file (refer to the image) There appears to be duplicate code present, but I am unsure
  • I have obtained the files for a .js slider (attempted multiple variations) but I am uncertain where to insert the code/files
  • I placed the HTML in an HTML widget at the top of the page, the CSS in Wordpress' 'Additional CSS', and the JavaScript within the functions.php enclosed brackets.
  • I also tried incorporating the code files into the ChildTheme folder, which unfortunately did not yield positive results
javascriptwordpress

Answer №1

When working with WordPress, you may find that there isn't a specific location designated for JavaScript files, giving you the freedom to choose where to place them.

It is a common practice to create a "js" folder within your child theme, which can be located in the root of the child theme like:

mychildtheme/js or mychildtheme/assets/js or mychildtheme/public/js

Once you have selected a location, you can simply follow these steps:

add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
function my_custom_scripts(){
    wp_enqueue_script('my_custom_script',get_stylesheet_directory_uri()."/[yourpath]/yourfile.js",['jquery','anyotherdeps'],false,true);
}

For more information, you can refer to the documentation here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of AJAX with either jquery or plain javascript to parse nested JSON data and display the

Similar Question: jquery reading nested json I am seeking a reliable method to iterate through multiple sets of data stored in JSON, some of which may have deep levels of nesting. My goal is to display this data in a table format. I am uncertain abou ...

javascriptjqueryajaxjson

How do we handle the reception of document.form.submit() in the code behind?

I have a JavaScript function document.form1.submit() and I am wondering how to receive it in the code behind. In which class and method should I be looking? I need to get the value from a textbox and store it in session, but I'm not sure if I need an ...

javascriptasp.netvb.netsubmitsession-state

``There seems to be an issue with JQuery.Ajax not properly displaying on Samsung Smart

I attempted to use JQuery.Ajax to interact with my webservice Below is the code snippet: Main.onLoad = function() { // Enable key event processing this.enableKeys(); widgetAPI.sendReadyEvent(); //$("#h2Test").html("Change On Text"); ...

javascriptjqueryajaxeclipse

Create a PHP form that includes text and image inputs with the help of AdminLTE and integrates DropZone.js

I have been working with a template from adminLTE and you can check it out at the following link: . At this point, I am trying to upload images first and then use the image names as input text elements in my main form for submission. However, I have encou ...

javascriptphpfileuploaddropzone.js

Trouble with the x-cloak attribute in alpine.js

Experience with TailwindCSS and AlpineJS in my current project has brought to my attention a slight issue with the header dropdowns flashing open momentarily when the login page loads. I attempted to use x-cloak to address this, but encountered some diffic ...

javascripthtmlcsstailwind-cssalpine.js

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working? My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm u ...

javascripthtmlcsssliderswiper.js

What is the best way to eliminate concealed divs from the view source of a webpage?

On my HTML page, I have some hidden DIVs that can still be viewed in the page source. I want to ensure that these DIVs are not visible to users when they inspect the page source. Is there a way to achieve this using Javascript or another solution? ...

javascriptphphtml

How can I filter an array to retain only the initial 5 characters of every element?

I need help using the .map function to transform this array so that only the first 5 characters are displayed, like "01:00", "02:00"? This is the array: ["01:00:00 AM", "02:00:00 AM", "03:00:00 AM", "04:00:00 AM", "05:00:00 AM", "06:00:00 AM", "07:00:00 ...

javascript

Deleting occurrences of a specific text from a JSON document and subsequently analyzing its contents

I am having an issue with a JSON file in which there are strings of characters attached to many of the field names. This is making it difficult for me to target those objects in JS. The structure looks like this: "bk:ParentField": { "bk:Field": "Va ...

javascriptjsonnode.jsparsingfs

What is the best way to generate hyperlinks from data in a MongoDB database?

Looking for some assistance in setting up an online discussion forum using node.js, express & mongodb. My current challenge is creating clickable links that will redirect me to the specific page of each article stored in the database. I need to figure out ...

javascriptnode.jsmongodbexpressejs

Get the HTML source code for a form that has been created using AngularJS

Can AngularJS be used to download a portion of code generated by a form? Insert the following code snippet: http://jsbin.com/nufixiwali/edit?html,js,output I am looking to generate an .html file that only includes the code generated after the html tag. ...

javascriptangularjs

X-Ray Rendering in Three.js and Webgl

Looking to create an x-ray effect in three.js / webgl. Something like this: UPDATE I am seeking help on how to achieve a real-time render with the x-ray effect, instead of just a static image. This can be accomplished using shaders that modify density i ...

javascripthtml3dthree.jswebgl

Encountering the error message "Error: Unable to process rejection (TypeError): that.setState function is not defined" while using ReactJS

I've been working on a dynamic chart that changes based on the Slider value. I did some research and everyone suggests that I need to bind it to resolve this error. However, no matter how many times I try to bind the function in different ways, I keep ...

javascriptreactjssliderdynamic-chart-series

Solving Issues with URL Parameters and AJAX

My JSP page has a JavaScript function called loadData() that is triggered when the page loads. This function makes an AJAX request to a servlet in order to retrieve data and return the necessary HTML content to display on the page. I am trying to call thi ...

javascriptajaxjspservletsparameters

Displaying Dynamic Content in React Table Rows Based on Conditions

I'm populating a table with multiple rows using props. If a returned prop is an empty string "" , I want to exclude that row from rendering. <Table.Body> <Table.Row> <Table.Cell>Producer</Table.Cell> ...

javascriptreactjsconditional-rendering

Access and retrieve images directly from the output of an s3 bucket query

I've manually uploaded an image named userImage.png, but I'm unsure how to convert the incoming body of the result into an image. While I found some examples in this question[ how to retrieve image from s3 with nodejs ], I'm not sure how to ...

javascriptnode.jsamazon-web-servicesamazon-s3next.js

Caution: Utilizing File_Get_Contents function in WordPress with PHP 8.1

I recently upgraded the PHP version from 7.4 to 8.1 and encountered an error while trying to post content in WordPress. Despite the error, the article still gets posted, but it's really bothering me. I enabled the WordPress debugger and found out tha ...

phpwordpressplugins

Add a preventDefault event listener to a submit button that triggers a specific function

$(function() { $('#login').submit(function(e){ preventSubmission(); e.preventDefault(); }); }); function preventSubmission() { $('#btnLogin').attr('disabled','disabled'); $("#btnLogi ...

javascriptjqueryhtml

Issue with React's handleChange function in two separate components

I need assistance with calling the event handleChange from a second Component This is my principal component: const [mainState, setMainState] = useState({ stepValue: 1, saleDateVal: new Date(), customerVal: '' }); function moveNextStep() { ...

javascriptreactjsreact-hooks

Update of component triggered only upon double click

I'm encountering an issue with my parent component passing products and their filters down to a subcomponent as state. Whenever I add a filter, I have to double click it for the parent component to rerender with the filtered products. I know this is d ...

javascriptnode.jsreactjsreact-hooks