Custom WordPress dashboard widget toevoegen

Je kunt in de WordPress omgeving gemakkelijk een custom dashboard widget toevoegen aan het dashboard van jouw klanten. Hier kun je bijvoorbeeld contact gegevens voor jouw support afdeling in zetten. In dit artikel een voorbeeldcode op basis waarvan je zelf aan de slag kunt.

Custom WordPress widget toevoegen

Stap 1

Navigeer naar /wp-content/themes/ en open de map van het thema dat actief in gebruik is op de website (een hoofd-thema of child-theme).

Open vervolgens de functions.php van dat thema en voeg onderstaande code toe aan het bestand.

// Hoasted dashboard widget html
function wp_admin_dashboard_help_widget() {
	echo '
		<div style="height: 120px;">
			<div style="width: 50%; float: left;">

				<a href="https://www.hoasted.com" target="_blank">
					<button class="button button-primary">Hoasted website</button>
				</a>
				<br /><br />
				<a href="https://support.hoasted.com" target="_blank">
					<button class="button button-primary">Hoasted support</button>
				</a>
				<br /><br />
				<a href="https://www.hoasted.com/cp/" target="_blank">
					<button class="button button-primary">Hoasted klantomgeving</button>
				</a>
			</div>
			<div style="width: 50%; float: right;">
				<img src="https://static.hoasted.com/logo/hoasted-logo.svg" style="width: 90%; height: auto; margin-top: 20px;" />
			</div>
		</div>
	';
}

// Hoasted dashboard widget toevoegen
wp_add_dashboard_widget('custom_help_widget', 'Hoasted support', 'wp_admin_dashboard_help_widget');

Stap 2

Customize de snippet naar jouw wens :). Verander bijvoorbeeld de links, de titel en het logo.

Stap 3

Log in op de WordPress website en kijk of de widget er staat. Zo niet, klik dan bovenin op het tabblad "Scherminstellingen" en vink de widget aan. In het geval van bovenstaande snippet heet deze "Hoasted support". Deze titel kun je naar eigen wens aanpassen in de onderste regel.

Klaar!