Code voorbeeld

CSS class aan next_posts_link en previous_posts_link in WordPress

Leestijd: 2 minuten (310 woorden)
profile image

Rick de Jong

Strategie

18 juli 2012 07:05

Code snippet voor navigatie

Pagina navigatie onder berichten

Wie (bewust) niet werkt met pagina-nummering plugins binnen WordPress, maakt hoogstwaarschijnlijk gebruik van de standaard functie binnen WordPress om pagina navigatie mogelijk te maken onder nieuws / blog overzichten. 

Pagina nummering

Deze standaard WordPress functie voor pagina navigatie is als volgt:

next_posts_link('Oudere berichten')
previous_posts_link('Nieuwere berichten')

Opmaak

Deze functie zal een normale tekstlink weergeven zonder enige (extra) opmaak en zonder bijgevoegde CSS class. Normaliter zie je - denk aan het WordPress menu - veel CSS classes terug die WordPress meegeeft aan haar elementen. Dit kan helpen bij het opmaken van de website door middel van CSS.

Oplossing

Nu kan een oplossing zijn om voor de next_post_link een div aan te maken waarin je de "volgende" link gebruikt en (hoe logisch) een div gebruiken waarin je de "vorige" link paatst. Via het stappenplan in CSS, kun je vervolgens de link opmaken en voorzien van bijvoorbeeld een pijl naar links en rechts. Dit kan ook netter. Gebruik de volgende code in je functions.php om een class toe te voegen aan zowel de "next" als "previous" link:

add_filter('next_posts_link_attributes', 'posts_link_attributes_previous');
add_filter('previous_posts_link_attributes', 'posts_link_attributes_next');

function posts_link_attributes_previous() {
 return 'class="previous-class"'; }
function posts_link_attributes_next() {
 return 'class="next-class"'; }

Class aanpassen

Het wijzigen van de class die WordPress meegeeft kan in het gedeelte return 'class=""'.