{"id":60046,"date":"2024-08-02T10:28:32","date_gmt":"2024-08-02T08:28:32","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=60046&#038;preview=true&#038;preview_id=60046"},"modified":"2024-08-07T15:26:24","modified_gmt":"2024-08-07T13:26:24","slug":"klassiek-wordpress-thema-maken","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/","title":{"rendered":"Zo maak je een klassiek WordPress thema: stap-voor-stap handleiding"},"content":{"rendered":"<p>WordPress is een zeer populair <a href=\"https:\/\/kinsta.com\/blog\/content-management-system\/\">content management systeem (CMS)<\/a> voor het maken van blogs, <a href=\"https:\/\/kinsta.com\/ecommerce\/\">e-commerce<\/a> winkels en andere websites. Het onderscheidt zich door zijn flexibiliteit en ondersteunt duizenden <a href=\"https:\/\/kinsta.com\/blog\/wordpress-free-vs-paid-themes\/\">gratis en betaalde thema&#8217;s<\/a> op verschillende platforms, waardoor het maken van websites sneller gaat.<\/p>\n<p>De echte kracht van WordPress ligt echter in de aanpassingsmogelijkheden, omdat je het uiterlijk van je site kunt aanpassen met verschillende <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-page-builders\/\">page builders<\/a> en blokthema&#8217;s &#8211; 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.<\/p>\n<p>Deze gids beschrijft het maken van een klassiek <a href=\"https:\/\/kinsta.com\/nl\/tools\/wordpress-theme-detector\/\">WordPress thema<\/a>. Je leert hoe je stap voor stap een thema opbouwt, waardoor je de basis legt voor het bouwen van meer geavanceerde thema&#8217;s in de toekomst.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Je vraagt je misschien af wat een klassiek WordPress thema is, wat het klassiek maakt en of er nog een ander type thema is. Als deze vragen bij je opkomen, is het directe antwoord dat een klassiek WordPress thema de traditionele PHP templatebestanden en functies gebruikt om de sitestructuur en layout te bouwen.<\/p>\n<p>Dit is anders dan de moderne blokthema&#8217;s die zijn ge\u00efntroduceerd met de <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">Gutenberg editor<\/a>, die blokken en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-full-site-editing\/\">volledige sitebewerking (FSE)<\/a> gebruikt om thema-elementen te maken en te beheren. Beide typen hebben hun voordelen, maar deze gids richt zich op klassieke thema&#8217;s.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Vereisten<\/h2>\n<p>Je thema vanaf nul ontwikkelen is een technisch proces waarbij je code moet schrijven. Je moet bekend zijn met het volgende:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-php\/\">PHP<\/a><\/strong> &#8211; Essentieel voor het toevoegen van functionaliteiten en dynamische inhoud aan je thema. Het is de ruggengraat van WordPress.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a><\/strong> &#8211; Wordt gebruikt voor het maken van de structuur van de templates van je thema.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS<\/a><\/strong> &#8211; Wordt gebruikt om je thema op te maken en ervoor te zorgen dat het er goed uitziet op verschillende apparaten en browsers.<\/li>\n<\/ul>\n<p>Daarnaast is het opzetten van een ontwikkelomgeving cruciaal. Je kunt er een maken met <a href=\"https:\/\/kinsta.com\/nl\/docs\/devkinsta\/\">DevKinsta<\/a>, een lokaal ontwikkelpakket voor WordPress sites, door deze stappen te volgen:<\/p>\n<ol start=\"1\">\n<li>Ga naar de <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">website van DevKinsta<\/a> om de applicatie voor jouw besturingssysteem te downloaden.<\/li>\n<li>Volg de installatie-instructies voor jouw besturingssysteem.<\/li>\n<li>Open DevKinsta en klik op <strong>New WordPress site<\/strong>.<\/li>\n<li>Selecteer vervolgens de optie <strong>New WordPress site<\/strong> en vul de velden <strong>Site name<\/strong>, <strong>WordPress administrator name <\/strong>en <strong>WordPress administrator password <\/strong>in.<\/li>\n<li>Klik ten slotte op <strong>Create site <\/strong>en wacht 30-60 seconden totdat de site is gemaakt.<\/li>\n<\/ol>\n<p>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.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/create-site-devkinsta.png\" alt=\"Site details in DevKinsta.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Site details in DevKinsta.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Stel, je hebt een live site op MyKinsta. Je kunt <a href=\"https:\/\/kinsta.com\/nl\/docs\/devkinsta\/devkinsta-integratie\/#pull-a-site-from-kinsta\">je site naar DevKinsta halen<\/a> om er lokaal aan te werken of je <a href=\"https:\/\/kinsta.com\/nl\/blog\/zo-gebruik-je-sftp\/\">favoriete SFTP Client<\/a> gebruiken, zoals <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FileZilla<\/a>, samen met de STFP details van je site om toegang te krijgen tot je WordPress bestanden<\/p>\n<\/aside>\n\n<h2>De WordPress themastructuur begrijpen<\/h2>\n<p>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.<\/p>\n<h3>De WordPress thema map<\/h3>\n<p>Alle WordPress thema&#8217;s worden opgeslagen in de <code>wp-content\/themes<\/code> map van je WordPress installatie. Elk thema bevindt zich in zijn eigen map in deze map.<\/p>\n<h3>Belangrijkste bestanden in een WordPress thema<\/h3>\n<p>Er zijn twee hoofdbestanden die elk klassiek WordPress thema moet hebben:<\/p>\n<ul>\n<li><code>index.php<\/code> &#8211; 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.<\/li>\n<li><code>style.css<\/code> &#8211; Dit bestand bevat de metadata van het thema en custom CSS stijlen. Het is cruciaal voor het defini\u00ebren van het uiterlijk van het thema en het geven van essenti\u00eble informatie, zoals de naam, auteur en versie.<\/li>\n<\/ul>\n<p>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&#8217;s en die worden gebruikt in het voorbeeldthema dat in deze handleiding is gemaakt:<\/p>\n<ul>\n<li><code>header.php<\/code>: Dit bestand kan de header-sectie van je thema bevatten, inclusief het logo van de site en het navigatiemenu.<\/li>\n<li><code>footer.php<\/code>: Dit bestand moet de footer van je thema bevatten.<\/li>\n<li><code>functions.php<\/code>: Dit bestand kan worden gebruikt om customs functies, normale functies en thema-ondersteuningsopties toe te voegen.<\/li>\n<li><code>single.php<\/code>: Dit templatebestand wordt gebruikt om individuele blogberichten weer te geven.<\/li>\n<li><code>page.php<\/code>: Het templatebestand dat wordt gebruikt om statische pagina&#8217;s weer te geven.<\/li>\n<\/ul>\n<p>Nu je de essenti\u00eble bestanden en hun rollen begrijpt, gaan we verder met het stap-voor-stap proces om je klassieke WordPress thema te maken.<\/p>\n<h2>Hoe maak je een klassiek WordPress thema?<\/h2>\n<p>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.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classic-blog-theme.png\" alt=\"Klassiek WordPress blogthema.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Klassiek WordPress blogthema.<\/figcaption><\/figure>\n<h3>Stap 1: Maak een nieuwe themamap<\/h3>\n<p>Maak een map aan in de map <code>themes<\/code>, bijvoorbeeld <code>myblogtheme<\/code>.<\/p>\n<h3>Stap 2: Voeg metadata aan het thema toe<\/h3>\n<p>Laten we vervolgens de themadetails instellen in het bestand <code>style.css<\/code>. Hier is een voorbeeld van wat metadata informatie die je kunt opnemen in <code>style.css<\/code>:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Kinsta Blog Theme\nAuthor: Joel Olawanle\nAuthor URI: https:\/\/kinsta.com\/blog\/author\/joelolawanle\/\nDescription: 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.\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/code><\/pre>\n<p>In de code hierboven:<\/p>\n<ul>\n<li><strong>Theme Name<\/strong>: De naam van je thema die wordt weergegeven in het beheergebied van WordPress onder <strong>Uiterlijk<\/strong> &gt; <strong>Thema&#8217;s<\/strong>.<\/li>\n<li><strong>Author<\/strong>: Toont de naam van de maker van het thema.<\/li>\n<li><strong>Author URI<\/strong>: Linkt naar de website of het profiel van de auteur.<\/li>\n<li><strong>Description<\/strong>: Geeft een overzicht van het doel en de functies van het thema.<\/li>\n<li><strong>Version<\/strong>: Geeft de huidige versie van het thema aan voor updates.<\/li>\n<li><strong>Licence<\/strong>: Specificeert de distributievoorwaarden.<\/li>\n<li><strong>License URI<\/strong>: Linkt naar de volledige tekst van de licentie.<\/li>\n<\/ul>\n<p>Je kunt meer te weten komen over deze velden in het <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/main-stylesheet-style-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Theme Handbook<\/a>.<\/p>\n<p>Nadat je deze informatie hebt toegevoegd aan je <code>style.css<\/code> bestand, navigeer je naar <b>Appearance <\/b>&gt; <strong>Themes<\/strong> in de beheeromgeving van WordPress. Je zult het nieuw aangemaakte thema zien staan. Als je klikt om de <strong>Theme Details<\/strong> te zien, zul je zien dat alle informatie die je hebt toegevoegd daar verschijnt.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-details.png\" alt=\"Klassieke blog thema details.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Klassieke blog thema details.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voeg een <code>screenshot.png<\/code> bestand toe aan de hoofdmap van je thema en het zal verschijnen als een voorbeeldafbeelding op de pagina <strong>Themes<\/strong>. Dit maakt het gemakkelijker om te zien hoe een thema eruit zal zien.<\/p>\n<\/aside>\n\n<p>Nu we het bestand <code>style.css<\/code> hebben ingesteld, gaan we verder met het maken van de andere essenti\u00eble themabestanden.<\/p>\n<h3>Stap 3: Maak het hoofdtemplatebestand voor je thema<\/h3>\n<p>Het bestand <code>index.php<\/code> 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.<\/p>\n<p>Als je hier bijvoorbeeld wat basic <a href=\"https:\/\/kinsta.com\/nl\/blog\/bewerken-wordpress-code\/\">HTML code<\/a> 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.<\/p>\n<p>Hier zie je hoe de basisstructuur van het <code>index.php<\/code> bestand eruit kan zien:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    <!-- Main content goes here -->\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>In de bovenstaande structuur worden <code>get_header()<\/code> en <code>get_footer()<\/code> gebruikt om de header- en footersecties uit hun respectievelijke templatebestanden te halen (<code>header.php<\/code> en <code>footer.php<\/code>).<\/p>\n<p>We zullen het bestand <code>index.php<\/code> vullen met de juiste code, maar laten we eerst werken aan de header- en footersecties van het thema.<\/p>\n<h3>Stap 4: Maak het header bestand<\/h3>\n<p>Het bestand <code>header.php<\/code> 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 <code>header.php<\/code> bestand eruit:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;\n        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>Laten we elk deel van dit bestand uitsplitsen en uitleggen en de bijbehorende <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-functions-php\/\">functies<\/a> en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-hooks\/\">haken<\/a> toevoegen aan <code>functions.php<\/code>.<\/p>\n<p>Laten we beginnen met de sectie <code>&lt;head&gt;<\/code>. Dit gedeelte bevat essenti\u00eble metadata, de sitetitel, tekencodering en de functie <code>wp_head()<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;<\/code><\/pre>\n<p>De <code>language_attributes();<\/code> functie stelt de taalattributen voor het HTML document in. Vervolgens is de <code>wp_head();<\/code> functie cruciaal, omdat WordPress en plugins hiermee essenti\u00eble elementen kunnen invoegen in de <code>&lt;head&gt;<\/code> sectie, zoals stylesheets en scripts.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Wrap WordPress functies altijd in <code>&lt;?php ... ?&gt;<\/code> tags.<\/p>\n<\/aside>\n\n<p><a href=\"https:\/\/learn.wordpress.org\/lesson-plan\/enqueueing-scripts-and-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Activeer<\/a> het stylesheet door het volgende toe te voegen aan <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');<\/code><\/pre>\n<p>De functie <code>wp_enqueue_style()<\/code> voegt het hoofd <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-css\/\">stylesheet<\/a> toe aan de head sectie. We geven de functie het voorvoegsel <code>my_custom_theme<\/code> om conflicten met andere thema&#8217;s of plugins te voorkomen. Je kunt besluiten om dit direct aan de head-tag toe te voegen met de tag <code>&lt;link&gt;<\/code>.<\/p>\n<p>Laten we op dezelfde manier een functie declaren om de sitetitel toe te voegen aan de headsectie:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');<\/code><\/pre>\n<p>Door de functie <code>wp_head()<\/code> 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 <code>&lt;head&gt;<\/code> zou je de stylesheet link en de dynamisch gegenereerde title-tag moeten zien, wat bevestigt dat ze zijn opgenomen.<\/p>\n<p>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:<\/p>\n<pre><code class=\"language-php\">&lt;body&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;<\/code><\/pre>\n<p>De logosectie gebruikt de <code>the_custom_logo()<\/code> 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.<\/p>\n<p>Om ondersteuning voor aangepaste logo&#8217;s in te schakelen, voeg je de volgende code toe aan <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_setup() {\n    add_theme_support('custom-logo', array(\n        'height'      =&gt; 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_setup');<\/code><\/pre>\n<p>Deze functie voegt ondersteuning voor een custom logo toe. Tot slot het navigatiemenu:<\/p>\n<pre><code class=\"language-php\">        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>De functie <code>wp_nav_menu()<\/code> geeft het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-aangepast-menu\/\">navigatiemenu<\/a> weer dat is toegewezen aan de locatie &#8220;Header Menu&#8221;. Om het navigatiemenu te registreren, moet je ervoor zorgen dat je deze code hebt in <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">register_nav_menus(array(\n    'header-menu' =&gt; __('Header Menu', 'my-custom-theme'),\n));<\/code><\/pre>\n<p>Zo ziet je <code>function.php<\/code> bestand er nu uit:<\/p>\n<pre><code class=\"language-php\"> 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\nadd_action('after_setup_theme', 'my_custom_theme_setup');\n\nfunction my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');\n\n\/\/ Function to add the site title to the head section\nfunction my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');\n?&gt;<\/code><\/pre>\n<p>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 <a href=\"https:\/\/kinsta.com\/blog\/wordpress-admin\/\">WordPress admin<\/a> dashboard.<\/p>\n<h3>Stap 5: Maak het footer bestand<\/h3>\n<p>Het <code>footer.php<\/code> bestand is verantwoordelijk voor de weergave van het footergedeelte van je site. Voor dit thema zal het <code>footer.php<\/code> bestand alleen het copyright jaar weergeven:<\/p>\n<pre><code class=\"language-php\">&lt;footer&gt;\n  &lt;p&gt;Copyright \u00a9 2024&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>In dit bestand nemen we de <code>wp_footer()<\/code> functie op, net zoals we wp_head() in de header hebben opgenomen. De <code>wp_footer()<\/code> functie stelt WordPress en plugins in staat om essenti\u00eble elementen, zoals scripts, net voor de afsluitende <code>&lt;\/body&gt;<\/code> tag in te voegen. Dit is cruciaal om ervoor te zorgen dat alle benodigde bronnen correct worden geladen en je site naar verwachting functioneert.<\/p>\n<h3>Stap 6:\u00a0 Geef blogberichten weer met de WordPress loop<\/h3>\n<p>Laten we terugkeren naar het bestand <code>index.php<\/code> om uit te leggen hoe je door berichten van je WordPress site kunt loopen en ze kunt weergeven met behulp van de WordPress loop &#8211; een krachtige manier om inhoud dynamisch weer te geven. Zo ziet de loop eruit:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"my-posts\"&gt;\n    &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n        &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n            &lt;article class=\"article-loop\"&gt;\n                &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                    &lt;?php the_post_thumbnail(); ?&gt;\n                &lt;?php endif; ?&gt;\n                &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                &lt;div class=\"flex-info\"&gt;\n                    &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                    &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;?php the_excerpt(); ?&gt;\n            &lt;\/article&gt;\n        &lt;\/a&gt;\n    &lt;?php endwhile; else : ?&gt;\n        &lt;article&gt;\n            &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n        &lt;\/article&gt;\n    &lt;?php endif; ?&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>De bovenstaande code controleert of er berichten zijn om weer te geven voordat de loop wordt geopend. In de loop geven WordPress functies als <code>the_title()<\/code>, <code>the_author()<\/code>, <code>the_time('F j, Y')<\/code>, en <code>the_excerpt()<\/code> informatie weer over elk WordPress bericht.<\/p>\n<p>De <code>the_post_thumbnail()<\/code> 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 <code>functions.php<\/code> 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:<\/p>\n<pre><code class=\"language-php\">add_theme_support('post-thumbnails');<\/code><\/pre>\n<p>Voeg dit toe aan de functie <code>my_custom_theme_setup()<\/code> die we hebben gemaakt in het bestand <code>functions.php<\/code>. Zo ziet het bestand <code>index.php<\/code> er nu uit:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;div class=\"hero\"&gt;\n        &lt;h1&gt;Welcome to my blog!&lt;\/h1&gt;\n        &lt;p&gt;Here, you'll find posts on a variety of topics, including programming, web development, and more.&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"my-posts\"&gt;\n        &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n            &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n                &lt;article class=\"article-loop\"&gt;\n                    &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                        &lt;?php the_post_thumbnail(); ?&gt;\n                    &lt;?php endif; ?&gt;\n                    &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                    &lt;div class=\"flex-info\"&gt;\n                        &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                        &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                    &lt;\/div&gt;\n                    &lt;?php the_excerpt(); ?&gt;\n                &lt;\/article&gt;\n            &lt;\/a&gt;\n        &lt;?php endwhile; else : ?&gt;\n            &lt;article&gt;\n                &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n            &lt;\/article&gt;\n        &lt;?php endif; ?&gt;\n    &lt;\/div&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Je zult zien dat er wat statische code is toegevoegd, die zal worden vormgegeven als een banner met &#8220;Welcome to my blog&#8221; en een alinea met tekst.<\/p>\n<h3>Stap 7: Maak een template voor een los bericht<\/h3>\n<p>Voordat we ons thema stylen, moeten we een basistemplate defini\u00ebren om losse blogberichten weer te geven wanneer erop wordt geklikt vanaf een pagina of bericht in je thema. Maak hiervoor een bestand <code>single.php<\/code> aan in de root van je thema en voeg de volgende code toe:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;section class=\"single__post\"&gt;\n        &lt;article class=\"article-full\"&gt;\n          &lt;div class=\"single__post-header\"&gt;\n            &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n              &lt;?php the_post_thumbnail(); ?&gt;\n            &lt;?php endif; ?&gt;\n            &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n            &lt;p&gt;By: &lt;?php the_author(); ?&gt; on &lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;?php the_content(); ?&gt;\n        &lt;\/article&gt;\n    &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>In de bovenstaande code bevatten <code>get_header()<\/code> en <code>get_footer()<\/code> de header en footer. In andere delen van de code geven WordPress functies dynamische inhoud weer.<\/p>\n<h3>Stap 8: Maak een templatebestand voor WordPress pagina&#8217;s<\/h3>\n<p>Net zoals je een template hebt gemaakt voor losse WordPress berichten, kun je een template maken om je WordPress pagina&#8217;s weer te geven. Om dit te doen, maak je een <code>page.php<\/code> bestand in de root van je themamap en voeg je de volgende code toe:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"\"&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;div class=\"page-header\"&gt;\n          &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n        &lt;\/div&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<h3>Stap 9: Style je thema<\/h3>\n<p>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 <code>style.css<\/code> in je themamap. Om te beginnen kopieer je de styling van deze <a href=\"https:\/\/gist.github.com\/olawanlejoel\/8cf4cee4429df83a7e005275d1f4275d\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub gist<\/a> voor het voorbeeldthema dat in deze handleiding is gemaakt.<\/p>\n<h3>Stap 10: Test en implementeer je thema<\/h3>\n<p>Tot nu toe heb je met succes een WordPress thema gemaakt. Nu is het tijd om het te testen en te implementeren.<\/p>\n<p>Zorg er eerst voor dat je thema geactiveerd is door naar het WordPress admin dashboard te gaan en <b>Appearance <\/b>&gt; <strong>Themes <\/strong>te selecteren. Als je dat nog niet hebt gedaan, klik dan op je thema en activeer het. Je kunt ook op de knop <strong>Customize<\/strong><strong>\u00a0<\/strong>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.<\/p>\n<p>Als je tevreden bent met je thema, heb je een paar opties om het te implementeren:<\/p>\n<ol start=\"1\">\n<li><strong>Zet je lokale site online<\/strong>: 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 <a href=\"https:\/\/kinsta.com\/nl\/docs\/devkinsta\/devkinsta-integratie\/#push-changes-to-staging\">DevKinsta documentatie<\/a>.<\/li>\n<li><strong>Zip en upload je thema<\/strong>: Als alternatief kun je je thema verpakken in een gezipte map en uploaden naar een online site. Ga naar <b>Appearance <\/b>&gt; <strong>Themes<\/strong>\u00a0&gt; <strong>Add new <\/strong>&gt; <strong>Upload Theme <\/strong>in het WordPress admin dashboard en selecteer je gezipte themabestand om te uploaden.<\/li>\n<\/ol>\n<p>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.<\/p>\n<h2>Samenvatting<\/h2>\n<p>In dit artikel hebben we een klassiek WordPress thema gemaakt vanuit het niets. We hebben essenti\u00eble bestanden ingesteld, custom styling toegevoegd en templates gemaakt voor individuele berichten en pagina&#8217;s.<\/p>\n<p>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\u00ebnt te realiseren.<\/p>\n<p>Als je eindelijk een site hebt die bij je smaak past, dan wil je robuuste hosting om problemen zoals <a href=\"https:\/\/kinsta.com\/nl\/blog\/downtime-website\/\">downtime<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/ddos-aanvallen-voorkomen\/\">DDoS-aanvallen<\/a> en meer te voorkomen. Dit is waar premium hostingproviders zoals Kinsta uitblinken.<\/p>\n<p>Kinsta biedt krachtige <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/\">Managed WordPress Hosting<\/a> met een volledig gecontaineriseerde architectuur, exclusief aangedreven door <a href=\"https:\/\/kinsta.com\/nl\/blog\/cloudplatform-voor-developers\/\">Google Cloud Platform<\/a> op het Premium Tier netwerk van Google.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/nl\/contact\/\">Neem contact met ons op<\/a> voor meer informatie over onze superieure managed hosting oplossing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8230;<\/p>\n","protected":false},"author":287,"featured_media":60047,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892,902],"class_list":["post-60046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-ontwikkeling","topic-wordpress-themas"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zo maak je een klassiek WordPress thema - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer hoe je vanuit het niets een klassiek WordPress thema maakt door templates te maken en WordPress functies te gebruiken.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo maak je een klassiek WordPress thema: stap-voor-stap handleiding\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je vanuit het niets een klassiek WordPress thema maakt door templates te maken en WordPress functies te gebruiken.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-02T08:28:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-07T13:26:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer hoe je vanuit het niets een klassiek WordPress thema maakt door templates te maken en WordPress functies te gebruiken.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo maak je een klassiek WordPress thema: stap-voor-stap handleiding\",\"datePublished\":\"2024-08-02T08:28:32+00:00\",\"dateModified\":\"2024-08-07T13:26:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/\"},\"wordCount\":2541,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/\",\"name\":\"Zo maak je een klassiek WordPress thema - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png\",\"datePublished\":\"2024-08-02T08:28:32+00:00\",\"dateModified\":\"2024-08-07T13:26:24+00:00\",\"description\":\"Leer hoe je vanuit het niets een klassiek WordPress thema maakt door templates te maken en WordPress functies te gebruiken.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress thema's\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-themas\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo maak je een klassiek WordPress thema: stap-voor-stap handleiding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo maak je een klassiek WordPress thema - Kinsta\u00ae","description":"Leer hoe je vanuit het niets een klassiek WordPress thema maakt door templates te maken en WordPress functies te gebruiken.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo maak je een klassiek WordPress thema: stap-voor-stap handleiding","og_description":"Leer hoe je vanuit het niets een klassiek WordPress thema maakt door templates te maken en WordPress functies te gebruiken.","og_url":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-08-02T08:28:32+00:00","article_modified_time":"2024-08-07T13:26:24+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Leer hoe je vanuit het niets een klassiek WordPress thema maakt door templates te maken en WordPress functies te gebruiken.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"19 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo maak je een klassiek WordPress thema: stap-voor-stap handleiding","datePublished":"2024-08-02T08:28:32+00:00","dateModified":"2024-08-07T13:26:24+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/"},"wordCount":2541,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/","url":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/","name":"Zo maak je een klassiek WordPress thema - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png","datePublished":"2024-08-02T08:28:32+00:00","dateModified":"2024-08-07T13:26:24+00:00","description":"Leer hoe je vanuit het niets een klassiek WordPress thema maakt door templates te maken en WordPress functies te gebruiken.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/create-your-own-wordpress-theme.png","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/klassiek-wordpress-thema-maken\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress thema's","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-themas\/"},{"@type":"ListItem","position":3,"name":"Zo maak je een klassiek WordPress thema: stap-voor-stap handleiding"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=60046"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60046\/revisions"}],"predecessor-version":[{"id":60096,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60046\/revisions\/60096"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60046\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/60047"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=60046"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=60046"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=60046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}