Add Bootstrap Classes to the Next and Previous Image Buttons

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.

About the Author...

Jennifer Zelazny

My name is Jennifer Zelazny and this site is a collection of my random thoughts and opinions. I am Penn Stater, WordPress developer, and a modern day explorer. I love exploring data, trends, and things that make the world a better place and sharing them here.

Leave a Reply

Your email address will not be published.
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*