WP Themedevelopment (4): Functions.php

In dit artikel gaan we aan de slag met het functions.php bestand. Dit bestand geeft ons de mogelijkheid om eigen functies en WordPress functies aan te roepen, om die vervolgens in ons eigen thema te gebruiken.

Functions.php bestand aanmaken

We beginnen in dit artikel met het toevoegen van het functions.php bestand in onze thema map.
Open je teksteditor en voeg het functions.php toe aan de themamap.

Scripts en styles inladen met action hooks

WordPress maakt gebruik van action hooks. Simpel gezegd is een action hook een manier om bij WordPress aan te haken op verschillende punten tijdens het laden van de WordPress website. Op de punten waar je aanhaakt kun je dan eigen functies laten uitvoeren.

In het wpgoeroe thema maken we gebruik van Bootstrap. Bootstrap is een framework om eenvoudig responsive websites mee te maken.

Om er voor te zorgen dat ons WordPress thema Bootstrap ondersteund moeten we inhaken bij de functie wp_enqueue_scripts. In de WordPress codex staat namelijk:

Om in te haken bij wp_enqueue_scripts, gebruiken we de add_action functie. Deze functie zorgt er voor dat onze eigen functie in kan haken op de functie wp_enqueue_scripts. Als WordPress de functie wp_enqueue_scripts uitvoert, weten we dat onze eigen functie ook uitgevoerd wordt.
add_action werkt als volgt:

add_action ( 'functie_van_wordpress_om_bij_in_te_haken', 'eigen_functie' );

Om in te haken bij wp_enqueue_scripts zetten we de add_action functie in het functions.php bestand.

functions.php
<?php
// Hooks
add_action( 'wp_enqueue_scripts', 'wg_enqueue' );

Boven de functie add_action zie je dat ik de opmerking // Hooks heb neergezet. Ik wil het functions.php bestand overzichtelijk houden. Dit doe ik onder andere door opmerkingen te plaatsen en door functies te organiseren in aparte bestanden. Daarover straks meer.

De functie wg_enqueue is onze eigen functie die we willen uitvoeren op het moment dat WordPress wp_enqueue_scripts uitvoert. We hebben deze functie nog niet gedefinieerd. Dat gaan we nu doen.

Include

Zoals al eerder in dit artikel beschreven is het handig om het functions.php bestand overzichtelijk te houden. Hiervoor gaan we onze eigen functie(s) in verschillende bestanden zetten. Die bestanden zetten we in een aparte map.

Ik wil benadrukken dat dit geheel persoonlijk is. Je bent vrij om hier een eigen werkwijze te kiezen. WordPress werkt nog steeds prima als je alles in het functions.php bestand zet. Het voordeel van het organiseren van je bestanden is dat het makkelijker wordt om dingen terug te vinden.

Dat gezegd hebbende, laten we de functie gaan schrijven.

Om te beginnen maak je een nieuwe map aan in je thema map. Noem deze map includes. In deze map maak je een nieuw bestand aan. Noem dit bestand enqueue.php.

In het bestand enqueue.php gaan we onze functie schrijven.
Elke eigen functie die ik schrijf voorzie ik van een zogenoemde ‘prefix’ of voorvoegsel. Dit doe ik om er voor te zorgen dat je geen conflicten krijgt met eventuele plugins met dezelfde functienaam. Ik kies hier voor het voorvoegsel wg (van wpgoeroe).

enqueue.php
<?php

function wg_enqueue(){

}

Nu moeten we het bestand enqueue.php nog toevoegen aan functions.php. Dit doe je met de functie include. Voeg de volgende regel toe aan het functions.php bestand.

functions.php
<?php
// Includes
include( get_theme_file_path( 'includes/enqueue.php' );

// Hooks
add_action( 'wp_enqueue_scripts', 'wg_enqueue' );

Je gebruikt hier de functie get_theme_file_path om de locatie van de themamap te verkrijgen. In deze functie zet je dan waar het bestand enqueue.php te vinden is.

Bootstrap style registreren

Om het Bootstrap framework te registreren open je het enqueue.php bestand en gebruik je de functie wp_register_style.
Volgens de WordPress Developer documentatie kun je wp_register_style als volgt gebruiken.

wp_register_style( string $handle, string|bool $src, string[] $deps, string|bool|null $ver, string $media );

$handle (verplicht)
Naam van de stylesheet. Dit moet een unieke waarde zijn.
$src (verplicht)
De locatie van de stylesheet.
$deps (optioneel)
Een array van geregistreerde stylesheet ‘handles’ waar deze stylesheet van afhankelijk is.
$ver (optioneel)
Een versienummer voor de stylesheet als die er één heeft. Als de waarde ‘false’ wordt ingevoerd, wordt er automatisch een versienummer toegevoegd die gelijk is aan de geïnstalleerde WordPress versie. De waarde ‘null’ zorgt er voor dat er geen versie wordt toegevoegd.
$media (optioneel)
Geeft aan voor welke media deze stylesheet is.

Met deze gegevens kunnen we het Bootstrap framework registreren. Voor de $handle gebruik ik wg_bootstrap, je bent natuurlijk vrij om hier een eigen benaming te gebruiken. Voor de $src gebruik ik de CDN link naar de stylesheet van het Bootstrap framework. Die link vind je terug op de website van Bootstrap.
De rest van de instellingen in deze functie is optioneel en gebruik ik niet.

enqueue.php
<?php

function wg_enqueue(){
    wp_register_style( 'wg_bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' );

}

Style in de wachtrij plaatsen (enqueue)

We hebben nu onze Bootstrap style geregistreerd. Maar WordPress weet nu alleen nog maar, dat we een style hebben geregistreerd en waar het te vinden is. Als we onze website laden gebeurt er nog steeds niets.

Om WordPress onze style te laten laden moeten we onze style in de wachtrij plaatsen. WordPress gebruikt hiervoor de functie wp_enqueue_style.
In de WordPress Developer documentatie staat het volgende over wp_enqueue_style:

wp_enqueue_style( string $handle, string $source, string[] $deps, string|bool|null $ver, string $media );

$handle (verplicht)
Naam van de stylesheet. Dit moet een unieke waarde zijn.
$src (optioneel)
De locatie van de stylesheet.
$deps (optioneel)
Een array van geregistreerde stylesheet ‘handles’ waar deze stylesheet van afhankelijk is.
$ver (optioneel)
Een versienummer voor de stylesheet als die er één heeft. Als de waarde ‘false’ wordt ingevoerd, wordt er automatisch een versienummer toegevoegd die gelijk is aan de geïnstalleerde WordPress versie. De waarde ‘null’ zorgt er voor dat er geen versie wordt toegevoegd.
$media (optioneel)
Geeft aan voor welke media deze stylesheet is.

Zoals je ziet is de enige verplichte waarde de $handle. We hebben bij het registreren van onze Bootstrap Stylesheet een eigen ‘handle’ naam aangemaakt. Deze gaan we gebruiken om WordPress onze stylesheet te laten laden.

Voeg de functie wp_enqueue_style toe aan onze wg_enqueue functie.

enqueue.php
<?php

function wg_enqueue(){
    wp_register_style( 'wg_bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' );

    wp_enqueue_style( 'wg_bootstrap' );

}

Alles staat nu klaar. Toch kan WordPress onze style nog niet laden op onze pagina. Stylesheets worden geladen in de <head> sectie van een pagina. We hebben alleen nog geen pagina waarin een <head> sectie is opgenomen.

Benieuwd hoe dat moet? Lees dan snel het artikel: WP Themedevelopment (5): Header