How to use it

 

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.

 

 

10 thoughts on “How to use it

  1. Thanks for the beautiful theme.

    How about IOTheme Option in the customizer. Its blank. How to make good use of that? If no, how can I remove it?

    Thanks

    SF

  2. Is this being maintained? I’m wanting to use it for a new project.
    If I want to update the CSS, can I do that in the SASS files? And if so, how do I generate a new style.css from this? Or should I simply make changes in the style.css? (but why supply the sass if so?)
    Thanks for this helpful project!

    1. Thanks for using our product,
      The main CSS used is the framework (Bootstrap and Foundation) so except this folder (‘CSS’ folder), the rest is for users to edit (‘SASS’ folder).
      Have a good time!

  3. I’m not sure I understand your answer to my questions.
    With Foundation framework, I would normally run a build script to convert the SASS files into a distributable CSS file. Is it possible to do this with your theme? If I edit the SASS files, how do I create a new CSS file from them?
    Thanks for the quick response!

    1. I’m talking about the structure of the start theme, all sass of Bootstrap (or Foundation) save in CSS dir, and all sass customizing save in SASS dir. You can download it to see.

Leave a Reply

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