CODEWITHSUNDEEP
wordpresswordpress-themingjquery-ias
Anaon
Anaon

Reputation: 11

Trouble implementing jquery-ias in my custom theme

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();
?>

Upvotes: 0

Views: 290

Answers (1)

Fieg
Fieg

Reputation: 3166

“.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.

Upvotes: 0

Related Questions