{"id":64880,"date":"2026-03-05T07:26:08","date_gmt":"2026-03-05T06:26:08","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=64880&#038;preview=true&#038;preview_id=64880"},"modified":"2026-03-05T08:27:04","modified_gmt":"2026-03-05T07:27:04","slug":"blade-templating-wordpress-radicle","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/","title":{"rendered":"Blade templating in WordPress: moderne template ontwikkeling met Radicle op Kinsta"},"content":{"rendered":"<p>De traditionele ontwikkeling van WordPress thema&#8217;s is gebaseerd op het herhalen van header en footer markup in verschillende template bestanden. Elke keer dat je een navigatiemenu of voettekstelement bijwerkt, moet je elk templatebestand met deze opmaak opzoeken en de benodigde wijzigingen op meerdere locaties doorvoeren. Dit zorgt voor algemene onderhoudskosten en verhoogt het risico op inconsistenties op je site.<\/p>\n<p><a href=\"https:\/\/roots.io\/radicle\/\" target=\"_blank\" rel=\"noopener noreferrer\">Radicle<\/a> brengt <a href=\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\">de Blade templating engine van Laravel<\/a> naar WordPress via de op componenten gebaseerde architectuur van <a href=\"https:\/\/roots.io\/acorn\/\" target=\"_blank\" rel=\"noopener noreferrer\">Acorn<\/a>. In plaats van het verspreiden van markup over template bestanden, definieer je herbruikbare componenten \u00e9\u00e9n keer en refereer je ernaar in je thema. Als je een UI element moet bijwerken, pas je een enkel componentbestand aan in plaats van tientallen templates te doorzoeken.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Je hebt wel basiskennis nodig van <a href=\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\">Blade templating<\/a>, Acorn en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelen-radicle\/\">Radicle<\/a> om dit artikel te kunnen volgen. Kinsta heeft handleidingen voor het installeren en instellen van al deze tools.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Waarom WordPress template ontwikkeling een component-gebaseerde architectuur nodig heeft<\/h2>\n<p>WordPress slaat templates op in een themamappenstructuur waar <code>header.php<\/code> en <code>footer.php<\/code> in elk paginatemplate verschijnen via <code>get_header()<\/code> en <code>get_footer()<\/code> aanroepen. Dit werkt voor basissites, maar veroorzaakt problemen bij het schalen over complexe projecten.<\/p>\n<p>Een site met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-custom-post-types\/\">custom berichttypes<\/a>, landingspagina&#8217;s en marketingtemplates bevat bijvoorbeeld dezelfde navigatieopmaak, footer structuur en zijbalkelementen in elk templatebestand. Hierdoor moet je meerdere templatebestanden doorzoeken om een nieuw menu-item toe te voegen of een contactformulier in de voettekst bij te werken.<\/p>\n<p>Radicle organiseert Blade templates in <code>resources\/views\/<\/code> met aparte mappen voor layouts, componenten en blokken:<\/p>\n<ul>\n<li><code>components<\/code>. Deze map bevat zelfstandige UI elementen zoals headers en knoppen.<\/li>\n<li><code>layouts<\/code>. Deze bevat structurele templates die de paginastructuur defini\u00ebren.<\/li>\n<li><code>blocks.<\/code> Je slaat hier <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokthemas\/\">bloktemplates<\/a> op die integreren met de WordPress Site Editor.<\/li>\n<\/ul>\n<p>Deze organisatie cre\u00ebert een enkele bron voor elk UI element. Een <code>x-heading<\/code> component definieert heading markup en styling op \u00e9\u00e9n locatie. Dus wanneer je dit component in verschillende templates gebruikt, verwijst Blade naar deze ene definitie. Als je de component bijwerkt, wordt elke instantie op je site bijgewerkt.<\/p>\n<h2>Hoe je primaire layouts maakt die dubbele code elimineren<\/h2>\n<p>In plaats van navigatie- en footer markup te dupliceren, kun je template inheritance gebruiken om een bovenliggende layout te maken die de site definieert.<\/p>\n<p>Een layout begint met een Blade component bestand in <code>resources\/views\/components\/<\/code>. Het bestand <code>layout.blade.php<\/code> definieert de HTML-structuur die de paginacontent wrapt. Denk aan de <code>doctype<\/code>, head sectie met metatags en asset references, navigatiestructuur en footer elementen. Het belangrijkste element in een layout is de <code>$slot<\/code> variabele, die Blade gebruikt als het injectiepunt voor de content.<\/p>\n<pre><code class=\"language-html\">&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;{{ $title ?? 'My Site' }}&lt;\/title&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;nav&gt;\n       \u00a0&lt;!-- Navigation markup --&gt;<!-- Navigation markup -->\n    &lt;\/nav&gt;\n\n    &lt;main&gt;\n        {{ $slot }}\n    &lt;\/main&gt;\n\n    &lt;footer&gt;\n         &lt;!-- Footer markup --&gt;<!-- Footer markup -->\n    &lt;\/footer&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>Child templates breiden deze layout uit met behulp van Blade&#8217;s component syntax. Een paginatemplate wrapt zijn inhoud in de <code>x-layout<\/code> component tags. Blade verwerkt dit door de layout component te renderen en de child content te injecteren waar de <code>$slot<\/code> variabele verschijnt:<\/p>\n<pre><code class=\"language-html\">&lt;x-layout&gt;\n    &lt;h1&gt;Page Title&lt;\/h1&gt;\n    &lt;p&gt;Page content goes here.&lt;\/p&gt;\n&lt;\/x-layout&gt;\n<\/code><\/pre>\n<p>Named slots bieden extra injectiepunten voor dynamische content (zoals paginatitels). In plaats van een standaard slot te accepteren, definieer je specifieke slots met namen. De <code>x-slot<\/code> component met een <code>name<\/code> attribuut geeft inhoud door aan deze aangewezen locaties:<\/p>\n<pre><code class=\"language-html\">&lt;x-layout&gt;\n    &lt;x-slot name=\"title\"&gt;\n        Custom Page Title\n    &lt;\/x-slot&gt;\n\n    &lt;h1&gt;Page Heading&lt;\/h1&gt;\n    &lt;p&gt;Page content.&lt;\/p&gt;\n&lt;\/x-layout&gt;\n<\/code><\/pre>\n<p>De layout component heeft toegang tot de genoemde sleuven via variabelen die overeenkomen met de named slots. Zo kun je content injecteren in meerdere layoutlocaties vanuit een enkel child template.<\/p>\n<h2>Herbruikbare UI componenten maken voor consistente designpatronen<\/h2>\n<p>Blade componenten centraliseren styling en opmaak voor gemeenschappelijke interface elementen.<\/p>\n<p>In plaats van het schrijven van knop markup met <a href=\"https:\/\/kinsta.com\/blog\/tailwind-css\/\">Tailwind classes<\/a> in elk template, maak je een knopcomponent die de markup wrapt. Het component accepteert &#8216;props&#8217; voor aanpassingen terwijl de basisstyling consistent blijft.<\/p>\n<p>Het gebruik van het <code>x-heading<\/code> component met andere typografiecomponenten is hier een goed voorbeeld van. Het accepteert een <code>level<\/code> prop die het HTML-element bepaalt (<code>h1<\/code>, <code>h2<\/code>, <code>h3<\/code>) en een <code>size<\/code> prop die de visuele schaal bepaalt. Het component koppelt deze props intern aan Tailwind klassen, waardoor de implementatiedetails gescheiden blijven.<\/p>\n<pre><code class=\"language-html\">&lt;x-heading level=\"h1\" size=\"3xl\"&gt;\n    Main Page Title\n&lt;\/x-heading&gt;\n\n&lt;x-heading level=\"h2\" size=\"2xl\"&gt;\n    Section Heading\n&lt;\/x-heading&gt;\n<\/code><\/pre>\n<p>Het componentenbestand in <code>resources\/views\/components\/heading.blade.php<\/code> definieert de opmaak- en stylinglogica met behulp van Blade&#8217;s <code>@props<\/code> richtlijn om geaccepteerde eigenschappen en hun standaardwaarden te defini\u00ebren. Elk component construeert het juiste HTML element met klassen gebaseerd op de prop waarden.<\/p>\n<p>Een <code>x-link<\/code> component volgt hetzelfde patroon met variantondersteuning voor verschillende linkstijlen en een variant prop schakelt tussen standaard, knop en niet gestileerde presentaties.<\/p>\n<p>Met UI componenten zoals <code>x-button<\/code> kun je hetzelfde bereiken met interactieve elementen. Het <code>button<\/code> component ondersteunt grootte en variant props voor verschillende knopstijlen. Als je het combineert met een framework zoals <a href=\"https:\/\/alpinejs.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alpine.js<\/a> via het <code>x-modal<\/code> component, kun je interacties afhandelen zonder JavaScript te verspreiden over templates:<\/p>\n<pre><code class=\"language-html\">&lt;x-button variant=\"primary\" @click=\"showModal = true\"&gt;\n    Open Modal\n&lt;\/x-button&gt;\n\n&lt;x-modal x-show=\"showModal\"&gt;\n    &lt;p&gt;Modal content&lt;\/p&gt;\n&lt;\/x-modal&gt;\n<\/code><\/pre>\n<p>Props werken goed voor strings, booleans en andere eenvoudige gegevens. Slots zijn beter voor complexe inhoud die opmaak bevat. Het <code>modal<\/code> component gebruikt bijvoorbeeld een standaard slot om de volledige modale inhoud te accepteren in plaats van HTML door te geven via een prop.<\/p>\n<h2>WordPress gegevens verbinden met Blade templates met view composers<\/h2>\n<p>Met view composers kun je gegevens uit meerdere bronnen samenvoegen voordat je een template rendert. Hier maak je een <code>composer<\/code> klasse die het ophalen en transformeren van gegevens afhandelt in plaats van posts rechtstreeks in templates te bevragen. In plaats daarvan ontvangt de template gestructureerde gegevens om weer te geven.<\/p>\n<p>Radicle&#8217;s <code>Post<\/code> model vereenvoudigt het werken met WordPress berichtgegevens met behulp van een paar verschillende methoden:<\/p>\n<ul>\n<li><code>title()<\/code> geeft de titel van het bericht terug.<\/li>\n<li>De methode <code>content()<\/code> haalt gefilterde berichtinhoud op.<\/li>\n<li><code>excerpt()<\/code> accepteert een aantal woorden en genereert een uittreksel.<\/li>\n<li><code>permalink()<\/code> retourneert de URL van de post.<\/li>\n<\/ul>\n<p>Voor uitgelichte afbeeldingen controleert <code>hasThumbnail()<\/code> of er een afbeelding bestaat en <code>thumbnail()<\/code> haalt de HTML-afbeelding met een opgegeven grootte op:<\/p>\n<pre><code class=\"language-php\">$post = Post::find(123);\necho $post-&gt;title();\necho $post-&gt;excerpt(30);\nif ($post-&gt;hasThumbnail()) {\n    echo $post-&gt;thumbnail('large');\n}\n<\/code><\/pre>\n<p>De View composer klassen leven in <code>app\/View\/Composers\/<\/code> en breiden <code>RootsAcornViewComposer<\/code> uit. De klasse definieert op welke weergaven het van toepassing is via de beschermde statische property <code>$views<\/code>, die een array van templatenamen accepteert. Voor een voorpaginacomposer specificeer je <code>'front-page'<\/code> om de <code>front-page.blade.php<\/code> template te targeten:<\/p>\n<pre><code class=\"language-php\">namespace AppViewComposers;\nuse AppModelsPost;\nuse RootsAcornViewComposer;\nclass FrontPage extends Composer\n\n{\n    protected static $views = ['front-page'];\n    public function with()\n    {\n        return [\n            'recentPosts' =&gt; Post::recent(6)-&gt;get(),\n            'totalPosts' =&gt; Post::published()-&gt;count(),\n        ];\n    }\n}\n<\/code><\/pre>\n<p>De methode <code>with()<\/code> retourneert een array waarvan de sleutels variabele namen worden in de template. De waarden kunnen <a href=\"https:\/\/laravel.com\/docs\/11.x\/eloquent-collections\" target=\"_blank\" rel=\"noopener noreferrer\">Eloquent verzamelingen<\/a>, individuele modellen of een andere gegevensstructuur zijn. Hoe dan ook, deze methode wordt uitgevoerd voordat een template de gegevens rendert en voorbereidt.<\/p>\n<p>De template <code>front-page.blade.php<\/code> heeft direct toegang tot deze variabelen. Blade&#8217;s <code>@foreach<\/code> directive loopt door berichten en elke iteratie geeft toegang tot de <code>Post<\/code> modelmethoden:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"posts-grid\"&gt;\n    @foreach ($recentPosts as $post)\n        &lt;article&gt;\n            @if ($post-&gt;hasThumbnail())\n                &lt;img src=\"{{ $post-&gt;thumbnail('medium') }}\" alt=\"{{ $post-&gt;title() }}\"&gt;\n            @endif\n\n            &lt;h2&gt;\n                &lt;a href=\"{{ $post-&gt;permalink() }}\"&gt;{{ $post-&gt;title() }}&lt;\/a&gt;\n            &lt;\/h2&gt;\n\n            &lt;p&gt;{{ $post-&gt;excerpt(20) }}&lt;\/p&gt;\n        &lt;\/article&gt;\n    @endforeach\n&lt;\/div&gt;\n&lt;p&gt;Total posts: {{ $totalPosts }}&lt;\/p&gt;\n<\/code><\/pre>\n<p>In dit patroon zorgt de composer voor query&#8217;s en gegevenstransformatie, terwijl de template zich richt op opmaak en weergave logica. Als je de datastructuur moet aanpassen of nieuwe query&#8217;s moet toevoegen, werk je de composer bij zonder de templatebestanden aan te raken.<\/p>\n<h2>Bouwstenen voor de WordPress Site Editor met Blade rendering<\/h2>\n<p>Radicle gebruikt server-side rendering voor Site Editor Blocks via Blade templates. Het JavaScript editor component zorgt voor de Block interface in de WordPress admin, en het Blade template zorgt voor de output aan de frot-end.<\/p>\n<p>Hierdoor kun je Block interfaces bouwen met React (bijvoorbeeld) terwijl je productie HTML rendert met Blade.<\/p>\n<p>Het <code>wp acorn make:block<\/code> commando genereert drie bestanden voor elk Block:<\/p>\n<ul>\n<li>Een PHP klasse in <code>app\/Blocks\/<\/code> beheert de server-side logica.<\/li>\n<li>De JSX component in <code>resources\/js\/editor\/<\/code> definieert de Block Editor interface.<\/li>\n<li>Blade templates in <code>resources\/views\/blocks\/<\/code> renderen de frontend uitvoer.<\/li>\n<\/ul>\n<p>Een commando <code>wp acorn make:block latest-posts<\/code> maakt <code>LatestPosts.php<\/code>, <code>latest-posts.block.jsx<\/code>, en <code>latest-posts.blade.php<\/code>. Het JSX-bestand definieert de attributen en editor besturingselementen van het blok, terwijl de dynamische blokken <code>InspectorControls<\/code> gebruiken om instellingen toe te voegen in de zijbalk van het blok. Je importeert besturingselementen van <code>@wordpress\/components<\/code> en stelt ze samen in een instellingeninterface.<\/p>\n<pre><code class=\"language-php\">import { InspectorControls } from '@wordpress\/block-editor';\nimport { RangeControl, ToggleControl, RadioControl } from '@wordpress\/components';\nexport const attributes = {\n    posts: { type: 'number', default: 5 },\n    displayFeaturedImage: { type: 'boolean', default: false },\n    postLayout: { type: 'string', default: 'list' },\n};\n\nexport const edit = ({ attributes, setAttributes }) =&gt; {\n    return (\n        &lt;&gt;\n            &lt;InspectorControls&gt;\n                &lt;RangeControl\n                    label=\"Number of posts\"\n                    value={attributes.posts}\n                    onChange={(value) =&gt; setAttributes({ posts: value })}\n                    min={1}\n                    max={10}\n                \/&gt;\n                &lt;ToggleControl\n                    label=\"Display featured image\"\n                    checked={attributes.displayFeaturedImage}\n                    onChange={(value) =&gt; setAttributes({ displayFeaturedImage: value })}\n                \/&gt;\n                &lt;RadioControl\n                    label=\"Layout\"\n                    selected={attributes.postLayout}\n                    options={[\n                        { label: 'List', value: 'list' },\n                        { label: 'Grid', value: 'grid' },\n                    ]}\n                    onChange={(value) =&gt; setAttributes({ postLayout: value })}\n                \/&gt;\n            &lt;\/InspectorControls&gt;\n        &lt;\/&gt;\n    );\n};\n<\/code><\/pre>\n<p>Het <code>render_block<\/code> filter in <code>BlocksServiceProvider.php<\/code> onderschept het renderen van het Blok en geeft attributen door aan het Blade template. Het ontvangt ook de Block inhoud en Block gegevens. Je controleert de Block naam, vraagt de benodigde gegevens op en retourneert de gerenderde Blade weergave:<\/p>\n<pre><code class=\"language-php\">add_filter('render_block', function ($block_content, $block) {\n    if ($block['blockName'] === 'radicle\/latest-posts') {\n        $attributes = $block['attrs'] ?? [];\n\n        $posts = get_posts([\n            'numberposts' =&gt; $attributes['posts'] ?? 5,\n            'post_status' =&gt; 'publish',\n        ]);\n\n        return view('blocks.latest-posts', [\n            'posts' =&gt; $posts,\n            'displayFeaturedImage' =&gt; $attributes['displayFeaturedImage'] ?? false,\n            'postLayout' =&gt; $attributes['postLayout'] ?? 'list',\n        ]);\n    }\n\n    return $block_content;\n}, 10, 2);\n<\/code><\/pre>\n<p>Het Blade template gebruikt PHP arrays om voorwaardelijke layouts te beheren. Hier definieer je layout configuraties als geneste arrays die layout namen toewijzen aan CSS klassen en HTML elementen.<\/p>\n<pre><code class=\"language-php\">@php\n$layoutConfig = [\n    'grid' =&gt; [\n        'container' =&gt; 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6',\n        'element' =&gt; 'div',\n    ],\n    'list' =&gt; [\n        'container' =&gt; 'space-y-6',\n        'element' =&gt; 'div',\n    ],\n];\n$config = $layoutConfig[$postLayout];\n@endphp\n&lt;div class=\"{{ $config['container'] }}\"&gt;\n    @foreach ($posts as $post)\n        &lt;article&gt;\n            @if ($displayFeaturedImage && has_post_thumbnail($post))\n                {{ get_the_post_thumbnail($post, 'medium') }}\n            @endif\n\n            &lt;h3&gt;{{ $post-&gt;post_title }}&lt;\/h3&gt;\n        &lt;\/article&gt;\n    @endforeach\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Dit patroon cre\u00ebert flexibele blokken waarin editorbesturingselementen de uitvoer aan de voorkant aanpassen zonder de logica van het template te dupliceren: JavaScript regelt de gebruikersinterface, PHP regelt gegevensquery&#8217;s en Blade regelt de opmaakstructuur.<\/p>\n<h2>Hoe Kinsta&#8217;s caching de prestaties van Blade&#8217;s gecompileerde weergave verbetert<\/h2>\n<p>Blade compilatie converteert <code>.blade.php<\/code> templates naar gewone PHP code. Nadat Blade een volledige parse van het template en de Blade syntax heeft voltooid, slaat het een gecompileerd bestand op in <code>storage\/framework\/views\/<\/code>. Deze compilatie gebeurt \u00e9\u00e9n keer per templatewijziging in plaats van bij elke paginalading, maar volgende verzoeken slaan de compilatie over en voeren PHP uit in de cache.<\/p>\n<p>Het proces zet Blade directives om in PHP functies. Bijvoorbeeld, de <code>@foreach<\/code> richtlijn wordt een <code>foreach<\/code> loop; de <code>{{ $variable }}<\/code> syntax wordt een <code>echo<\/code> statement met escaping.<\/p>\n<p>Kinsta&#8217;s caching op serverniveau (zowel <a href=\"https:\/\/kinsta.com\/nl\/blog\/edge-caching\/\">edge caching<\/a> als <a href=\"https:\/\/kinsta.com\/blog\/redis-cache\/\">Redis object caching<\/a>) werken samen met de compilatiecache van Blade om meerdere prestatieniveaus te cre\u00ebren. De gecompileerde views van Blade bevinden zich tussen deze lagen, die templateuitvoeringstijden bieden die profiteren van zowel upstream caching als downstream optimalisatie.<\/p>\n<p>Tijdens de deployment wist Blade de cache wanneer je templatewijzigingen naar test- of productieomgevingen pusht. Hoewel Blade templatewijzigingen detecteert tijdens de ontwikkeling, moeten je deploymentprocessen het wissen van de view cache bevatten door <code>php artisan view:clear<\/code> of <code>wp acorn view:clear<\/code> uit te voeren in je deployment script.<\/p>\n<h2>Voor moderne WordPress thema ontwikkeling zijn Radicle en Kinsta vereist<\/h2>\n<p>De combinatie van Radicle&#8217;s Laravel-ge\u00efnspireerde structuur en <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/\">Kinsta&#8217;s managed hosting infrastructuur<\/a> geeft je een basis voor het schalen van WordPress projecten. Bureaus die meerdere klantensites beheren kunnen consistente componentpatronen gebruiken voor verschillende projecten. Voor ontwikkelaars kun je werken met vertrouwde Laravel conventies met behoud van compatibiliteit met WordPress.<\/p>\n<p>Je volgende stap hangt af van je huidige setup. Als je nieuw begint, begin dan met het installeren van Radicle en maak je eerste Blade component. Als je een bestaand thema migreert, identificeer dan herhalende markup patronen en zet ze \u00e9\u00e9n voor \u00e9\u00e9n om naar componenten. Concentreer je op gebieden met een hoge waarde, zoals navigatie, header en footerteksten, waar componenten direct voordeel opleveren.<\/p>\n<p>Als je managed WordPress hosting nodig hebt die moderne ontwikkelworkflows ondersteunt, dan <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/\">biedt Kinsta functionaliteit<\/a> die werkt met tools zoals Radicle en Acorn.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>De traditionele ontwikkeling van WordPress thema&#8217;s is gebaseerd op het herhalen van header en footer markup in verschillende template bestanden. Elke keer dat je een navigatiemenu &#8230;<\/p>\n","protected":false},"author":287,"featured_media":64881,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892],"class_list":["post-64880","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-ontwikkeling"],"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>Moderne template ontwikkeling voor WordPress met Radicle op Kinsta<\/title>\n<meta name=\"description\" content=\"Moderne WordPress development combineert meerdere tools die je veel tijd besparen. In dit artikel laten we zien hoe je Blade templating gebruikt met Radicle op Kinsta.\" \/>\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\/blade-templating-wordpress-radicle\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blade templating in WordPress: moderne template ontwikkeling met Radicle op Kinsta\" \/>\n<meta property=\"og:description\" content=\"Moderne WordPress development combineert meerdere tools die je veel tijd besparen. In dit artikel laten we zien hoe je Blade templating gebruikt met Radicle op Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/\" \/>\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=\"2026-03-05T06:26:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T07:27:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\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=\"Moderne WordPress development combineert meerdere tools die je veel tijd besparen. In dit artikel laten we zien hoe je Blade templating gebruikt met Radicle op Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.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=\"11 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Blade templating in WordPress: moderne template ontwikkeling met Radicle op Kinsta\",\"datePublished\":\"2026-03-05T06:26:08+00:00\",\"dateModified\":\"2026-03-05T07:27:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/\"},\"wordCount\":1600,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png\",\"inLanguage\":\"nl-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/\",\"name\":\"Moderne template ontwikkeling voor WordPress met Radicle op Kinsta\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png\",\"datePublished\":\"2026-03-05T06:26:08+00:00\",\"dateModified\":\"2026-03-05T07:27:04+00:00\",\"description\":\"Moderne WordPress development combineert meerdere tools die je veel tijd besparen. In dit artikel laten we zien hoe je Blade templating gebruikt met Radicle op Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress ontwikkeling\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Blade templating in WordPress: moderne template ontwikkeling met Radicle op Kinsta\"}]},{\"@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":"Moderne template ontwikkeling voor WordPress met Radicle op Kinsta","description":"Moderne WordPress development combineert meerdere tools die je veel tijd besparen. In dit artikel laten we zien hoe je Blade templating gebruikt met Radicle op Kinsta.","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\/blade-templating-wordpress-radicle\/","og_locale":"nl_NL","og_type":"article","og_title":"Blade templating in WordPress: moderne template ontwikkeling met Radicle op Kinsta","og_description":"Moderne WordPress development combineert meerdere tools die je veel tijd besparen. In dit artikel laten we zien hoe je Blade templating gebruikt met Radicle op Kinsta.","og_url":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2026-03-05T06:26:08+00:00","article_modified_time":"2026-03-05T07:27:04+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Moderne WordPress development combineert meerdere tools die je veel tijd besparen. In dit artikel laten we zien hoe je Blade templating gebruikt met Radicle op Kinsta.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"11 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Blade templating in WordPress: moderne template ontwikkeling met Radicle op Kinsta","datePublished":"2026-03-05T06:26:08+00:00","dateModified":"2026-03-05T07:27:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/"},"wordCount":1600,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png","inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/","url":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/","name":"Moderne template ontwikkeling voor WordPress met Radicle op Kinsta","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png","datePublished":"2026-03-05T06:26:08+00:00","dateModified":"2026-03-05T07:27:04+00:00","description":"Moderne WordPress development combineert meerdere tools die je veel tijd besparen. In dit artikel laten we zien hoe je Blade templating gebruikt met Radicle op Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/02\/blade-templating-in-wordpress-modern-template-development-with-radicle-on-kinsta.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/blade-templating-wordpress-radicle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress ontwikkeling","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/"},{"@type":"ListItem","position":3,"name":"Blade templating in WordPress: moderne template ontwikkeling met Radicle op Kinsta"}]},{"@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\/64880","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=64880"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/64880\/revisions"}],"predecessor-version":[{"id":64925,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/64880\/revisions\/64925"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/64880\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/64881"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=64880"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=64880"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=64880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}