facepiles for WP comments

comments.php

<?php
/**
 * The template for displaying comments.
 *
 * This is the template that displays the area of the page that contains both the current comments
 * and the comment form.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package independence
 */

if ( !empty ( $_SERVER['SCRIPT_FILENAME'] ) && 'comments.php' == basename( $_SERVER['SCRIPT_FILENAME'] ) )
die ('Please do not load this page directly. Thanks!');

if ( post_password_required() ) {
	 return;
}
	// Get the global `$wp_query` object.
$id = get_the_ID();
	// Get the semantic_linkbacks_type 'like'.
$comments = get_linkbacks( 'like', $id );
?>
<section class="section">
<div class="container">
	<h3 class="subtitle">Responding with a post on your own blog? Send me a <a href="http://indieweb.org/webmention">Webmention</a> by writing something on your website that links to this post and then enter your post URL below.</h3>
	<form method="post" id="webmention-form" action="<?php echo get_webmention_endpoint(); ?>">
	 <input id="webmention-target" type="hidden" name="target" value="<?php the_permalink(); ?>" />
	 <p class="control has-addons ">
	<input class="input is-fullwidth" name="source" type="url" placeholder="<?php _e( 'URL/Permalink of your article', 'webmention' ); ?>">
	<button class="button is-info" type="submit">
	Notify Me
	</button>
	</p>
	</form>
<ul class="pile likes">
<li class="icon">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100.01" enable-background="new 0 0 100 100.01" xml:space="preserve"><g><path d="M68.422,12.527c1.141,0,2.342,0.058,3.639,0.187c7.86,0.763,16.963,7.97,18.068,21.771v4.59   c-1.031,13.214-11.003,29.501-40.148,49.939c-29.14-20.438-39.11-36.727-40.137-49.939v-4.59   c1.105-13.801,10.202-21.008,18.069-21.771c1.291-0.129,2.504-0.187,3.638-0.187c9.085,0,13.444,3.926,18.43,9.875   C54.973,16.453,59.337,12.527,68.422,12.527"></path></g></svg>
</li>

<?php
// Comment Loop.
if ( $comments ) {
	foreach ( $comments as $comment ) {
		?>
		<li>
			<?php $author_url = get_comment_meta( $comment->comment_ID, 'semantic_linkbacks_author_url', true ); ?>
			<!-- TODO: get author name as alt for image -->
			<a href="<?php echo $author_url ?>">
			<?php $author_img = get_comment_meta( $comment->comment_ID, 'semantic_linkbacks_avatar', true ); ?>
			<figure class="image is-64x64">
				<img src="<?php echo $author_img ?>" alt="<?php echo $comment->comment_author; ?>">
			</figure>
			</a>
		</li>
<?php
	}
} else {
	echo '<li>No likes.</li>';
}
?>
</ul>


<?php
	// get the semantic_linkbacks_type 'repost'.
	$comments = get_linkbacks( 'repost', $id );
?>

<ul class="pile reposts">
<li class="icon">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100.01" enable-background="new 0 0 100 100.01" xml:space="preserve"><g><path d="M50.606,64.447H30.435V50.634h11.05c0.57,0,1.093-0.309,1.354-0.8c0.273-0.499,0.229-1.089-0.1-1.545L26.415,25.445   c-0.281-0.403-0.753-0.643-1.252-0.643c-0.503,0-0.97,0.238-1.259,0.643L7.583,48.289C7.4,48.543,7.306,48.84,7.306,49.137   c0,0.238,0.06,0.477,0.174,0.697c0.266,0.491,0.789,0.801,1.355,0.801h11.057v19.081c0,2.914,2.361,5.274,5.271,5.274h25.442   c2.911,0,5.271-2.36,5.271-5.274C55.877,66.809,53.518,64.447,50.606,64.447z"></path><path d="M48.804,37.672h20.17v13.239h-11.05c-0.569,0-1.093,0.31-1.354,0.8c-0.272,0.499-0.229,1.086,0.101,1.545L72.995,76.1   c0.28,0.4,0.753,0.639,1.252,0.639c0.503,0,0.972-0.237,1.26-0.639l16.32-22.844c0.183-0.258,0.276-0.555,0.276-0.852   c0-0.233-0.06-0.471-0.174-0.693c-0.266-0.49-0.787-0.8-1.354-0.8H79.518V32.4c0-2.912-2.359-5.271-5.271-5.271H48.805   c-2.91,0-5.271,2.359-5.271,5.271C43.534,35.311,45.894,37.672,48.804,37.672z"></path></g></svg>
</li>

