![\"material-theme1-600x302\"](\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/12\/material-theme1-600x302.png\")
<\/a><\/p>\nTo begin with, we\u2019re going to generate a blank theme from Underscores. For those not familiar, Underscores is an essentially blank starter theme from Automattic, the company that created WordPress. It allows you to generate the basic files needed to create a theme, all namespaced according to your input. For anyone doing theme development, it\u2019s a big timesaver. Give your theme a name, and click \u201cGenerate\u201d. This will result in a zip file download containing your theme files.<\/p>\n
Next, download the Materialize package<\/a>, and extract both zip files into your working directory. (Note: Materialize supports both NPM and Bower, and also supports SASS development. This tutorial will cover traditional CSS, but if you prefer SASS, visit the Materialize Getting Started page and grab the SASS supported\u00a0package). In the Materialize folder, you\u2019ll see\u00a0three directories: css, font, and js. Copy all three to your new theme directory. This should leave you with a directory structure that looks like this:<\/p>\n Next, we need to add\u00a0the scripts and styles from Materialize into our theme. Open up the functions.php, and find your enqueue function. If you\u2019ve been following along exactly, it should start on line 102.\u00a0Because we\u2019re going to be using the Material based navigation, you\u2019ll want to remove the following line in that function:<\/p>\n wp_enqueue_script( ‘yourthemename-navigation’, get_template_directory_uri() . ‘\/js\/navigation.js’, array(), ‘20120206’, false );<\/strong><\/p>\n Delete the associated script (js\/navigation.js), and create a new file called material-custom-scripts.js in the same\u00a0directory to hold your custom JavaScript. Add the following code to it:<\/p>\n jQuery(document).ready(function ($) {<\/strong><\/p>\n $(‘.button-collapse’).sideNav({<\/strong> This initializes the JQuery needed to trigger the side sliding navigation for mobile. We need to use a newer version of JQuery than what is bundled in WordPress, so we\u2019re going to setup a conditional load of JQuery when not in the admin screens, and then enqueue our scripts and styles:<\/p>\n \/\/ Add Material scripts and styles<\/strong> wp_deregister_script(‘jquery’);<\/strong> }<\/strong> Next\u00a0we need to\u00a0make some changes to the theme header file. First, open header.php and\u00a0modify the viewport settings to make sure that users don\u2019t have the ability to artificially zoom the screen and break our mobile patterns:<\/p>\n <meta name=\u00bbviewport\u00bb content=\u00bbwidth=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\u00bb\/><\/strong><\/p>\n Then,\u00a0we need to modify the navigation calls to use our side nav on mobile. Find and replace this:<\/p>\n <nav id=\u00bbsite-navigation\u00bb class=\u00bbmain-navigation\u00bb role=\u00bbnavigation\u00bb><\/strong> With this:<\/p>\n <div class=\u00bbm-container nav\u00bb><\/strong> <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘menu side-nav’, ‘menu_id’ => ‘mobile-nav’,’items_wrap’ => ‘<ul id=\u00bb%1$s\u00bb class=\u00bb%2$s\u00bb><li class=\u00bbmobile-header\u00bb><p>Menu<\/p><\/li>%3$s<\/ul><div class=\u00bbclear\u00bb><\/div>’, ) ); ?><\/strong><\/p>\n <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘hide-on-med-and-down’ ) ); ?><\/strong><\/p>\n <\/nav><!– #site-navigation –><\/strong> This accomplishes a couple of things:<\/p>\n We also need to add a wrapper to float our content to a centered fix width in full screen displays. At the very last line of header.php, add the following:<\/p>\n <div class=\u00bbcontainer\u00bb><\/strong><\/p>\n Open your footer.php, clear any stray floats, and close the container (add above the content closing div):<\/p>\n <div class=\u00bbclear\u00bb><\/div><\/strong> Next, let\u2019s add some CSS to support some of the elements we\u2019ve just put in place. Open up your style.css, and add the following:<\/p>\n .container {<\/strong> I selected 1280px as a max-width based on what I\u2019ve seen Google use in their various applications for a 1920\u00d71080 resolution. You may want to modify that based on your individual needs. Next, we need to modify the default menu styles in a few ways.\u00a0\u00a0The default mobile styles which control menu visibility need to be removed. Find and delete the following:<\/p>\n \/* Small menu. *\/<\/strong> @media screen and (max-width: 600px) {<\/strong> .main-navigation ul {<\/strong> Next, we need to over ride the default material treatment for the nav element, since we\u2019re going to be styling the containing div instead:<\/p>\n .m-container nav {<\/strong> And let\u2019s add a little padding around the site title to bring it in from the edges:<\/p>\n .site-branding {<\/strong> At this point, you have all of the basics in place to run the theme. Load it up in your staging area and view it in the browser. You should see something like this:<\/p>\n <\/p>\n It\u2019s not pretty yet, but we\u2019re now ready to begin the process of making it both beautiful and interactive. In part 2, we\u2019re going to use the Theme Customization API<\/a> to add colour options to our theme, allowing the user to select from one of several palettes based on the Material Design colour schema<\/a>. We\u2019ll also implement Material UI elements, including Card objects, collections, and transition effects.<\/p>\n See something in here that could be done better?\u00a0Tell us about it in the comments.<\/p>\n <\/p>\n \u2018WordPress Materialized: Creating a Material Design Theme, pt. 2 \u2013 Customization, Colors, and Styles\u2019<\/a><\/p>\n \u2018WordPress Materialized: Creating a Material Design Theme, pt. 3 \u2013 Sidebars and Polish\u2019<\/a><\/p>\n <\/p>\n<\/a><\/p>\n
\n menuWidth: 300, \/\/ Default is 240<\/strong>
\n edge: ‘left’, \/\/ Choose the horizontal origin<\/strong>
\n closeOnClick: true \/\/ Closes side-nav on <a> clicks, useful for Angular\/Meteor<\/strong>
\n }<\/strong>
\n );<\/strong>
\n});<\/strong><\/p>\n
\n if( !is_admin()){<\/strong><\/p>\n
\n wp_enqueue_script( ‘material-jquery’, ‘http:\/\/code.jquery.com\/jquery-2.1.3.min.js’, array(), ‘1.0’, false );<\/strong><\/p>\n
\n wp_enqueue_style( ‘material-style’, get_template_directory_uri() . ‘\/css\/materialize.css’ );<\/strong>
\n wp_enqueue_script( ‘material-script’, get_template_directory_uri() . ‘\/js\/materialize.js’, array(), ‘1.0’, false ); <\/strong>
\n wp_enqueue_script( ‘material-custom’, get_template_directory_uri() . ‘\/js\/material-custom-scripts.js’, array(), ‘1.0’, false );<\/strong><\/p>\n
\n <button class=\u00bbmenu-toggle\u00bb aria-controls=\u00bbprimary-menu\u00bb aria-expanded=\u00bbfalse\u00bb><?php _e( ‘Primary Menu’, ‘materialized’ ); ?><\/button><\/strong>
\n <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_id’ => ‘primary-menu’ ) ); ?><\/strong>
\n<\/nav><!– #site-navigation –><\/strong><\/p>\n
\n <div class=\u00bbcontainer\u00bb><\/strong>
\n <nav id=\u00bbsite-navigation\u00bb class=\u00bbmain-navigation\u00bb role=\u00bbnavigation\u00bb><\/strong>
\n <a href=\u00bb#\u00bb data-activates=\u00bbmobile-nav\u00bb class=\u00bbbutton-collapse\u00bb><i class=\u00bbmdi-navigation-menu\u00bb><\/i><\/a><\/strong><\/p>\n
\n <div class=\u00bbclear\u00bb><\/div><\/strong>
\n<\/div><\/strong><\/p>\n\n
\n<\/div><!– .container –><\/strong><\/p>\n
\n padding: 0 .5rem;<\/strong>
\n margin: 0 auto;<\/strong>
\n max-width: 1280px;<\/strong>
\n width: 100%;<\/strong>
\n}<\/strong><\/p>\n
\n.menu-toggle {<\/strong>
\n display: none;<\/strong>
\n}<\/strong><\/p>\n
\n .menu-toggle,<\/strong>
\n .main-navigation.toggled .nav-menu {<\/strong>
\n display: block;<\/strong>
\n }<\/strong><\/p>\n
\n display: none;<\/strong>
\n }<\/strong>
\n}<\/strong><\/p>\n
\n color: #fff;<\/strong>
\n background-color: transparent;<\/strong>
\n width: 100%;<\/strong>
\n height: 56px;<\/strong>
\n line-height: 56px;<\/strong>
\n overflow: hidden;<\/strong>
\n box-shadow: 0 0 0;<\/strong>
\n}<\/strong><\/p>\n
\n padding: 20px 30px;<\/strong>
\n}<\/strong><\/p>\n<\/a><\/p>\nRead more in this series<\/h4>\n
Are you a WordPress Guru?<\/h4>\n