Werk met meerdere sidebars in je WordPress theme

Het is alweer even geleden dat ik iets op mijn blog heb geschreven voor WordPress theme ontwikkelaars. Het is dus de hoogste tijd om ook die groep gebruikers weer eens te bedienen met extra informatie. Dit is het eerste deel in een nieuwe serie artikelen.

Wanneer je een wat ouder of een eenvoudig WordPress theme gebruikt dan heb je vaak slechts de mogelijkheid tot het gebruiken van één sidebar. En in het gunstigste geval kun je die dan in- of uitschakelen. Maar wat wanneer je wilt kunnen werken met meerdere sidebars? Hoe doe je dat dan?

In dit artikel iets meer over het gebruik van meerdere sidebars in je WordPress theme. Vooraf: zorg ervoor dat je werkt met een test/ontwikkelomgeving. Aanpassingen in je theme kunnen de zaak behoorlijk de soep in laten lopen. Dat wil je niet op je live website…

Hoe zit jouw theme in elkaar?

Biedt jouw theme geen mogelijkheid tot het gebruik van meerdere sidebars, dan kun je die functie vrij eenvoudig zelf toevoegen. Je hebt wel wat inzicht nodig in de wijze waarop een WordPress theme in elkaar zit om deze tutorial te kunnen volgen. Een aantal basisprincipes die we bij dit onderwerp nodig zullen hebben:

• Elk theme bevat een bestand genaamd sidebar.php. Deze wordt aangeroepen door middel van de php functie get_sidebar(). Dit gebeurt bijvoorbeeld vanaf de pagin (page.php) of een blogbericht (single.php).
• Om een tweede sidebar toe te voegen, is er een extra bestand nodig. Bijvoorbeeld sidebar-contact.php als ik een andere sidebar wil inzetten op mijn contactpagina. Maar je kunt ook een meer algemene naam kiezen, zolang deze maar begint met sidebar-. Merk op dat ook wanneer je andere widgetgebieden wilt definieren, zoals bijvoorbeeld in de footer van je website, je de naam sidebar- gebruikt.

Code aanpassingen aan je theme

Je extra sidebar moet vast gelegd worden in de functions.php van je theme. Dat ziet er als volgt uit, uitgaande van de al genoemde sidebar-contact.php. Ergens in je bestaande functions.php kom je waarschijnlijk een stukje code tegen dat lijkt op het onderstaande.

function mijntheme_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Sidebar', 'mijntheme' ),
		'id'            => 'sidebar-1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<div class="widget-title">',
		'after_title'   => '</div>',
	) );
}
add_action( 'widgets_init', 'mijntheme_widgets_init' );

Deze code breid je uit, door er ook voor de tweede sidebar een definitie aan toe te voegen. Dat ziet er in zijn geheel dan als volgt uit:

function mijntheme_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Sidebar', 'mijntheme' ),
		'id'            => 'sidebar-1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<div class="widget-title">',
		'after_title'   => '</div>',
	) );
	register_sidebar( array(
		'name' => __( 'Contact Widgets', 'mijntheme' ),
		'id' => 'sidebar-contact',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<div class="widget-title">',
		'after_title' => '</div>',
	) );
}
add_action( 'widgets_init', 'mijntheme_widgets_init' );

Vanaf nu zul je in je WordPress backend al een extra widgetgebied zien, waar je widgets aan kunt gaan toevoegen.

Echter, deze widgets zijn nog niet zichtbaar voor je bezoekers, want dat hebben we nog niet geregeld. Hoe zorgen we daar voor? Er zijn verschillende manieren. Je kunt een apart pagina template maken, die je page-contact.php noemt. Daarin neem je de inhoud van page.php over. Vervolgens wijzig je de aanroep get_sidebar naar get_sidebar(‘contact’); .
Dat kan er bijvoorbeeld als volgt uit zien (het voorbeeld is gebaseerd op het Twenty Twelve theme), waarbij je er rekening mee moet houden dat de exacte inhoud afhankelijk is van de wijze waarop je theme in elkaar steekt.

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar('contact'); ?>
<?php get_footer(); ?>

Je moet er nu wel voor zorgen dat de pagina waar je deze tweede sidebar wilt tonen het nieuwe page template ook gebruikt.

Er is nog een mogelijkheid om ervoor te zorgen dat je de tweede sidebar toont, zonder een aparte page template te gebruiken. In je bestaande page.php zou je namelijk ook het volgende kunnen doen:

if ( is_page('contact') ) {
	get_sidebar( 'contact' );
} else {
	get_sidebar();
}

Hiermee wordt de tweede sidebar alleen getoond op de pagina met de titel Contact en krijgen alle andere pagina’s de reguliere sidebar te zien.

Te ingewikkeld deze instructie? Lees dan eerst WordPress themes wijzigen.
En wanneer je liever een plugin gebruikt in plaats van te werken aan de code van je theme dan kun je ook eens kijken naar de plugin: Content Aware Sidebars.
Heb je een vraag over de code? Meer van dit soort tutorials lezen? Reageer dan even hieronder en laat ons weten waar je meer over wilt lezen!

LEER ALLES OVER GUTENBERG 

Nieuw e-book over WordPress 5 nu gratis downloaden.  Bomvol de beste Gutenberg Tips & Trucs

Download Nu

Na je inschrijving ontvang je direct het gratis e-book. Daarna zenden we je 1x per maand de gratis WordPress nieuwsbrief. Je mailadres is veilig bij ons, géén spam!