34SP.com Blog

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.


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:

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:

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:

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