Wanneer je inlogt op de achterkant (WP Admin) van je WordPress website dan kom je als eerste op de ‘Dashboard’ pagina terecht. Deze pagina bestaat uit een aantal blokken (‘Widgets’) met informatie over je website. WordPress heeft standaard een aantal widgets, maar plugins zoals Yoast SEO en WooCommerce voegen ook widgets aan het dashboard toe zodat je snel belangrijke informatie kan vinden. In deze tutorial leg ik je stap voor stap uit hoe je ook een eigen widget maakt.

Het toevoegen van eigen widgets aan het WP Admin dashboard kan handig zijn als je bijvoorbeeld zelf plugins of thema’s ontwikkelt voor klanten. In deze tutorial laat ik je zien hoe je een widget maakt met contactinformatie en een link naar de website van wpsimpel.

Het WP Admin dashboard
Het WP Admin dashboard met de standaard WordPress widgets

Een widget aan je dashboard toevoegen

Voeg onderstaande code toe aan je functions.php bestand of een site-specifieke plugin.

<?php
/**
 * Add a support dashboard widget.
 */
add_action('wp_dashboard_setup', 'add_wpsimpel_dashboard_widget' );

function wpsimpel_dashboard_widget() { ?>

	<h3>Welkom op je website!</h3>
	<p>Hulp nodig? Neem dan via <a href="mailto:hallo@wpsimpel.nl">hallo@wpsimpel.nl</a> contact op met Justin van <strong>wpsimpel</strong>.</p>
	<p>Ga voor WordPress Tutorials en handleidingen naar <a href="https://wpsimpel.nl" target="_blank">wpsimpel</a>.</p>

<?php }

function add_wpsimpel_dashboard_widget() {
	
	wp_add_dashboard_widget(
			'wpsimpel_help_widget', // Widget ID
			__( 'wpsimpel hulp', 'your-text-domain' ), // Widget title
			'wpsimpel_dashboard_widget' // Widget function callback
	);
}

Dit is dan het resultaat wanneer je je dashboard pagina in je browser ververst.

Een widget vertaalbaar maken met ‘textdomain’

Je kan de tekst in de widget ook vertaalbaar maken middels de ‘textdomain’ functie. Dit is handig wanneer je bijvoorbeeld een plugin of thema ontwikkelt voor een internationaal publiek. Voer de tekst in de code dan niet in het Nederlands in, maar in het Engels.

De code gaat er dan als volgt uit zien:

<?php
/**
 * Add a translatable dashboard widget.
 */
add_action('wp_dashboard_setup', 'add_wpsimpel_dashboard_widget' );

function wpsimpel_dashboard_widget() {
	
	
	echo '<h3>' . __( 'Welcome to your website!', 'your-text-domain' ) . '</h3>';
	echo '<p>' . sprintf(
			__( 'Need help? Contact Justin of <strong>wpsimpel</strong> via <a href="%s">hallo@wpsimpel.nl</a>', 'your-text-domain' ), esc_url( 'mailto:hallo@wpsimpel.nl' )
		) . '.</p>';
	
	echo '<p>' . sprintf(
			__( 'For WordPress tutorials and manuals go to <a href="%s" target="_blank">wpsimpel</a>.', 'your-text-domain' ), esc_url( 'https://wpsimpel.nl' )
		) . '</p>';

}

function add_wpsimpel_dashboard_widget() {
	
	wp_add_dashboard_widget(
			'wpsimpel_help_widget', // Widget ID
			__( 'wpsimpel help', 'your-text-domain' ), // Widget title
			'wpsimpel_dashboard_widget' // Widget function callback
	);
}

Dit is dan het resultaat wanneer je je dashboard pagina in je browser ververst:

Een WordPress Dashboard widget vertaalbaar maken

Nu kan je de teksten vertalen met een programma zoals Poedit.

De mogelijkheden zijn eindeloos

De widget uit deze tutorial is een vrij eenvoudig voorbeeld. In widgets kan je in principe alle inhoud plaatsen die je maar wil. Je kan voor je klanten zoals in deze tutorial een help-widget maken, maar bijvoorbeeld ook een widget met een RSS-feed met blogposts van een andere website, bezoekersaantallen etc.

Heb je zelf al eens een Dashboard widget gemaakt, en zo ja, welke functies heb je hierin verwerkt? Laat het mij en andere lezers weten in de reacties onder deze post.

Beoordeel deze post:

Gemiddeld: 0 / 5. Aantal beoordelingen: 0

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?