[Support request] Infinite Scroll on AMP First Site

[Divakara]

Hi, How can i setup infinite scroll on AMP fist site??
I have enabled “USe infinite scroll” option: https://prnt.sc/s8nlw9
but its not working.

Thanks in advance

[Leo]

Hi there,

AMP doesn’t allow javascript so you won’t be able to use that option if you want to implement AMP.

[Divakara]

Hi Leo,
Yeh, i know AMP doesn’t allow javascript. But we can implement Infinite Scroll on AMP Pages.
here are some sources:
https://instapage.com/blog/amp-updates#id-number-5
https://amp.dev/documentation/examples/components/amp-next-page/

https://gist.github.com/westonruter/c70e297f523ba18770efd991887966ad

[Tom]

Our infinite scroll option uses javascript, so it can’t be used.

However, you should be able to implement the solution Weston provides: https://gist.github.com/westonruter/c70e297f523ba18770efd991887966ad

You’d just need to add the functions and then add the pagination.php contents into a Hook Element.

[Divakara]

Hi Tom,

I have some questions.

1. Do the exact same code work with generatepress??
2. what should be the hook location for the element?

[Tom]

1. It should, but I’m not 100% positive.

2. You could try the after_main_content hook.

[Divakara]

Hi Tom,
Thanks for the response.

I have tried that method.. its throwing error –> There has been a critical error on your website.

https://prnt.sc/s9q7pt

[Tom]

Can you check the error_log file on your server for the exact error?

[Divakara]

Hi Tom,
I am getting this following error:
[03-May-2020 06:11:17 UTC] PHP Parse error: syntax error, unexpected ‘<‘, expecting end of file in /home/r6QgfY5X6fhQbQhO/—–/public_html/wp-content/plugins/gp-premium/elements/class-hooks.php(180) : eval()’d code on line 95
https://prnt.sc/sa0gie

[David]

Hi there,

can you share the exact code you have added to your Hook element ?

After adding the code in this forum, please highlight the code and click the Code button before submitting.

[Divakara]

Hi David,
This is the code i have added to Hook element.
https://prnt.sc/sa5oe9

<?php
/**
 * A template partial to output pagination for the Twenty Twenty default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

/**
 * Translators:
 * This text contains HTML to allow the text to be shorter on small screens.
 * The text inside the span with the class nav-short will be hidden on small screens.
 */

$prev_text = sprintf(
	'%s <span class="nav-prev-text">%s</span>',
	'<span aria-hidden="true">&larr;</span>',
	__( 'Newer <span class="nav-short">Posts</span>', 'twentytwenty' )
);
$next_text = sprintf(
	'<span class="nav-next-text">%s</span> %s',
	__( 'Older <span class="nav-short">Posts</span>', 'twentytwenty' ),
	'<span aria-hidden="true">&rarr;</span>'
);

$posts_pagination = get_the_posts_pagination(
	array(
		'mid_size'  => 1,
		'prev_text' => $prev_text,
		'next_text' => $next_text,
	)
);

// If we're not outputting the previous page link, prepend a placeholder with visibility: hidden to take its place.
if ( strpos( $posts_pagination, 'prev page-numbers' ) === false ) {
	$posts_pagination = str_replace( '<div class="nav-links">', '<div class="nav-links"><span class="prev page-numbers placeholder" aria-hidden="true">' . $prev_text . '</span>', $posts_pagination );
}

// If we're not outputting the next page link, append a placeholder with visibility: hidden to take its place.
if ( strpos( $posts_pagination, 'next page-numbers' ) === false ) {
	$posts_pagination = str_replace( '</div>', '<span class="next page-numbers placeholder" aria-hidden="true">' . $next_text . '</span></div>', $posts_pagination );
}

if ( $posts_pagination ) { ?>

	<?php if ( mytheme_is_amp() && ! is_paged()  ) : ?>
		<?php
		// @todo This is not the ideal way to obtain the subsequent pages, but WordPress doesn't provide such a way.
		// @todo The page titles aren't ideal.
		$pages = array_filter( array_map(
			static function( $link ) {
				if ( preg_match( '#<a.+?href="(.+?)">(.+?)</a>#s', $link, $matches ) ) {
					$amp_url = html_entity_decode( $matches[1] );
					$title   = html_entity_decode( $matches[2] );
					return [
						'title'  => $title,
						'ampUrl' => $amp_url,
						'image'  => get_site_icon_url(),
					];
				}
				return null;
			},
			paginate_links( [ 'type' => 'array' ] )
		) );

		$amp_next_page = [
			'pages'         => array_values( $pages ),
			'hideSelectors' => [
				'#site-header',
				'.header-footer-group',
				'#site-footer',
				'#wpadminbar',
			],
		];
		?>
		<amp-next-page>
			<script type="application/json"><?php echo wp_json_encode( $amp_next_page ); ?></script>
		</amp-next-page>

	<?php else : ?>

		<div class="pagination-wrapper section-inner">

			<hr class="styled-separator pagination-separator is-style-wide" aria-hidden="true" />

			<?php echo $posts_pagination; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already escaped during generation. ?>

		</div><!-- .pagination-wrapper -->
		<?php
	endif;

}

[David]

Can you try adding ?> after the last line of that code.

[Divakara]

Hi David,
I have added ?> at the end, and its cleared the error. However, infinite Scroll not working.
Can you please check source code on my site .

[Tom]

How can we view the AMP version of the site? Is it enabled by default?

[Divakara]

Hey Tom,
It’s AMP First site.

[Author]

Posts