Wordpress: een Bootstrap button maken van ‘Read more’ – Pretprieel

WordPress: een Bootstrap button maken van ‘Read more’

8 March 2021

Deze site is eindelijk vernieuwd. Ik heb nu een zo basic mogelijke WordPress loop in een zo basic mogelijke Bootstrap layout geplaatst. Niettemin wilde ik de ‘Read more’ links – voor als een post verder gaat na de break – wel kunnen stileren. Daarbij liep ik tegen het eerste probleem aan.

Bootstrap gebruikt standaard de volgende code voor de button die ik wilde toepassen op mijn ‘Read more’ links:

<button type="button" class="btn btn-light">Light</button>

In WordPress hebben de ‘Read more’ links echter standaard de class “more-link”. Dat betekent dus dat je alleen a.more-link zou kunnen stileren in de css. Om de Bootstrap button te kunnen gebruiken is dus een extra stap nodig. Die aanvullende stap bleek nog niet zo eenvoudig te vinden. De titel van deze site is veelbelovend, maar vereist registratie. Aan de twee comments te zien is bovendien gekozen voor een erg omslachtige oplossing. Andere complexe oplossingen die ik vond bestonden uit het invoegen van jQuery.

Mijn eenvoudige oplossing is om het volgende in te voegen in de functions.php van je WordPress theme:

<?php function modify_read_more_link() {
    return '<a href="' . get_permalink() . '"><button type="button" class="btn btn-light">Stylized Read More</button></a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' ); ?>

Uiteraard kun je de button een andere naam geven dan ik heb gedaan (Stylized Read More). En uiteraard kun je ook kiezen voor een andere stijl van Bootstrap v5.0 buttons.