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';
        }
    }
}
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/

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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