wordpress-dashboard.jpg

Hoe je het WordPress dashboard kunt aanpassen

01 maart 2022

Het WordPress dashboard (inloggedeelte) is ideaal en makkelijk in gebruik. Toch kan het voorkomen dat je enige aanpassingen wilt doen, bijvoorbeeld omdat je;

  • Je eigen stijl eraan wilt geven.
  • Extra informatie wilt toevoegen (voor bijvoorbeeld je klanten, als je een WordPress webbouwer bent).
  • Of omdat het huidige overzicht wellicht vol staat met onnodige informatie.

Voor klanten van Boon Webdesign pas ik altijd het menu en de scherminstellingen aan. Veel van de opties in WordPress zijn dan namelijk niet van toepassing. En sommige dingen vind ik zelf niet logisch. Zo hebben veel van mijn klanten moeite met het vinden van het gedeelte waar ze het menu op hun website kunnen aanpassen. Daarom voeg ik het kopje “Menu” altijd toe aan het menu (ja, dat klinkt onlogisch haha).

Als je een webbouwer bent, dan is het wellicht fijn dat je je eigen stijl er aan kunt geven of dat je bepaalde dingen kunt aanpassen om het gebruiksvriendelijker en overzichtelijker te maken voor de klant. In dit artikel leg ik je drie manieren uit waarmee je het WordPress dashboard kunt aanpassen.

01. Menu items aanpassen

Zoals ik hierboven al zei; soms staan er overbodige dingen in het menu. En soms is het juist handiger om bepaalde menu items juist wél toe te voegen. Met de plugin Admin Menu Editor kun je heel simpel en gemakkelijk het menu aanpassen. Groot voordeel hiervan vind ik dat je ook meer ruimte kunt toevoegen tussen bepaalde items. Zo plaats ik (min of meer) de menu items in 2 of 3 verschillende “groepen”, waardoor het overzichtelijker wordt voor de klant.

02. Scherminstellingen aanpassen

Naast het aanpassen van het menu, kan het ook heel handig zijn om in te stellen wat er wel en niet word weergegeven bij pagina’s en berichten. Het komt vaak voor dat er zoveel (overbodige) informatie staat, dat je door de bomen het bos niet meer ziet. Zie het voorbeeld hieronder.

Zoals je ziet; er staat veel overbodige informatie. En daardoor worden de belangrijke kolommen ook nog eens veel smaller gemaakt, waardoor er maar 2 items worden weergegeven op de pagina. Niet erg handig ;) Maar…. Gelukkig kunnen we dit zelf instellen! Rechtsboven vind je een lichtgrijze button met “Scherminstellingen“. Zodra je daar op klikt, komen er allerlei instellingen tevoorschijn. Daar kun je uit- en aanvinken wat je weergeven wilt hebben. En dan ziet het resultaat er een stuk overzichtelijker uit;

03. WordPress dashboard customizen

De twee manieren die ik hierboven heb uitgelegd, zijn erg handig. Maar misschien wil je juist wat meer de diepte in en het dashboard zelf aanpassen. Dit gedeelte is niet geschikt voor leken. Onder dit gedeelte kun je (in ruil voor een FB like of share) de volgende dingen leren;

  • Je eigen logo toevoegen aan de WordPress inlogpagina én de link daarvan aanpassen.
  • Het welkomstbericht verwijderen op de startpagina.
  • Een widget toevoegen op de startpagina, met bijvoorbeeld contactinformatie en/of instructies.
  • Eigen logo of icon tonen in de bovenste balk.
  • Footer(tekst) aanpassen in het WordPress dashboard.

01. Je eigen logo toevoegen

Bij de inlogpagina zie je standaard het WordPress logo. De afbeelding linkt standaard naar de WordPress.org website. Niet heel erg handig, zeker niet wanneer de WordPress websites maakt voor klanten :) Niet getreurd, dit kunnen we aanpassen!

  • Maak (of kopieer) je logo bestand en upload deze naar je theme map. In het voorbeeld gebruik ik het bestand logo.png
  • Open vervolgens het functions.php bestand.
  • Voeg daar onderstaande code toe;

