Zelf een WordPress sidebar maken

Sommige WordPress thema’s bieden meerdere sidebars en sommige thema’s maar één. Nu kan het zo zijn dat je in je ontwerp een extra sidebar nodig hebt. Nu kun je dat middels een plugin regelen maar plugins moet je onderhouden. Je moet updates bijhouden en een plugin kost ruimte.  In sommige gevallen kan het net zo makkelijk zijn om zelf wat te maken.

Bijvoorbeeld voor het maken van een eigen sidebar. Met een beetje knip en plakwerk en geen angst voor PHP ben je zo klaar. Extra voordeel hierbij is dat je vrij goed de HTML van je sidebar kunt bepalen.

Een sidebar maken doe je in 3 stappen: je sidebar registreren, je sidebar coderen en je sidebar insluiten op een pagina. Alle stappen worden hieronder beschreven. In dit voorbeeld maak ik een sidebar aan welke in mijn footer gebied moet komen. Vandaar de naam Footer Sidebar.

Opmerking vooraf: ik gebruik her en der een div of een section. Het staat je natuurlijk vrij om andere HTML elementen te gebruiken.

 

Voorbereiding

Zorg dat je verbinding hebt met je FTP server zodat je kunt uploaden. Hou er goed rekening mee dat je je mappenstructuur online en offline EXACT hetzelfde hebt.

 

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

Ga naar de rootfolder van je thema. Deze vind je in wp-content>themes>[jouwThemaNaam].
Open functions.php en scroll naar beneden. Zet je cursor voor de PHP afsluittag ?> en maak een nieuwe regel aan. Neem op deze regel 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’ => ‘<h1>’,
‘after_title’ => ‘</h1>’
));

functions.php met de sidebar

functions.php nadat je de sidebar hebt aangemaakt. Let er op dat je je nieuwe code boven de ?> tag hebt geplaatst!

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 1 is (zoals in dit voorbeeld) of dat je het liever aanpast naar een andere heading dan wel een class mee wilt geven.

Sla je bestand op en upload het naar je server. Let goed op dat het bestandje op de server ook in de root terecht komt!

Wanneer je vervolgens in je dashboard naar het onderdeel Widgets gaat, zie je je nieuwe sidebar. Deze kun je vullen met items zoals je dat gewend bent.

sidebar-footer in de widgets

In het widget onderdeel bij je dashboard kun je nu de nieuwe sidebar zien en vullen. In dit voorbeeld is dat Footer Sidebar.

Vraag 1: Op je site is nog niets te zien. Kun je zelf beredeneren waarom niet?
Aanwijzing: heeft WordPress voldoende informatie om te weten waar de sidebar moet komen?

 

2. Je sidebar coderen

Bij deze stap codeer je je sidebar qua code wat inhoudt dat je een of meerdere div’s maakt waarin de sidebar content kan komen. Hierin kun je eventueel al classes en stijlen 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. In dit voorbeeld maak ik een section maar je kunt ook gewoon een div maken.

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.

sidebar id in functions.php

Vraag 2: Hoe kom ik aan de naam footer-sidebar?
Aanwijzing: heb ik deze naam net in stap 2 verzonnen of is deze al een keer langsgekomen in deze tutorial?

3. Je sidebar insluiten op je 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.

 

En dan stijlen

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. Ik gebruik overigens de plugin Advanced Widgets. Hiermee kan ik precies aangeven op welke pagina ik de inhoud van een widget wil zien:

 

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

Mijn eigen footer met content.

 

Antwoorden

Bij vraag 1 (Is de sidebar al te zien?): Nee. Je sidebar bestaat wel maar er is nog nergens in de code van je website aangegeven dat de sidebar ook werkelijk op de pagina moet komen. WordPress weet nog niet waar jij precies de nieuwe sidebar wilt plaatsen!

Bij vraag 2 (Hoe kom ik aan de naam footer-sidebaar): Nee, dit naam heb ik niet net even bij stap 2 verzonnen. Ik heb in mijn functions.php deze naam verzonnen. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.