Het aantal (custom) post types per pagina instellen

Het aantal (custom) post types per pagina instellen

Wanneer je het aantal blogposts wilt beperken wat er op een pagina getoond wordt, dan is dat heel makkelijk te doen vanuit de WordPress instellingen. Je gaat gewoon naar ‘Instellingen->Lezen’ en onder het aantal te tonen berichten, pas je de instelling gewoon aan :

| Het aantal (custom) post types per pagina instellen

Makkelijk genoeg niet waar? Daar heb je geen code snippet voor nodig.

Wat er alleen niet duidelijk wordt aangegeven, is dat je hiermee ook alle custom post types die je elders zou willen gebruiken ingesteld hebt.

Heb je bijvoorbeeld nog een ‘portfolio’, ‘testimonials’, ‘products’ en ‘faq’ custom post types zullen die ook allemaal tot dat aantal beperkt worden op archief pagina’s.

Dat is misschien niet wat je wilt. Ik kan mij bijvoorbeeld voorstellen, dat je een blog, een webshop en een portfolio van de door jou uitgevoerde projecten hebt. De blogpagina, waarbij je iedere blogpost op één rij van de pagina hebt, wil je niet te lang maken, en daarom zou je graag 5 blogposts per pagina zien. Voor wat betreft de portfolio, met foto’s van je projecten, wil je eigenlijk alles in een matrix van 5 rijen van 4 kolommen zetten (20 posts dus) en je winkelproducten wil je 12 per pagina tonen. Een matrix van 3×4. Hoe krijg je dit voor elkaar?

Theme builders zijn hier niet je vriend!

Wanneer je een theme builder als Elementor Pro gebruikt, dan lijkt de eerste oplossing om in plaats van de Archive Widget (die je op de archive pagina gebruikt, om posts te tonen, en waarbij je geen maximaal aantal posts in kan stellen) de ‘Posts Widget’ te gebruiken. Die kan je op iedere pagina gebruiken, en daar kan je wel een maximum aantal per pagina instellen.

Probleem opgelost. Of toch niet?

Niet dus. Want wanneer je dit doet, dan ga je wel heel onvoorzichtig met je resources om. Wat gebeurt er namelijk op een archief pagina? Zodra deze pagina geopend wordt, zal WordPress automatisch vragen om de eerste x posts voor die pagina. De ‘Archive Widget’ zal vervolgens deze ‘opgevraagde posts’ op het scherm tonen.

Wanneer je een Elementor Pro ‘Posts’ widget gebruikt, dan zal dezelfde vraag nog een keer worden gesteld. Of met andere woorden, een ‘dure’ query zal tweemaal uitgevoerd worden, en dat komt je performance niet ten goede.

Bovendien, omdat de posts getoond in een post widget geen deel uitmaken van de archive page, zal geen enkele code snippet die je hier kan vinden en bedoeld is voor archive pages ook maar enige invloed hebben op de getoonde gegevens. Ook iets belangrijks om rekening mee te houden.

Wanneer we dit op willen lossen, doen we dit op de meest betrouwbare en snelste manier: Een code snippet.

De usecase

In de code gebruik ik de post types en de aantallen die ik aan het begin van dit artikel heb genoemd. Denk erom om in jouw eigen code de namen en aantallen aan te passen aan jouw eigen situatie.

<?php
add_filter( 'pre_get_posts', 'wxp_portfolio_posts_per_page' );

function wxp_portfolio_posts_per_page($query) {
    if ( $query->is_post_type_archive( 'portfolio' ) && ! is_admin() && $query->is_main_query() ) {
          $query->set( 'posts_per_page', '20' );
    }
    return $query; 
}

In het bovenstaande voorbeeld hebben we dit gedaan voor één post type. Het ‘portfolio’ type. Waarom niet voor de blogposts (‘post’ type) ook?

Waarom wel? We kunnen immers voor één post type de ingestelde default aanhouden. Wanneer we onder ‘Instellingen->Lezen’ het aantal op ‘6’ zetten zal voor ieder post type wat geen portfolio is de default behouden blijven. Daarnaast geeft de tekst op de instellingen pagina aan, dat je het aantal blogposts instelt. Wanneer je deze code voor een klant gebruikt, wil je in ieder geval verwarring voorkomen, en dus zorg je dat dit aantal nog steeds aangeeft, hoeveel blogposts getoond zullen worden.

