created three widget areas and menus for home page in orther to presonalize it

functions.php

@@ -26,10 +26,8 @@ require_once( 'library/class-foundationpress-comments.php' );
 /** Register all navigation menus */
 require_once( 'library/navigation.php' );
 
-/** Add menu walkers for top-bar and off-canvas */
+/** Add menu walkers */
-require_once( 'library/class-foundationpress-top-bar-walker.php' );
+require_once( 'library/class-foundationpress-menu-walkers.php' );
-//require_once( 'library/class-foundationpress-mobile-walker.php' );
-require_once( 'library/class-foundationpress-home-hero-walker.php' );
 
 /** Create widget areas in sidebar and footer */
 require_once( 'library/widget-areas.php' );

library/class-foundationpress-home-hero-walker.php

@@ -1,20 +0,0 @@
-<?php
-/**
- * Customize the output of menus for Home Hero bottom bar
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-/**
- * Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker
- */
-
-if ( ! class_exists( 'Foundationpress_Home_Hero_Bar_Walker' ) ) :
-	class Foundationpress_Home_Hero_Bar_Walker extends Walker_Nav_Menu {
-		function start_lvl( &$output, $depth = 0, $args = array() ) {
-			$indent  = str_repeat( "\t", $depth );
-			$output .= "\n$indent<ul class=\"menu\">\n";
-		}
-	}
-endif;

library/class-foundationpress-menu-walkers.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Customize the output of menus
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+/**
+ * Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker
+ */
+
+/**
+ * Customize the output of menus for Foundation mobile walker
+ */
+
+//if ( ! class_exists( 'Foundationpress_Mobile_Walker' ) ) :
+//	class Foundationpress_Mobile_Walker extends Walker_Nav_Menu {
+//		function start_lvl( &$output, $depth = 0, $args = array() ) {
+//			$indent  = str_repeat( "\t", $depth );
+//			$output .= "\n$indent<ul class=\"vertical nested menu\">\n";
+//		}
+//	}
+//endif;
+
+/**
+ * Customize the output of menus for Foundation top bar
+ */
+
+if ( ! class_exists( 'Foundationpress_Top_Bar_Walker' ) ) :
+	class Foundationpress_Top_Bar_Walker extends Walker_Nav_Menu {
+		function start_lvl( &$output, $depth = 0, $args = array() ) {
+			$indent  = str_repeat( "\t", $depth );
+			$output .= "\n$indent<ul class=\"dropdown menu vertical\" data-toggle>\n";
+		}
+	}
+endif;
+/**
+ * Customize the output of menus for Home Hero bottom bar
+ */
+
+if ( ! class_exists( 'Foundationpress_Home_Hero_Bar_Walker' ) ) :
+	class Foundationpress_Home_Hero_Bar_Walker extends Walker_Nav_Menu {
+		function start_lvl( &$output, $depth = 0, $args = array() ) {
+			$indent  = str_repeat( "\t", $depth );
+			$output .= "\n$indent<ul class=\"menu\">\n";
+		}
+	}
+endif;
+
+/**
+ * Customize the output of menus for Home Hero middle bottom bar
+ */
+if ( ! class_exists( 'Foundationpress_Home_Hero_Middle_Bar_Walker' ) ) :
+	class Foundationpress_Home_Hero_Middle_Bar_Walker extends Walker_Nav_Menu {
+		function start_lvl( &$output, $depth = 0, $args = array() ) {
+			$indent  = str_repeat( "\t", $depth );
+			$output .= "\n$indent<ul class=\"menu\">\n";
+		}
+	}
+endif;
+
+/**
+ * Customize the output of menus for Home Hero Last bottom bar
+ */
+if ( ! class_exists( 'Foundationpress_Home_Hero_Last_Bar_Walker' ) ) :
+	class Foundationpress_Home_Hero_Last_Bar_Walker extends Walker_Nav_Menu {
+		function start_lvl( &$output, $depth = 0, $args = array() ) {
+			$indent  = str_repeat( "\t", $depth );
+			$output .= "\n$indent<ul class=\"menu\">\n";
+		}
+	}
+endif;

library/class-foundationpress-mobile-walker.php

@@ -1,20 +0,0 @@
-<?php
-/**
- * Customize the output of menus for Foundation mobile walker
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-/**
- * Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker
- */
-
-if ( ! class_exists( 'Foundationpress_Mobile_Walker' ) ) :
-	class Foundationpress_Mobile_Walker extends Walker_Nav_Menu {
-		function start_lvl( &$output, $depth = 0, $args = array() ) {
-			$indent  = str_repeat( "\t", $depth );
-			$output .= "\n$indent<ul class=\"vertical nested menu\">\n";
-		}
-	}
-endif;

