How to add custom javascript to Wordpress Admin using a plugin

Question

I am setting up a new Wordpress plugin with a custom metabox. This box contains sets of fields that I store in an array. I want the user to be able to add a new set of fields by clicking a button on the admin-page.

I read different posts on how to accomplish this but I havent succeeded yet. For testing purposes I created a real simple setup in the metabox to change a text of a

element. This is also not working so I think it is a problem with loading the scripts correctly.

So what I did so far: - add action through admin_enqueue_scripts - register the script using wp_register_script - enqueue script using wp_enqueue_script - setup the js file (choose for testpurpose to store it in same dir as the plugin


function amai_woordjes_scripts() {

wp_register_script( 'amai_woordjes_updaten', 'amai_woordjes_updaten.js', array( 'jquery' ), '1.0', true );

wp_enqueue_script( 'amai_woordjes_updaten' );

}

add_action( 'admin_enqueue_scripts', 'amai_woordjes_scripts' );



//HTML code I use in the function which is called by add_meta_box

echo '<p id="demo">Current text</p>';
echo '<button id="woordje_toevoegen" onclick="woordjesToevoegen();">Woorden toevoegen</button>';


//amai_woordjes_updaten.js
<script>
  function woordjesToevoegen() {
    document.getElementById("demo").innerHTML = "New texxt";
  }
</script>

See: wordpress.stackexchange.com/questions/216879/…

Saqib Amin
– Saqib Amin

2019-09-21 10:54:25 +00:00
Commented Sep 21, 2019 at 10:54 — Saqib Amin
– Saqib Amin, Commented Sep 21, 2019 at 10:54

WP Punk · Accepted Answer · 2019-09-21 11:29:04Z

2

You need use function wp_enque_script(). You use incorrect script path.

plugin_dir_path( __DIR__ ) . path/to/script.js

answered Sep 21, 2019 at 11:29

WP Punk

1,45412 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tinuzzz Over a year ago

Thanx for your feedback. The wp_enque_script() was indeed a mistake i made while copying the code (didnt want to copy the whole thing). For the script-directory I changes the code according to your corrections: wp_register_script( 'amai_woordjes_updaten', plugin_dir_path( DIR ) . 'amai_woordjes_updaten.js', array( 'jquery' ), '1.0', true ); I double checked the script name and it is correct (it is in the same directory as the plugin at the moment for testing purposes). But still no luck. Is it possible to use javascript in a plugin in the admin-area?

WP Punk Over a year ago

Use DIR instead DIR and you can see in dev tools 404 error if you path incorrect

Tinuzzz Over a year ago

Yeah i used ( __DIR__ ) but Stackoverflow changed it to a bold text like your comment Max. I am indeed getting the 404 error though in DEV tools. So I echoed the plugin location and checked it a couple of times. But I am sure the location is correct.

WP Punk Over a year ago

If you path really right maybe you need change permission to files. Set 644 to you files

Tinuzzz Over a year ago

I think the problem is that it is refering to the actual location of the script. In my case this is '/home/wappdzy83/domains/wappdesign.nl/public_html/wp-content/plugins/amai-cpt-test/amai_woordjes_updaten.js'. But when I check the 404 error it is adding the websitename 'wappdesign.nl/home/wappdzy83/domains/wappdesign.nl/public_html/…'.

|

gaurav sharma · Accepted Answer · 2020-03-03 07:16:44Z

2

First You have to set the file path

Create js folder in your plugin root directory and move the 'amai_woordjes_updaten.js' file in js folder

function amai_woordjes_scripts() {

wp_register_script( 'amai_woordjes_updaten', plugin_dir_url( __FILE__ ).'js/amai_woordjes_updaten.js', array( 'jquery' ), '1.0', true );

wp_enqueue_script( 'amai_woordjes_updaten' );

}

add_action( 'admin_enqueue_scripts', 'amai_woordjes_scripts' );

answered Mar 3, 2020 at 7:16

gaurav sharma

5442 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to add custom javascript to Wordpress Admin using a plugin

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related