Home / WordPress / Ontwikkeling / Werk met meerdere sidebars in je WordPress theme

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.

Extra Widgetgebied in WordPress

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.

WordPress Page Template

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!

Was dit artikel nuttig?

Laat het ons weten en geef je rating!

Gemiddeld / 5. Aantal stemmen:

Nog geen stemmen, wees de eerste die dit artikel waardeert!

7 comments

  • Dat beweer ik ook niet Ben. Er is echter ook behoefte aan meer informatie voor de iets gevorderde gebruikers. Echte beginners kunnen beter de onderaan het artikel genoemde plugin inzetten.

  • Hallo Robert,

    Het is mij niet gelukt. In mijn theme zie ik ook geen sidebar.oho. Deze vindt ik wel op een andere locatie, maar dus niet in de rootgedeelte van mijn theme. Wat doe ik verkeerd?

  • Hallo, het is sidebar.php maar misschien bedoelde je dat ook? En inderdaad het kán voorkomen dat dat bestand op een andere plaats staat. Vooral bij de premium themes zie je dat nogal eens. Hoe eenvoudiger je theme des te dichter zal de structuur bij de algemeen gebruikelijke standaard liggen. Maar kom je het bestand op een andere plek tegen dan kan dat ook en gebruik je die.

  • Hallo Robbert,

    Ik probeer een simpele sidebar (theme Oakland) aan te passen – dat heb ik gedaan via theme-settings – sidebar and widgets – vervolgens in bestaande sitebar de tekst aangepast en opgeslagen.
    Deze wijziging wordt echter niet zichtbaar op de pagina’s.
    Welke stap mis ik nu?

    Groeten,
    Hetty

  • Hallo Hetty, op zich klinkt hetgeen je doet nog niet verkeerd. Ik kan me wel voorstellen dat – wanneer er meerdere sidebars aanwezig zijn – je wellicht de verkeerde aan probeert te passen? En anders zou ik toch echt even moeten kijken wat je precies wilt doen en waarom dat niet lukt. Neem in dat geval even contact op via info @ joomblocks.com
    groeten Robbert

Plaats een reactie

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