library/class-foundationpress-top-bar-walker.php

@@ -1,20 +0,0 @@
-<?php
-/**
- * Customize the output of menus for Foundation top bar
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-/**
- * Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker
- */
-
-if ( ! class_exists( 'Foundationpress_Top_Bar_Walker' ) ) :
-	class Foundationpress_Top_Bar_Walker extends Walker_Nav_Menu {
-		function start_lvl( &$output, $depth = 0, $args = array() ) {
-			$indent  = str_repeat( "\t", $depth );
-			$output .= "\n$indent<ul class=\"dropdown menu vertical\" data-toggle>\n";
-		}
-	}
-endif;

library/navigation.php

@@ -10,8 +10,10 @@
 register_nav_menus(
 	array(
 		'top-bar-r'  => esc_html__( 'Right Top Bar', 'foundationpress' ),
+		'home-hero-bar' => esc_html__( 'Home Hero Bar', 'foundationpress' ),
+		'home-hero-middle-bar' => esc_html__( 'Home Hero Middle Bar', 'foundationpress' ),
+		'home-hero-last-bar' => esc_html__( 'Home Hero Last Bar', 'foundationpress' ),
 //		'mobile-nav' => esc_html__( 'Mobile', 'foundationpress' ),
-		'home-hero-bar' => esc_html__( 'Home Hero bar', 'foundationpress' ),
 	)
 );
 
@@ -38,6 +40,72 @@ if ( ! function_exists( 'foundationpress_top_bar_r' ) ) {
 }
 
 
+
+
+/**
+ * Desktop navigation - Home Hero bottom bar
+ *
+ * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
+ */
+if ( ! function_exists( 'foundationpress_home_hero_bar' ) ) {
+	function foundationpress_home_hero_bar() {
+		wp_nav_menu(
+			array(
+				'container'      => 'nav', // include the nav container
+				'menu_class'     => 'menu button hollow',
+				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+				'theme_location' => 'home-hero-bar',
+				'depth'          => 3,
+				'fallback_cb'    => false,
+				'walker'         => new Foundationpress_Home_Hero_Bar_Walker(),
+			)
+		);
+	}
+}
+
+
+/**
+ * Desktop navigation - Home Hero middle bottom bar
+ *
+ * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
+ */
+if ( ! function_exists( 'foundationpress_home_hero_middle_bar' ) ) {
+	function foundationpress_home_hero_middle_bar() {
+		wp_nav_menu(
+			array(
+				'container'      => 'nav',//true, // include the nav container
+				'menu_class'     => 'menu button hollow',
+				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+				'theme_location' => 'home-hero-middle-bar',
+				'depth'          => 3,
+				'fallback_cb'    => false,
+				'walker'         => new Foundationpress_Home_Hero_Middle_Bar_Walker(),
+			)
+		);
+	}
+}
+
+/**
+ * Desktop navigation - Home Hero Last bottom bar
+ *
+ * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
+ */
+if ( ! function_exists( 'foundationpress_home_hero_last_bar' ) ) {
+	function foundationpress_home_hero_last_bar() {
+		wp_nav_menu(
+			array(
+				'container'      => 'nav',//true, // include the nav container
+				'menu_class'     => 'menu button hollow',
+				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+				'theme_location' => 'home-hero-last-bar',
+				'depth'          => 3,
+				'fallback_cb'    => false,
+				'walker'         => new Foundationpress_Home_Hero_Last_Bar_Walker(),
+			)
+		);
+	}
+}
+
 /**
  * Mobile navigation - topbar (default) or offcanvas
  */
