:bulb:

footer.php

@@ -1,17 +1,45 @@
-  <div class="footer text-white pt-5">
+  <div class="footer text-white pt-5 pb-5">
   <?php if ( is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) || is_active_sidebar( 'footer-3' ) ) { ?>
     <div id="footer-widget" class="row m-0">
       <div class="container">
         <div class="row">
-          <?php if ( is_active_sidebar( 'footer-1' )) : ?>
-            <div class="col-12 col-md-4"><?php dynamic_sidebar( 'footer-1' ); ?></div>
-          <?php endif; ?>
-          <?php if ( is_active_sidebar( 'footer-2' )) : ?>
-            <div class="col-12 col-md-4"><?php dynamic_sidebar( 'footer-2' ); ?></div>
-          <?php endif; ?>
-          <?php if ( is_active_sidebar( 'footer-3' )) : ?>
-            <div class="col-12 col-md-4"><?php dynamic_sidebar( 'footer-3' ); ?></div>
-          <?php endif; ?>
+          <div class="col-12 col-md-4">
+            <?php if ( is_active_sidebar( 'footer-1' )) :  dynamic_sidebar( 'footer-1' ); endif; ?>
+                <h3 class="widget-title">Follow Us</h3>
+                <a class="btn btn-outline-secondary notlight"><i class="bi bi-facebook"></i> <small>Hospice</small></a>
+                <a class="btn btn-outline-secondary notlight"><i class="bi bi-twitter"></i></a>
+                <a class="btn btn-outline-secondary notlight"><i class="bi bi-instagram"></i></a>
+                <a class="btn btn-outline-secondary notlight"><i class="bi bi-youtube"></i></a>
+                <br/>
+                <a class="btn btn-outline-secondary notlight mt-1"><i class="bi bi-facebook"></i> <small>Greenwood Store</small> </a>
+                <a class="btn btn-outline-secondary notlight mt-1"><i class="bi bi-facebook"></i> <small>Abbeville Store</small> </a>
+          </div>
+          <div class="col-12 col-md-4">
+            <?php if ( is_active_sidebar( 'footer-2' )) :  dynamic_sidebar( 'footer-2' ); endif; ?>
+          </div>
+            <div class="col-12 col-md-4">
+              <!-- php if ( is_active_sidebar( 'footer-3' )) :  dynamic_sidebar( 'footer-3' ); endif; -->
+              <h3 class="widget-title">Newsletter</h3>
+              <p></p>
+              <form class="mc">
+                <label class="notlight">Sign up to receive email updates from us.</label>
+                <div class="form-group row">
+                  <div class="col">
+                    <input type="text" class="form-control" placeholder="First name">
+                  </div>
+                  <div class="col">
+                    <input type="text" class="form-control" placeholder="Last name">
+                  </div>
+                </div>
+                <div class="form-group row">
+                  <div class="col">
+                    <input type="email" class="form-control" id="inputEmail4" placeholder="Email Address">
+                  </div>
+                </div>
+                <button type="submit" class="btn btn-outline-light">Sign up</button>
+                <a href="newsletter" class="btn btn-outline-secondary notlight"><i class="bi bi-archive"></i> Archive</a>
+              </form>
+            </div>
         </div>
       </div>
     </div>

front-page.php

@@ -6,9 +6,6 @@
         <div id="main" class="site-main" role="main">
           <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
             <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-            <header class="entry-header">
-              <h1 class="entry-title">About</h1>
-            </header>
             <div class="entry-content">
               <?php the_content(); ?>
             </div>
@@ -21,12 +18,54 @@
           <h2 class="entry-title">Get Involved</h2>
           <?php $post = get_post(7); $output = apply_filters( 'the_content', $post->post_content ); echo $output; ?>
         </header>
+          <h2 class="entry-title mt-5">Hospice Stores</h2>
+        <div class="row no-gutters">
+          <img src="https://macs.local/hp/wp-content/uploads/2017/02/Hospice-Store-ribbon-cutting-2015-website-1-scaled.jpg">
+          <div class="col-sm-12 col-lg-6">
+            <h5><a href="">Greenwood</a></h5>
+            <p class="small">
+            864-229-9393<br />
+            217 North Creek Blvd<br />
+            Greenwood, SC 29649</p>
+          </div>
+          <div class="col-sm-12 col-lg-6">
+            <h5><a href="">Abbeville</a></h5>
+            <p class="small">
+            864-366-0237<br />
+            811 West Greenwood Street<br />
+            Abbeville, SC 29620</p>
+          </div>
+          <a href="" class="btn btn-outline-secondary">Learn More</a>
+        </div>
         <header class="entry-header">
-          <h2 class="entry-title">News</h2>
+          <h2 class="entry-title mt-5">News</h2>
         </header>
-				<?php $recentposts = get_posts('numberposts=11'); foreach ($recentposts as $post) : setup_postdata($post); ?>
-				       <li style="color:#777;list-style:none;"><?php echo get_the_date('m/d/y'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
-				<?php endforeach; ?>
+        <div class="">
+
+  				<?php $mostrecentposts = new WP_Query();
+          $mostrecentposts = get_posts('numberposts=1');
+          foreach ($mostrecentposts as $post) : setup_postdata($post); ?>
+
+          <div class="row no-gutters">
+            <div class="col-md-12">
+              <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
+              <div class="image-wrapper float-left pr-3">
+                <?php the_post_thumbnail('thumbnail', array('class' => 'rounded')); ?>
+              </div>
+              <div class="pull-right">
+                <?php the_excerpt(); ?>
+              </div>
+            </div>
+          </div>
+
+  				<?php endforeach;wp_reset_query();?>
+        </div>
+        <hr>
+        <div class="">
+  				<?php $recentposts = get_posts(array('numberposts'=>11,'offset'=>1)); foreach ($recentposts as $post) : setup_postdata($post); ?>
+  				       <li style="color:#777;list-style:none;"><?php echo get_the_date('m/d/y'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
+  				<?php endforeach; ?>
+        </div>
       </section>
     </div>
   </div>

gulpfile.js

@@ -8,16 +8,21 @@ const gulp = require('gulp'),
       browserSync = require('browser-sync').create();
 
 gulp.task('copy', async function() {
-  gulp.src('./node_modules/bootstrap/dist/js/bootstrap.bundle.js')
+  gulp.src([
+    './node_modules/bootstrap/dist/js/bootstrap.bundle.js',
+    './node_modules/jasny-bootstrap/dist/js/jasny-bootstrap.js'
+  ])
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(purgeSourcemaps())
   .pipe(gulp.dest('./js/'));
-  gulp.src('./node_modules/bootstrap/dist/css/bootstrap.css')
+  gulp.src([
+    './node_modules/bootstrap/dist/css/bootstrap.css',
+    './node_modules/bootstrap-icons/font/bootstrap-icons.css',
+    './node_modules/jasny-bootstrap/dist/css/jasny-bootstrap.css'
+  ])
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(purgeSourcemaps())
   .pipe(gulp.dest('./css/'));
-  gulp.src('./node_modules/bootstrap-icons/font/bootstrap-icons.css')
-  .pipe(gulp.dest('./css/'));
   gulp.src([
     './node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff',
     './node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2'

header.php

@@ -19,7 +19,7 @@
       <nav class="navbar navbar-dark navbar-expand-xl p-0">
         <div class="navbar-brand">
 
-          <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>">Hospice &amp; Palliative <span><img src="<?php echo get_template_directory_uri(); ?>/img/dove-white.png" width="40px"/></span> Care <small>of the Peidmont</small></a>
+          <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>">Hospice &amp; Palliative <span><img src="<?php echo get_template_directory_uri(); ?>/img/dove-white.png" width="40px"/></span> Care &nbsp;<small>of the Peidmont</small></a>
         </div>
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>

inc/hp-templates.php

@@ -17,7 +17,7 @@ function hp_list_child_pages() {
          'echo' => 0
       ));
    else $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
-   $output = '<ul class="nav flex-column"><li class="nav-header list-group-item list-group-item-light py-2">Related Pages:</li>' . $childpages . '</ul>';
+   $output = '<li class="nav-item">' . $childpages . '</ul>';
    return $output;
 }
 add_shortcode('hp_childpages', 'hp_list_child_pages');

js/init.js

@@ -1,5 +1,6 @@
 jQuery( function ( $ ) {
     'use strict';
+
     // here for each comment reply link of WordPress
     $( '.comment-reply-link' ).addClass( 'btn btn-primary' );
 

package-lock.json

@@ -11,6 +11,7 @@
         "@popperjs/core": "^2.6.0",
         "bootstrap": "^4.6.0",
         "bootstrap-icons": "^1.3.0",
+        "jasny-bootstrap": "^4.0.0",
         "jquery": "^3.5.1",
         "popper.js": "^1.16.1"
       },
@@ -4090,6 +4091,11 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "node_modules/jasny-bootstrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jasny-bootstrap/-/jasny-bootstrap-4.0.0.tgz",
+      "integrity": "sha512-NDaZxaxizDjnH/5XESqC8inuas7aAuOn8RkCma4z9xAYfT/UQpZRvnH92oXtAbPA4Hn3jyjqWHzTmd2cyD+DDA=="
+    },
     "node_modules/jquery": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
@@ -11287,6 +11293,11 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "jasny-bootstrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jasny-bootstrap/-/jasny-bootstrap-4.0.0.tgz",
+      "integrity": "sha512-NDaZxaxizDjnH/5XESqC8inuas7aAuOn8RkCma4z9xAYfT/UQpZRvnH92oXtAbPA4Hn3jyjqWHzTmd2cyD+DDA=="
+    },
     "jquery": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "@popperjs/core": "^2.6.0",
     "bootstrap": "^4.6.0",
     "bootstrap-icons": "^1.3.0",
+    "jasny-bootstrap": "^4.0.0",
     "jquery": "^3.5.1",
     "popper.js": "^1.16.1"
   }

page.php

@@ -1,25 +1,46 @@
 <?php get_header();?>
+
 <div id="content" class="site-content">
-<div class="container">
-<div class="row">
-<section id="primary" class="content-area col-sm-12 col-lg-10 offset-lg-1">
-   <div id="main" class="site-main" role="main">
-   <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
-      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-         <header class="entry-header">
-            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
-         </header>
-         <div class="entry-content">
-            <?php the_content(); ?>
-         </div>
-      </article>
-      <div class="meta text-right">
-         <small><i class="bi-alarm"></i> Last Updated: <?php the_modified_time('F jS, Y');?></small>
-      </div>
-   <?php endwhile; ?>
-   </div>
-</section>
-         </div><!-- .row -->
-      </div><!-- .container -->
-   </div><!-- #content -->
+  <div class="container">
+    <nav class="navmenu navmenu-default" role="navigation">
+      <a class="navmenu-brand" href="#">Brand</a>
+      <ul class="nav bs-sidenav flex-column">
+        <li class="nav-item active"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+          <ul class="dropdown-menu navmenu-nav" role="menu">
+            <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
+          </ul>
+        </li>
+        <ul class="nav bs-sidenav flex-column">
+          <?php echo hp_list_child_pages(); ?>
+        </ul>
+      </ul>
+    </nav>
+    <div class="row">
+      <section id="primary" class="content-area col-sm-12 col-lg-10 offset-lg-1">
+        <div id="main" class="site-main" role="main">
+        <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
+          <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+            <header class="entry-header">
+              <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
+            </header>
+            <div class="entry-content">
+              <?php the_content(); ?>
+            </div>
+            <div class="meta text-right">
+              <small><i class="bi-alarm"></i> Last Updated: <?php the_modified_time('F jS, Y');?></small>
+            </div>
+          </article>
+        <?php endwhile; ?>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>
 <?php get_footer();?>

style.css

@@ -82,6 +82,9 @@ h1.lato-widget {
   font-size: 27px;
   color:#d7d7d7;
 }
+.notlight {
+  color:#d7d7d7;
+}
 
 /*--------------------------------------------------------------
 ########################## Elements ##########################
@@ -103,7 +106,22 @@ table {
   margin: 0 0 1.5em;
   width: 100%;
 }
+.wrapper {
+    display: flex;
+    width: 100%;
+}
 
+#sidebar {
+    width: 250px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 999;
+    background: #7386D5;
+    color: #fff;
+    transition: all 0.3s;
+}
 
 /*--------------------------------------------------------------
 ########################## Navigation ##########################
@@ -118,11 +136,11 @@ header#masthead {
 .navbar-brand > a {
   font-family: 'Lato', sans-serif;
   color: rgba(0, 0, 0, 0.9);
-  font-size: 1.1rem;
+  font-size: 21px;
   outline: medium none;
   text-decoration: none;
   color: #fff;
-  font-weight: 700;
+  font-weight: 300;
 }
 .navbar-brand > a:visited, .navbar-brand > a:hover {
   text-decoration: none;
@@ -523,6 +541,15 @@ a img.aligncenter {
   background: rgba(0, 0, 0, 0.2);
   color:#fff;
 }
+form.mc input.form-control {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+form.mc ::placeholder {
+  color:#d7d7d7;
+}
+.textwidget {
+  color:#d7d7d7;
+}
 
 /*--------------------------------------------------------------
 ########################## Content ##########################