the_title();

WordPress Materialized: Creating a Material Design Theme, pt. 1 – Theme Setup

Google’s Material Design is a comprehensive design language intended to be both beautiful and functional across all resolutions and devices, so it’s a perfect match for WordPress theme developers who want to create modern responsive designs without having to reinvent the wheel. 34SP.com WordPress Hosting is providing this article to help those who want to explore Material Design in depth. In this tutorial, we’re going to use Materialize to build a fully functional Material Design powered theme that looks like this:

material-theme

 

To begin with, we’re 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’s a big timesaver. Give your theme a name, and click “Generate”. This will result in a zip file download containing your theme files.

underscores

Next, download the Materialize package, 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 package). In the Materialize folder, you’ll see three 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:

theme-structure

Next, we need to add the scripts and styles from Materialize into our theme. Open up the functions.php, and find your enqueue function. If you’ve been following along exactly, it should start on line 102. Because we’re going to be using the Material based navigation, you’ll want to remove the following line in that function:

Delete the associated script (js/navigation.js), and create a new file called material-custom-scripts.js in the same directory to hold your custom JavaScript. Add the following code to it:

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’re going to setup a conditional load of JQuery when not in the admin screens, and then enqueue our scripts and styles:

Next we need to make some changes to the theme header file. First, open header.php and modify the viewport settings to make sure that users don’t have the ability to artificially zoom the screen and break our mobile patterns:

Then, we need to modify the navigation calls to use our side nav on mobile. Find and replace this:

With this:

This accomplishes a couple of things:

  • It wraps the nav in a stand alone container we’ll use for styling.
  • It attaches the data-activates attribute, which Jquery will use to trigger the mobile menu.
  • It wraps the menu items as needed to use the Material display.
  • It adds a second iteration of the menu which is hidden on Medium size and down, which is when the slide out menu is displayed.

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:

Open your footer.php, clear any stray floats, and close the container (add above the content closing div):

Next, let’s add some CSS to support some of the elements we’ve just put in place. Open up your style.css, and add the following:

I selected 1280px as a max-width based on what I’ve seen Google use in their various applications for a 1920×1080 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.  The default mobile styles which control menu visibility need to be removed. Find and delete the following:

Next, we need to over ride the default material treatment for the nav element, since we’re going to be styling the containing div instead:

And let’s add a little padding around the site title to bring it in from the edges:

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:

theme

It’s not pretty yet, but we’re now ready to begin the process of making it both beautiful and interactive. In part 2, we’re going to use the Theme Customization API to add colour options to our theme, allowing the user to select from one of several palettes based on the Material Design colour schema. We’ll also implement Material UI elements, including Card objects, collections, and transition effects.

See something in here that could be done better? Tell us about it in the comments.

More content like this

12 Comments

Leave a Reply to Trevor Plett Cancel reply

  1. Looking forward to part 2 🙂

  2. nguyenvanquan7826
    Sunday April 26th, 2015

    Thank for post.
    I try find location of navigation in head.php file by code:

    ‘primary’, ‘menu_id’ => ‘primary-menu’ ) ); ?>

    But I can’t see it. Can you tell me location of it. Thank you!

    • If you followed along correctly, it should begin on line 30:

      ‘primary’, ‘menu_id’ => ‘primary-menu’ ) ); ?>

      • Hi Chris, Thank you for this post.

        I seem to be running into the same troubles as nguyenvanquan7826, and in looking through the whole post again I found that it’s been directed to replace the piece of code this is part of, thus removing it.

        May I humbly request some guidance as to how the primary menu is called if this code is missing?

        Thank you in advance for your time.

  3. Can’t wait for part 2!

  4. hello,
    can you write a tutorial how to add materialized into layerswp child themes? detail for free wordpress theme generator http://www.layerswp.com
    thank you..

  5. admin page blank white
    Tuesday August 4th, 2015

    Must fe something which i didn’t add to functions.php cause i have a white blank admin page, also the site is white blank, please can you explain where to put
    // Add Material scripts and styles
    if( !is_admin()){

    wp_deregister_script(‘jquery’);
    wp_enqueue_script( ‘material-jquery’, ‘http://code.jquery.com/jquery-2.1.3.min.js’, array(), ‘1.0’, false );

    }
    wp_enqueue_style( ‘material-style’, get_template_directory_uri() . ‘/css/materialize.css’ );
    wp_enqueue_script( ‘material-script’, get_template_directory_uri() . ‘/js/materialize.js’, array(), ‘1.0’, false );
    wp_enqueue_script( ‘material-custom’, get_template_directory_uri() . ‘/js/material-custom-scripts.js’, array(), ‘1.0’, false )

    also what happens with:

    /**
    * Enqueue scripts and styles.
    */
    function mdl_scripts() {
    wp_enqueue_style( ‘mdl-style’, get_stylesheet_uri() );

    wp_enqueue_script( ‘mdl-navigation’, get_template_directory_uri() . ‘/js/navigation.js’, array(), ‘20120206’, true );

    wp_enqueue_script( ‘mdl-skip-link-focus-fix’, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js’, array(), ‘20130115’, true );

    if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
    wp_enqueue_script( ‘comment-reply’ );
    }
    }

    this is what i have in functions.php when i generate a wp theme with Underscores

  6. Dear all, I will use the theme materialize, but I would change the color of the menu buttons whicj now is #fffff. In which file is the color located ? Tnx in advance, you will do me a great pleasure.

  7. After trying this page word for word I found that removing the code /* Small menu. */ and the chunk after means the menu is hidden. I am not sure if this is a part 2 thing..the issue is the defualt style in the underscore hides the menu at the start then the media query shows or hides it…

  8. Hello mister!
    I believe there is an ending missing from the .
    The .container div is not closed after the clear.

    Cheers

  9. Thanks Attila, the missing close div tag has been updated now 🙂