[php]
/**
* Custom logo voor loginpage
*/

function my_login_logo() { ?>

add_action( ‘login_enqueue_scripts’, ‘my_login_logo’ );
[/php]

  • Pas eventueel het pad aan van het logo bestand als je ‘m ergens anders hebt geupload. Pas ook de hoogtes en breedtes aan naar de afmetingen van jouw logo bestand.
  • En voila! Je afbeelding is toegevoegd.
  • De afbeelding linkt nu echter nog steeds naar de WordPress.org website. Als je dit graag wilt aanpassen, dan kun je dit doen door onderstaande code ook in de functions.php te plaatsen. De afbeelding zal dan automatisch linken naar de homepagina van je website.

[php]
/**
* Custom logo login linken naar eigen website
*/

function my_login_logo_url() {
return home_url();
}
add_filter( ‘login_headerurl’, ‘my_login_logo_url’ );

function my_login_logo_url_title() {
return ‘Your Site Name and Info’;
}
add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );
[/php]

En voila! Je eigen logo is toegevoegd aan de loginpagina én het linkt naar je eigen website in plaats van naar WordPress.org.

02. Het welkomstbericht verwijderen op de startpagina

Zodra men inlogt bij het WordPress dashboard, krijgt men een groot welkomstbericht te zien. Net alsof je elke keer voor het eerst inlogt ;) Dit bericht kun je heel gemakkelijk verwijderen door onderstaande code toe te voegen aan je functions.php bestand;

[php]
remove_action(‘welcome_panel’, ‘wp_welcome_panel’);
[/php]

03. Een widget toevoegen op de startpagina

Het kan erg handig zijn om zelf uitleg, instructies of contactinformatie te plaatsen op de startpagina, zeker wanneer je WordPress websites bouwt voor klanten. Met onderstaande code kun je dat heel gemakkelijk instellen (wederom toevoegen in het functions.php bestand).

[php]
/**
* Widget op startpagina
*/

add_action(‘wp_dashboard_setup’, ‘my_custom_dashboard_widgets’);

function my_custom_dashboard_widgets() {
global $wp_meta_boxes;

wp_add_dashboard_widget(‘custom_help_widget’, ‘Hier jouw titel’, ‘custom_dashboard_help’);
}

function custom_dashboard_help() {
echo ‘

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

’;
}
[/php]

04. Eigen logo of icon toevoegen in bovenste balk

Helemaal linksboven in de balk zie je wederom het WordPress logo staan. Ook deze kun je heel gemakkelijk vervangen door een eigen logo/icon;

  • Maak een bestand aan á 20 bij 20 pixels. Ik het voorbeeld gebruik ik het bestand icon.png.
  • Upload het bestand naar je theme map.
  • Voeg onderstaande code toe in het functions.php bestand. Pas eventueel het pad aan als je de afbeelding ergens anders wilt uploaden en pas eventueel het bestandsnaam aan.

[php]
/**
* Icon in bovenste menu
*/

function wpb_custom_logo() {
echo ‘

‘;
}
//hook into the administrative header output
add_action(‘wp_before_admin_bar_render’, ‘wpb_custom_logo’);
[/php]

05. Footertekst aanpassen in het dashboard

In het dashboard wordt onderaan standaard tekst gebruikt (Bedankt voor het gebruiken van WordPress). Ook deze tekst is heel gemakkelijk aan te passen van het functions.php bestand. Je kunt hier bijvoorbeeld contactinformatie plaatsen, of iets anders, wat je zelf maar wilt.

[php]
/**
* Footertekst aanpassen
*/

function remove_footer_admin () {

}

add_filter(‘admin_footer_text’, ‘remove_footer_admin’);

[/php]