Skip to content

Tweede sidebar op WordPress Blog

Extra sidebar voor Doede.net Webdesign

Ik heb laatst, na lange tijd weer eens een tweede sidebar toegevoegd. Deze keer aan Doede.net zelf. De meeste bloggers waarvoor we een website bouwen hebben genoeg aan 1. Maar aangezien ik Doede.net er anders wil uit laten zien van pagina tot pagina heb ik verscheidene sidebars en widgets nodig.

Welke stappen te nemen?

Als je in WordPress een extra sidebar wil toevoegen en laden op een specifieke pagina moet je een nieuwe sidebar pagina met een speciefieke WordPress geaccepteerde naam creëren, de desbetreffende pagina die nieuwe sidebar laten laden en in die sidebar een nieuwe dynamische sidebar laden (tenzij je een statische sidebar zou willen..). Voor het laden van de nieuwe dynamische sidebar zal er verder een stukje code aan functions.php toegevoegd moeten worden.

Creatie 2e sidebar

Maak een kopie van de sidebar.php en hernoem die. Zorg ervoor dat de naam sidebar-watjijwil.php wordt. Dus sidebar + koppelteken en toevoeging . php. Deze nieuwe sidebar vul je met data die je wil. Vaak is het een kwestie van de gekopieerde data aanpassen en de dynamische sidebar gegevens ietwat aanpassen aan de nieuwe dynamische sidebar. Mijn tweede sidebar is sidebar-home.php  en de snippet voor het laden van de 2e dynamische sidebar is

<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar('<strong>Home-Sidebar</strong>') ) : ?>

Na deze snippet heb ik de sidebar gegegevens die worden geladen als er niets dynamisch wordt geladen. Dus als ik geen widgets aan de tweede sidebar heb toegevoegd. Dit voor het geval je geen widgets wil in deze nieuwe sidebar.

Toevoeging code aan functions.php

Verder zal er voor gezorgd moeten worden dat de nieuwe dynamische sidebar wordt geladen zodat er widgets in de admin toegevoegd kunnen worden. Open je functions.php of creëer er een en voeg de volgende code toe:

