WordPress · Apr 23, 2019 · Apr 23, 2019 · Apr 23, 2019 · Apr 23, 2019 · Apr 24, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+*.min.css
+*.map
+scss/*.css
+site.css
+vendor/*
+wpcs/*
diff --git a/404.php b/404.php
@@ -4,46 +4,48 @@
  *
  * @link https://codex.wordpress.org/Creating_an_Error_404_Page
  *
- * @package Gutenbergtheme
+ * @package ThemeWPUGPH
  */
 
 get_header(); ?>
-	
+
 	<main id="primary" class="site-main">
 
 		<section class="error-404 not-found">
+
 			<header class="page-header">
-				<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'gutenbergtheme' ); ?></h1>
+				<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'themewpugph' ); ?></h1>
 			</header><!-- .page-header -->
 
 			<div class="page-content">
-				<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'gutenbergtheme' ); ?></p>
+				<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'themewpugph' ); ?></p>
 
 				<?php
 					get_search_form();
-
 					the_widget( 'WP_Widget_Recent_Posts' );
 				?>
 
 				<div class="widget widget_categories">
-					<h2 class="widget-title"><?php esc_html_e( 'Most Used Categories', 'gutenbergtheme' ); ?></h2>
+					<h2 class="widget-title"><?php esc_html_e( 'Most Used Categories', 'themewpugph' ); ?></h2>
 					<ul>
-					<?php
-						wp_list_categories( array(
-							'orderby'    => 'count',
-							'order'      => 'DESC',
-							'show_count' => 1,
-							'title_li'   => '',
-							'number'     => 10,
-						) );
-					?>
+						<?php
+						wp_list_categories(
+							array(
+								'orderby'    => 'count',
+								'order'      => 'DESC',
+								'show_count' => 1,
+								'title_li'   => '',
+								'number'     => 10,
+							)
+						);
+						?>
 					</ul>
 				</div><!-- .widget -->
 
 				<?php
 
 					/* translators: %1$s: smiley */
-					$archive_content = '<p>' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', 'gutenbergtheme' ), convert_smilies( ':)' ) ) . '</p>';
+					$archive_content = '<p>' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', 'themewpugph' ), convert_smilies( ':)' ) ) . '</p>';
 					the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$archive_content" );
 
 					the_widget( 'WP_Widget_Tag_Cloud' );

diff --git a/README.md b/README.md
@@ -1,8 +1,44 @@
-# Gutenberg theme
-This theme is designed to showcase what Gutenberg can do with regards to themes. It is intended as a work in progress, at least until v1 of the new editor (and maybe beyond).
+# Theme WPUGPH
+Modern Theme using UIKit 3 with good support for Gutenberg block styling. Based on gutenbergtheme https://github.com/WordPress/gutenberg-starter-theme.
 
-# Block focused
+Work in progress.
+
+## Block focused
 If something isn't a block yet, this theme will not have it. As each block happens, the theme will gain that functionality.
 
-# Styling just like Gutenberg
+## Styling just like Gutenberg
 The idea of the default look for this theme is to as closely replicate that of the Gutenberg editor output as possible. As a result the focus is on that styling not creating a new look.. yet. As things grow, we may have styles and go further into what the theme can have... who knows.
+
+## GNU General Public License v2
+This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others.
+
+## Plugins and Test Data
+After WordPress setup follow these steps:
+
+1. Install plugin: [Query Monitor](https://wordpress.org/plugins/query-monitor/) by Jogn Blackbourn
+2. Install test data: [WP Test](https://github.com/poststatus/wptest#installation)
+
+## Theme Installation and Setup
+1. Clone inside theme folder: /wp-content/themes
+```git clone --recursive https://github.com/wpugph/themewpugph.git```
+2. Install dependencies
+```composer install```
+3. Compile stylesheet site.scss
+4. Activate the theme
+
+## Dependecies
+- [UIKit 3](https://github.com/uikit/uikit) - A lightweight and modular front-end framework for developing fast and powerful web interfaces
+- [Carbon Fields](https://github.com/htmlburger/carbon-fields) - A developer-oriented library for WordPress custom fields for all types of WordPress content.
+
+## Roadmap ([See v1](https://github.com/wpugph/gutenberg-starter-theme/projects/1))
+- Integrate UIKit 3
+- Basic Gutenblocks for UIKit 3 components
+- WP UIkit Customizer
+- A11y ready
+
+## Philosophy
+- Time is precious commodity
+- Lean and DRY, minimum dependencies
+- Simple but readable code
+- Made for Child Theme developers and hackers
+- Always take advantage of modern WordPress core
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-cayman
diff --git a/archive.php b/archive.php
@@ -4,15 +4,16 @@
  *
  * @link https://codex.wordpress.org/Template_Hierarchy
  *
- * @package Gutenbergtheme
+ * @package ThemeWPUGPH
  */
 
 get_header(); ?>
 
 	<main id="primary" class="site-main">
 
 	<?php
-	if ( have_posts() ) : ?>
+	if ( have_posts() ) :
+		?>
 
 		<header class="page-header">
 			<?php
@@ -22,8 +23,10 @@
 		</header><!-- .page-header -->
 
 		<?php
-		/* Start the Loop */
-		while ( have_posts() ) : the_post();
+			/* Start the Loop */
+		while ( have_posts() ) :
+
+			the_post();
 
 			/*
 				* Include the Post-Format-specific template for the content.
@@ -36,13 +39,14 @@
 
 		the_posts_navigation();
 
-	else :
+		else :
 
-		get_template_part( 'template-parts/content', 'none' );
+			get_template_part( 'template-parts/content', 'none' );
 
-	endif; ?>
+		endif;
+		?>
 
-	</main>><!-- #primary -->
+	</main><!-- #primary -->
 
 <?php
 get_footer();
diff --git a/comments.php b/comments.php
@@ -7,7 +7,7 @@
  *
  * @link https://codex.wordpress.org/Template_Hierarchy
  *
- * @package Gutenbergtheme
+ * @package ThemeWPUGPH
  */
 
 /*
@@ -24,20 +24,21 @@
 
 	<?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;', 'gutenbergtheme' ),
-					'<span>' . get_the_title() . '</span>'
+					esc_html_e( 'One thought on &ldquo;%1$s&rdquo;', 'themewpugph' ),
+					'<span>' . esc_html( get_the_title() ) . '</span>'
 				);
 			} else {
 				printf( // WPCS: XSS OK.
 					/* translators: 1: comment count number, 2: title. */
-					esc_html( _nx( '%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comment_count, 'comments title', 'gutenbergtheme' ) ),
+					esc_html( _nx( '%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comment_count, 'comments title', 'themewpugph' ) ),
 					number_format_i18n( $comment_count ),
 					'<span>' . get_the_title() . '</span>'
 				);
@@ -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();
-
-		// 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.', 'gutenbergtheme' ); ?></p>
 		<?php
+		the_comments_navigation();
+
+			// 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
 		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/composer.json b/composer.json
@@ -0,0 +1,13 @@
+{
+    "require": {
+        "squizlabs/php_codesniffer": "*",
+        "htmlburger/carbon-fields": "^3.1",
+        "uikit/uikit": "^3.1"
+    },
+    "scripts": {
+        "install-wpcs": [
+            "composer create-project wp-coding-standards/wpcs --no-dev",
+            "./vendor/bin/phpcs --config-set installed_paths ./wpcs"
+        ]
+    }
+}