Merge branch 'erwinpagulong-master'

WordPress · May 21, 2019 · 4681f14 · 4681f14
2 parents 954b3c0 + 8e54003
commit 4681f14
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 12 deletions.
diff --git a/comments.php b/comments.php
@@ -24,15 +24,16 @@
 
 	<?php
 	// You can start editing here -- including this comment!
-	if ( have_comments() ) : ?>
+	if ( have_comments() ) :
+		?>
 		<h2 class="comments-title">
 			<?php
 			$comment_count = get_comments_number();
 			if ( 1 === $comment_count ) {
 				printf(
 					/* translators: 1: title. */
 					esc_html_e( 'One thought on &ldquo;%1$s&rdquo;', 'themewpugph' ),
-					'<span>' . get_the_title() . '</span>'
+					'<span>' . esc_html( get_the_title() ) . '</span>'
 				);
 			} else {
 				printf( // WPCS: XSS OK.
@@ -49,24 +50,99 @@
 
 		<ol class="comment-list">
 			<?php
-				wp_list_comments( array(
-					'style'      => 'ol',
-					'short_ping' => true,
-				) );
+			wp_list_comments(
+				array(
+					'walker'      => new ThemeWPUGPH_Comments(),
+					'style'       => 'ol',
+					'short_ping'  => true,
+					'avatar_size' => 50,
+				)
+			);
 			?>
 		</ol><!-- .comment-list -->
 
-		<?php the_comments_navigation();
+		<?php
+		the_comments_navigation();
 
-		// If comments are closed and there are comments, let's leave a little note, shall we?
-		if ( ! comments_open() ) : ?>
+			// If comments are closed and there are comments, let's leave a little note, shall we?
+		if ( ! comments_open() ) :
+			?>
 			<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'themewpugph' ); ?></p>
-		<?php
+			<?php
 		endif;
 
 	endif; // Check for have_comments().
 
-	comment_form();
+	$field_required = $req ? 'required' : '';
+
+	// Comment field.
+	$comment_label = _x( 'Comment', 'noun', 'themewpugph' );
+	$comment_field = <<<UIKIT3
+<div class="uk-margin">
+	<label class="uk-form-label" for="comment">
+		{$comment_label}
+	</label>
+	<div class="uk-form-controls">
+		<textarea id="comment" class="uk-textarea uk-form-width-large" name="comment" required></textarea>
+	</div>
+</div>
+UIKIT3;
+
+	// Author field.
+	$author_label = __( 'Name', 'themewpugph' ) . ( $req ? '<span class="required">*</span>' : '' );
+	$author_value = esc_attr( $commenter['comment_author'] );
+	$author_field = <<<UIKIT3
+<div class="uk-margin">
+	<label class="uk-form-label" for="author">
+		{$author_label}
+	</label>
+	<div class="uk-form-controls">
+		<input id="author" class="uk-input uk-form-width-large" name="author" type="text" value="{$author_value}" {$field_required} />
+	</div>
+</div>
+UIKIT3;
+
+	// Email field.
+	$email_label = __( 'Email', 'themewpugph' ) . ( $req ? '<span class="required">*</span>' : '' );
+	$email_value = esc_attr( $commenter['comment_author_email'] );
+	$email_field = <<<UIKIT3
+<div class="uk-margin">
+	<label class="uk-form-label" for="author">
+		{$email_label}
+	</label>
+	<div class="uk-form-controls">
+		<input id="email" class="uk-input uk-form-width-large" name="email" type="email" value="{$email_value}" {$field_required} />
+	</div>
+</div>
+UIKIT3;
+
+	// URL field.
+	$url_label = __( 'Website', 'themewpugph' );
+	$url_value = esc_attr( $commenter['comment_author_url'] );
+	$url_field = <<<UIKIT3
+<div class="uk-margin">
+<label class="uk-form-label" for="author">
+	{$url_label}
+</label>
+<div class="uk-form-controls">
+	<input id="url" class="uk-input uk-form-width-large" name="url" type="url" value="{$url_value}" />
+</div>
+</div>
+UIKIT3;
+
+	comment_form(
+		array(
+			'class_form'    => 'uk-form-stacked',
+			'class_submit'  => 'uk-button uk-button-primary',
+			'comment_field' => $comment_field,
+			'fields'        => array(
+				'author' => $author_field,
+				'email'  => $email_field,
+				'url'    => $url_field,
+			),
+			'submit_button' => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',
+		)
+	);
 	?>
 
 </div><!-- #comments -->
diff --git a/functions.php b/functions.php
@@ -216,3 +216,8 @@ function teamwpugph_scripts() {
 if ( defined( 'JETPACK__VERSION' ) ) {
 	require get_template_directory() . '/inc/jetpack.php';
 }
+
+/**
+ * Custom Walker Comment
+ */
+require get_template_directory() . '/inc/class-teamwpugph-comments.php';
diff --git a/inc/class-teamwpugph-comments.php b/inc/class-teamwpugph-comments.php
@@ -0,0 +1,96 @@
+<?php
+/**
+ * ThemeWPUGPH Comments
+ * 
+ * @package ThemeWPUGPH
+ */
+
+if ( ! class_exists( 'ThemeWPUGPH_Comments' ) ) :
+  class ThemeWPUGPH_Comments extends Walker_Comment {
+
+	/**
+	 * Outputs a comment in the HTML5 format.
+	 *
+	 * @since 3.6.0
+	 *
+	 * @see wp_list_comments()
+	 *
+	 * @param WP_Comment $comment Comment to display.
+	 * @param int        $depth   Depth of the current comment.
+	 * @param array      $args    An array of arguments.
+	 */
+	protected function html5_comment( $comment, $depth, $args ) {
+		$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
+
+		$commenter = wp_get_current_commenter();
+		if ( $commenter['comment_author_email'] ) {
+			$moderation_note = __( 'Your comment is awaiting moderation.' );
+		} else {
+			$moderation_note = __( 'Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.' );
+		}
+
+		?>
+		<<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>
+
+			<article  id="div-comment-<?php comment_ID(); ?>" class="uk-comment">
+				<header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
+						<div class="uk-width-auto">
+							<?php
+								if ( 0 != $args['avatar_size'] ) {
+									echo get_avatar( $comment, $args['avatar_size'] );}
+							?>
+						</div>
+						<div class="uk-width-expand">
+								<h4 class="uk-comment-title uk-margin-remove">
+									<!-- <a class="uk-link-reset" href="#">Author</a> -->
+									<?php
+										/* translators: %s: comment author link */
+										printf(
+											sprintf( '<b class="fn">%s</b>', get_comment_author_link( $comment ) )
+										);
+									?>
+								</h4>
+								<ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
+										<li>
+											<a href="<?php echo esc_url( get_comment_link( $comment, $args ) ); ?>">
+												<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>
+											</a>
+										</li>
+										<li>
+											<ul class="uk-subnav uk-subnav-line">
+												<?php
+													comment_reply_link(
+														array_merge(
+															$args,
+															array(
+																'add_below' => 'div-comment',
+																'depth'     => $depth,
+																'max_depth' => $args['max_depth'],
+																'before'    => '<li>',
+																'after'     => '</li>',
+															)
+														)
+													);
+													?>			
+												</ul>
+										</li>
+								</ul>
+						</div>
+				</header>
+				<div class="uk-comment-body">
+				<?php comment_text(); ?>
+				</div>
+			</article>
+
+
+
+		<?php
+	}    
+
+  }
+endif; 
diff --git a/scss/_import-mixins.scss b/scss/_import-mixins.scss
@@ -0,0 +1,3 @@
+@mixin hook-form {
+    border: 1px solid $global-muted-color;
+}
diff --git a/scss/variables.scss b/scss/variables.scss
@@ -82,7 +82,7 @@ $global-danger-background:                       #f0506e !default;
 //
 
 $global-border-width:                            1px !default;
-$global-border:                                  #e5e5e5 !default;
+$global-border:                                  $global-muted-color !default;
 
 //
 // Box-Shadows