WordPress thema’s aanpassen via een child theme

Het is lastig om precies dát thema te vinden wat aan de eisen van het moment voldoet. Heb ik zelf eenmaal het juiste thema gevonden, dan zijn er vaak nog puntjes die ik liever anders zou zien. Zelfs het huidige (betaalde) thema van de WordPress Cursus website heb ik hier en daar aangepast. In dit artikel beschrijf ik hoe je een child theme, een kind thema, kunt maken en hoe je de footer van het thema kunt overschrijven.

Via een child theme kun je de belangrijkste eigenschappen van een gekozen thema behouden en zaken die je graag anders ziet aanpassen. Het voordeel van een child theme is dat jouw aanpassingen niet worden overschreven wanneer je een update van het oorspronkelijke thema doet. Dat zou wel gebeuren als je het oorspronkelijke thema direct zou wijzigen. Heb je eenmaal een child theme, dan kun je het ook gebruiken voor andere specifieke aanpassingen in je website zoals plug-in vertalingen.

Een goed voorbeeld voor deze post is de footer van een thema. Meestal bevat die een tekst van de themabouwer. Neem het standaard thema van WordPress, TwentyFifteen (Twenty Seventeen is momenteel standaard geïnstalleerd). In de footer van dat thema staat: Proudly powered by WordPress en dat wil ik graag aanpassen.

Ik ga er in de onderstaande tekst vanuit dat het thema twentyfifteen in eerste instantie geactiveerd is.

Verbinding met je webserver

Voordat je verder kunt heb je FTP toegang nodig tot je webserver. Je hebt de gegevens hiervoor gekregen van je webhosting provider. Met een programma als Filezilla kun je verbinding maken met de webserver. Maak voordat je verder gaat een backup van je website als dit onbekend terein voor je is! Je kunt via FTP met een druk op de knop je complete website verwijderen. We gaan ook bestanden bewerken. Dat kan via Windows kladblok, maar een fijner programma daarvoor is Notepad++.

Als thema’s of FTP en webservers nieuw voor je zijn, check dan eens de WordPress Cursus

Als je eenmaal verbinding hebt met je webserver dan zie je een verzameling mappen en bestanden van je website. Zie je mappen die beginnen met ‘wp-..‘ dan zit je al goed. Dit is de installatie directory (en root map) van je WordPress website. Als je geen ‘wp-…‘ mappen ziet, moet je waarschijnlijk een map genaamd www of public_html openen. Heb je de installatie directory van WordPress eenmaal te pakken, navigeer dan naar wp-content > themes. Hier vind je de mappen van de thema’s die je hebt geïnstalleerd. Bij een schone WordPress installatie zijn dat op dit moment twentyfifteen, twentyfourteen en twentysixteen. De eerste is op dit moment het default thema van WordPress.

Een child theme maken

Een child thema bestaat uit een map met twee bestanden genaamd style.css en functions.php. Je kunt deze bestanden het beste op je lokale computer aanmaken en ze vervolgens via FTP uploaden. In dit voorbeeld gaan we een child theme maken van het thema twentyfifteen. Maak hiervoor op je computer een map twentyfifteen-child en plaats daarin twee nieuwe tekstbestanden met de namen style.css en functions.php. Het style.css bestand bepaalt hoe je thema heet en van welk thema het een child theme is. De volgende ‘code’ moet bovenaan het style.css bestand staan:

/*
Theme Name: 
Theme URI: 
Description: 
Author: 
URI: 
Template: 
Version: 
*/

Open style.css met Notepad++ (of een andere editor) om het bestand te bewerken. Bovenstaande code moet je aanvullen met jouw gegevens. In mijn geval ziet het er zo uit:

/*
Theme Name: WordPress Cursus
Theme URI: https://wpress-cursus.nl
Description: Zelf gemaakt WordPress thema obv TwentyFifteen
Author: WP Wolf
URI: https://wp-wolf.com/
Template: twentyfifteen
Version: 1.0
*/

De belangrijkste waarde van deze zogenaamde header is de waarde die je invult voor Template. Hier moet de naam van de map van het oorspronkelijke thema staan.

Vergeet niet het bestand functions.php aan je child theme toe te voegen. In de toekomst kun je dit bestand gebruiken om geavanceerde aanpassingen van het thema te doen. functions.php is een krachtig bestand: je kunt zelfs de functionaliteit van de plug-ins die je gebruikt mee aanpassen. Voor nu hoeven we alleen te zorgen dat zowel het style.css bestand van het ouder theme, als het style.css bestand van je nieuwe child theme worden toegevoegd. Dat doe je als volgt:

<?php

function my_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

?>

Het child theme activeren

Upload nu de map twentyfifteen-child met daarin de bestanden style.css en functions.php naar de WordPress thema map (wp-content/themes) op je webserver. Ga vervolgens in het beheersgedeelte van WordPress naar Weergave > Thema’s. Als het bovenstaande goed is gegaan zul je hier nu ook je nieuwe thema zien staan, zoals hieronder weergegeven. Je ziet geen afbeelding voor het thema omdat we geen screenshot hebben toegevoegd. Je kunt dat later nog doen door een bestand screenshot.png aan je child theme toe te voegen. Activeer je thema via de knop Activeren. Als je nu je WordPress website bekijkt zie je – hopelijk – geen veranderingen. Die hebben we namelijk nog niet gemaakt.

De footer aanpassen

Een thema kan uit veel meer bestanden bestaan dan de twee (lege) files die we nu in ons child theme hebben. Je kunt dat direct zien als je de map van het twentyfifteen thema bekijkt. Eén van de bestanden in die map is interessant voor ons: footer.php. Kopieer het footer.php bestand van het twentyfifteen thema naar de map van je child theme. Open het footer.php bestand vervolgens met je teksteditor (bijvoorbeeld Notepad++). Je ziet dan de volgende code:

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

	</div><!-- .site-content -->

		<footer id="colophon" class="site-footer" role="contentinfo">
			<div class="site-info">
				<?php
 					/**
					 * Fires before the Twenty Fifteen footer text for footer customization.
					 *
 					 * @since Twenty Fifteen 1.0
 					 */
					 do_action( 'twentyfifteen_credits' );
				?>
				<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
			</div><!-- .site-info -->
		</footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>

In bovenstaande code gaat het om te regel 25, de regel met Proudly powered by %s. Deze regel zorgt voor je footer bericht. Verwijder de complete regel en plaats er het volgende voor terug:

&copy; <?php echo date( 'Y' ); ?> Mijn Website Naam

Sla het bestand footer.php op en upload het gewijzigde bestand naar je webserver. Als je je website nu bekijkt zul je zien dat je footer is veranderd naar:

© 2019 Mijn Website Naam

De code die we hebben gebruikt bestaat uit drie delen. HTML voor het copyright teken:

©

PHP voor het weergeven van het huidige jaartal, zodat het automatisch verandert na een jaarwisseling:

<?php echo date( 'Y' ); ?>

en de tekst voor je footer. Daarmee zijn we klaar!

Conclusie

Het is relatief eenvoudig om met beperkte kennis, kleine veranderingen in een WordPress template te maken via een child thema. Zorg er altijd voor dat je backups van je website maakt voordat je aanpassingen doorvoert. Als je eenmaal een Child Theme hebt kun je het breder inzetten. Je kunt het bijvoorbeeld ook gebruiken om details van een plug-in te vertalen.