Material Design Lite WordPress Theme

Material Design Lite WordPress Theme

Google recently announced Material Design Lite which includes CSS, HTML, and Javascript to help you add Material Design components to a website.

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.

As I was playing with the new framework, I integrated it into a WordPress theme and called it MDLWP. The WordPress theme uses several of the MDL components including:

  • navigation
  • cards
  • buttons
  • text fields
  • grid stystem
  • footer

The theme turned out pretty nice thanks to the components they released in the first version of MDL. The Material Design Lite WordPress theme is free. You can download it over at Material Design Themes.

So far this is the only MDL WordPress theme I can find on the interwebs. If it gets enough interest, I will spend some more time add features and page templates. The first would probably be WordPress customizer support.

For the nerds out there, the theme uses Sass, Gulp, and Bower. I was using Bower to pull in the MDL stylesheet and JS, but decided just to use the CDN. Please feel free to contribute to the theme over at GitHub. The GitHub page for MDLWP also goes over the Gulp tasks if you decide to do any kind of development with the theme. It’s always nice to share ideas and work with other individuals, so please don’t be afraid to submit a pull request.

Other than that, I created a video that goes over how to setup the current version of MDLWP. You can find it on YouTube.

Let me know what you think and enjoy!

  • I really hope to find a good WordPress Material Theme in the near future and been following your Material Template site for quite a bit.
    Do you plan on releasing the MDLWP Theme to the official WordPress Theme Store for easier installation and updates for WordPress customers?

    That would be awesome!

    • I submitted MDLWP to the WordPress theme repo. We shall see if they accept and approve it. I will keep this post updated with news. Thanks!

      • Very nice to hear that. I hope they approve it. Does it take long for them to accept themes? Never submitted one of my own.

        • Yeah it does take a while… I have had one in the approval process for 5 months.. Pretty slow!

  • Hi Brad! Your work is awesome! I need a little help: could you give me an instruction how can i change the header color (by default #3F51B5)?

    • You can go to Appearance -> Customizer and pick a different primary color. Other than that you would need to target whatever you want to change with CSS.

  • bitkahuna

    way to go!

  • J. P. Garcia

    Hey Brad, awesome work on this theme.
    Is there a straightforward way to create a sidebar on this theme (with a child theme)?
    Thanks!

    • Umm, I guess. You need to edit the template you would like to add the sidebar too and put in get_sidebar();

      Then create the sidebar file. Maybe I will add a sidebar template to the theme in the future.

      • J. P. Garcia

        Thanks for your fast answer, I tried my best, but ended up with a mess of design.
        I’m fully aware that having sidebars goes against the Material Design Language.
        Anyway, I was wondering, I tried to make a child theme to make some little CSS adjustments, and I got stuck in a huge issue: Any adjustment I make doesn’t work and the fonts are different (Arial instead of the normal MDL font).

  • Do you have a compilled version of this theme? I’m not familiar with sass.

  • Peter

    Great theme. I created my site with it and it is great. Check it out: http://colorschemedepot.com/

    • Thanks for sharing.

    • Indresh

      How did you add the button (+)?

  • Great!!

  • Shubham Agrawal

    how to make the content size 100% ?

    • You will need to edit the theme files and change grid for template files. You can review the MDL gird classes here: https://getmdl.io/components/index.html#layout-section/grid

      • Shubham Agrawal

        i just nee to resize the main default page template
        can u tell me where to edit in the stylesheet file ?

      • Shubham Agrawal

        Got it buddy in the single post.. tysm for the theme its simple and awesm
        can u plz tell me how to remove the mdl card above the pages ?

  • Shubham Agrawal

    how to remove the mdl card above the pages ?