Skip to content

Commenting

Weston Ruter edited this page Oct 24, 2018 · 12 revisions

When using "Native AMP" or "Paired Mode," WordPress commenting will work on AMP-enabled pages (screencast, example page).

Default Commenting

add_theme_support( 'amp' ) will enable standard commenting behaviour; submit comment, reload page after submission. There is no special code/markup required for this functionality. It's all out of the box.

Live Commenting: Using A Live List

By setting the comments_live_list parameter to true, you'll enable the ability to enhance the native WordPress commenting into a live updating system. see: Adding Theme Support

This removes the need for a page reload and will update based on new comments being posted in the background.

There is, however, a requirement in the code and markup of the theme to enable this further. In the comments.php file, you'll need to wrap the wp_list_comments() call in an <amp-live-list>.

Minimal amp-live-list requirements:

/**
 * Comments.php
 */
?>
<amp-live-list id="amp-live-comments-list-<?php the_ID(); ?>" data-max-items-per-page="10000"
	<?php
	if ( 'desc' !== get_option( 'comment_order' ) ) {
		echo 'sort="ascending"';
	};
	?>
>
	<ol items class="comments__list">
		<?php
			wp_list_comments( array(
				'style'      => 'ol',
				'short_ping' => true,
			) );
		?>
	</ol><!-- .comment-list -->
	<div update class="live-list__button">
		<button class="button" on="tap:amp-live-comments-list-<?php the_ID(); ?>.update">
			<?php esc_html_e( 'New comment(s)', 'ampconf' ); ?>
		</button>
	</div>
	<nav pagination>
		<?php the_comments_navigation(); ?>
	</nav>
</amp-live-list>

For a more complete example see comments.php. Note that you do not need to manually enqueue the amp-live-list script because it will be automatically included when it is used in the page. This goes for any AMP component you may reference in templates or content.

References

amp-live-list

Adding Theme Support