<?php
// Comment Loop.
if ( $comments ) {
	foreach ( $comments as $comment ) {
		?>
		<li>
			<?php $author_url = get_comment_meta( $comment->comment_ID, 'semantic_linkbacks_author_url', true ); ?>

			<a href="<?php echo $author_url ?>">
			<?php $author_img = get_comment_meta( $comment->comment_ID, 'semantic_linkbacks_avatar', true ); ?>
			<figure class="image is-64x64">
				<img src="<?php echo $author_img ?>" alt="<?php echo $comment->comment_author; ?>">
			</figure>
			</li>
			</a>
<?php
	}
} else {
	echo '<li>No Reposts.</li>';
}
?>
</ul>
</div>
</section>
<section class="section">
	<div class="container">
		<?php
			$id = get_the_ID();

			$comments = get_comments(array(
					'post_id' => $id,
					'status' => 'approve',
					'type__not_in' => 'webmention',
				) );
				wp_list_comments(array(
					'per_page' => 10,
					'style' => 'div',
					'reverse_top_level' => true,
					'walker' => new independence_walker_comment,
				), $comments)
		?>
	</div>
</section>
<section class="section">
	<div class="container">
<?php
$commenter = wp_get_current_commenter();
	$req = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );
$comment_args = array(
	'title_reply'  => 'Got Something To Say?',
	'title_reply_before'   => '<h3 class="subtitle">',
	'fields' => apply_filters( 'comment_form_default_fields', array(
		'author' => '<div class="field"><div class="field-label is-medium">
	<label class="label">Name</label></div>
	<p class="control">
		<input id="author" name="author" class="input is-medium" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
		'" placeholder="Your name here">
	</p>
</div>',
		'email'  => '<div class="field">
	<label class="label">Email</label>
	<p class="control">
	<input id="email" name ="email" class="input is-medium" type="email" placeholder="hello@example.com" value="' . esc_attr( $commenter['comment_author_email'] ) .
		'">
	</p>
</div>',
		'url'    => '<div class="field">
	<label class="label">Url</label>
	<p class="control">
		<input id="url" name="url" class="input is-medium" type="url" placeholder="https://example.com">
	</p>
</div>',
	) ),
	'comment_field' => '<div class="field">
	<label class="label">Message</label>
	<p class="control">
		<textarea id="comment" name="comment" class="textarea" placeholder="Your thoughts…" required></textarea>
	</p>
</div>',
		'class_submit' => 'button is-primary',
);

comment_form( $comment_args );
?>
	</div>
</section>
	</div>
</section>

Frankenstein.php

/**
 * Override core Walker_Comment for mf2 & Bulma.
 *
 * @method __construct
 */
