How to use it

 

Simple starter theme anyone can use.

Edit /custom.css 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 coming soon.

 

 

2 thoughts on “How to use it

Leave a Reply

Your email address will not be published. Required fields are marked *