Een ander post type wat we op deze manier willen beperken is het ‘product’ post type. We kunnen nu twee dingen doen : Voor ieder post type een aparte functie maken, of in één functie alle post typen instellen.

De code hieronder is slechts als voorbeeld bedoeld. Deze code zal niet werken voor het product type. Later in dit artikel leg ik uit waarom.

Eén functie voor alle instellingen

<?php
add_filter( 'pre_get_posts', 'wxp_posts_per_page' );

function wxp_posts_per_page($query) {
    if ( $query->is_post_type_archive( 'portfolio' ) && ! is_admin() && $query->is_main_query() ) {
          $query->set( 'posts_per_page', '20' );
    }
    if ( $query->is_post_type_archive( 'product' ) && ! is_admin() && $query->is_main_query() ) {
          $query->set( 'posts_per_page', '12' );
    }
    return $query; 
}

Ik heb hier dus de functie hernoemd van ‘wxp_portfolio_posts_per_page’ naar ‘wxp_posts_per_page’. Omdat de functie nu niet meer specifiek voor portfolio items is. Binnen de functie test ik apart for ieder post type.

Het voordeel van deze wijze van aanpak is dat er slechts één filter functie aangeroepen hoeft te worden. En dit is verreweg de snelste oplossing. Heb je een groot aantal verschillende post types die je in wilt stellen, kies je mogelijk liever voor een overzichtelijke oplossing. Dan is onderstaande code een mogelijkheid. Deze aanpak heeft niet mijn persoonlijke voorkeur.

<?php
add_filter( 'pre_get_posts', 'wxp_portfolio_posts_per_page' );

function wxp_portfolio_posts_per_page($query) {
    if ( $query->is_post_type_archive( 'portfolio' ) && ! is_admin() && $query->is_main_query() ) {
          $query->set( 'posts_per_page', '20' );
    }
    return $query; 
}

add_filter( 'pre_get_posts', 'wxp_product_posts_per_page' );

function wxp_portfolio_posts_per_page($query) {
    if ( $query->is_post_type_archive( 'product' ) && ! is_admin() && $query->is_main_query() ) {
          $query->set( 'posts_per_page', '24' );
    }
    return $query; 
}

Maar zoals eerder aangegeven, beide code snippets zullen niet werken voor producten. Om één heel simpele reden: WooCommerce heeft voor het tonen van producten op de ‘Winkel’ pagina een compleet andere functie ontwikkeld. Het resultaat van de ‘pre_get_post’ filter wordt later overschreven door een compleet ander filter. Om het in WooCommerce goed te laten werken, moet je een ander filter gebruiken.

De juiste oplossing

<?php

add_filter( 'loop_shop_per_page', 'wxp_loop_shop_per_page', 20 );

function wxp_loop_shop_per_page( $prods ) {
  $prods = 24;
  return $prods;
}

De juiste complete code om voor producten en portfolio items het aantal items per pagina in te stellen is dus :

<?php
add_filter( 'pre_get_posts', 'wxp_portfolio_posts_per_page' );

function wxp_portfolio_posts_per_page($query) {
    if ( $query->is_post_type_archive( 'portfolio' ) && ! is_admin() && $query->is_main_query() ) {
          $query->set( 'posts_per_page', '20' );
    }
    return $query; 
}

add_filter( 'loop_shop_per_page', 'wxp_loop_shop_per_page', 20 );

function wxp_loop_shop_per_page( $prods ) {
  $prods = 24;
  return $prods;
}

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

WooCommerce SKU verbergen
Hoe verberg je de SKU in WooCommerce, wanneer je die niet gebruikt?
Een veld toevoegen in WooCommerce bestellingen
Hoe voeg je extra velden toe aan je WooCommerce checkout procedure?
Prijzen verbergen voor niet ingelogde gebruikers
Hoe verberg je de WooCommerce prijzen voor niet ingelogde gebruikers?
Een regel tekst boven of onder een blogpost plaatsen
Een standaard regel (of) blok tekst boven of onder je blogpost plaatsen valt eigenlijk best wel mee.
WooCommerce checkout velden verwijderen
Sommige velden in het bestelformulier van WooCommerce heb je absoluut niet nodig. En zo haal je ze weg!
JavaScript verbergen wanneer je bent ingelogd
Specifieke JavaScript code verbergen, wanneer je bent ingelogd.

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht