Migrate to bootstrap 4

Update nav to use wordpress bootstrap walker, prettify header a little
west-sussex-scouts · Mar 10, 2019 · 4b4fb3d · 4b4fb3d
1 parent ddd884e
commit 4b4fb3d
Show file tree

Hide file tree

Showing 31 changed files with 3,400 additions and 89 deletions.
diff --git a/footer.php b/footer.php
@@ -10,5 +10,5 @@
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <?php wp_footer(); ?>
diff --git a/front-page.php b/front-page.php
@@ -6,18 +6,14 @@
       <div id="fb-root"></div>
       <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.2"></script>
     <?php endif ?>
-    <div class="container-fluid">
+    <?php require 'template-parts/header/header.php';?>
+    <div class="content container">
       <div class="row">
-        <div class="col-md-12">
-          <?php require 'template-parts/header/header.php';?>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-8 col-md-offset-1">
-        <h1><?php echo get_bloginfo( 'name', 'raw' )?></h1>
-        <?= get_post_field('post_content', $post->ID) ?>
+        <div class="col-md">
+          <h1><?php echo get_bloginfo( 'name', 'raw' )?></h1>
+          <?= get_post_field('post_content', $post->ID) ?>
         </div>
-        <div class="col-md-3">
+        <div class="col-3">
         <?php require 'template-parts/social_bar/social_bar.php';?>
         </div>
       </div>

diff --git a/functions.php b/functions.php
@@ -115,5 +115,11 @@ function add_social_media_to_customizer($wp_customize) {
 //Optional: Set the branch that contains the stable release.
 $myUpdateChecker->setBranch('master');
 
+require get_template_directory() . '/wp-bootstrap-navwalker/class-wp-bootstrap-navwalker.php';
+
+register_nav_menus( array(
+	'header-menu' => esc_html__( 'Header', 'theme-textdomain' ),
+) );
+
 
 ?>
diff --git a/style.css b/style.css
@@ -2,7 +2,7 @@
 Theme Name: Scouts - 2018
 Author: West Sussex Scouts Media Team
 Description: Wordpress Template for UK Scouting meeting the 2018 branding
-Version: 1.0.5
+Version: 1.0.6
 Tags: bootstrap
 */
 
@@ -30,63 +30,14 @@ h3{
   font-weight: 700;
 }
 
-#body_container{
-height:100%
-}
-
-#header_container{
-  width:100%;
-  min-height:80px;
-  margin: 0 auto;
-  border-bottom: 5px solid #7413dc;
-}
-
-#header_content{
-  max-width: 1200px;
-  min-height:80px;
-  margin: 0 auto;
-  vertical-align: center;
-}
-
-#header_logo{
-  width:100px;
-  height:auto;
-  float:left;
-  vertical-align: center;
-}
-
-#header_menu{
-  max-width:1000px;
-  height: 80px;
-  float:left;
-  vertical-align: middle;
-}
-
-#header_menu ul{
-  list-style-type:none;
-  margin: 0;
-  padding:30px;
-}
-
-#header_menu li {
-  display: inline;
-  padding: 5px;
-
-}
-
-#header_menu a{
+.header a{
   color: #7413dc;
-  font-weight:900;
-  text-decoration: none;
 }
 
-#header_menu a:hover{
-  color:#000000;
-  font-weight:900;
-  text-decoration: none;
+.header a:hover{
+  color:#00a794;
 }
 
-
 #index_container{
   max-width: 1200px;
   min-height: 300px;
@@ -115,8 +66,38 @@ margin-bottom: 5px;
   padding-bottom: 15px;
 
 }
