34SP.com Blog

WordPress Materialized: Creating a Material Design Theme, pt. 3 – Sidebars and Polish

So, we’ve integrated Materialize.css and setup our basic structure. In the final part of this WordPress web hosting tutorial, let’s style our sidebars and comments, and add some extra theme polish.

To begin with, add the card styles to your primary sidebar. Open your functions.php, and around line 86, you should see the widget init function. We’re going to wrap the aside element in the card class, so find this:

…and change it to this:

We need to add some padding to the content and style our widget titles, so in style.css, add the following:

We’re adding a default style for textwidget for now. The other common widget elements will have their own styles.

The widget title is an element we’ll provide color options for, so in your blue.css, add the following:

View it in your browser, and we now have card style widgets with a color coordinated title bar:

Materialize.css has an element called “Avatar Collections” which we can use to dress up our recent posts display. To use it, we’re going to over ride the default recent posts behavior by extending the WP_Widget_Recent_Posts class. In your functions.php, add the following:

The first part sets up our recent posts widget to use the collections classes in our display. The registration function unregisters the default display, and replaces it with our own. We’ll need to add some supporting styles to make sure the collection element fits our sidebar, so open up style.css and add the following:

Now our recent posts display should look something like this:

We’re going to do something similar with the custom menu widgets, but since it’s more work to write a custom nav-walker to apply styles to the individual list items, we’re going to fake it with CSS. In your style.css, add the following:

With this addition, most of the standard WordPress widgets should display nicely, but you’ll want to test a variety of widgets for custom styling needs.

Clicking into any of our blog posts, we see that posts and pages still need some layout help. We’ll need to apply our grids to the inner pages. Open single.php, page.php, and archive.php. We need to wrap the main content row in a “row” class div, and apply our grid classes to the #primary div. Your end result on all three files should look something like this (single.php shown here):

You’ll also want to copy the contents of content.php to content-single.php, to wrap the single blog posts in the same image card UI as the home page.

The single post view still need some polish, so we’re going to dress up the post navigation, and add our own custom Material Design comments section. First, open your functions.php and add the following:

This will apply the Material classes to our previous and next buttons. We’ll need some additional styling to get it matched up with our theme, so open style.css, and add the following:

Then, in our blue.css, add the colors for our buttons:

Finally, let’s dress up the comments section. First, let’s restructure it to use Material classes. In your functions.php, add the following:

(Note: I’m using ‘materialized’ as the namespace for this theme, so replace that everywhere you see it with your theme’s namespace).

The change_avatar_css function applies the round style and a box-shadow to the commenter’s avatar. The materialized_reply_link function adds Material classes to the reply links. The materialized_comment function structures the general comment layout to use the modified avatar and reply buttons. Now for the heavy part: to wrap all of our individual comment elements in Material classes, we’re going to have to rewrite the comments.php file entirely.

Replace the contents of your comments.php with the following:

(Note: I’m using ‘materialized’ as the namespace for this theme, so replace that everywhere you see it with your theme’s namespace).

Of course, we still need to add some supporting styles, so in your blue.css, add the following:

…and in your style.css, add the following:

Load it up in your browser, and check out your new Material powered comments! You’ll see that the comment reply button at the top of the comments section is conditional; logged in users will jump to the comment field, while not logged in users will jump to the author field.

We’re almost production ready, but there’s still some polishing that needs to be done. Let’s make the following additions to our style.css:

…and add the following to your blue.css:

That should add some padding and margin where needed in some of the standard sidebar widgets, and dress up the footer in our color scheme.

At this point, the theme can be loaded and run as is! You’ll still want to go through and make your own modifications, and you’ll likely find some widgets and other content types that still need some additional styling.

There are a few other steps you may want to take to flesh out your theme:

Most importantly, dig into the documentation, be creative, and have fun with it!

I hope you’ve enjoyed this tutorial, and look forward to your feedback in the comments.