Voeg een extra widget gedeelte toe aan een WordPress thema

extra-widget-wordpress

Soms heb je aan één widget gedeelte niet genoeg en wil je graag meer informatie kwijt op een andere plek in je thema. Zonder dit handmatig in je thema te coderen, kan je beter een extra widget gedeelte toevoegen zodat je snel en makkelijk kan wisselen van widgets. Misschien wil je in de footer een aantal widgets plaatsen om het gebruikersgemak te verhogen – denk bijvoorbeeld aan een zoekbalk, menu of instagram foto’s. Nou denk je misschien dat dit vrij lastig is, maar dat valt reuze mee!

Wat heb je nodig?

  • Een eigen gehoste WordPress blog, dus niet via WordPress.com!
  • De mogelijkheid om het bestand functions.php aan te passen, of een nieuwe aanmaken als dit bestand nog niet bestaat.
  • Heb je al een functions.php bestand? Maak hiervan een back-up voordat je verder gaat!
  • Enige ervaring met het aanpassen van functions.php. Dit hoeft niet perse omdat je de code kan kopiëren en plakken, maar let wel op hoe je dat doet. Daarom -> maak een back-up van je bestand!

Hoe ga je te werk?

Allereerst moet je er zeker van zijn dat je een functions.php bestand hebt in je thema. Je kan dit controleren door naar weergave – editor te gaan. Zie je rechts een bestand genaamd Themafuncties, dan heeft jouw thema inderdaad een functions.php bestand. Zoals ik eerder zei, maak hiervan een back-up zodat, als er iets fout gaat, je het oude bestand terug kan plaatsen. Kopieer bijvoorbeeld alle tekst en plaats deze in een Kladblok bestand (geen Word want die zet HTML codes om wat resulteert in foute codes!). Een functions.php bestand ziet, wanneer deze zonder functies bekeken wordt, er zo uit:

<?php
/**
* Theme functions
* Sets up the theme and provides some helper functions.
*/
//Alle coderingen komen hier
?> 

Belangrijkste van een functions.php bestand is dat je de PHP opening en sluiting hebt. Onderstaande code verwacht dat dit er al in staat, dus hou daar rekening mee. Voeg vervolgens deze code toe in plaats van de tekst //Alle coderingen komen hier. Heb je al een functions.php bestand dat gevuld is met WordPress functies? Plaats deze code dan helemaal onderaan net voordat het bestand afgesloten wordt.

function starter_deliciae_widgets_init() {
register_sidebar( array(
'name' => __( 'Extra Widget Gedeelte', 'starter_deliciae' ),
'id' => 'widget-1',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'starter_deliciae_widgets_init' );

Ik zal de code heel kort eventjes uitleggen zodat je begrijpt wat er gedaan is. Allereerst begin je met het koppelen van een functie binnen WordPress aan de widgets (widgets_init) en geef je hier door middel van een array, specificaties aan. Zoals wat er voor én na de widget verschijnt, maar ook voor én na de titel van de widget (Dus die je zelf invult). Ik heb de code zo gemaakt dat iedere widget ook een eigen ID én CLASS heeft zodat je deze makkelijk kan selecteren via je CSS. Dat was het wel zo’n beetje. Vrij makkelijk toch?

Weet je niet precies wat een DIV, ID of CLASS is? Lees dan mijn uitleg hierover in dit artikel.

Door deze functie verschijnt er een nieuwe zijbalk als je naar Weergave – Widgets gaat. Je kan dan wel een widget of meerdere toevoegen, maar ze zullen nog niet verschijnen in jouw thema.

Het ligt er natuurlijk aan waar je het extra widget gedeelte wilt plaatsen. Wil je deze in je footer, dan open je het bestand footer.php. En voor in je header, kan je header.php openen. Ik wil deze tutorial vrij simpel houden en voor een extra zijbalk, komen er een paar stappen bij en is het afhankelijk van hoe jouw thema is opgebouwd, vandaar dat ik dit niet uitleg.

Ik plaats mijn code in de footer zodat ik daar bijvoorbeeld mijn Instagram foto’s kan plaatsen. Allereerst laat ik door middel van een IF statement controleren of het widget gedeelte geactiveerd is (dus dat je een widget hebt geplaatst via weergave – widgets). Dit om te voorkomen dat er een lege DIV verschijnt in je thema en dus kan zorgen voor validatie fouten. Vervolgens heb ik een DIV aangemaakt met een CLASS zodat ik later de styling kan koppelen aan de widgets.

Ik kies de dynamische ‘zijbalk’ en zet daar de naam in die ik eerder gespecificeerd heb, namelijk widget-1. Ik sluit mijn DIV af en ook mijn IF statement.

<?php if (is_active_sidebar( 'widget-1' ) ) { ?>
<div class="footer_widgets">
<?php dynamic_sidebar( 'widget-1' ); ?>
</div>
<?php } ?>

Activeer vervolgens een widget in het nieuwe gedeelte en bekijk het resultaat. Natuurlijk zal je met CSS de styling moeten aanpassen, ook wanneer je meerdere widgets naast elkaar plaatst (let erop dat ze responsive zijn!), maar omdat dit afhankelijk is van jouw huidige thema kan ik daar helaas geen voorbeelden van geven.

Als je gebruik maakt van mijn codes dan selecteer je de widgets in jouw footer door middel van .footer-widgets .widget. Plaats dit in je CSS bestand en geef er styling aan zodat de widgets passen bij jouw thema. Et voila! Het is je gelukt om een extra widget gedeelte aan jouw thema toe te voegen!


Aanstaande zaterdag is het de tweede editie van Fix-It Saturday. Heb je vragen omtrent bloggen, webdesign, grafisch design of coderen? Of wil je tips om jouw blogdesign te verbeteren? Kom dan langs op Deliciae Design en stel jouw vraag!


Mocht je hierbij hulp nodig hebben, dan kan ik altijd ingehuurd worden voor kleine taken zoals dit. Ik help ook graag bij het responsive maken van de widgets of het thema zelf! Neem dan wel eventjes contact met mij op.

Geef een reactie

6 reacties

  1. Come-Moda says:

    Fijn artikel! Thanks for sharing

  2. Manou says:

    Ik heb die themefunctions niet in mijn huidige thema. Kan ik dit alsnog doen? Ik wil graag een widget kunnen plaatsen in mijn header.

    • Ja hoor Manou, dat kan! Maak een nieuw bestand aan genaamd functions.php en volg dan alle stappen die ik heb uitgelegd. Dan moet het goed komen. 🙂

      • Manou says:

        Ik ben hier niet zo in thuis maar hoe maak ik dat aan dan? :$

        • Open kladblok op je computer, kopieer daar de begincode in die ik hierboven geplaatst heb, kopieer dan de tweede code die ik geschreven heb op de plaats van //Alle coderingen komen hier.

          Sla het bestand op als functions.php en upload het via FTP naar je thema map (je kan in WordPress zelf niet een nieuw thema bestand aanmaken, dus daarom moet je het via FTP uploaden).

          Dat was het! Je thema zal automatisch het functions.php pakken en gebruiken.

  3. Ik wil graag een extra widget gedeelte in mijn footer om mijn Instagramfoto’s te tonen en heb al je stappen gevolgd, maar er verschijnt niets in mijn footer… Het extra widget gedeelte staat wel bij mijn widgets en ik kan er dingen in zetten, maar ze verschijnen vervolgens niet op mijn blog…