the_title();

WordPress Materialized: Creating a Material Design Theme, pt. 2 – Customization, Colors, and Styles

In part 1 of this series, we setup a blank theme with the Materialize framework. In part 2, we’re going to use customizer.php to add some theme options, and build in our colors and styles for your 34SP.com WordPress website.

Customizer.php

Since WordPress 3.4, the Theme Customization API has made it possible for theme options to be built directly into the “Appearance > Customize” admin screen. This gives the user greater ability to interact with the theme, including a live preview of the options selected, before making the theme live.

We’re going to give our users the ability to select from one of four hand crafted color palettes. Open your functions.php, and add the following to the bottom of the file:

This adds a new section to the customizer just under site title and tagline called “Material Options”. In that section, it creates a drop down selector with four color choices, and it binds them to a setting called “material_colors”. We’re going to use this selection to conditionally enqueue the selected color options. If no color option is selected, we’re going to use blue as the default.

When you view the Customizer screen in your browser now, you’ll see your new section, with our theme options in place:

customizer

Settings stored this way can be referenced via the get_theme_mod() function. We want to load a custom color stylesheet based on the selection, so we’re going to make an addition to our materialized_scripts() function, where we enqueue our scripts and styles. At the end of that function, before the closing curly brace, add the following:

Create four new files called blue.css, red.css, green.css, and orange.css. Add them to your /css directory, and we’re ready to build our color palettes!

 

The Material Grid

Before we move forward on styling, we need to setup our main content and sidebar blocks so that everything sits correctly in our page. To accomplish our primary layout, we’re going to use the Materialize grid system, which is a 12 column row. Modify your index.php to use the following structure:

There are two important changes to note:

  • We’ve wrapped the primary and secondary (sidebar) sections in a .row class
  • We’ve assigned a col class and three size classes to the primary div: s12, m7, and l8.

Col is the class materialize uses to indicate this is a column element, and the size attributes indicate small (s), medium (m) and large (l) screens.

We’ll also need to add those classes to our sidebar.php:

Now we’ve got an 8 column primary content area and 3 column secondary which is offset by 1 column on large screens, and a graceful resizing down to mobile. This gives us a responsive sidebar with some natural spacing without using an additional margin or padding statement.

 

Styles and Colors

We want our style.css to take priority in some cases, so we need to re-order our enqueue function to load our theme style after materialize.css.

Find this line in the enqueue function:

…and move it to the line following this:

Now we can add our styles. Let’s start by adding a little padding before our content section. In your style.css, add the following:

WordPress titles can be verbose, so we’re going to reduce the default font size a bit so longer phrases fit better:

…and since our stylesheet is taking priority, we need to set the default font in the HTML element:

Finally, let’s add some color. Open up your blue.css, and add the following:

Load it up, and you should see something like this:

Transitions and Animations

Reactive animations and transitions are an important part of the Material Design language, so let’s start incorporating them by adding a nice wave reaction to being clicked on each of the menu buttons. WordPress makes it very difficult to modify the individual nav ul li classes without writing your own custom walker function, but fortunately a little bit of JavaScript will accomplish the task neatly. Open your material-custom-scripts.js, and add the following to your (document).ready function:

This targets all list items of the menu-item class, the default wrapper WordPress uses for nav list elements. You can modify the specific selector as needed to apply different transitions across different types of menu elements. Now your theme has its first hints of Material animation:

 

 

Card UI

Finally, let’s setup our excerpt blocks for the home page. We’re going to use the “Image Card” element to show our featured image with a title, an excerpt, and some meta information. Because this layout is heavily dependent on a featured image being selected, we’re going to add a blank default image place holder to maintain our minimum height. Create a folder called “img” in your theme directory, and add this file:  default.png (800×100, 1.5k).

Next, open your content.php file, and replace the article element with the following:

This wraps the card object around our posts. Be sure to modify your posted_on and entry_footer function names to match your theme name if you’re cutting and pasting.

Now we need to add a little style to make the title and footer block easier to read, and to match it to our color schema. Open up your style.css file, and add the following:

Then, in your blue.css, add our color tweaks:

The default CSS in Underscores hides the author byline in archive displays, but if we’re a multi-author blog, we probably want to show them. Find:

…and remove the byline class.

The Material image card title uses absolute positioning by default, which becomes a problem on small screens, because long titles can be clipped. We need to use a slightly different treatment, so we’re going to add a media query to alter the display for small screens:

Perfect! At this point, our home page should show our posts as nicely formatted image card objects. The theme is starting to come together, but we still have some structural pieces to take care of. Starting in part 3, we’ll:

  • Add the card UI to posts and pages
  • Style our sidebar with cards and collections
  • Add Material icons and additional animations
  • Implement Material form elements in a custom comments section

See anything here that could be done better? Let us know in the comments.

 

More content like this

17 Comments

Leave a Reply to landed Cancel reply

  1. need complete tutorial, and a demo too.
    ripple wave effect is not working as you describe in previous blog.
    may b its a jquery problem or else its css.
    thanks for this awesomeblog.

    Here is the jquery.

    jQuery(document).ready(function($) {
    $(‘li.menu-item’).addClass(‘waves-effect waves-light’);
    $(‘.button-collapse’).sideNav({
    menuWidth: 300, // Default is 240
    edge: ‘left’, // Choose the horizontal origin
    closeOnClick: true // Closes side-nav on clicks, useful for Angular/Meteor

    }
    );
    });

    • If you’re not seeing the ripple effect, you should double check your li items to make sure the classes are being added. As long as the classes are in place, the ripple effect should be working.

      • Thank you for you kind reply,
        menu js snippet is not triggering drop-down buttons.
        i add this piece of code but notthing happened,
        $(‘li.menu-item ul li’).addClass(‘dropdown-button’);

        • That’s because you’re not adding the correct class. This snippet of code:

          $(‘li.menu-item’).addClass(‘waves-effect waves-light’);

          Is intended to add the waves-effect and waves-light classes to each of the menu entry list items. Those are the classes in Materialized which cause the ripple effect.

          If you’re not seeing those two classes output in your menu items, step back through the tutorial.

  2. Hi, thanks for share this article. Can you explain how to make navbar? i tried many ways but non of them worked for wp navbar. is really confusing to make wordpress navbar with materialize css framework.

    Thanks.

  3. Robson Oliveira dos Santos
    Friday September 4th, 2015

    Great article!

  4. Hi, thanks for the tut, got a question.. got trouble understanding where the script
    // Check our theme options selections, and load conditional styles
    $themecolors = get_theme_mod( ‘material_colors’ );

    // Enqueue the selected color schema
    wp_enqueue_style( ‘material-colors’, get_template_directory_uri() . ‘/css/’. $themecolors );
    should be, i dont know where we store the materialized_scripts() function… was it in the functions.php or the material-custom-script.js

    Regards

  5. hi i would like know how i can use the icon of the materializecss in my wordpress is no working when i try….

  6. yes I am also lost here – materialized_scriptssame as boris – looks like this article isn’t monitored.