Add Bootstrap Classes to the Next and Previous Image Buttons

CSS HOWTOs Web Development

When viewing media (usually the image.php template) within WordPress – there are buttons to browse the next and previous buttons that you might want to customize if you are creating a Bootstrap WordPress them. If this is the case – styling the buttons with Bootstrap is easy. You can simply add the following to your theme’s functions.php file.

/**
 * Add CSS class to image navigation links.
 *
 * @wp-hook previous_image_link
 * @wp-hook next_image_link
 * @param   string $link Complete markup
 * @return  string
 */
add_filter( 'previous_image_link', 'lucidity_img_link_class' );
add_filter( 'next_image_link', 'lucidity_img_link_class' );

function lucidity_img_link_class( $link ) {
    $class = 'next_image_link' === current_filter() ? 'next' : 'prev';
    return str_replace( '<a ', "<a class='btn btn-default $class'", $link );
}

Note – you can change the btn-default class to btn-primary or whatever you need.

Leave a Reply

Your email address will not be published.
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Random

Fun Recent Finds

Over the last few weeks I have found some really cool things I wanted to share…

TV

ABC’s The Goldbergs

When I first saw this show advertised I thought to myself “this looks like a great show”…and that was it. FINALLY I caught a few episodes and as expected – I love it. It is based in the 1980s from a young boy’s perspective. Growing up the in 1980s myself – the episodes I watched […]