Building themesfromscratchwithframeworks
- 1. Building Themes from Scratch with Frameworks David Brattoli Principal Infinite Reality, LLC
- 2. Links https://developer.wordpress.org/themes/basics/template-hierarchy/ https://codex.wordpress.org/Theme_Development#Template_Files http://underscores.me/ http://components.underscores.me/ http://foundation.zurb.com/ http://jointswp.com/
- 3. • Create a New File in your favorite code editor • Paste the following code: jQuery(document).ready(function($) { $(document).foundation(); }); • Save the file as “ foundation.js ” in your theme folder How To Build Your Responsive Theme Foundation Initialization File
- 4. How To Build Your Responsive Theme • Open Functions.php , located in your Underscores theme, in your favorite code editor • Look for a FunctionTitled: function themename_scripts example: dabrattoli_theme_2016_scripts • Click right above it and hit return a few times • Then AddThis Code function wcneo_foundation_scripts() { } • Then Save the file
- 5. How To Build Your Responsive Theme • Find the stylesheet enqueues. • Search for “Enqueue scripts and styles” • Adding Foundation CSS : Add the following two lines to your function. wp_enqueue_style( 'foundation-app', get_stylesheet_directory_uri() . '/foundation/css/app.css' ); wp_enqueue_style( 'foundation-css', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' ); wp_enqueue_style( 'foundation-icons', get_template_directory_uri() . '/foundation/foundation_icons/foundation-icons.css' ); Theme Functions.php
- 6. How To Build Your Responsive Theme • Add a call for your custom styles to your function. wp_enqueue_style( ‘demo-custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1' ); • Add the calls for the foundation js files to your function. wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '1', true ); wp_enqueue_script( 'foundation-modernizr- js', get_template_directory_uri() . '/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', true ); Theme Functions.php
- 7. • Add a call for the foundation init, to your function. wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/foundation.js', array( 'jquery' ), '1', true ); How To Build Your Responsive Theme Theme Functions.php
- 8. Adding the Foundation Script and Stylesheets to WordPress function wcneo_foundation_scripts() { wp_enqueue_style( 'foundation-app', get_stylesheet_directory_uri() . '/foundation/css/app.css' ); wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' ); wp_enqueue_style( ‘demo-custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1' ); wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '1', true ); wp_enqueue_script( 'foundation-modernizr- js', get_template_directory_uri() . '/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', true ); wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/foundation.js', array( 'jquery' ), '1', true ); } add_action( 'wp_enqueue_scripts', 'wcneo_foundation_scripts' ); Theme Functions.php
- 9. How To Build Your Responsive Theme • You now have Foundation plugged into Underscores! • Build your design out!
- 10. David Brattoli Web: www.Infiniterealityllc.com www.Dabrattoli.com Twitter: @DavidMBrattoli Email: davidbrattoli@yahoo.com david.brattoli@infiniterealityllc.com Github: https://github.com/dabrattoli Contact Information