class Independence_Walker_Comment extends Walker_Comment {
/**
		 * Start the element output.
		 *
		 * This opens the comment.  Will check if the comment has children or is a stand-alone comment.
		 *
		 * @access public
		 * @since 0.1.0
		 *
		 * @see Walker::start_el()
		 * @see wp_list_comments()
		 *
		 * @global int        $comment_depth
		 * @global WP_Comment $comment
		 *
		 * @param string $output  Passed by reference. Used to append additional content.
		 * @param object $comment Comment data object.
		 * @param int    $depth   Depth of comment in reference to parents.
		 * @param array  $args    An array of arguments.
		 */
		public function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 )
		{

				$depth++;
				$GLOBALS['comment_depth'] = $depth;
				$GLOBALS['comment'] = $comment;

				if ( !empty( $args['callback'] ) ) {
						ob_start();
						call_user_func( $args['callback'], $comment, $args, $depth );
						$output .= ob_get_clean();
						return;
				}

				if ( ( 'pingback' == $comment->comment_type || 'trackback' == $comment->comment_type ) && $args['short_ping'] ) {
						ob_start();
						$this->ping( $comment, $depth, $args );
						$output .= ob_get_clean();
				} elseif ( 'html5' === $args['format'] ) {
						ob_start();
						if ( !empty( $args['has_children'] ) ) {
								$this->start_parent_html5_comment( $comment, $depth, $args );
						} else {
								$this->html5_comment( $comment, $depth, $args );
						}
						$output .= ob_get_clean();
				} else {
						ob_start();
						$this->comment( $comment, $depth, $args );
						$output .= ob_get_clean();
				}
		}


		/**
		 * Ends the element output, if needed.
		 *
		 * This ends the comment.  Will check if the comment has children or is a stand-alone comment.
		 *
		 * @access public
		 * @since 0.1.0
		 *
		 * @see Walker::end_el()
		 * @see wp_list_comments()
		 *
		 * @param string     $output  Passed by reference. Used to append additional content.
		 * @param WP_Comment $comment The comment object. Default current comment.
		 * @param int        $depth   Depth of comment.
		 * @param array      $args    An array of arguments.
		 */
		public function end_el( &$output, $comment, $depth = 0, $args = array() )
		{
				if ( !empty( $args['end-callback'] ) ) {
						ob_start();
						call_user_func( $args['end-callback'], $comment, $args, $depth );
						$output .= ob_get_clean();
						return;
				}

				if ( !empty( $args['has_children'] ) && 'html5' === $args['format']) {
						ob_start();
						$this->end_parent_html5_comment( $comment, $depth, $args );
						$output .= ob_get_clean();
				} else {
						if ( 'div' == $args['style'] ) {
								$output .= "</div><!-- #comment-## -->\n";
						} else {
								$output .= "</li><!-- #comment-## -->\n";
						}
				}
		}


		/**
		 * Output the beginning of a parent comment in the HTML5 format.
		 *
		 * Bootstrap media element requires child comments to be nested within the parent media-body.
		 * The original comment walker writes the entire comment at once, this method writes the opening
		 * of a parent comment so children comments can be nested within.
		 *
		 * @access protected
		 * @since 0.1.0
		 *
		 * @see http://getbootstrap.com/components/#media
		 * @see wp_list_comments()
		 *
		 * @param object $comment Comment to display.
		 * @param int    $depth   Depth of comment.
		 * @param array  $args    An array of arguments.
		 */
		protected function start_parent_html5_comment( $comment, $depth, $args )
		{
				$this->html5_comment( $comment, $depth, $args, $is_parent = true );
		}


		/**
		 * Output a comment in the HTML5 format.
		 *
		 * @access protected
		 * @since 0.1.0
		 *
		 * @see wp_list_comments()
		 *
		 * @param object  $comment   Comment to display.
		 * @param int     $depth     Depth of comment.
		 * @param array   $args      An array of arguments.
		 * @param boolean $is_parent Flag indicating whether or not this is a parent comment
		 */
		protected function html5_comment( $comment, $depth, $args, $is_parent = false )
		{

				$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';

				$type = get_comment_type();

				$comment_classes = array();
				$comment_classes[] = 'media';

				// if it's a parent
				if ( $this->has_children ) {
						$comment_classes[] = 'parent';
						$comment_classes[] = 'has-children';
				}

				// if it's a child
				if ( $comment->comment_parent > 0 ) {
						$comment_classes[] = 'child';
						$comment_classes[] = 'has-parent';
						$comment_classes[] = 'parent-' . $comment->comment_parent;
				}

				$comment_classes = apply_filters( 'wp_bootstrap_comment_class', $comment_classes, $comment, $depth, $args );

				$class_str = implode(' ', $comment_classes);

?>
				<<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $class_str, $comment ); ?>>

						<article id="div-comment-<?php comment_ID(); ?>" class="media">

							<?php $author_url = get_comment_meta( $comment->comment_ID, 'semantic_linkbacks_author_url', true );
			$author_img = get_comment_meta( $comment->comment_ID, 'semantic_linkbacks_avatar', true );
							?>
							<figure class="media-left">
								<p class="image is-64x64">
									
									<?php echo get_avatar( $comment, 65, '[default gravatar URL]', 'Author’s gravatar' ); ?>
								</p>
							</figure>
								<div class="media-content">

									<div class="content is-medium">
						<p>
							<strong><?php printf( __( '%s <span class="says">says:</span>' ), sprintf( '<b class="fn">%s</b>', get_comment_author_link( $comment ) ) ); ?></strong>
							<br>
							 <?php comment_text(); ?>
							<br>
							<small>
								<a href="<?php echo esc_url( get_comment_link( $comment, $args ) ); ?>">
								 <span class="comment-time">
										 <time datetime="<?php comment_time( 'c' ); ?>">
											 <?php
												 /* translators: 1: comment date, 2: comment time */
												 printf( __( '%1$s at %2$s' ), get_comment_date( '', $comment ), get_comment_time() );
										 ?>
										 </time>
									 </span>
									 <?php edit_comment_link( __( 'Edit' ), '<span class="edit-link">', '</span>' ); ?>
								 </a>
								 <?php comment_reply_link( array( 'depth' => $depth, 'max_depth' => $args[ 'max_depth'], 'before' => '<span class="reply">', 'after' => '</span>' )
			 						, $comment->comment_ID
			 						, $comment->comment_post_ID
			 				); ?>
							 </small>
						</p>
						<?php if ( '0' == $comment->comment_approved ) : ?>
				 <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p>
					<?php endif; ?>

										<?php if ( $is_parent ) { ?>
												<div class="child-comments">
										<?php } else { ?>
										</div><!-- /.media-content -->
												</article><!-- /.media -->
										<?php } ?>

