Hoe plaats je een dynamische sidebar in een WordPress theme?

Je kunt een mooie WordPress layout maken, of ergens gratis vinden, maar dan ben je er vaak nog niet. Soms krijg je bijvoorbeeld de melding dat de betreffende layout een dynamische sidebar mist. Een dynamische sidebar is een zijbalk waarin je widgets kunt plaatsen.

Met widgets kun je je WordPress website eenvoudig beheren en interactief maken.

Widgets beheren

Op deze website bijvoorbeeld is de linkerkant een zijbalk met verschillende widgets, te beheren vanuit het dashboard.

dashboard met sidebar widgets in wordpress layout

Wanneer deze sidebar niet opgenomen is in je layout, dan zul je deze dus ook niet tegenkomen in je beheer systeem en kun je de widgets niet gebruiken.

In deze tutorial laat ik je zien hoe je eenvoudig een of meer sidebars kunt toevoegen aan je WordPress theme.

Sidebars in functions.php

Het eerste wat nodig is, is dat je aan WordPress vertelt dat je een sidebar in je layout plaatst. Dit doe je in het bestand functions.php. Dit bestand kun je vinden in de map van je layout (theme).

Mocht functions.php niet in de map van je layout staan dan kun je dit bestand zelf aanmaken en in de betreffende map plaatsen. Je kunt dit ook voor andere doeleinden gebruiken dus de kans is groot dat dit bestand al aanwezig is.

Code in functions

Vervolgens plaats je de volgende code in functions.php

<?php
if ( function_exists('register_sidebar') )
     register_sidebar();
?>

Mocht je meer dan een sidebar willen toevoegen, dan zet je de volgende code in dit bestand:

<?php
if ( function_exists('register_sidebars') )
     register_sidebars(2);
?>

Je kunt ook aangeven in de code dat er, in plaats van de normale opzet, aan de hand van ongeordende lijsten (ul), op een andere manier code wordt geplaatst in de sidebar. Bijvoorbeeld een h3 koptekst. dat doe je als volgt:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
?>

Bij meerdere sidebars kun je ook verschillende namen gebruiken voor de sidebar en dan maak je de code:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
register_sidebar(array('name'=>'sidebar2',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
?>

Code in de layout

De volgende stap is om de sidebars daadwerkelijk in je layout te gaan plaatsen. Dit kan op elke willekeurige plek. Je moet er natuurlijk wel rekening mee houden dat het plek in neemt en dat je de css bestanden aanpast naar hoe jij dat wilt.

De code dan maar.

Voor de eerste sidebar is dat:

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>

De tweede sidebar krijgt dan logischerwijs de code:

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('sidebar2') ) : ?>
<?php endif; ?>

Inhoud aan dynamische sidebar toevoegen

Tenslotte is het ook nog mogelijk om de sidebar ook nog automatisch inhoud mee te geven. Dat kan handig zijn als je nog niet weet wat je er bijvoorbeeld in wilt gaan plaatsen. Je ziet dat meestal ook bij een standaard installatie van WordPress. Het archief, de categorie├źn, de blogroll en de meta bijvoorbeeld.

De code die je daarvoor gebruikt is dan als volgt:

<?php if ( function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : else : ?>
	<h2>Categories</h2>
		<ul>
		<?php wp_list_cats('sort_column=name'); ?>
		</ul>

	<h2>Archives</h2>
		<ul>
		<?php wp_get_archives('type=monthly'); ?>
		</ul>

	<h2>Blogroll</h2>
		<ul>
		<?php get_links(-1, '<li>', '</li>', ' - '); ?>
		</ul>
<?php endif; ?>

Bovenstaande is een eenvoudige manier om dynamische sidebar toe te voegen. De mogelijkheden hiermee zijn veel uitgebreider.

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *