Een sidebar maken

In een ontwerp (een child thema van twentyfifteen) heb ik 1 sidebar. Hierin staat een kalender. Stel dat ik in de footer van mijn site ook een sidebar wil, bijvoorbeeld met alle links. Hoe los ik dat op? Dit kan in 3 stappen: je sidebar registreren, je sidebar coderen en je sidebar insluiten op een pagina.

1. Je sidebar ‘registreren’ bij jouw functions.php pagina

Open functions.php en neem de volgende code op:

register_sidebar (array(
‘name’ => ‘Footer Sidebar’,
‘id’ => ‘footer-sidebar’,
‘description’ => ‘Footer Sidebar.’,
‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
));

Let op: blijf wel binnen de PHP tags in je file! Dus plaats de code boven de ?> tag.

functions.php met de sidebar

functions.php nadat je de sidebar hebt aangemaakt.

In de code hierboven kun je name, id en description aanpassen naar jouw wens. Misschien wil je je sidebar Second Sidebar noemen of Third Sidebar, afhankelijk van waar je je sidebar wilt plaatsen. Tevens kun je hier een class meegeven of aangeven of de title een heading 3 is (zoals in dit voorbeeld) of dat je het liever aanpast naar een andere heading dan wel een class mee wilt geven.
Wanneer je vervolgens in je dashboard naar het onderdeel Widgets gaat, zie je je nieuwe sidebar. Hierin kun je nu items slepen zoals je bent gewend.

sidebar-footer in de widgets

In het widget onderdeel bij je dashboard kun je nu de nieuwe sidebar zien en vullen.

Echter, op je site is nog niets te zien. Logisch want WordPress weet nog niet waar jij precies de nieuwe sidebar wilt plaatsen! Tijd voor de stappen 2 en 3.

2. je sidebar coderen

Bij deze stap codeer je je sidebar qua code wat inhoudt dat je een of meer div’s maakt waarin de sidebar content kan komen. Hierin kun je eventueel ook classes en stijlen al aanroepen. Maak een bestand aan en noem dit sidebar-footer.php en neem hierin de volgende code op:

<section>
<?php dynamic_sidebar(‘footer-sidebar’);?>
</section>

sidebar-footer.php

sidebar-footer.php file.

Indien je een sidebar rechts wilt hebben zou je je file sidebar-right.php kunnen noemen of right-sidebar.php. Als de naam maar logisch is. Let op: op regel 2 tussen de haakjes verwijs ik naar ‘footer-sidebar’ dit is de id van de sidebar zoals ik deze in functions.php heb opgenomen:

sidebar id in functions.php

sidebar id in functions.php

3. Je sidebar insluiten op een pagina

Tot slot moet je aangeven waar de sidebar moet komen. In mijn geval is dit in de footer dus moet ik footer.php openen. Op regel 14 zie je dan staan:

<?php get_sidebar( ‘footer’ )?>

Aanroep sidebar in footer

Hierin kun je allerlei extra div elementen en classes opnemen om je sidebar te stylen.

Ik heb via de dashboard en via CSS het een en ander gestyled zodat er op de homepage een overzicht van goede blogs komen te staan:

 

Screen Shot 2016-02-03 at 21.37.17

Sidebar widget toont alleen op de front page de categorie Leuke blogs.

 

Screen Shot 2016-02-03 at 21.37.06

De aangepaste footer