How to turn the Read More tag into a Bootstrap button

This tutorial goes over how to turn the WordPress Read More tag into a Bootstrap button. You will learn how to add a filter to the functions file to replace the default Read More markup to include the Bootstrap button markup.

Steps

  1. Open extras.php in the /inc/ directory
  2. Scroll down to the very bottom of this file and paste the following code:

  3. Save the file and reload the front-end to see your new Read More button

Be sure to watch the video to learn how to add the Read More tag to your posts. This is an important step to be able to see the Bootstrap button.

Notes from the Video

You can read more about Customizing the Read More tag on the WordPress codex here.

If you want to change the Read More button color to something other than the default color that I used in this tutorial, you can find the different Bootstrap button classes here. Note: When we add the theme options panel, we will add an options so the user can pick which color they want to use.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Bart Kalisvaart

    I can’t get this to work. When I take a closer look at the content.php I also never see the function being called, which probably has something to do with it…

    This is what the_content call code reads:

    the_content( sprintf(
    /* translators: %s: Name of current post. */
    wp_kses( __( ‘Continue reading %s ‘, ‘locator’ ), array( ‘span’ => array( ‘class’ => array() ) ) ),
    the_title( ‘“‘, ‘”‘, false )
    ) );

    Should I manually add the $more_link_text somewhere?