• Good day,

    I’m trying to make the infinite scroll working. It does so far, but there’s one problem left. The posts, which are loaded by scrolling down, have an other design as the ones on the top. For example the headline color is changed, some space between each post as well as the separating line is missing.

    Have a look at https://www.Projekt-MX5.de

    The code in functions.php is

    // Add support for Jetpack Infinite Scroll
    add_theme_support( 'infinite-scroll', array(
        'container'      => 'main',
        'type'           => 'scroll',
        'footer'         => 'wrap',
        'footer_widgets' => false,
        'wrapper'        => true,
        'render'         => false,
        'posts_per_page' => false
    
    ) );

    Does anyone know where’s the mistake?
    Thank you very much for any support!

    https://www.ads-software.com/extend/plugins/jetpack/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Did you disable infinite scroll, because the site doesn’t seem to use it right now?

    Anyway, I think your problem is in the 'render' => false, line. One thing to try that may fix your problem would be to create a file, call it post-loop.php, that contains the loop to grab posts. This file should have its contents copied from index.php where the loop should be right now (and in fact you can then replace that part of index.php with get_template_part( 'post-loop' );) and start with the line <?php while (have_posts()) : the_post(); ?> while ending with the line <?php endwhile; ?>. Your adding of infinite scroll support would contain 'infinite_scroll_render', where you currently have false as the render value. That refers to a new function you’d add to the functions.php (where the add support code is anyways) that is the following:

    function infinite_scroll_render() {
    	get_template_part( 'post-loop' );
    }

    See if that helps with the problem you’re seeing.

    Thread Starter Hubi1337

    (@hubi1337)

    I deactivated it but now it’s turned on if you want to take a look again.

    Thank you very much for your support so far – I’ll try to change it.

    That looks exactly like the same thing I ran into on my blog before it all settled down and worked right, so definitely try my suggested fix above.

    Thread Starter Hubi1337

    (@hubi1337)

    I have to say I’m not that good in coding.

    Here’s the content of the index.php
    Could you please tell me where’s the part I need to fill into the post-loop.php?

    <?php get_header(); ?>
    <?php
    	$options = get_option('inove_options');
    	if (function_exists('wp_list_comments')) {
    		add_filter('get_comments_number', 'comment_count', 0);
    	}
    ?>
    
    <?php if ($options['notice'] && $options['notice_content']) : ?>
    	<div class="post" id="notice">
    		<div class="content">
    			<?php echo($options['notice_content']); ?>
    			<div class="fixed"></div>
    		</div>
    	</div>
    <?php endif; ?>
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); update_post_caches($posts); ?>
    	<div class="post" id="post-<?php the_ID(); ?>">
    		<h2><a>" rel="bookmark"><?php the_title(); ?></a></h2>
    		<div class="info">
    			<span class="date"><?php the_time(__('F jS, Y', 'inove')) ?></span>
    			<?php if ($options['author']) : ?><span class="author"><?php the_author_posts_link(); ?></span>
    <?php endif; ?>
    			<?php edit_post_link(__('Edit', 'inove'), '<span class="editpost">', '</span>'); ?>
    			<span class="comments"><?php comments_popup_link(__('No comments', 'inove'), __('1 comment', 'inove'), __('% comments', 'inove'), '', __('Comments off', 'inove')); ?></span>
    			<div class="fixed"></div>
    		</div>
    		<div class="content">
    			<?php the_content(__('Weiterlesen...', 'inove')); ?>
    			<div class="fixed"></div>
    		</div>
    
    	</div>
    <?php endwhile; else : ?>
    	<div class="errorbox">
    		<?php _e('Sorry, no posts matched your criteria.', 'inove'); ?>
    	</div>
    <?php endif; ?>
    <div id="pagenavi">
    	<?php if(function_exists('wp_pagenavi')) : ?>
    		<?php wp_pagenavi() ?>
    	<?php else : ?>
    		<span class="newer"><?php previous_posts_link(__('Newer Entries', 'inove')); ?></span>
    		<span class="older"><?php next_posts_link(__('Older Entries', 'inove')); ?></span>
    	<?php endif; ?>
    	<div class="fixed"></div>
    </div>
    <?php get_footer(); ?>

    This index.php is quite different from what my theme started out with, but I think the code you want is this:

    <?php if (have_posts()) : while (have_posts()) : the_post(); update_post_caches($posts); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    <h2>" rel="bookmark"><?php the_title(); ?></h2>
    <div class="info">
    <span class="date"><?php the_time(__('F jS, Y', 'inove')) ?></span>
    <?php if ($options['author']) : ?><span class="author"><?php the_author_posts_link(); ?></span>
    <?php endif; ?>
    <?php edit_post_link(__('Edit', 'inove'), '<span class="editpost">', '</span>'); ?>
    <span class="comments"><?php comments_popup_link(__('No comments', 'inove'), __('1 comment', 'inove'), __('% comments', 'inove'), '', __('Comments off', 'inove')); ?></span>
    <div class="fixed"></div>
    </div>
    <div class="content">
    <?php the_content(__('Weiterlesen...', 'inove')); ?>
    <div class="fixed"></div>
    </div>
    
    </div>
    <?php endwhile; else : ?>

    But really I think that you need to split the <?php endwhile; else : ?> into <?php end while;?> that is in the post-loop.php and <?php else : ?> that is just below the code you move to post-loop.php (remember that you should use get_template_part( 'post-loop' ); in place of the whole chunk of code you move to post-loop.php).

    Thread Starter Hubi1337

    (@hubi1337)

    Thank you very much so far! I can’t appreciate it enough.
    I changed everything, but now the page isn’t loaded at all. I got a mistake somewhere.

    The code in the functions.php looks like:

    // Add support for Jetpack Infinite Scroll
    add_theme_support( 'infinite-scroll', array(
        'container'      => 'main',
        'type'           => 'scroll',
        'footer'         => false,
        'footer_widgets' => false,
        'wrapper'        => true,
        'render'         => 'infinite_scroll_render',
        'posts_per_page' => 5,
    ) );
    
    function infinite_scroll_render() {
    	get_template_part( 'post-loop' );
    }

    The post-loop.php looks like

    <?php if (have_posts()) : while (have_posts()) : the_post(); update_post_caches($posts); ?>
    	<div class="post" id="post-<?php the_ID(); ?>">
    		<h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    		<div class="info">
    			<span class="date"><?php the_time(__('F jS, Y', 'inove')) ?></span>
    			<?php if ($options['author']) : ?><span class="author"><?php the_author_posts_link(); ?></span>
    <?php endif; ?>
    			<?php edit_post_link(__('Edit', 'inove'), '<span class="editpost">', '</span>'); ?>
    			<span class="comments"><?php comments_popup_link(__('No comments', 'inove'), __('1 comment', 'inove'), __('% 
    
    comments', 'inove'), '', __('Comments off', 'inove')); ?></span>
    			<div class="fixed"></div>
    		</div>
    		<div class="content">
    			<?php the_content(__('Weiterlesen...', 'inove')); ?>
    			<div class="fixed"></div>
    		</div>
    
    	</div>
    <?php endwhile;?>

    The Index.php is now looking like:

    <?php get_header(); ?>
    <?php
    	$options = get_option('inove_options');
    	if (function_exists('wp_list_comments')) {
    		add_filter('get_comments_number', 'comment_count', 0);
    	}
    ?>
    
    <?php if ($options['notice'] && $options['notice_content']) : ?>
    	<div class="post" id="notice">
    		<div class="content">
    			<?php echo($options['notice_content']); ?>
    			<div class="fixed"></div>
    		</div>
    	</div>
    <?php endif; ?>
    
    <?php
    get_template_part( 'post-loop' );
    ?>
    
    	<div class="errorbox">
    		<?php _e('Sorry, no posts matched your criteria.', 'inove'); ?>
    	</div>
    <?php endif; ?>
    <div id="pagenavi">
    	<?php if(function_exists('wp_pagenavi')) : ?>
    		<?php wp_pagenavi() ?>
    	<?php else : ?>
    		<span class="newer"><?php previous_posts_link(__('Newer Entries', 'inove')); ?></span>
    		<span class="older"><?php next_posts_link(__('Older Entries', 'inove')); ?></span>
    	<?php endif; ?>
    	<div class="fixed"></div>
    </div>
    <?php get_footer(); ?>

    The functions.php and post-loop.php code looks fine to me, but since the code of your current and older index.php seems like far less, and ordered differently than I’ve seen before, I can’t be 100% certain that I know what code should be in your post-loop.php and index.php… It feels to me like the index.php should have more than it does, and that it has more code about displaying posts than I’m used to seeing. So maybe revert it to where it works and experiment with different sets of code in the post-loop.php. As reference, my files are these:

    index.php:

    <!DOCTYPE html>
    <?php
    	// get the header and start the <body> from header.php
    	get_header();
    ?>
    <div id="masthead">
    <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>
             <div class='pagegroup'><a href="<?php
    // get theme options from the database
    $family2010options = get_option( 'family2010_options' );
    // include the alternate group url if present
    if ($family2010options['groupurl']) {
    	echo $family2010options['groupurl'];
    } else {
    	echo get_option('home');
    }
    ?>/" ><?php
    // include the alternate group text if present
    if ($family2010options['groupname']) {
    	echo $family2010options['groupname'];
    } else {
    	bloginfo('description');
    }
    ?></a></div>
             <div class='pagetitle'><a href="<?php echo get_option('home'); ?>/" ><?php bloginfo('name'); ?></a></div>
    </td></tr></table>
    </div>
    
    <! Start sidebar -->
    <?php
    // load the sidebar from sidebar.php
    get_sidebar();
    ?>
    <!-- end sidebar -->
    
    <! Start main page content -->
    <div id="wikitext" role="main">
    
    	<?php if (! is_single()) : ?>
    		<?php if ( is_404() || is_category() || is_day() || is_month() ||
    					is_year() || is_search() || is_paged() ) { ?>
    
    			<?php /* If this is a 404 page */ if (is_404()) { ?>
    			<?php /* If this is a category archive */ } elseif (is_category()) { ?>
    			<h2><?php single_cat_title(''); ?> category</h2>
    
    			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
    			<h2><?php the_time('l, j F Y'); ?> archives</h2>
    
    			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
    			<h2><?php the_time('F Y'); ?> archives</h2>
    
    			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
    			<h2><?php the_time('Y'); ?> archives</h2>
    
    			<?php /* If this is a search archive */ } elseif (is_search()) { ?>
    			<h2>Search for '<?php the_search_query(); ?>'</h2>
    
    			<?php } ?>
    
    		<?php } ?>
    	<?php endif; // is_single ?>
    
    	<?php if (is_search()) : ?>
    		<p><form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    		<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
    		<input type="submit" id="searchsubmit" value="Search" />
    		</div>
    		</form><br /></p>
    	<?php endif; ?>
    
    	<?php if (have_posts()) :
    		// loop to get posts from the database and display them
    		get_template_part( 'post-loop' );
    		?>
    
    <! Show navigation buttons only if infinite scroll itself deactivated-->
    <?php
    wp_link_pages();
    ?>
    
    	<?php else : ?>
    
    		<h2 class="center">Not Found</h2>
    		<p class="center">Sorry, but you are looking for something that isn't here.</p>
    		<?php $efcDoSearch = TRUE; ?>
    
    	<?php endif; ?>
    
    	<?php if (is_page('search') || $efcDoSearch) : ?>
    		<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    		<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
    		<input type="submit" id="searchsubmit" value="Search" />
    		</div>
    		</form>
    	<?php endif; ?>
    
    <!--PageText-->
    <!--PageRightFmt-->
    </div> <!-- end wikitext -->
    <?php
    // get the page footer and end the <body> from footer.php
    get_footer();
    ?>

    post-loop.php:

    <?php while (have_posts()) : the_post(); ?>
    			<div class="post" id="post-<?php the_ID(); ?>">
    				<?php if (is_page()) : ?>
    					<h2><?php the_title(); ?></h2>
    				<?php else : ?>
    					<p style="margin-bottom:-5px;"><small>
    					<?php if ( is_home() || is_page() ) { the_time('j F'); } else { the_time('j F Y');  } ?>
    					<?php if (! is_single()) : ?> .
    						<?php comments_popup_link('Reply', '1 Reply', '% Replies'); ?>
    						<?php edit_post_link('Edit', ' . ', ''); ?>
    					<?php endif; ?>
    					</small></p>
    					<h2 style="margin-top:0px;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    				<?php endif; ?>
    
    				<div class="entry">
    					<?php the_content('Read the rest of this entry ?'); ?>
    				</div>
    
    				<?php if (is_single()) : ?>
    					<div id="postmeta">
    						<p>
    							<?php
    								global $user_level;
    								get_currentuserinfo();
    								if ($user_level > 2) {
    									echo '<a class="noprint" href="';
    									echo (get_edit_post_link($post->ID));
    									echo '" accesskey="e">Edit this entry.</a>';
    								}
    							?>
    							Posted on <?php echo get_the_time('l, j F Y', $post->ID); ?> at <?php echo get_the_time('', $post->ID); ?>
    							and filed under
    							<?php the_category(', ', '', $post->ID) ?>.
    						</p>
    					</div>
    					<?php comments_template(); ?>
    				<?php endif; ?>
    			</div>
    <?php endwhile; ?>

    And relevant parts of functions.php:

    add_theme_support( 'infinite-scroll', array(
    	'container'  => 'wikitext',
    	'render'    => 'infinite_scroll_render',
    	'footer' => 'footer',
    	'wrapper' => false
    ) );
    function infinite_scroll_render() {
    	get_template_part( 'post-loop' ); // this is the same file that we use in index.php to render the posts initially visible
    }

    Thread Starter Hubi1337

    (@hubi1337)

    Okay, I restored the index.php to its original. Now it’s working but the infinite scroll isn’t.

    I’ll try to change some settings and maybe I’ll get closer to the solution somehow.

    Thanks again for your effort so far!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Infinite Scroll – Design problems’ is closed to new replies.