WordPress is een zeer populair content management systeem (CMS) voor het maken van blogs, e-commerce winkels en andere websites. Het onderscheidt zich door zijn flexibiliteit en ondersteunt duizenden gratis en betaalde thema’s op verschillende platforms, waardoor het maken van websites sneller gaat.
De echte kracht van WordPress ligt echter in de aanpassingsmogelijkheden, omdat je het uiterlijk van je site kunt aanpassen met verschillende page builders en blokthema’s – helemaal naar jouw smaak. Maar wat als deze opties nog steeds niet voldoen aan je specifieke behoeften? Het goede nieuws is dat je je thema helemaal opnieuw kunt ontwikkelen.
Deze gids beschrijft het maken van een klassiek WordPress thema. Je leert hoe je stap voor stap een thema opbouwt, waardoor je de basis legt voor het bouwen van meer geavanceerde thema’s in de toekomst.
Vereisten
Je thema vanaf nul ontwikkelen is een technisch proces waarbij je code moet schrijven. Je moet bekend zijn met het volgende:
- PHP – Essentieel voor het toevoegen van functionaliteiten en dynamische inhoud aan je thema. Het is de ruggengraat van WordPress.
- HTML – Wordt gebruikt voor het maken van de structuur van de templates van je thema.
- CSS – Wordt gebruikt om je thema op te maken en ervoor te zorgen dat het er goed uitziet op verschillende apparaten en browsers.
Daarnaast is het opzetten van een ontwikkelomgeving cruciaal. Je kunt er een maken met DevKinsta, een lokaal ontwikkelpakket voor WordPress sites, door deze stappen te volgen:
- Ga naar de website van DevKinsta om de applicatie voor jouw besturingssysteem te downloaden.
- Volg de installatie-instructies voor jouw besturingssysteem.
- Open DevKinsta en klik op New WordPress site.
- Selecteer vervolgens de optie New WordPress site en vul de velden Site name, WordPress administrator name en WordPress administrator password in.
- Klik ten slotte op Create site en wacht 30-60 seconden totdat de site is gemaakt.
Zodra je site is gemaakt, kun je een voorbeeld bekijken, je WP dashboard openen en zelfs het bestandspad naar de lokale WP installatie op je computer zien, zodat je toegang hebt tot alle code.
De WordPress themastructuur begrijpen
Voordat je begint met het stap-voor-stap proces van het maken van je klassieke thema, is het essentieel om de structuur van een klassiek WordPress thema en de belangrijkste betrokken bestanden te begrijpen. Deze kennis vormt een solide basis voor de ontwikkeling van je thema.
De WordPress thema map
Alle WordPress thema’s worden opgeslagen in de wp-content/themes map van je WordPress installatie. Elk thema bevindt zich in zijn eigen map in deze map.
Belangrijkste bestanden in een WordPress thema
Er zijn twee hoofdbestanden die elk klassiek WordPress thema moet hebben:
index.php– Dit is het belangrijkste templatebestand dat dient als fallback voor alle andere templatebestanden. Het is het kernbestand dat WordPress gebruikt om inhoud weer te geven.style.css– Dit bestand bevat de metadata van het thema en custom CSS stijlen. Het is cruciaal voor het definiëren van het uiterlijk van het thema en het geven van essentiële informatie, zoals de naam, auteur en versie.
Om je thema goed te structureren en functionaliteit toe te voegen, kun je extra templatebestanden gebruiken, zoals de volgende, die gebruikelijk zijn voor klassieke thema’s en die worden gebruikt in het voorbeeldthema dat in deze handleiding is gemaakt:
header.php: Dit bestand kan de header-sectie van je thema bevatten, inclusief het logo van de site en het navigatiemenu.footer.php: Dit bestand moet de footer van je thema bevatten.functions.php: Dit bestand kan worden gebruikt om customs functies, normale functies en thema-ondersteuningsopties toe te voegen.single.php: Dit templatebestand wordt gebruikt om individuele blogberichten weer te geven.page.php: Het templatebestand dat wordt gebruikt om statische pagina’s weer te geven.
Nu je de essentiële bestanden en hun rollen begrijpt, gaan we verder met het stap-voor-stap proces om je klassieke WordPress thema te maken.
Hoe maak je een klassiek WordPress thema?
Er is een populair gezegde dat de beste manier om te leren is door te doen. Laten we dat principe toepassen door een klassiek blogthema te maken dat je WordPress berichten weergeeft op de startpagina met custom CSS styling en extra features.
Stap 1: Maak een nieuwe themamap
Maak een map aan in de map themes, bijvoorbeeld myblogtheme.
Stap 2: Voeg metadata aan het thema toe
Laten we vervolgens de themadetails instellen in het bestand style.css. Hier is een voorbeeld van wat metadata informatie die je kunt opnemen in style.css:
/*
Theme Name: Kinsta Blog Theme
Author: Joel Olawanle
Author URI: https://kinsta.com/blog/author/joelolawanle/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/In de code hierboven:
- Theme Name: De naam van je thema die wordt weergegeven in het beheergebied van WordPress onder Uiterlijk > Thema’s.
- Author: Toont de naam van de maker van het thema.
- Author URI: Linkt naar de website of het profiel van de auteur.
- Description: Geeft een overzicht van het doel en de functies van het thema.
- Version: Geeft de huidige versie van het thema aan voor updates.
- Licence: Specificeert de distributievoorwaarden.
- License URI: Linkt naar de volledige tekst van de licentie.
Je kunt meer te weten komen over deze velden in het WordPress Theme Handbook.
Nadat je deze informatie hebt toegevoegd aan je style.css bestand, navigeer je naar Appearance > Themes in de beheeromgeving van WordPress. Je zult het nieuw aangemaakte thema zien staan. Als je klikt om de Theme Details te zien, zul je zien dat alle informatie die je hebt toegevoegd daar verschijnt.
Nu we het bestand style.css hebben ingesteld, gaan we verder met het maken van de andere essentiële themabestanden.
Stap 3: Maak het hoofdtemplatebestand voor je thema
Het bestand index.php dient als het belangrijkste templatebestand voor je thema. Alle code die je hier toevoegt, wordt gebruikt om de hoofdinhoud van je site weer te geven.
Als je hier bijvoorbeeld wat basic HTML code toevoegt, wordt alles weergegeven wanneer je het thema activeert en er een voorbeeld van bekijkt. Je wilt echter informatie uit je WordPress CMS halen om weer te geven via het templatebestand van je thema, en dit is waar je PHP gebruikt om WordPress functies toe te voegen.
Hier zie je hoe de basisstructuur van het index.php bestand eruit kan zien:
<?php get_header(); ?>
<main>
</main>
<?php get_footer(); ?>In de bovenstaande structuur worden get_header() en get_footer() gebruikt om de header- en footersecties uit hun respectievelijke templatebestanden te halen (header.php en footer.php).
We zullen het bestand index.php vullen met de juiste code, maar laten we eerst werken aan de header- en footersecties van het thema.
Stap 4: Maak het header bestand
Het bestand header.php toont de header van je site, die meestal elementen bevat zoals het sitelogo en het navigatiemenu. Het bevat ook stylesheets, scripts en metatags. Zo ziet ons header.php bestand eruit:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>Laten we elk deel van dit bestand uitsplitsen en uitleggen en de bijbehorende functies en haken toevoegen aan functions.php.
Laten we beginnen met de sectie <head>. Dit gedeelte bevat essentiële metadata, de sitetitel, tekencodering en de functie wp_head():
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>De language_attributes(); functie stelt de taalattributen voor het HTML document in. Vervolgens is de wp_head(); functie cruciaal, omdat WordPress en plugins hiermee essentiële elementen kunnen invoegen in de <head> sectie, zoals stylesheets en scripts.
Activeer het stylesheet door het volgende toe te voegen aan functions.php:
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');De functie wp_enqueue_style() voegt het hoofd stylesheet toe aan de head sectie. We geven de functie het voorvoegsel my_custom_theme om conflicten met andere thema’s of plugins te voorkomen. Je kunt besluiten om dit direct aan de head-tag toe te voegen met de tag <link>.
Laten we op dezelfde manier een functie declaren om de sitetitel toe te voegen aan de headsectie:
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');Door de functie wp_head() worden de stijl en de titeltag nu dynamisch toegevoegd aan de header. Je kunt dit controleren door je WordPress site te inspecteren met de devtools van je browser. In de sectie <head> zou je de stylesheet link en de dynamisch gegenereerde title-tag moeten zien, wat bevestigt dat ze zijn opgenomen.
Vervolgens declaren we in de body de navbar sectie waar we een dummy logo laten zien en zorgen voor een optie voor het gebruik van een aangepast logo wanneer dit is ingesteld in de WordPress site identiteit:
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>De logosectie gebruikt de the_custom_logo() functie om een custom logo weer te geven als er een is ingesteld. Als er geen custom logo is ingesteld, wordt er een standaardafbeelding weergegeven.
Om ondersteuning voor aangepaste logo’s in te schakelen, voeg je de volgende code toe aan functions.php:
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');Deze functie voegt ondersteuning voor een custom logo toe. Tot slot het navigatiemenu:
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>De functie wp_nav_menu() geeft het navigatiemenu weer dat is toegewezen aan de locatie “Header Menu”. Om het navigatiemenu te registreren, moet je ervoor zorgen dat je deze code hebt in functions.php:
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));Zo ziet je function.php bestand er nu uit:
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>Door deze stappen te volgen, zorg je ervoor dat je header een custom logo ondersteunt en een navigatiemenu weergeeft, waardoor hij dynamisch is en gemakkelijk kan worden aangepast via het WordPress admin dashboard.
Stap 5: Maak het footer bestand
Het footer.php bestand is verantwoordelijk voor de weergave van het footergedeelte van je site. Voor dit thema zal het footer.php bestand alleen het copyright jaar weergeven:
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>In dit bestand nemen we de wp_footer() functie op, net zoals we wp_head() in de header hebben opgenomen. De wp_footer() functie stelt WordPress en plugins in staat om essentiële elementen, zoals scripts, net voor de afsluitende </body> tag in te voegen. Dit is cruciaal om ervoor te zorgen dat alle benodigde bronnen correct worden geladen en je site naar verwachting functioneert.
Stap 6: Geef blogberichten weer met de WordPress loop
Laten we terugkeren naar het bestand index.php om uit te leggen hoe je door berichten van je WordPress site kunt loopen en ze kunt weergeven met behulp van de WordPress loop – een krachtige manier om inhoud dynamisch weer te geven. Zo ziet de loop eruit:
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>De bovenstaande code controleert of er berichten zijn om weer te geven voordat de loop wordt geopend. In de loop geven WordPress functies als the_title(), the_author(), the_time('F j, Y'), en the_excerpt() informatie weer over elk WordPress bericht.
De the_post_thumbnail() functie wordt ook gebruikt om de thumbnail weer te geven, maar deze is verpakt in een if statement, zodat deze alleen wordt weergegeven als er een uitgelichte afbeelding voor je bericht is. In het bestand functions.php moeten we met deze functie ondersteuning voor miniaturen van berichten toevoegen, zodat er een optie is om uitgelichte afbeeldingen te uploaden wanneer je nieuwe berichten maakt:
add_theme_support('post-thumbnails');Voeg dit toe aan de functie my_custom_theme_setup() die we hebben gemaakt in het bestand functions.php. Zo ziet het bestand index.php er nu uit:
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>Je zult zien dat er wat statische code is toegevoegd, die zal worden vormgegeven als een banner met “Welcome to my blog” en een alinea met tekst.
Stap 7: Maak een template voor een los bericht
Voordat we ons thema stylen, moeten we een basistemplate definiëren om losse blogberichten weer te geven wanneer erop wordt geklikt vanaf een pagina of bericht in je thema. Maak hiervoor een bestand single.php aan in de root van je thema en voeg de volgende code toe:
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>In de bovenstaande code bevatten get_header() en get_footer() de header en footer. In andere delen van de code geven WordPress functies dynamische inhoud weer.
Stap 8: Maak een templatebestand voor WordPress pagina’s
Net zoals je een template hebt gemaakt voor losse WordPress berichten, kun je een template maken om je WordPress pagina’s weer te geven. Om dit te doen, maak je een page.php bestand in de root van je themamap en voeg je de volgende code toe:
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Stap 9: Style je thema
Tot nu toe hebben we een aantal basistemplates voor ons thema gemaakt. Nu is het tijd om je eigen styling toe te voegen zodat alles er mooi uitziet. Je kunt je stijlen toevoegen aan het bestand style.css in je themamap. Om te beginnen kopieer je de styling van deze GitHub gist voor het voorbeeldthema dat in deze handleiding is gemaakt.
Stap 10: Test en implementeer je thema
Tot nu toe heb je met succes een WordPress thema gemaakt. Nu is het tijd om het te testen en te implementeren.
Zorg er eerst voor dat je thema geactiveerd is door naar het WordPress admin dashboard te gaan en Appearance > Themes te selecteren. Als je dat nog niet hebt gedaan, klik dan op je thema en activeer het. Je kunt ook op de knop Customize klikken om de site-identiteit in te stellen, het menu aan te passen en andere instellingen te wijzigen om ervoor te zorgen dat je site correct wordt weergegeven.
Als je tevreden bent met je thema, heb je een paar opties om het te implementeren:
- Zet je lokale site online: Als je lokaal ontwikkelt met DevKinsta, kun je je site eenvoudig naar een testomgeving pushen. Hierdoor kun je je thema testen in een live-achtige omgeving voordat je het naar de live omgeving pusht. Gedetailleerde instructies over hoe je dit doet kun je vinden in onze DevKinsta documentatie.
- Zip en upload je thema: Als alternatief kun je je thema verpakken in een gezipte map en uploaden naar een online site. Ga naar Appearance > Themes > Add new > Upload Theme in het WordPress admin dashboard en selecteer je gezipte themabestand om te uploaden.
Door je thema grondig te testen in een testomgeving zorg je ervoor dat alles werkt zoals verwacht voordat je het live zet. Deze stap is cruciaal om mogelijke problemen op te vangen en ervoor te zorgen dat je site er perfect uitziet en werkt.
Samenvatting
In dit artikel hebben we een klassiek WordPress thema gemaakt vanuit het niets. We hebben essentiële bestanden ingesteld, custom styling toegevoegd en templates gemaakt voor individuele berichten en pagina’s.
Als je wilt dat je site precies de functionaliteit en het uiterlijk heeft dat je wilt, dan is het ontwikkelen van een WordPress thema de beste manier. Maar als je geen tijd, vaardigheden of zin hebt om dit te doen, kan het inhuren van een professional je helpen om je visie efficiënt te realiseren.
Als je eindelijk een site hebt die bij je smaak past, dan wil je robuuste hosting om problemen zoals downtime, DDoS-aanvallen en meer te voorkomen. Dit is waar premium hostingproviders zoals Kinsta uitblinken.
Kinsta biedt krachtige Managed WordPress Hosting met een volledig gecontaineriseerde architectuur, exclusief aangedreven door Google Cloud Platform op het Premium Tier netwerk van Google.
Neem contact met ons op voor meer informatie over onze superieure managed hosting oplossing.
Laat een reactie achter