Tips en tutorials

JavaScript laden in de wp-admin

Geplaatst op: 26 november 2022 - Laatste aanpassing: 11 maart 2023

Misschien ben je een WordPress plugin aan het bouwen of misschien wil je gewoon een losse embed toevoegen aan het admin gedeelte van WordPress. In dit artikel laten we zien welke methodes er zijn om je eigen JavaScript in te laden in de wp-admin.

Allereerst is het verstandig om stil te staan bij de vraag: “Heb ik de JavaScript echt nodig?”. In WordPress kun je namelijk een heleboel functionaliteiten van WordPress hergebruiken. Zo is er bijvoorbeeld de Settings API waarmee je velden en de bijbehorende validatie kunt regelen. Is het antwoord op deze vraag: “Ja”, lees dan verder.

JavaScript laden op specifieke pagina’s in de wp-admin

Stel je bent een plugin aan het bouwen en je wilt JavaScript laden voor alleen de pagina’s van de plugin, dan kun je gebruiken maken van twee WordPress hooks, namelijk de:

admin_enqueue_scripts voor het laden van JavaScript bestanden
admin_head-${hook-suffix} voor het wegschrijven van JavaScript code in de header

In de onderstaande voorbeelden doen we alsof onze plugin “WP Vandaag” heet, vervang deze benaming met de naam van je eigen plugin wanneer je de onderstaande code gebruikt.

Optie 1: admin_enqueue_scripts

function wp_vandaag_enqueue_scripts($hook_suffix) {
  global $wp_vandaag_settings;

  if ($wp_vandaag_settings == $hook_suffix) {
    wp_enqueue_script('wp-vandaag', get_template_directory_uri() . '/js/script.js', [], '1.0.0', true);
  }
}

function wp_vandaag_render_settings_page() {
  # Toon de plugin instellingen hier
}

function wp_vandaag_settings_page() {
  global $wp_vandaag_settings;

  $wp_vandaag_settings = add_options_page(
    'WP Vandaag', 
    'WP Vandaag', 
    'manage_options', 
    'wp-vandaag-plugin',
    'wp_vandaag_render_settings_page',
  );

  add_action('admin_enqueue_scripts', 'wp_vandaag_enqueue_scripts');
}
add_action('admin_menu', 'wp_vandaag_settings_page');

Op regels 13 t/m 26 registreren we een instellingenpagina voor onze plugin welke gezien mag worden door alle gebruikers met manage_options rechten. Tijdens het registreren van deze pagina roepen we op regel 24 een functie aan die het JavaScript bestand zal registreren op het moment dat WordPress de admin_enqueue_scripts hook aanroept. De hook_suffix parameter vertelt ons welke pagina er wordt opgevraagd en we kunnen via de globale variabele $wp_vandaag_settings kijken of dit dezelfde is als onze instellingenpagina.

Overigens kun je de door ons aangemaakte instellingenpagina vinden in het submenu onder “Instellingen” in de wp-admin.

Optie 2: admin_head-${hook-suffix}

<?php

function wp_vandaag_render_settings_page() {
  # Toon de plugin instellingen hier
}

function wp_vandaag_settings_page() {
  $settings = add_options_page(
    'WP Vandaag', 
    'WP Vandaag', 
    'manage_options', 
    'wp-vandaag-plugin',
    'wp_vandaag_render_settings_page',
  );

   add_action('admin_head-'. $settings, 'wp_vandaag_head_script');
}
add_action('admin_menu', 'wp_vandaag_settings_page');

function wp_vandaag_head_script() { ?>

<script>
  console.log('Ingeladen bovenaan de pagina tussen de <head></head> tags');
</script>

<?php }

Op regel 16 gebruiken we de admin_head-${hook-suffix} hook om een functie te laden welke een script tag bevat. Op regel 8 staat een variabele waar we de plugin instellingenpagina mee registreren, deze variabele geven we mee aan de hook-suffix zodat WordPress weet op welke pagina dit script geladen moet worden.

JavaScript laden op alle pagina’s in de wp-admin

Ik wil deze uitleg beginnen met de opmerking dat er voorzichtigheid geboden is. In de meeste gevallen is het laden van JavaScript op alle pagina’s van de wp-admin niet de juiste methode. Deze oplossing kan namelijk zorgen voor conflicten met WordPress code of met andere plugins. Daarnaast kan het laden van scripts op pagina’s waar het niet nodig is, zorgen voor een langere laadtijd. Bouw je aan een publiekelijk toegankelijke plugin? Dan zullen de gebruikers van deze plugin dit ook niet zo waarderen.

Waarom schrijven we hier dan wel over? Nou, omdat er wel situaties kunnen zijn waarin deze oplossing de juiste is, te denken valt aan een Live Chat integratie welke je op alle pagina’s van de admin zichtbaar wilt hebben – zodat de gebruiker eenvoudig de supportafdeling kan bereiken.

De implementatie

Nu je bewust bent van de hierboven genoemde gevaren en je zeker weet dat je toch echt deze oplossing nodig hebt, kunnen we gaan kijken naar hoe we dit zouden implementeren. We kunnen hiervoor gebruik maken van twee WordPress hooks, namelijk de:

admin_head voor het toevoegen van scripts in de <head> tag van de website
admin_footer voor het toevoegen van scripts onderaan de website

Welke variant je kiest hangt af van hoe snel het script geladen moet worden. Verreweg de meeste JavaScript code wordt onderaan de pagina geladen zodat dit de laadtijd van de pagina zo min mogelijk beïnvloed.

We geven de benamingen van de hierboven genoemde hooks mee aan de add_action functie en kunnen daarmee op het juiste moment de scripts inladen. Dit ziet er ongeveer zo uit:

add_action('admin_head', function() {
  echo '"<script>console.log("Ingeladen bovenaan de pagina tussen de <head></head> tags");</script>"';
});

// Of

add_action('admin_footer', function() {
  echo '"<script>console.log("Ingeladen onderaan de pagina");</script>"';
});

Een goede plek om deze code te plaatsen is de functions.php, dit bestand kun je vinden in de root van het WordPress thema. De meer ervaren WordPress gebruikers hebben vaak een speciaal daarvoor bestemt bestand welke bijvoorbeeld actions.php heet.

Tot slot

Je hebt nu geleerd hoe je JavaScript kunt inladen binnen de wp-admin én hoe je dit doet voor specifieke pagina’s. De bovengenoemde methodieken zijn overigens ook toepasbaar op het inladen van CSS, je kunt hiervoor dezelfde hooks gebruiken.