Categorie in menu in WordPress – hack!

Sinds ik een beetje met WordPress heb lopen stoeien afgelopen half jaar, in het kader van mijn afstudeerproject, heb ik natuurlijk een aantal hacks ontdekt om leuke dingen te kunnen doen. Een moeilijk geval was de mogelijkheid om in een customized menu ook categorieën te plaatsen. Dan heb je dus eigenlijk meerdere blogpagina’s, waar je normaal alleen een voorpagina hebt en de echte blogpagina. Tijd om deze hack maar eens te delen met de wereld.

Van mijn designer heb ik een mooie template gekregen die ik om moest zetten naar iets bruikbaars voor WordPress. Omdat de CSS een beetje krakkemikkig in elkaar stak was het menu slecht aan te passen aan de normale WordPress-menu-opbouw (iets met afbeeldingen enzo..). Vandaar bij deze een tip:
Never ever go outside WordPress HTML-outlines.
Ehm, waarmee ik bedoel dat je je qua opbouw van de template beter aan de standaarden van WordPress kan houden. Dus een voorbeeld-template erbij pakken, alle functies en widgets erin laten vertonen en dan pas kijken hoe je de HTML en CSS gaat aanpassen.

Mijn menu zag er qua code zo uit:
<li>
<a href=”URL”><span><em>Home</em></span></a>
</li>
<li>
<a href=”URL2″ title=”TITLE”><span><em>Blog</em></span></a>
</li>
<li><a href=”URL3″ title=”TITLE”><span><em>Video</em></span></a>
</li></ul>

Zoals je snapt zijn Blog en Video categorieën en wil ik ze gewoon als pagina’s in het menu tonen. Op zich is het vrij simpel om hoofdcategorieën weer te geven in een menu met wp_list_categories of get_categories, maar die worden weergegeven op een bepaalde manier. En als je dat qua CSS niet helemaal aankunt, dan heb je een probleem. Want het menu zoals het hierboven staat, wordt er niet mee weergegeven, onmogelijk! Dus hoe heb ik dat opgelost? Code-hacking!

Je gaat in je WordPress install naar wp-includes -> category-template.php en die open je in je favoriete texteditor ofzoiets. Dan ga je naar het stuk waar je wp_list_categories ziet staan als functie. Dan zie je dat ie daar de HTML rond de URL’s opmaakt etc. Wat ik heb gedaan is het volgende:
– Kopieer de hele functie wp_list_categories
– Ga naar een nieuwe regel tussen twee functies in, of naar de onderkant van het document om op safe te spelen
– UPDATE i.v.m. nieuwe versies van WordPress kun je je nieuwe code beter in functions.php van je thema zetten!
– Plak daar de functie
– Hernoem de functie, bijvoorbeeld naar wp_list_categories_twee
– Verwijder regel 33 t/m 41 (tot aan global $wp_query)
– In regel 46 en 48 kun je html rondom de code plaatsen (waar ook <li> etc. staat)
– Verwijder de accolade op regel 59
– Verwijder ook regel 61 en 62
– Verander regel 64 waar nu wp_list_categories staat in de naam van jouw functie
En dan zou het moeten werken! Voor het gemak heb je hier de losse code van hoe het zou moeten zijn, vergelijk dat met hoe het nu is.

Vervolgens doe je op de plaats waar je je menu items wilt hebben een aanroep naar jouw functienaam, waarbij je dezelfde argumenten kunt gebruiken als normaal bij wp_list_categories, bijvoorbeeld ‘exclude’ of ‘style’ en natuurlijk ‘depth=1’ om aan te geven dat je alleen de hoofdcategorieën erin wilt. Als je overigens gebruik maakt van deze code los van een bestaand menu kun je de regels 33 en 34 en 61 en 62 die je hierboven moest verwijderen gewoon laten staan (verwijder wel de overige regels die genoemd staan!!). Deze regels moeten alleen verwijderd worden als de list-items tussen de normale list-items van het menu komen te staan. Het menu staat namelijk al standaard in een unordered list en sluit deze ook al af. Als je de regels dan laat staan, zet deze functie er nogmaals een list-open en list-close tag bij (</li></ul> ).

Vervolgens kun je je CSS een beetje aanpassen op de HTML die dan vertoond wordt, omdat er dan ook current_cat_item etc. wordt getoond. Het enige dingetje wat ik nog niet heb opgelost is dat ie nu ook categorie-widgets op deze manier weergeeft (bij mij in ieder geval), ik ben er nog niet achter waarmee dat precies te maken heeft. Als iemand daar nog een oplossing voor vindt, dan hoor ik em graag! Dus hou daar even rekening mee, voordat je hele lay-out verpest is…

In mijn geval was deze hack heel handig, omdat de ‘span’ en ‘em’ een stukje afbeelding over het menu-item heenlegden. En als je dat niet hebt, dan komt er dus geen afbeelding. Dan zou ik de afbeelding moeten gaan samenvoegen of iets anders verzinnen waardoor het er toch hetzelfde uitziet. Was mij iets teveel werk eigenlijk. En ja, volgende keer laat ik mijn designer iemand kiezen die WEL kan slicen en basen volgens (x)HTML richtlijnen en die netjes kan CSS-en. Dus geen afbeeldingen slicen in honderd stukjes en dan HTML-code zoals ‘span’ en ‘em’ misbruiken voor opmaak.

Laat me even weten of je hier iets aan hebt! Ik denk dat er binnenkort overigens nog meer WordPress hackjes volgen, al kan ik niks beloven!

Update: Vanaf versie 3.0 van WordPress kun je een custom menu in je sidebar zetten via de widgets, dus is de bovenstaande hack wellicht wat overbodig geworden.Vragen hierover? Mail me.