WordPress Material Design – 5 Easy Ways to Add a Touch of Material Design to Your WordPress Website.

person Angusfolder_openUncategorisedaccess_time May 2, 2018

Material Design is a set of design guidelines created by Google that defines how your website or app should look and behave. It covers things like form interactions, navigation and menus, alerts and notifications, and a whole lot more. WordPress and Material Design go perfectly together, and you don’t even need any coding skills.

WordPress Material Design

There are plenty of WordPress themes you can use to give your whole website a material design look, however, one of the best things about material design is that you can sprinkle in as much or as little as you like. This post outlines 5 easy ways you can add a touch of material design to your WordPress website, without changing your theme.

1. Material Design for Contact Form 7

Of course, the first one on this list is our own plugin – Material Design for Contact Form 7. This plugin allows you to easily add Material Design styles to your Contact Form 7 forms. There is a free version with most functionality included, and a premium version that allows you to customize the colours and fonts, sort your fields into columns, and a few other useful features. We recommend starting by installing the free version via your WordPress plugin screen, trying it out, and upgrading if you feel that you need one or more of the pro features.

2. Material Design addon for the “Styles and Layouts for Gravity Forms” plugin

If you prefer Gravity Forms to Contact Form 7, then there’s the “Styles and Layouts for Gravity Forms” plugin, which has a premium addon for adding Material Design styles. There’s no free version, but it is a very easy option – essentially an on/off switch for changing your whole form to Material Design.

3. MDL Shortcodes

The “MDL Shortcodes” plugin makes it easy to add some of the most useful Material Design components to your WordPress website. This includes buttons, cards, menus, tabs, tooltips, tables and more.

WordPress Material Design

4. Material Design Icons plugin

Did I forget to mention that Google also created a huge set of icons to go with Material Design? The Material Design Icons plugin makes these icons available to your WordPress site, and allows you to add icons via either shortcodes or directly via html.

5. Buttons With Style

One of the things that Material Design introduced to the world was the “Ripple Effect”, where when you click on a button, you see a ripple emerge from the where you clicked. You can read about this effect here, and view a demo of the ripple effect in action here. The “Buttons With Style” plugin has a fairly cheap pro upgrade that includes Material Design buttons that you can add to your site via shortcodes.


  1. Hello.
    There’s a bug in md-select when using attribute “include_blank” in select-tag. you can’t select the blank entry.

    1. Hi Marc,

      Hmm, this was intentional, but maybe it should be changed. I think initially the idea was to allow required select fields, but a required select will be invalid if you choose the blank option anyway. I’ll include the fix in the next update.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">