Maatwerk in WordPress: waar laat ik het?

Iedereen die ooit een eigen website heeft gemaakt kent het ongetwijfeld. Je bent bijna klaar met je WordPress website, maar dat ene laatste dingetje krijg je maar niet goed. Vol goede moed ga je op zoek in Google en je komt uit bij een site als StackOverflow. De reactie die je vaak tegenkomt is “voeg deze code toe aan je functions.php”. In deze blog leg ik je uit waar jij je WordPress maatwerk moet laten!

Let op! Deze blog bevat aspecten die technische kennis vereisen. Wanneer een van deze stappen verkeerd wordt uitgevoerd kun je je hele site onbereikbaar maken. Heb je hulp nodig? Neem dan contact met ons op.

Functions.php, pardon?

Functions.php is het bestand in je WordPress thema waar je extra code kwijt kunt om het gedrag van jouw website te beïnvloeden. Klinkt als een goed plan om hier je WordPress maatwerk in te verwerken voor jouw website toch? Het antwoord daarop is helaas nee, ik zal je uitleggen waarom.

Wanneer je direct wijzigingen aanbrengt in de functions.php van jouw thema zal je code ongetwijfeld direct werken. Het grote probleem is echter wanneer de uitgever van jouw thema besluit een update uit brengen, al jouw wijzigingen aan de functions.php worden overschreven. Helaas, al je werkt voor niets.

Een child thema voor je WordPress maatwerk

Om te voorkomen dat je wijzigingen worden overschreven door een update van thema, kun je gebruik maken van een zogenaamd ‘Child theme’. Dit is een soort mini-thema die je kunt maken in WordPress waar je jouw code in kunt verwerken. Ik leg je in een paar stappen uit hoe je een child thema aan kunt maken.

1. Log in op je server

Log in op je server zodat je bij de bronbestanden van jouw WordPress installatie komt. Vaak staat je website in een map genaamd “htdocs”, “public” of iets in die richting. Je herkent je WordPress installatie aan de mappen “wp-content”, “wp-includes” en “wp-admin”.

Ga vervolgens naar de map “wp-content” en dan naar de map “themes”. Het verschilt erg per server of hostingbedrijf hoe deze stap moet. Kom je er niet uit? Neem dan contact met ons op of met jouw hostingbedrijf.

2. Maak een map aan voor je thema

Je nieuwe thema moet een eigen map krijgen. Maak dus in de map “themes” een nieuwe map. Noem je map bijvoorbeeld “child-theme”. Hier gaan we de bestanden aanmaken voor jouw thema.

3. Maak je thema aan

Zoals je in de hulpdocumentatie van WordPress zelf kunt lezen bestaat een WordPress thema minimaal uit 1 bestand, namelijk “style.css”. Hier geef je alle instellingen in aan, zoals de naam en auteur van het thema. Maak het bestand “style.css” aan in de map die je net hebt aangemaakt. Een voorbeeld van een “style.css” bestand voor een child thema is:

/*
Theme Name:   Child thema
Author:       Webtify
Author URI:   https://webtify.nl
Template:     twentytwenty
Version:      1.0.0
*/

De instellingen spreken allemaal wel voor zich. Alleen de variabele Template behoeft wat uitleg. Dit is de naam van de map waarin jouw hoofdthema staat. In mijn geval maak ik een child thema voor het standaard WordPress thema Twenty Twenty. Deze bevindt zich in een map genaamd “twentytwenty” binnen de “themes” map. Dat is het, je hebt je eerste WordPress thema gemaakt!

Let op! Activeer je thema op dit moment nog niet! Dit zal ervoor zorgen dat de lay-out van je website niet goed wordt weergegeven omdat de stijl nog niet wordt overgenomen!

4. Maak je functions.php bestand aan

We gaan nu je hoofdthema in laten laden door je child thema. Hierdoor wordt je website weergegeven zoals het hoort. Maak in dezelfde map als het “style.css” bestand een bestand aan genaamd “functions.php”.

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
});

// Hieronder kun je beginnen met het toevoegen van je maatwerk code!

Dit stukje PHP code zorgt ervoor dat het “style.css” bestand van je hoofdthema wordt ingeladen.

5. Activeer je child thema

De laatste stap is het activeren van je thema in WordPress. Log in op de adminomgeving van je website. Deze bevindt zich standaard op “/wp-admin”. Ga vervolgens naar “Appearance -> Themes” of in het Nederlands “Weergave -> Thema’s”. Hier zie je nu jouw Child thema tussen staan. Druk op “Activate” of in het Nederlands “Activeer”.

Je kunt nu je WordPress maatwerk code toepassen in de functions.php die je zojuist hebt aangemaakt. Let op bij het maken van wijzigingen dat deze direct worden toegepast op jouw website. Bij een code die niet klopt kan dit ervoor zorgen dat je complete website onbereikbaar wordt. Heb je hulp nodig? Neem dan contact met ons op.