Category: Tutorial

 

Simple starter theme anyone can use.

Edit /style.scss for CSS and /js/custom.js for JS.

 

Feature:

Base on Underscores.

Foundation CSS framework.

Mobile with offcanvas menu.

Dashicons, the official icon font from WordPress.

Custom theme name, text domain and more.

Update source from Underscores and Foundation everyday.

 

Base on Underscores with some change:

/functions.php

Add:

wp_enqueue_style( 'your_slug-foundation', get_template_directory_uri() . '/css/foundation.css' );
wp_enqueue_style( 'your_slug-font', 'https://fonts.googleapis.com/css?family=Saira+Semi+Condensed:400,700' );
wp_enqueue_style( 'your_slug-dashicons', get_home_url() . '/wp-includes/css/dashicons.css' );
wp_enqueue_style( 'your_slug-custom', get_template_directory_uri() . '/custom.css' );
wp_enqueue_script( 'your_slug-foundation-js', get_template_directory_uri() . '/js/vendor/foundation.js', array('jquery'), '6.x.x', true );
wp_enqueue_script( 'your_slug-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true );

 

/header.php

Replace class="site" by class="site grid-container"
Replace class="site-header" by class="site-header grid-x grid-padding-x"
Replace class="site-branding" by class="site-branding large-4 medium-4 small-12 cell"
Replace class="main-navigation" by class="main-navigation large-8 medium-8 small-12 cell"
Replace class="site-content" by class="site-content grid-x grid-padding-x"
Replace <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'iot-slug' ); ?></button>

 

/sidebar.php

Replace class="widget-area" by class="widget-area large-4 medium-4 small-12 cell"

 

/404.php

Replace class="content-area" by class="content-area large-12 medium-12 small-12 cell"

 

/index.php

Replace class="content-area" by class="content-area large-8 medium-8 small-12 cell"

 

/archive.php

Replace class="content-area" by class="content-area large-8 medium-8 small-12 cell"

 

/search.php

Replace class="content-area" by class="content-area large-8 medium-8 small-12 cell"

 

/page.php

Replace class="content-area" by class="content-area large-8 medium-8 small-12 cell"

 

/single.php

Replace class="content-area" by class="content-area large-8 medium-8 small-12 cell"

 

Add new folders:

/css/

/images/

/js/vendor/

 

Add new files:

/css/app.css

/css/foundation.css

/css/foundation.min.css

/custom.css

/js/custom.js

/js/vendor/foundation.js

/js/vendor/foundation.min.js

/js/vendor/jquery.js

/js/vendor/what-input.js

 

 

Bootstrap 4 supports the latest, stable releases of all major browsers and platforms.