Trouble implementing jquery-ias in my custom theme

Question

I bought this javascript jquery plugin : Infinite AJAX Scroll and I want to use it on the wordpress theme I created, on my frontpage and my archives.

I tried with the documentation on theses links : https://infiniteajaxscroll.com/docs/getting-started.html and the Wordpress one : https://infiniteajaxscroll.com/docs/cookbook-wordpress.html

But maybe because I am using 2 differents loops, one for the last three posts, the second for all the posts after, I don't understand how it should works.

Here is the big loop :

$args = array(
        'offset' => 3
    );
    $query = new WP_query ( $args );
    if ( $query->have_posts() ) {
    ?>

    <section class="container">
            <div class="row"><h1 class="section_title ASG_dark col-lg-12">Plus de news...</h1></div>
            <div class="row">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

          <?php $url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>

                <div class="col-lg-4 my-4">
                    <div class="highlight_sticker">
                        <div class="highlight_sticker_thumbnail" style="background-image: url('<?php echo $url[0]; ?>');"></div>
                        <div class="highlight_sticker_info p-4">
                            <div class="highlight_sticker_title"><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></div>
                            <div class="highlight_sticker_date"><?php echo the_date(); ?></div>
                        </div>
                        <div class="highlight_sticker_button"><span class="oi oi-plus" title="plus" aria-hidden="true"></span></div>
                    </div>
                </div>

            <?php endwhile; ?>
                        <?php wp_reset_postdata(); ?>
                <div style="clear: both;"></div>
            </div>

      </section>

When I tried to use it following the Wordpress part, it displayed only a "You reached the end".

Can someone help me with that ? I am too bad with Javascript to understand it by myself.

Edit : ias config should have been looking like this :

<!-- Infinite Ajax Scroll -->
    <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-ias.min.js" type="text/javascript"></script>

    <script type="text/javascript">
  var ias = $.ias({
    container: ".ias-container",
    item: ".ias-item",
    pagination: ".navigation",
    next: ".nav-previous a",
  });

  ias.extension(new IASTriggerExtension({offset: 2}));
  ias.extension(new IASSpinnerExtension());
    ias.extension(new IASNoneLeftExtension());
    ias.extension(new IASTriggerExtension({
    text: 'Load more items', // optionally
        }));
</script>

And the front-page.php template

<?php
    get_header();
?>

<?
    $args = array(
        'posts_per_page' => 3
    );
    $query = new WP_query ( $args );
    if ( $query->have_posts() ) {
    ?>

        <div id="highlight" class="container">
            <div class="row"><h1 class="section_title ASG_light col-lg-12">Dernières news</h1></div>
            <div class="row">

            <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                <?php $url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>

                <div class="col-lg-4 my-4">
                    <div class="highlight_sticker">
                        <div class="highlight_sticker_thumbnail" style="background-image: url('<?php echo $url[0]; ?>');"></div>
                        <div class="highlight_sticker_info p-4">
                            <div class="highlight_sticker_title"><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></div>
                            <div class="highlight_sticker_date"><?php echo the_date(); ?></div>
                        </div>
                        <div class="highlight_sticker_button"><span class="oi oi-plus" title="plus" aria-hidden="true"></span></div>
                    </div>
                </div>

                <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>

            </div>

        </div>
<?php } ?>

</header>

<?php /****************************************************************************************************************** */ ?>

    <section class="container py-5">
        <div class="row">
            <div class="col-lg-6">
                <h1 class="section_title ASG_dark">Nos dernières vidéos</h1>
                <div class="stream_home">
                    <?php
                    if( twitch_stream_live() ){ ?>
                        <iframe src="https://player.twitch.tv/?channel=asgardgg" frameborder="0" scrolling="no" height="378" width="650"></iframe>
                    <?php } else { ?>
                        <iframe src="https://www.youtube.com/embed/bwOnTJ_FB4o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    <?php }
                    ?>
                </div>

            </div>
            <div class="col-lg-6"><h1 class="section_title ASG_dark">Les dernières nouveautés</h1>
                <div class="stream_home">
                    <ul class="list-group ASG_events_list d-flex">
                        <?php echo list_sidebar('news',5); ?>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <?php /****************************************************************************************************************** */ ?>

<?
    $args = array(
        'offset' => 3
    );
    $query = new WP_query ( $args );
    if ( $query->have_posts() ) {
    ?>

    <section class="container">
            <div class="row"><h1 class="section_title ASG_dark col-lg-12">Plus de news...</h1></div>
            <div class="row">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                <?php $url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>

                <div class="col-lg-4 my-4">
                    <div class="highlight_sticker">
                        <div class="highlight_sticker_thumbnail" style="background-image: url('<?php echo $url[0]; ?>');"></div>
                        <div class="highlight_sticker_info p-4">
                            <div class="highlight_sticker_title"><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></div>
                            <div class="highlight_sticker_date"><?php echo the_date(); ?></div>
                        </div>
                        <div class="highlight_sticker_button"><span class="oi oi-plus" title="plus" aria-hidden="true"></span></div>
                    </div>
                </div>

            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
                <div style="clear: both;"></div>
            </div>

      </section>
<?php   }
get_footer();
?>

EDIT N°2 :

Archive.php

<?php
get_header();
?>
</header>
<?php if ( have_posts()  ): ?>

    <?php if ( category_description() ) : // Show an optional category description ?>
        <?php echo category_description(); ?>
    <?php endif; ?>

    <?php /* The loop */ ?>

    <section class="container ias-container">
        <?php if ( function_exists('yoast_breadcrumb') )
        {yoast_breadcrumb('<nav id="breadcrumbs">','</nav>');} ?>

        <?php //get_sidebar(); 
            $category_title = single_cat_title("",false);
        ?>
        <!-- Titre de la catégorie -->
        <h1><?php echo $category_title ?></h1>
        <div class="row">

        <?php while ( have_posts() ) : the_post(); ?>

        <div class="col-lg-4 my-4 ias-item">
                    <div class="highlight_sticker">
                        <div class="highlight_sticker_thumbnail" style="background-image: url('<?php echo get_the_post_thumbnail_url( $post->ID ); ?>');"></div>
                        <div class="highlight_sticker_info p-4">
                            <div class="highlight_sticker_title"><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></div>
                            <div class="highlight_sticker_date"><?php echo the_date(); ?></div>
                        </div>
                        <div class="highlight_sticker_button"><span class="oi oi-plus" title="plus" aria-hidden="true"></span></div>
                    </div>
        </div>

        <?php endwhile; ?>
            <div style="clear: both;"></div>
        <?php else : ?>
            <div class="article_single_content">
                <p>Pas encore d'articles par ici, mais que font ces admins?</p>
            </div>
        <?php endif; ?>
        </div>
    </section>

    <div class="navigation">
        <div class="nav-previous alignleft"><?php previous_posts_link( 'Older posts' ); ?></div>
        <div class="nav-next alignright"><?php next_posts_link( 'Newer posts' ); ?></div>
    </div>
<?php
    get_footer();
?>

I don't have it anymore, since I couldn't make it work anyway. I put it in an edit, maybe it's how It was, but I can't be sure. I'll put all my front-page.php template also, maybe you will be able to help me easier with it — Anaon, Aug 06 '19 at 13:14

score 0 · Answer 1 · answered Aug 08 '19 at 09:58

0

“.col-lg-4 my-4“ is not a valid class selector. Try “.col-lg-4 .my-4” or just “.my-4”

Even better would be to add a more specific and unique class to the element and use that.

answered Aug 08 '19 at 09:58

Fieg

3,046
1
16
22

I'll add again the library today and try again. So if I add a specific class, it should be on this exact html tag ? – Anaon Aug 12 '19 at 12:33
How do I add a "more" button on the front-page for this script ? – Anaon Aug 13 '19 at 13:05
I am still in need of your help – Anaon Aug 26 '19 at 06:54
You can add a more button with the trigger extension, see https://infiniteajaxscroll.com/docs/extension-trigger.html – Fieg Aug 26 '19 at 12:02
I added the
Suivants
and the ias.extension(new IASTriggerExtension()); after the other extensions and the link doesn't do anything – Anaon Sep 10 '19 at 07:16
You should not add the div manually, the trigger extension will do it for you. If you want to change the text use the text option of the trigger extension (https://infiniteajaxscroll.com/docs/extension-trigger.html#text). – Fieg Sep 10 '19 at 08:56
So how does the script knows where it should put the text ? – Anaon Sep 10 '19 at 09:17
So I removed it, and I added the optionnal text, nothing is showing – Anaon Sep 10 '19 at 10:54
Another news : I managed to get everything displayed correctly, now it just doesn't get the content. All I have instead of the pagination is "You reached the end". I thought it was because of the current template (front-page.php) but I used it on the categories (category.php) template and it shows the same thing. – Anaon Sep 10 '19 at 13:27
Still need help ^^ – Anaon Sep 16 '19 at 09:15
Hello Jeroen ! Still need your help – Anaon Sep 24 '19 at 08:10
You probably have a selector mismatch again. Make sure the selectors match the correct elements. – Fieg Sep 25 '19 at 09:32
Well I checked and can't find it, that's why I am asking for your help... I edited my first post with my current IAS configuration and the archive template where it doesn't work either – Anaon Sep 25 '19 at 10:59

Trouble implementing jquery-ias in my custom theme

1 Answers1