0

I've styled my pagination buttons to have a green background. When there is no previous page (or next page) the pagination link disappears for good reason but it leaves a green empty button with no text.

I've tried targeting this with JS, messing around with the functions.php function and a few other things to no avail.

here is my code in the functions.php page

function pagination_nav() {
    global $wp_query;

    if ( $wp_query->max_num_pages > 1) { ?>
        <nav class="pagination" role="navigation">
            <div id="prv" class="button pag-btn nav-next"><?php previous_posts_link( 'Previous' ); ?></div>
            <div id="nxt" class="button pag-btn nav-previous"><?php next_posts_link( 'Next' ); ?></div>
        </nav>
<?php }
}

here is the code calling the function in my template page

    <div class="pag-container">
        <?php pagination_nav(); ?>
    </div>

here is my scss

.pag-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;

    .pagination{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 64%;

        .pag-btn{
            width: 25%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image:linear-gradient(to bottom, $dark-green, $light-green);
            margin: 0rem 1rem;
        }

        a{
            color: white;
            font-size: 1.3rem;
        }
    }
}

and for good measure here is the JS that i tried

const prvBtn = document.getElementById('prv').innerHTML;
const nxtBtn = document.getElementById('nxt').innerHTML;

function hidePagBttns() {
    if (prvBtn === '') {
        prvBtn.style.display = 'none';
    } else {
        if (nxtBtn === '') {
            nxtBtn.style.display = 'none';
        }
    }
}

1 Answer 1

0
     <nav class="pagination" role="navigation">
        <?php if( get_previous_posts_link() ) { ?>
        <div id="prv" class="button pag-btn nav-next"><?php previous_posts_link( 'Previous' ); ?></div>
        <?php } 
        if( get_next_posts_link() ) { ?>
        <div id="nxt" class="button pag-btn nav-previous"><?php next_posts_link( 'Next' ); ?></div>
        <?php } ?>
    </nav>

https://developer.wordpress.org/reference/functions/previous_posts_link/ https://developer.wordpress.org/reference/functions/get_previous_posts_link/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.