Simple starter theme anyone can use.
Edit /style.scss for CSS and /js/custom.js for JS.
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.phpAdd: 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.phpReplace 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.phpReplace class="widget-area" by class="widget-area large-4 medium-4 small-12 cell"
/404.phpReplace class="content-area" by class="content-area large-12 medium-12 small-12 cell"
/index.phpReplace class="content-area" by class="content-area large-8 medium-8 small-12 cell"
/archive.phpReplace class="content-area" by class="content-area large-8 medium-8 small-12 cell"
/search.phpReplace class="content-area" by class="content-area large-8 medium-8 small-12 cell"
/page.phpReplace class="content-area" by class="content-area large-8 medium-8 small-12 cell"
/single.phpReplace 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”
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?
In function.php, you can edit (or remove) lines 199 to 236.
Full document: https://codex.wordpress.org/Theme_Customization_API
I hope this could help you!
the topic on the post page does not show the widget area
there is also no field to send comments
and footer site
I checked and didn’t see problems like you said.
Maybe this article will help you: https://docs.presscustomizr.com/article/51-how-to-enable-or-disable-comments-for-page-in-wordpress
How to use what
For Foundation version, Bootstrap coming soon, thanks!
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!
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!
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!
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.