working: footer widgets, searchform, search results

404.php

@@ -4,7 +4,7 @@
  *
  * @link https://codex.wordpress.org/Creating_an_Error_404_Page
  *
- * @package Freeshifter
+ * @package AdamPion73k
  */
 
 get_header(); ?>

README.md

@@ -6,7 +6,7 @@ The WordPress theme for 73k.us, based on Bootstrap 5 and PurgeCSS.
 - [Composer](https://getcomposer.org)
 
 ## How to get started
-1. Clone or [download](https://github.com/freeshifter/wp-73k/archive/master.zip "Download the WP Tailwind Zip") the project onto your `themes` directory `(./wp-content/themes)`
+1. Clone or [download](https://github.com/AdamPion73k/wp-73k/archive/master.zip "Download the WP Tailwind Zip") the project onto your `themes` directory `(./wp-content/themes)`
 2. Run a find/replace for the following strings:
 - `wp-73k`
 - `WP_73k`

TODO.md

@@ -34,16 +34,15 @@
 - [X] ~~*SYNTAX HIGHLIGHTING PLUGIN*~~ [2021-07-10]
   - [X] ~~*wrapping lines now? how to ensure nowrap?*~~ [2021-07-10]
 - [X] ~~*add remaining content*~~ [2021-07-10]
-- [ ] blog pagination?
+- [X] ~~*blog pagination?*~~ [2021-07-10]
-- [ ] footer 'sidebar' (blog-only)?
+- [X] ~~*footer 'sidebar' (blog-only)?*~~ [2021-07-10]
-  - [ ] date archives?
+  - [X] ~~*date archives?*~~ [2021-07-10]
-  - [ ] tag archives?
+  - [X] ~~*tag archives?*~~ [2021-07-10]
-  - [ ] search?
+  - [X] ~~*search?*~~ [2021-07-10]
-  - [ ] meta? etc?
+  - [X] ~~*meta? etc?*~~ [2021-07-10]
-  - [ ] sidebar.php ??
+  - [X] ~~*sidebar.php ??*~~ [2021-07-10]
-- [ ] search field up top somewhere?
+- [X] ~~*search field up top somewhere?*~~ [2021-07-10]
-  - [ ] search.php ??
+  - [X] ~~*search.php ??*~~ [2021-07-10]
-- [ ] comments.php & article post handling (form, styling, etc?)
 - [ ] 404.php
   - [ ] NGINX SNIPPETS - bring in for testing!
   - [ ] nginx 404 handling?
@@ -58,6 +57,7 @@
   - [ ] jetpack? markdown from that one?
   - [ ] caching? lighthouse report (cat-roof webp, woff2 fonts)
     - [ ] [info](https://wordpress.org/support/article/optimization/#browser-caching)
+- [ ] comments.php & article post handling (form, styling, etc?)
   - [ ] comments? discussion?
   - [ ] indieweb stuff?
 - [ ] use wordpress for filebrowser login auth?

assets/css/_bs-colors.scss

@@ -1,9 +1,10 @@
 // Colors
-$primary: #e48663;
+// -- now defined in bs-custom --
-$secondary: #00b0b0;
+// $primary: #e48663;
-$success: #99c24d;
+// $secondary: #00b0b0;
-$info: #b489c7;
+// $success: #99c24d;
-$warning: #f4d35e;
+// $info: #b489c7;
+// $warning: #f4d35e;
 
 $white: #fff;
 $gray-100: #e8e8e8;
@@ -35,10 +36,6 @@ $custom-colors: (
   "gray-dark": $gray-800,
 );
 
-// $custom-colors: (
-//   "custom-color": #900
-// );
-
 // Merge the maps
 $theme-colors: map-merge($theme-colors, $custom-colors);
 
@@ -48,3 +45,4 @@ $navbar-dark-hover-color: rgba($white, 0.9);
 $navbar-dark-active-color: $white;
 $navbar-dark-disabled-color: rgba($white, 0.45);
 $navbar-dark-toggler-border-color: rgba($white, 0.3);
+$component-active-bg: $primary;

assets/css/_bs-custom.scss

@@ -1,7 +1,7 @@
 /* Bootstrap custom variable overrides */
 
 // Typography
-$font-size-base: 1.1rem;
+$font-size-base: 1.125rem;
 
 $font-family-serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond",
   Baskerville, "Times New Roman", "Droid Serif", Times, serif,
@@ -19,3 +19,11 @@ $font-family-base: $font-family-serif;
 // Features
 $enable-shadows: true;
 $enable-negative-margins: true;
+
+// init colors for some vars
+$primary: #e48663;
+$secondary: #00b0b0;
+$success: #99c24d;
+$info: #b489c7;
+$warning: #f4d35e;
+$component-active-bg: $secondary;

assets/css/app.scss

@@ -88,8 +88,11 @@ a {
 .fs-smaller {
   font-size: smaller;
 }
-.footer73k {
+.tek-fixed-footer {
-  position: fixed !important;
+  @extend .bg-dark;
+  @extend .bottom-0;
+  @extend .end-0;
+  @extend .position-fixed;
   font-size: 14px !important;
   border-top-left-radius: 0.3rem !important;
   padding-top: 2px;
@@ -100,7 +103,7 @@ a {
   @extend .font-monospace;
   @extend .text-gray-300;
   @extend .mb-0;
-  margin-top: -0.5rem;
+  // margin-top: -0.5rem;
 }
 .tek-border-bottom-gray-dashed {
   @extend .border-bottom;
@@ -235,3 +238,58 @@ blockquote {
 .more-link {
   @extend .fs-6;
 }
+
+/* widget styling */
+#footer-widgets {
+  background-color: $gray-750;
+  border-radius: .5em;
+  .widgettitle {
+    @extend .fs-4;
+  }
+  .wp-block-group {
+    @extend .px-3;
+    @extend .py-3;
+    max-width: 25rem;
+  }
+  .wp-block-loginout {
+    display: list-item;
+    margin-left: 2rem;
+    list-style-type: disc;
+  }
+}
+.wp-block-tag-cloud {
+  @extend .mb-0;
+}
+.search-form .form-control {
+  color: $gray-100 !important;
+  background-color: $gray-800 !important;
+  border-color: $gray-500;
+}
+.search-form .form-control:focus {
+  border-color: $input-focus-border-color;
+}
+.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+  color:    $gray-500    !important;
+}
+.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  color:    $gray-500    !important;
+  opacity:  1;
+}
+.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
+  color:    $gray-500    !important;
+  opacity:  1;
+}
+.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color:    $gray-500    !important;
+}
+.form-control::-ms-input-placeholder { /* Microsoft Edge */
+  color:    $gray-500    !important;
+}
+.form-control::placeholder { /* Most modern browsers support this now. */
+  color:    $gray-500    !important;
+}
+.search-form .btn-outline-light:hover {
+  color: $primary;
+  background-color: inherit;
+  border-color: $secondary;
+}

assets/js/main.js

@@ -14,8 +14,7 @@ import "../../node_modules/@mdi/svg/svg/typewriter.svg";
 import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
 import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
 import "../../node_modules/@mdi/svg/svg/rss.svg";
-import "../../node_modules/@mdi/svg/svg/account-hard-hat.svg";
+import "../../node_modules/@mdi/svg/svg/magnify.svg";
-import "../../node_modules/@mdi/svg/svg/open-in-new.svg";
 // social
 import "../../node_modules/@mdi/svg/svg/linkedin.svg";
 import "../../node_modules/@mdi/svg/svg/github.svg";

comments.php

@@ -7,7 +7,7 @@
  *
  * @link    https://codex.wordpress.org/Template_Hierarchy
  *
- * @package Freeshifter
+ * @package AdamPion73k
  */
 
 /*

footer.php

@@ -6,18 +6,61 @@
  *
  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  *
- * @package Freeshifter
+ * @package AdamPion73k
  */
 
 namespace WP_73k;
 
 ?>
 
-  <footer class="footer73k footer bottom-0 end-0 bg-dark">
+  <?php
-    <div class="px-2 px-sm-3">
+    // FIRST: if this is frontpage, we just do the sticky bottom right copyright footer
-      <span class="text-gray-300">&copy; Copyright <?php echo date("Y") ?> Adam Piontek</span>
+    if ($args && $args['frontpage']) {
-    </div>
+  ?>
-  </footer>
+    
+    <footer class="tek-fixed-footer">
+      <div class="px-2 px-sm-3 text-gray-400">
+        &copy; Copyright <?php echo date("Y") ?> Adam Piontek
+      </div>
+    </footer>
+
+  <?php } else {
+    // Not frontpage? Then show regular footer
+  ?>
+
+    <footer class="d-flex flex-column align-items-center mt-2 px-3 py-3">
+
+      <?php
+        // widget content for blog content footers:
+        if (!is_page()) :
+      ?>
+
+      <div id="footer-widgets" class="col-12 col-sm-9 col-md-11 col-lg-10 col-xl-9 col-xxl-8 d-flex flex-column align-items-center">
+        <div class="px-3 pt-3 pb-1">
+          <?php echo get_search_form(); ?>
+        </div>
+        <div class="d-flex flex-wrap flex-column flex-md-row justify-content-start justify-content-md-center align-items-start">
+
+          <?php
+            if ( is_active_sidebar( 'footer-widgets' ) ) :
+              dynamic_sidebar( 'footer-widgets' );
+            endif;
+            ?>
+
+        </div>
+      </div>
+
+      <?php
+        endif;
+        // Regular footer content for all but front page:
+        ?>
+
+      <span class="text-gray-400 mt-3">&copy; Copyright <?php echo date("Y") ?> Adam Piontek</span>
+
+
+    </footer>
+
+  <?php } ?>
 
   <?php wp_footer(); ?>
 

front-page.php

@@ -33,4 +33,4 @@ get_header('', array('fixednav'=>true)); ?>
   </div>
 </main>
 <?php
-get_footer();
+get_footer('', array('frontpage'=>true));

header.php

@@ -6,7 +6,7 @@
  *
  * @link    https://developer.wordpress.org/themes/basics/template-files/#template-partials
  *
- * @package Freeshifter
+ * @package AdamPion73k
  */
 
 namespace WP_73k;
@@ -75,6 +75,12 @@ namespace WP_73k;
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
+      <?php if (!is_page()) : ?> 
+        <div class="d-none d-lg-flex ms-2">
+          <?php echo get_search_form(); ?>
+        </div>
+      <?php endif; ?>
+
       <?php
         if ( has_nav_menu( 'primary' ) ) {
           wp_nav_menu([
@@ -92,6 +98,12 @@ namespace WP_73k;
         }
       ?>
 
+      <?php if (!is_page()) : ?> 
+        <div class="d-flex d-lg-none mt-2">
+          <?php echo get_search_form(); ?>
+        </div>
+      <?php endif; ?>
+
     </div>
 
   </div>

index.php

@@ -12,16 +12,16 @@ get_header(); ?>
 <main class="container d-flex justify-content-center">
   <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
 
-    <?php if (is_archive()) { ?>
+    <?php if (is_archive()) : ?>
     <h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed"><?= get_the_archive_title(); ?></h1>
 
     <?php
-      }
+      endif;
-      if ( have_posts() ) {
+      if ( have_posts() ) :
-        while ( have_posts() ) {
+        while ( have_posts() ) :
           the_post();
           echo get_template_part( 'content-templates/content', 'article' );
-        }
+        endwhile;
     ?>
 
       <nav class="d-flex justify-content-between" aria-label="Page navigation">
@@ -30,16 +30,10 @@ get_header(); ?>
       </nav>
 
     <?php
-      }
+      endif;
     ?>
 
-    <!-- ?php // if ( !is_active_sidebar( 'sidebar' ) ) : ? -->
-      <!-- <aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8"> -->
-        <!-- ?php // dynamic_sidebar( 'sidebar' ); ? -->
-      <!-- </aside> -->
-    <!-- ?php // endif; ? -->
-
   </div>
 </main>
 <?php
-get_footer();
+get_footer('', array('frontpage'=>false));

search.php

@@ -4,63 +4,42 @@
  *
  * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
  *
- * @package Freeshifter
+ * @package AdamPion73k
  */
 
 get_header(); ?>
 
-<main class="py-8 lg:py-24" style="min-height: 100vh;">
+<main class="container d-flex justify-content-center">
-  <section class="container mx-auto relative z-10">
+  <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
+
+    <?php if (have_posts()) : ?>
+    <h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed">
+      Search results for: <?php echo esc_html( get_search_query() ); ?></h1>
+
     <?php
-    if ( have_posts() ) :
+        while ( have_posts() ) :
+          the_post();
+          echo get_template_part( 'content-templates/content', 'article' );
+        endwhile;
+    ?>
 
-      printf( '<h1 class="text-center mb-8">Search Results for: %s</h1>',
+      <nav class="d-flex justify-content-between" aria-label="Page navigation">
-        esc_html( get_search_query() )
+        <div class="nav-previous alignleft"><?php next_posts_link( '&larr; Older' ); ?></div>
-      );
+        <div class="nav-next alignright"><?php previous_posts_link( 'Newer &rarr;' ); ?></div>
+      </nav>
 
-      echo '<div class="lg:flex justify-start flex-wrap lg:-mx-4">';
+    <?php
-        while ( have_posts() ) {
+      else :
-          the_post(); ?>
-          <div class="lg:w-1/3 lg:px-4 mb-8">
-            <article <?php post_class( 'h-full' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
-              <a class="card-link h-full bg-light-2" rel="bookmark" href="<?= esc_url( get_the_permalink() ); ?>">
-                <header>
-                  <?php
-                  if( has_post_thumbnail() ) {
-                    the_post_thumbnail( 'thumbnail', [
-                      'class' => 'shadow-lg rounded-full float-right ml-2 mb-2 w-1/4'
-                    ]);
-                  }
-                  ?>
-                  <div class="text-left relative z-10">
-                    <h2 class="card-title text-h4 font-bold m-0" itemprop="headline"><?= get_the_title(); ?></h2>
-                    <p class="text-sm italic mt-2">
-                      <time class="<?= is_singular('page') ? 'hidden' : ''; ?>" itemprop="datePublished" datetime="<?= get_the_date( 'c' ); ?>">Published on <?= get_the_date( 'F j, Y'); ?></time>
-                    </p>
-                  </div>
-                </header>
-                <?php
-                printf( '<div class="article text-sm text-left">%s</div>',
-                  get_the_excerpt()
-                ); ?>
-              </a>
-            </article>
-          </div>
-          <?php
-        }
-      echo '</div>';
 
-      the_posts_navigation();
+        echo '<h1 class="text-gray-300 fst-italic mb-4 tek-border-bottom-gray-dashed">Search: nothing found</h1>';
 
-    else :
+        printf( 'Sorry, no results for %s',
+          esc_html( get_search_query() )
+        );
+      endif;
+    ?>
 
-      printf( 'Sorry, no results for %s',
+  </div>
-        esc_html( get_search_query() )
-      );
-
-    endif; ?>
-  </section>
 </main>
-
 <?php
-get_footer();
+get_footer('', array('frontpage'=>false));

searchform.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * The searchform.php template.
+ *
+ * Used any time that get_search_form() is called.
+ *
+ * @link https://developer.wordpress.org/reference/functions/wp_unique_id/
+ * @link https://developer.wordpress.org/reference/functions/get_search_form/
+ */
+
+/*
+ * Generate a unique ID for each form and a string containing an aria-label
+ * if one was passed to get_search_form() in the args array.
+ */
+$seventythreek_unique_id = wp_unique_id( 'search-form-' );
+
+$seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . esc_attr( $args['aria_label'] ) . '"' : '';
+?>
+<form role="search" <?php echo $seventythreek_aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form flex-fill flex-sm-grow-0" action="<?php echo esc_url( home_url( '/' ) ); ?>">
+  <div class="d-flex flex-nowrap">
+    <label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search&hellip;', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
+    <input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog&hellip;" />
+    <button type="submit" class="btn btn-outline-light" title="Search">
+      <?php echo svg_icon_use('mdi-magnify', 'icon baseline'); ?>
+    </button>
+  </div>
+</form>

sidebar.php

@@ -1,16 +0,0 @@
-<?php
-/**
- * The sidebar containing the main widget area.
- *
- * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
- *
- * @package Freeshifter
- */
-
-if ( ! is_active_sidebar( 'sidebar-1' ) ) {
-  return;
-} ?>
-
-<div class="widget-area" role="complementary">
-  <?php dynamic_sidebar( 'sidebar-1' ); ?>
-</div><!-- #secondary -->

src/classes.php

@@ -81,3 +81,16 @@ add_filter( 'document_title_separator', function ( $separator ) {
 add_filter('document_title_parts', function ($title) {
   return (is_home() || is_front_page()) ? $title : array_reverse($title);
 });
+
+
+/**
+ * Exclude pages from WordPress Search
+ */
+if (!is_admin()) {
+  add_filter('pre_get_posts',function($query) {
+    if ($query->is_search) {
+      $query->set('post_type', 'post');
+    }
+    return $query;
+  });  
+}

src/sidebars.php

@@ -8,13 +8,11 @@ namespace WP_73k;
 add_action( 'widgets_init', function () {
 
   register_sidebar( [
-    'name'          => esc_html( 'Sidebar' ),
+    'name'            => esc_html( 'Footer' ),
-    'id'            => 'sidebar',
+    'id'              => 'footer-widgets',
-    'description'   => '',
+    'description'     => 'Blog page footer area for widgets',
-    'before_widget' => '<section id="%1$s" class="widget %2$s">',
+    'before_widget'   => '<section id="%1$s" class="%2$s widget">',
-    'after_widget'  => '</section>',
+    'after_widget'    => '</section>',
-    'before_title'  => '<h4 class="widget-title">',
-    'after_title'   => '</h4>',
   ] );
 
 } );