register_sidebar(array('name' => '<strong>Home-Sidebar</strong>',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',));

NB Je kunt altijd een andere naam kiezen. Home-Sidebar komt nu als menu optie in widgets locatie te staan.

Tweede sidebar laden in de desbetreffende pagina

Ik wil graag dat de tweede pagina alleen op de home page komt te staan. Dat kun je op verschillende manieren doen. Ik koos ervoor om deze simpelweg alleen in home.php te laden.
FYI Home.php wordt geladen als index.php. Als er geen home.php is wordt de index automatisch geladen. Dat heeft de maken met WordPress hierarchie.
Dit doe ik door de volgende code toe te voegen:

<?php get_sidebar('home'); ?>.

Normaal gesproken heb je <?php get_sidebar(); ?> voor het laden van sidebar.php maar nu laad ik sidebar-home.php hiermee.

Done

Als je alles hebt afgerond en de aangepaste bestanden en de nieuwe sidebar hebt upgeload naar de server zal alles werken.  De bestanden in kwestie zijn dus:

  • Functions.php (aangepast)
  • Home.php (aangepast) of natuurlijk de pagina template waar jij de sidebar wil laden
  • Sidebar-jouwkeuze.php

Ik heb het verder niet over stylen gehad aangezien de tweede sidebar op Doede.net dezelfde stijl als de eerste aanhoudt.

Dat was hem. Heb je vragen, laat dan een reactie achter!

Gepubliceerd door Doede op dinsdag 9 juni 2009

Van → Webdesign, Wordpress

29 Reacties
  1. Hai Jasper,

    Heb geprobeerd jouw stappen te volgen, maar ik blijf met het probleem zitten dat zowel in sidebar 1 en sidebar 2 alle pagina’s geladen worden. Ik wil bij sidebar2 tot nu toe alleen maar de leraren hebben. Het kopje veranderd wel, dus hij pakt wel de juiste nieuwe header en de juiste sidebar.

    Heb jij een oplossing?

    Alvast hartelijk bedankt.

    Mirjam

  2. Overigens is de widget wel zichtbaar op de widget pagina, maar komt hij niet te voorschijn in de sidebar

  3. Hoi Mirjam,

    Als ik je vraag goed begrijp wil je sidebar 2 alleen weergeven op de pagina leraren (id 122).Dit kun je doen met een if statement. Iets zoals:
    < ?php if (is_page('122') ) : ?>
    Tekst of Sidebar opvraag code
    < ?php endif; ?>

    // Als het de pagina met id 122 oftwel de pagina leraren is toon dan sidebar-2
    Deze code heb ik niet getest dus het is niet 100% zeker dat het werkt. Zodra ik tijd heb test ik de code. En dit zou makkelijker gaan als ik je thema bestanden kan inzien…
    Ik heb de website verder in Firefox 3.5.5 en Safari bekeken. Wat me opviel is dat in Firefox de hoofdbox met class content op de home page niet goed wordt weergegeven. Deze wordt nu onder de (linker ) sidebar gezet. Dit geldt voor de content box op alle pagina’s waar er tekst instaat. Maar misschien is dat opgelost.
    Laat me weten hoe het is gegaan en of dit was wat je zocht..

  4. Op basis van je laatste opmerking zou ik zeggen dat de sidebar wel in functions.php goed staat, maar niet op de juiste wijze op de desbetreffende pagina wordt geladen. Laadt je de sidebar in page.php met een if statement?

  5. Inmiddels ben ik er achter wat het probleem is, alleen lost het niet op waarvoor ik hem eigenlijk dacht nodig te hebben. Ik wil namelijk per menu-item in header, een aparte sidebar met aparte pagina’s. Nu komen alle pagina’s bij alle menu-items te voorschijn. Nu staat bijvoorbeeld de leraren ook bij mijn kop informatie, terwijl ik die alleen bij Team wil hebben staan.
    Als je daar een antwoord op hebt, zou ik dat geweldig vinden.

  6. dat kan door met if statements in de sidebar.php te werken:

    <?php if (is_page('1') ) : ?>
    menu item lijst 1
    <?php endif; ?>
    
    <?php if (is_page('2') ) : ?>
    menu item lijst 2
    < ?php endif; ?>
    
    <?php if (is_page('leraren') ) : // alleen als mod_rewrite aanstaat en permalinks zijn ingeschakeld
     ?>
    menu item lijst leraren sub pagina's
    <?php endif; ?>
    

    Verder zou je het ook met sub pagina’s kunnen doen als het hoofd menu door wp_list_pages wordt opgeroepen. Dan kun je alle child pages tonen als men op de parent pagina is

  7. he heel erg bedankt. Vond net ook een plugin die goed werk doet: Simple Sidebar Navigation.
    Ik zal die van jou ook proberen.

    Bedankt voor de moeite!

  8. Majejay permalink

    Hoe krijg ik de sidebar aan de rechterkant? Het is gelukt om een tweede sidebar te maken op bovenstaande manier maar nu staan ze beide aan de linkerkant onder elkaar en ik wil er een links en een rechts hebben staan????

  9. Door de sidebars met CSS links of rechts te floaten
    #sidebar-links {float:left;}
    #sidebar-right {float:right;}

    Iedere sidebar moet dan wil beginnen met een html tag die een id heeft zoals ik in mijn bovenstaande stylesheet heb aan gegeven. Verder kan het zijn dat er verdere styling nodig is. Maar dat ligt aan het thema dat gebruikt is.

  10. Hoi Jasper,

    (het is misschien off-topic, waarvoor dan mijn excuses)
    Al enige tijd ben ik aan het zoeken naar de codes om mijn sidebar op elke pagina weer te laten geven.
    Moet ik dat in het stylesheet aangeven? Of in single.php?
    Zou jij me kunnen helpen?
    Ik gebruik het beach theme http://www.get-index.com/wordpress-themes/beach-theme-a-trendy-catchy-theme.html

  11. @ Mavrtje Normaal gesproken laadt je een standaard sidebar op de index.php, single.php, category.php, page.php en archive.php en alle andere pagina’s waarop de sidebar moet verschijnen met deze code:

    <?php get_sidebar(); ?>

    . Die code moet dus op iedere pagina waarop de sidebar moet geladen worden, staan. Met deze code wordt sidebar.php op de pagina in kwestie geladen. De positie en de styling van de sidebar wordt met css bepaald, meestal in style.css . De sidebar moet wel vermeld worden in functions.php om deze dynamisch te maken voor de invoeging van widgets. Daarvoor kun je:

    <?php if ( function_exists('register_sidebar') ) {
       register_sidebar(array(
           'before_widget' => '<li id="%1$s" class="widget %2$s">',
           'after_widget' => '</li>',
           'before_title' => '<h2 class="widgettitle">',
           'after_title' => '</h2>',
       ));
    }
    ?>

    gebruiken.

    P.S. Extra spaties in de functions code gezet voor juiste weergave, maar deze code staat al in mijn artikel hierboven beschreven.

  12. Dank je wel, Jasper.
    Helaas geeft dit nog geen goed resultaat.
    Ik ga eerst maar eens upgraden naar WP 2.8.5 en mogelijk lukt het hierna dan wel.

  13. De sidebar code werkt als het goed is in alle versies van WordPress. Wat voor resultaat heb je? Je hebt neem ik aan wel een bestand dat sidebar.php heet en dat in je thema staat dat de sidebar code laadt? De code op de pagina die je gebruikt om de sidebar te laden begint met een php tag? zonder spaties tussen de ? en php:

    <?php
  14. @ mavrtje Ik heb de code nu een betere code weergave gegeven en deze is nu ook makkelijker over te nemen. Kijk even of de code zo werkt en anders wil ik vandaag wel even naar je thema kijken..

  15. In alle php files van dit thema staat onderop. Maar wordt dus alleen geladen op de voorpagina. Ook de functions.php staat volgens mij goed
    Mogelijk staat er bovenin al die php files dat de sidebar niet moet worden geladen, maar zo sterk ben ik (nog) niet in phptaal…

  16. Wat staat er in de sidebar zelf? Het kan zijn dat daar een if statement instaat die ervoor zorgt dat de sidebar alleen op de voorpagina wordt geladen. Met code zoals:

    <?php if (is_front_page() && function_exists('dynamic_sidebar') && dynamic_sidebar('Introduction') ) : ?>
     <?php endif; ?>
  17. Zou het deze frase zijn????

  18. Je kun niet php als reactie achterlaten op een standaard WordPress blog als voorzorgsmaatregel tegen hackers. Je kunt de code wel zonder de

    <?php 

    en

    ?>

    tags plaatsen. Graag nogmaals zodat ik die zie wat je probeerde te plaatsen, maar dan zonder de php tags.

  19. if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar() ) : else :
    if(is_home()) {

  20. Ja dus.

    if (is_home())

    geeft de sidebar alleen weer als het de homepage of voorpagina is. dat stuk code moet dus verwijderd worden.

  21. Laatste haakje moet wel blijven staan om de if statement netjes af te sluiten btw. Ik moet helaas weer verder met andere zaken dus ik kan pas weer later reageren..

  22. Dank je wel Jasper, ik ga verder stoeien!

  23. Helaas, het lukt niet. De hele sidebar verdwijnt als ik if (is_home()) verwijder. Heb je nog een tip?

  24. @ mavrtje Email je thema naar

    bkk <at> doede.net

    en dan kijk ik er morgen even naar.

  25. Levi permalink

    Kan iemand stap voor stap uitleggen hoe je per categorie een andere sitebar kan plaatsen?
    Met stap voor stap bedoel ik:

    Stap1: maak een copie van sidebar.php en hernoem die naar sidebar-categorie1.php
    Stap2: Plak onderstaande code in functions.php
    Stap3: etc. etc.

    Dit zou voor een Leek in php als ik heel erg helpen 😀

  26. Zelfde principe als eerder aangegeven, maar dan met een conditional tag die een sidebar toont als een bepaalde categorie wordt getoond. Zie http://codex.wordpress.org/Conditional_Tags#A_Category_Page . Een voorbeeld voor tonen van een sidebar als catgeorie ID nummer 1 wordt weergegeven is:

    <?php if (is_category('1') && function_exists('dynamic_sidebar') && dynamic_sidebar('Introduction') ) : ?>
    <?php endif; ?>
    

    Een andere optie is een template aanmaken per categorie.

    Zodra ik weer meer tijd hebt zal ik een aparte blog hier aan toewijden…

  27. Lodewijk permalink

    Beste Jasper,

    Een heldere uitleg, alleen zit ik met de volgende vraag:
    De functions.php van mijn template bevat alleen de code: < ?php if (function_exists('register_sidebar')) register_sidebars(2);?>

    Moet ik daar de code onder ‘Toevoeging code aan functions.php’ gewoon aan toevoegen, of is het veranderen van 2 in 4 simpelweg voldoende? Of moet er ergens anders nog wat worden aangepast?

    Groeten, Lodewijk

    • Beste Lodewijk, je code is niet goed meegekomen. Je kunt deze e-mailen aan bkk apenstaartje doede.net . Dan kan ik je reactie aanpassen en een passend antwoord gegeven. Maar als het goed is kun je de code gewoon toevoegen aan de code die al in de functions.php staat. Dat naast de oproepcode op de plek waar je dynamische zijbalk geladen moet worden

  28. Hoi Lodewijk ik zag je e-mail. Code kan gewoon aan functions.php toegevoegd worden. Iedere dynamische zijbalk moet apart in functions.php geregistreerd worden en opgevraagd worden op de plek waar deze nodig is.
    De witte balk onderaan posts – ik neem aan op single.php en index.php wordt warschijnlijk veroorzaakt door CSS of HTML en niet door de PHP code die je meldde. Om echt te weten hoe het zit zou ik een link moeten hebben naar de live site.

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*