Add Infinite Scroll the categories page

Does the Divi theme have an archive.php or category.php page?

Or does it use index.php?

It uses index.php :-/

In index.php there is likely a tag, category and author archive code.
You should try to locate this and replace it with the ajax load more shortcode.

note: I’ve never used Divi, so Im not exactly sure how that framework works.

So I need to copy index.php into my child theme and then do this?

Yea, copy to your child theme.

Alright, I got it pretty close, but not quite there. I followed the guide on the “Examples: Archive.php” page:

You can see my current outcome at https://dev.americabeheard.com/category/abortion/

The code of interest is about 10-20 lines from the bottom.

<?php get_header(); ?>

<div id="main-content">
	<div class="container">

<div class=" et_pb_row et_pb_row_0 et_pb_row_fullwidth">
    <div class="et_pb_column et_pb_column_1_2  et_pb_column_0">
    	 <div class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_center  et_pb_text_0">

                 <!-- holds submit button -->
                   <div class="buttonHolderSubmit">
    	               <div class="buttonClassSubmit">
             <p><img src="https://dev.americabeheard.com/wp-content/uploads/2016/02/cameraicon.png" /></p>
             <p><a href="/submit-a-video">Speak your mind!</a></p>
    	               </div>
                   </div>
                <!-- end submit button -->

        </div> <!-- .et_pb_text -->
    </div> <!-- .et_pb_column -->

    <div class="et_pb_column et_pb_column_1_2  et_pb_column_1">
 		<div class="et_pb_module et_pb_video landing-video et_pb_video_0">
    			<div class="et_pb_video_box">
    					<video controls>
    						<source type="video/mp4" src="https://dev.americabeheard.com/wp-content/uploads/2015/12/Cropped-Tamera-Opening-Video-Shortened-Version.mp4" />
    					</video>
    			</div>
		</div>
	</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row -->

		<div id="content-area" class="clearfix">
			<div id="left-area">
		<?php
			if ( have_posts() ) :
				while ( have_posts() ) : the_post();
					$post_format = et_pb_post_format(); ?>

					<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>

				<?php
					$thumb = '';

					$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );

					$height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 );
					$classtext = 'et_pb_post_main_image';
					$titletext = get_the_title();
					$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
					$thumb = $thumbnail["thumb"];

					et_divi_post_format_content();

					if ( ! in_array( $post_format, array( 'link', 'audio', 'quote' ) ) ) {
						if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) :
							printf(
								'<div class="et_main_video_container">
									%1$s
								</div>',
								$first_video
							);
						elseif ( ! in_array( $post_format, array( 'gallery' ) ) && 'on' === et_get_option( 'divi_thumbnails_index', 'on' ) && '' !== $thumb ) : ?>
							<a href="<?php the_permalink(); ?>">
								<?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
							</a>
					<?php
						elseif ( 'gallery' === $post_format ) :
							et_pb_gallery_images();
						endif;
					} ?>

				<?php if ( ! in_array( $post_format, array( 'link', 'audio', 'quote' ) ) ) : ?>
					<?php if ( ! in_array( $post_format, array( 'link', 'audio' ) ) ) : ?>
						<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
					<?php endif; ?>

					<?php
						et_divi_post_meta();

						if ( 'on' !== et_get_option( 'divi_blog_style', 'false' ) || ( is_search() && ( 'on' === get_post_meta( get_the_ID(), '_et_pb_use_builder', true ) ) ) ) {
							truncate_post( 270 );
						} else {
							the_content();
						}
					?>

				<?php endif; ?>

					</article> <!-- .et_pb_post -->

			<?php
					endwhile;
?>

<?php
$cat = get_category( get_query_var( 'cat' ) );
$category = $cat->slug;
echo do_shortcode('[ajax_load_more category="'.$category.'"]');
?>

<?php
					if ( function_exists( 'wp_pagenavi' ) )
						wp_pagenavi();
					else
						get_template_part( 'includes/navigation', 'index' );
				else :
					get_template_part( 'includes/no-results', 'index' );
				endif;
			?>

			</div> <!-- #left-area -->

		</div> <!-- #content-area -->
	</div> <!-- .container -->
</div> <!-- #main-content -->

<?php get_footer(); ?>

Ok, I see ALM working. What is the issue you are facing?
The fact the ziggeo shortcode is rendering as plaintext?

It looks like none of the styling carries over, not necessarily just the Ziggeo.

The regular posts listed on the page come inside a light colored div spaced out 4 to a row with the Ziggeo player.

While the infinite scrolls seem to list one after the next in a column with the no formatting – which includes showing the ziggeo shortcode as plaintext.

I think if I can figure out how to get them to follow the same styling as the other posts, that the ziggeo shortcode will follow.

It looks like none of the styling carries over, not necessarily just the Ziggeo.

You need to match your repeater template to the template used in your theme. Ajax Load More will not do this for you. Visit the repeater template section and input your code.

re: Ziggeo – Are you using the_excerpt() or the_content() in your repeater template?

I see an option for “theme repeater” that comes with the add-on. Would that work too?

Theme repeater would work as well.

Alright, I’ve made some progress. It looks like I’m pulling in some data into the template repeater and it is coming out formatted. But there are some subtle sections being missed that I can’t seem to decipher. It looks light the heights of things aren’t staying constrained and sometimes the columns are also running into each other. And then YouTube stuff looks out of frame.

Any tips?

I took some screenshots:

This is what I’m getting currently w/ Ajax:
https://flantascience.com/images/ajax%20current.jpg

This is what I get if I just display all my posts w/o Ajax.
https://flantascience.com/images/pre-ajax.jpg

It looks like the first 10 posts show up normal in the first 3 rows without any issue through Divi’s regular post displayer. And then the Ajax kicks in after that and I get these mixups.

The site is live at https://dev.americabeheard.com/category/abortion/

Maybe I’d be better off with the Pro version? If it will work, I’m interested… please let me know.

The Pro version won’t help.

There is likely some code you are missing to align your columns.

Also, 10 posts wont fit into 3 lines. You should be displaying 12 posts I would think.

Hey – I wanted to let you know I solved this error. In case others have the same problem in the future.

I had it set to add 5 new posts every time I scrolled down. And when I switched to 4 it started working. So it may have to do with the fact I was adding a non-multiple of 4. And I also updated that part you mentioned about having 12 posts. So one of these was the bug.

Thanks for the help and great plugin.

If you want to see it in action:

https://dev.americabeheard.com/category/income-tax/