-img.custom-logo{
-  max-width: 100% !important;
-  min-height: 80px;
-  height: auto;
+.navbar-brand img{
+  max-width: 136px;
+  max-height: 62px;
+}
+.container>.navbar-header{
+  margin-right: 0;
+  margin-left: 0;
+}
+
+@media (min-width: 768px){
+  .navbar-header {
+      float: left;
+  }
+}
+.header.header > .navbar {
+  -webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
+  box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
+}
+
+#main-nav {
+  position: fixed;
+  width: 100%;
+  z-index: 1000;
+  min-height: 75px;
+  margin-bottom: 0;
+}
+
+.navbar{
+  background: #FFFFFF;
+}
+
+
+.content{
+  padding-top: 60px;
 }
diff --git a/template-parts/head/head.php b/template-parts/head/head.php
@@ -18,7 +18,7 @@ function theme_slug_render_title() {
     ?>
 
     <!-- Bootstrap core CSS -->
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css  " rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700,800,900" rel="stylesheet">
 
     <!-- Custom styles for this template -->

diff --git a/template-parts/header/header.php b/template-parts/header/header.php
@@ -1,18 +1,35 @@
-<div id="header_container">
-  <div id="header_content">
-    <?php if(function_exists('the_custom_logo')): ?>
-    <div id="header_logo">
-      <span class="helper"></span>
-      <?php the_custom_logo() ?>
-    </div>
-    <?php endif ?>
-    <div id="header_menu">
-      <?php wp_nav_menu(
-            array(
-                'theme_location' => 'header-menu',
-                'container_class' => 'header-menu'
-                )
-      );?>
+<header id="home" class="header" itemtype="http://schema.org/WPHeader" style="min-height: 76px;">
+  <div id="main-nav" class="navbar" style="min-height: 76px;">
+    <div class="container">
+      <div class="navbar-header responsive-logo">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="navbar-brand">
+            <a href="/">
+              <?php
+                $custom_logo_id = get_theme_mod( 'custom_logo' );
+                $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
+              ?>
+              <img src="<?php echo $image[0]; ?>" alt="<?php echo get_bloginfo( 'name', 'raw' )?>"">
+            </a>
+        </div> <!-- /.navbar-brand -->
+      </div> <!-- /.navbar-header -->
+      <nav class="navbar navbar-expand-lg navbar-light" id="header_content">
+        <div class="collapse navbar-collapse" id="navbar-content">
+          <?php
+          wp_nav_menu( array(
+            'theme_location'  => 'header-menu',
+            'depth'	          => 2, // 1 = no dropdowns, 2 = with dropdowns.
+            'container'       => false,
+            'container_id'    => 'bs-example-navbar-collapse-1',
+            'menu_class'      => 'navbar-nav mr-auto',
+            'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
+            'walker'          => new WP_Bootstrap_Navwalker(),
+          ) );
+          ?>
+        </div>
+      </nav>
     </div>
   </div>
-</div>
+</header>
diff --git a/template-parts/social_bar/social_bar.php b/template-parts/social_bar/social_bar.php
@@ -1,13 +1,21 @@
 <h3>Find us on Social Media!</h3>
 <ul class="nav nav-tabs">
-    <?php if (get_option('twitter_handle')): ?><li class="active"><a data-toggle="tab" href="#twitter_feed">Twitter</a></li><?php endif ?>
-    <?php if (get_option('facebook_handle')): ?><li><a data-toggle="tab" href="#facebook_feed">Facebook</a></li><?php endif ?>
+    <?php if (get_option('twitter_handle')): ?>
+    <li class="nav-item">
+      <a class="nav-link active" id="twitter-feed-tab" data-toggle="tab" href="#twitter_feed" role="tab" aria-controls="twitter-feed" aria-selected="true">Twitter</a>
+    </li>
+    <?php endif ?>
+    <?php if (get_option('facebook_handle')): ?>
+    <li class="nav-item">
+      <a class="nav-link" id="facebook-feed-tab" data-toggle="tab" href="#facebook_feed" role="tab" aria-controls="facebook-feed" aria-selected="false">Facebook</a>
+    </li>
+    <?php endif ?>
 </ul>
 <div class="tab-content">
-  <div id="twitter_feed" class="tab-pane fade in active">
+  <div class="tab-pane fade show active" id="twitter_feed" role="tabpanel" aria-labelledby="twitter-feed-tab">
   <?php if (get_option('twitter_handle')): ?><a class="twitter-timeline" data-dnt="true" data-link-color="#7413dc" data-tweet-limit="3" data-chrome="nofooter" href="https://twitter.com/<?php echo get_option('twitter_handle')?>?ref_src=twsrc%5Etfw">Tweets by <?php echo get_option('twitter_handle')?></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><?php endif ?>
   </div>
-  <div id="facebook_feed" class="tab-pane fade">
+  <div class="tab-pane fade" id="facebook_feed" role="tabpanel" aria-labelledby="facebook-feed-tab">
   <?php if (get_option('facebook_handle')): ?>
     <div class="fb-page" data-href="<?php echo get_option('facebook_handle')?>" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="<?php echo get_option('facebook_handle')?>" class="fb-xfbml-parse-ignore"><a href="<?php echo get_option('facebook_handle')?>">Facebook</a></blockquote></div>
   <?php endif ?>

diff --git a/wp-bootstrap-navwalker/.codeclimate.yml b/wp-bootstrap-navwalker/.codeclimate.yml
@@ -0,0 +1,63 @@
+---
+engines:
+  csslint:
+    enabled: true
+  duplication:
+    enabled: true
+    config:
+      languages:
+      - javascript
+      - php
+  fixme:
+    enabled: true
+  phpcodesniffer:
+    enabled: true
+    config:
+      standard: "WordPress-Core,WordPress-Docs,WordPress-Extra"
+  phpmd:
+    enabled: true
+    checks:
+      Controversial/CamelCaseParameterName:
+        enabled: false
+      Controversial/CamelCaseMethodName:
+        enabled: false
+      Controversial/CamelCasePropertyName:
+        enabled: false
+      Controversial/CamelCaseVariableName:
+        enabled: false
+      CleanCode/ElseExpression:
+        enabled: false
+  eslint:
+    enabled: true
+  scss-lint:
+    enabled: true
+  markdownlint:
+    enabled: true
+ratings:
+  paths:
+  - "**.css"
+  - "**.scss"
+  - "**.inc"
+  - "**.js"
+  - "**.jsx"
+  - "**.module"
+  - "**.php"
+  - "**.md"
+  - "**.py"
+  - "**.rb"
+exclude_paths:
+  - "**.png"
+  - "**.jpg"
+  - "**.gif"
+  - "gulpfile.js"
+  - "composer.lock"
+  - "phpcs.xml"
+  - "**.json"
+  - "**.pot"
+  - "**.txt"
+  - "**.min.js"
+  - "**.min.css"
+  - "**.dist"
+  - "**.sh"
+  - "tests/*"
+  - "dummy-data/*"
diff --git a/wp-bootstrap-navwalker/.csslintrc b/wp-bootstrap-navwalker/.csslintrc
@@ -0,0 +1,4 @@
+--exclude-exts=.min.css
+--ignore=adjoining-classes,box-model,ids,order-alphabetical,unqualified-attributes
+--exclude-exts=.min.css
+--ignore=adjoining-classes,box-model,ids,order-alphabetical,unqualified-attributes
diff --git a/wp-bootstrap-navwalker/.editorconfig b/wp-bootstrap-navwalker/.editorconfig
@@ -0,0 +1,21 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[{.jshintrc,*.json,*.yml}]
+indent_style = space
+indent_size = 2
+
+[{*.txt,wp-config-sample.php}]
+end_of_line = crlf
diff --git a/wp-bootstrap-navwalker/.eslintignore b/wp-bootstrap-navwalker/.eslintignore
@@ -0,0 +1,2 @@
+**/*{.,-}min.js
+**/*{.,-}min.js