@@ -58,29 +126,6 @@ if ( ! function_exists( 'foundationpress_top_bar_r' ) ) {
 //}
 
 
-
-/**
- * Desktop navigation - Home Hero bottom bar
- *
- * @link http://codex.wordpress.org/Function_Reference/wp_nav_menu
- */
-if ( ! function_exists( 'foundationpress_home_hero_bar' ) ) {
-	function foundationpress_home_hero_bar() {
-		wp_nav_menu(
-			array(
-				'container'      => false,
-				'menu_class'     => 'menu button hollow',
-				'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
-				'theme_location' => 'home-hero-bar',
-				'depth'          => 3,
-				'fallback_cb'    => false,
-				'walker'         => new Foundationpress_Home_Hero_Bar_Walker(),
-			)
-		);
-	}
-}
-
-
 /**
  * Add support for buttons in the top-bar menu:
  * 1) In WordPress admin, go to Apperance -> Menus.

library/widget-areas.php

@@ -13,6 +13,8 @@ if ( ! function_exists( 'foundationpress_sidebar_widgets' ) ) :
 				'id'            => 'home-announcement-widgets',
 				'name'          => __( 'Home Announcement widgets', 'foundationpress' ),
 				'description'   => __( 'Drag widgets to this Home page container that will show at the top.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides">',
+				'after_sidebar' => '</main>',
 				'before_widget' => '<section id="%1$s" class="widget slide home-announcement %2$s">',
 				'after_widget'  => '</section>',
 				'before_title'  => '<h6>',
@@ -24,6 +26,8 @@ if ( ! function_exists( 'foundationpress_sidebar_widgets' ) ) :
 				'id'            => 'home-announcement-middle-widgets',
 				'name'          => __( 'Home Announcement Middle widgets', 'foundationpress' ),
 				'description'   => __( 'Drag widgets to this Home page container that will show in the middle.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides">',
+				'after_sidebar' => '</main>',
 				'before_widget' => '<section id="%1$s" class="widget slide home-middle-announcement %2$s">',
 				'after_widget'  => '</section>',
 				'before_title'  => '<h6>',
@@ -35,6 +39,8 @@ if ( ! function_exists( 'foundationpress_sidebar_widgets' ) ) :
 				'id'            => 'home-announcement-bottom-widgets',
 				'name'          => __( 'Home Announcement Bottom widgets', 'foundationpress' ),
 				'description'   => __( 'Drag widgets to this Home page container that will show at the bottom.', 'foundationpress' ),
+				'before_sidebar'=> '<main class="slides">',
+				'after_sidebar' => '</main>',
 				'before_widget' => '<section id="%1$s" class="widget slide home-bottom-announcement %2$s">',
 				'after_widget'  => '</section>',
 				'before_title'  => '<h6>',

page-templates/front.php

@@ -16,6 +16,6 @@ get_header(); ?>
 
 	<?php get_template_part( 'template-parts/home', 'announcement-middle' ); ?>
 
-	<?php get_template_part( 'template-parts/home', 'announcement-bottom' ); ?>
+	<?php get_template_part( 'template-parts/home', 'announcement-last' ); ?>
 
 <?php get_footer();

src/assets/scss/modules/_content.scss

@@ -273,9 +273,12 @@
             padding: $global-padding*3; 
           }
         }
-        &:first-child {
+        &:nth-child(odd) {
             background-color: $primary-color;
             font-variant:all-small-caps;
+            * {
+              color: $white;
+            }
         }
         color: $white;
 

template-parts/home-announcement-bottom.php

@@ -1,19 +0,0 @@
-<?php
-/**
- * The breaking div containing the main widget area
- *
- * @package arcHIVE-theme
- * @since arcHIVE-theme 1.0.0
- */
-
-?>
-<section class="hero">
-   <main class="slides">
-    <?php dynamic_sidebar( 'home-announcement-bottom-widgets' ); ?>
-   </main>
-  <aside>
-    <nav>
-      <?php //foundationpress_home_hero_bar(); ?>
-    </nav>
-  </aside>
-</section>

template-parts/home-announcement-last.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * The breaking div containing the last main widget area
+ *
+ * @package arcHIVE-theme
+ * @since arcHIVE-theme 1.0.0
+ */
+
+?>
+<section class="hero">
+   <!--main class="slides"-->
+    <?php dynamic_sidebar( 'home-announcement-last-widgets' ); ?>
+   <!--/main-->
+  <aside>
+      <?php foundationpress_home_hero_last_bar(); ?>
+  </aside>
+</section>

template-parts/home-announcement-middle.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * The breaking div containing the main widget area
+ * The breaking div containing the middle main widget area
  *
  * @package arcHIVE-theme
  * @since arcHIVE-theme 1.0.0
@@ -8,12 +8,10 @@
 
 ?>
 <section class="hero">
-   <main class="slides">
+   <!--main class="slides"-->
     <?php dynamic_sidebar( 'home-announcement-middle-widgets' ); ?>
-   </main>
+   <!--/main-->
   <aside>
-    <nav>
+      <?php foundationpress_home_hero_middle_bar(); ?>
-      <?php //foundationpress_home_hero_bar(); ?>
-    </nav>
   </aside>
 </section>

template-parts/home-announcement.php

@@ -8,12 +8,10 @@
 
 ?>
 <section class="hero">
-   <main class="slides">
+   <!--main class="slides"-->
     <?php dynamic_sidebar( 'home-announcement-widgets' ); ?>
-   </main>
+   <!--/main-->
   <aside>
-    <nav>
       <?php foundationpress_home_hero_bar(); ?>
-    </nav>
   </aside>
 </section>