Change JetPack Load More HTML MarkUp

Question

I want to know how to change Jetpack infinite-handle HTML markup. I found the default markup in infinity.js in /wp-content/plugins/jetpack/modules/infinite-scroll/ like the following code :

    Scroller = function( settings ) {
        var self = this;

        // Initialize our variables
        this.id               = settings.id;
        this.body             = $( document.body );
        this.window           = $( window );
        this.element          = $( '#' + settings.id );
        this.wrapperClass     = settings.wrapper_class;
        this.ready            = true;
        this.disabled         = false;
        this.page             = 1;
        this.offset           = settings.offset;
        this.currentday       = settings.currentday;
        this.order            = settings.order;
        this.throttle         = false;
        this.handle           = '<div id="infinite-handle"><span><button>' + text.replace( '\\', '' ) + '</button></span></div>';
        this.click_handle     = settings.click_handle;
        this.google_analytics = settings.google_analytics;
        this.history          = settings.history;
        this.origURL          = window.location.href;
        this.pageCache        = {};

etc...

Please see the following code from code above, this is what I want to change.

this.handle           = '<div id="infinite-handle"><span><button>' + text.replace( '\\', '' ) + '</button></span></div>';

I found in another thread how to change the text is using the following hooks and it works well :

function filter_jetpack_infinite_scroll_js_settings( $settings ) {

    $settings['text'] = __( 'Load more...', 'i18n' );

    return $settings;

}
add_filter( 'infinite_scroll_js_settings', 'filter_jetpack_infinite_scroll_js_settings', 100 );

The questions is, can I change the this.handle value using the same method like I did when change the text ?

Thanks in advance for your help :)

score 0 · Accepted Answer · answered Jun 16 '17 at 12:11

0

Yes , you can change the handle value by following,

First dequeue the script.

function wpdocs_dequeue_script() {
   wp_dequeue_script( 'the-neverending-homepage' );
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

Then add the script infinity.js to theme via wp_enqueue_script function in functions.php and change this.handle to your value.

answered Jun 16 '17 at 12:11

Ahmed Ginani

6,522
2
15
33

Is that work if I use JetPack infiniti scroll module? – Peter Chimp Jun 16 '17 at 12:20
yes it's working here. So it will work for you also. – Ahmed Ginani Jun 16 '17 at 12:21
So I need to use custom infinity.js and bundled with my theme? And need to update infinity.js manually if ( let say: one of JetPack infinity.js function was changed from WordPress side ) ? Is there any other method to change via Hooks and still using default infinity.js ? – Peter Chimp Jun 16 '17 at 12:24
yes you need to include common infinity.js. What I did is removed the infinity.js from plugin and used the infinity.js from theme , There are no other hooks to change the infinity.js content. – Ahmed Ginani Jun 16 '17 at 12:29

Change JetPack Load More HTML MarkUp

1 Answers1