Change Jetpack’s Infinite Scroll Button’s Text

One of Jetpack’s useful feature is the infinite scroll extension. Using it we can set content loading on scroll or a button click.

If you choose to set up the content loading on button click maybe you want to change the caption of it; to achieve this you need to modify the infiniteScroll JavaScript object’s text parameter.

Basically, we add a simple JS code to our theme or plugin. The most obvious is if we place this code into our functions.php but feel free to add it anywhere (like in your main JavaScript file). The advantage of adding it through the functions.php that we can set up conditionals based on WordPress functions.

<?php

function cone_change_infinite_scroll_btn_text() { 
    if ( is_home() || is_archive() ) { ?>
        <script type="text/javascript">
            var textCaption = '';
            if ( 'en-US' == $( 'html' ).attr( 'lang' ) ) {
                textCaption = 'Load More Posts';
            } else {
                textCaption = 'További bejegyzések'
            }
            infiniteScroll.settings.text = textCaption;
        </script>
    <?php }
}

add_action( 'wp_footer', 'cone_change_infinite_scroll_btn_text', 3 );
Note that in this snippet you can also find a solution to the translation of the text. You can do it this way or you can declare a data- attribute somewhere in your code and translate that in the WordPress way.