
CSS class aan next_posts_link en previous_posts_link in WordPress
CSS class aan next_posts_link en previous_posts_link in WordPress
Een handige code snippet
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=""'.