<?php
		}

		/**
		 * Output the end of a parent comment in the HTML5 format.
		 *
		 * Bootstrap media element requires child comments to be nested within the parent media-body.
		 * The original comment walker writes the entire comment at once, this method writes the end
		 * of a parent comment so child comments can be nested within.
		 *
		 * @see http://getbootstrap.com/components/#media
		 *
		 * @access protected
		 * @since 0.1.0
		 *
		 * @see wp_list_comments()
		 *
		 * @param object $comment Comment to display.
		 * @param int    $depth   Depth of comment.
		 * @param array  $args    An array of arguments.
		 */
		protected function end_parent_html5_comment( $comment, $depth, $args )
		{
				$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
?>
										</div><!-- /.child-comments -->
								</div><!-- /.media-body -->
						</article><!-- /.comment-body -->
				</<?php echo $tag; ?>><!-- /.parent -->

<?php
		}


		/**
		 * Output a pingback comment.
		 *
		 * @access protected
		 * @since 0.1.0
		 *
		 * @see wp_list_comments()
		 *
		 * @param WP_Comment $comment The comment object.
		 * @param int        $depth   Depth of comment.
		 * @param array      $args    An array of arguments.
		 */
		protected function ping( $comment, $depth, $args ) {

				$tag = ( 'div' == $args['style'] ) ? 'div' : 'li';

				$comment_classes = array();
				$comment_classes[] = 'media';

				$comment_classes = apply_filters( 'wp_bootstrap_comment_class', $comment_classes, $comment, $depth, $args );

				$class_str = implode(' ', $comment_classes);
?>
				<<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $class_str, $comment ); ?>>
						<div class="comment-body">
								<div class="media-body">
										<?php _e( 'Pingback:' ); ?> <?php comment_author_link( $comment ); ?> <?php edit_comment_link( __( 'Edit' ), '<span class="edit-link">', '</span>' ); ?>
								</div><!-- /.media-body -->
						</div><!-- /.comment-body -->
<?php
		}


		/**
		 * Generate avatar markup
		 *
		 * @access protected
		 * @since 0.1.0
		 *
		 * @param object $comment Comment to display.
		 * @param array  $args    An array of arguments.
		 */
		protected function get_comment_author_avatar( $comment, $args )
		{
				$avatar_string = get_avatar( $comment, $args['avatar_size'] );
				$comment_author_url = get_comment_author_url( $comment );

				if ( '' !== $comment_author_url ) {
						$avatar_string = sprintf(
								'<a href="%1$s" class="author-link url" rel="external nofollow">%2$s</a>',
								esc_url($comment_author_url),
								$avatar_string
						);
				};

				return $avatar_string;
		}


		/**
		 * Displays the HTML content for reply to comment link.
		 *
		 * @access protected
		 * @since 0.1.0
		 *
		 * @param object $comment   Comment being replied to. Default current comment.
		 * @param int    $depth     Depth of comment.
		 * @param array  $args      An array of arguments for the Walker Object
		 * @param string $add_below The id of the element where the comment form will be placed
		 */
		protected function comment_reply_link( $comment, $depth, $args, $add_below = 'div-comment' )
		{
				$type = get_comment_type();

		if ( 'pingback' === $type || 'trackback' === $type ) {
				return;
		}

				comment_reply_link( array_merge( $args, array(
						'add_below' => $add_below,
						'depth'     => $depth,
						'max_depth' => $args['max_depth'],
						'before'    => '<div id="reply-comment-' . $comment->comment_ID . '" class="reply">',
						'after'     => '</div>',
				) ) );
	}

}