Warning: Undefined variable $related_documentation in /home/nicedesi/docs.micro-sites.uk/wp-content/themes/webdev/single-doc.php on line 32
Single Snippet Template – Code Bank
[ald_default calltag=true]
Code Bank Logo

CODE BANK

a place to bank your code

Single Snippet Template

Last Updated: April 20, 2026

This file will act as the controller, setting up Timber with the context and rendering the single-snippets.twig template.

single-snippet.php

<?php
/**
 * Template for displaying single snippets
 */

$context = Timber::context(); // Get Timber's context

$post = new Timber\Post(); // Get the current post as a Timber post object
$context['post'] = $post;

// Fetching the ACF field for the code snippet
$context['code_snippet'] = get_field('code_snippet');

// Fetching only the frameworks and languages related to the current post
$context['frameworks'] = Timber::get_terms([
    'taxonomy' => 'framework',
    'object_ids' => $post->ID, // Fetch only terms for this post
]);

$context['languages'] = Timber::get_terms([
    'taxonomy' => 'language',
    'object_ids' => $post->ID, // Fetch only terms for this post
]);
$context['cmss'] = Timber::get_terms([
    'taxonomy' => 'cms',
    'object_ids' => $post->ID, // Fetch only terms for this post
]);
$context['configs'] = Timber::get_terms([
    'taxonomy' => 'config',
    'object_ids' => $post->ID, // Fetch only terms for this post
]);
// Render the Twig template
Timber::render('single-snippet.twig', $context);

Code Snippet

single-snippet.twig

Now, for the Twig template that will display the layout. Using Tailwind CSS, we’ll create a layout to display the snippet with its associated taxonomies.

{% extends '_layout/base.twig' %}
{% block content %}
	<div class="container flex flex-col my-8 lg:flex-row lg:my-16 lg:space-x-12">
  		<aside class="bg-gray-100 lg:w-1/3 p-6">
        {% if cmss %}
				<div class="mb-8">
					<div class="flex flex-wrap">
						{% for cms in cmss %}
							<div
								class="relative mb-4 mr-4 w-12 h-12">
								{# Display the icon image #}
								{% if cms.icon_image %}
									<img src="{{ cms.icon_image.sizes.thumbnail }}" alt="{{ cms.name }} icon" class="w-full h-full object-contain">
								{% endif %}

								{# Title that appears on hover #}
								<span class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75 text-white text-sm font-semibold opacity-0 hover:opacity-100 transition-opacity">
									{{ cms.name }}
								</span>
							</div>
						{% endfor %}
					</div>
				</div>
			{% endif %}
			{% if frameworks %}
				<div class="mb-8">
					<div class="flex flex-wrap">
						{% for framework in frameworks %}
							<div
								class="relative mb-4 mr-4 w-12 h-12">
								{# Display the icon image #}
								{% if framework.icon_image %}
									<img src="{{ framework.icon_image.sizes.thumbnail }}" alt="{{ framework.name }} icon" class="w-full h-full object-contain">
								{% endif %}

								{# Title that appears on hover #}
								<span class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75 text-white text-sm font-semibold opacity-0 hover:opacity-100 transition-opacity">
									{{ framework.name }}
								</span>
							</div>
						{% endfor %}
					</div>
				</div>
			{% endif %}
			{% if languages %}
				<div class="mb-8">
					<div class="flex flex-wrap">
						{% for language in languages %}
							<div
								class="relative mb-4 mr-4 w-12 h-12">
								{# Display the icon image #}
								{% if language.icon_image %}
									<img src="{{ language.icon_image.sizes.thumbnail }}" alt="{{ language.name }} icon" class="w-full h-full object-contain">
								{% endif %}

								{# Title that appears on hover #}
								<span class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75 text-white text-sm font-semibold opacity-0 hover:opacity-100 transition-opacity">
									{{ language.name }}
								</span>
							</div>
						{% endfor %}
					</div>
				</div>
			{% endif %}
            {% if configs %}
				<div class="mb-8">
					<div class="flex flex-wrap">
						{% for config in configs %}
							<div
								class="relative mb-4 mr-4 w-12 h-12">
								{# Display the icon image #}
								{% if config.icon_image %}
									<img src="{{ config.icon_image.sizes.thumbnail }}" alt="{{ config.name }} icon" class="w-full h-full object-contain">
								{% endif %}

								{# Title that appears on hover #}
								<span class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75 text-white text-sm font-semibold opacity-0 hover:opacity-100 transition-opacity">
									{{ config.name }}
								</span>
							</div>
						{% endfor %}
					</div>
				</div>
			{% endif %}
		</aside>
		<main class="lg:w-2/3">
			<article class="copy">
				<h1>{{post.title}}</h1>
				{{post.content}}
				{# Code Snippet with Prism.js support #}
				<div>
                	{{ code_snippet|raw }}
            		
				</div>
			</article>
		</main>
	</div>
{% endblock %}

Important Notes/Warnings

Make sure to check what version of Timber you are using as V1 taxonomy code has been updated in V2. This is V2.

Top