Feb 16, 2021

Material Design for WordPress

Apply Material Design directly to WordPress sites, no coding required

Posted by


Have you ever created a website? If so, there’s a good chance you built it with WordPress, the content management system used by 40 percent (!) of all sites on the web.

Material Design provides principles, icons, and guidelines for building web experiences that can apply to WordPress sites too. That’s why we’re introducing Material Design for WordPress, an experimental plugin and theme that can customize the navigation, colors, typography and shapes, as well as access the full set of Google Fonts and Material Design icons for WordPress sites.

link
Copy link Link copied

Get the plugin

Ready to dive in and give it a try? Just follow the instructions below, and keep reading to see what the plugin can do.

  1. If you don’t already have a hosted WordPress site, download it for free at WordPress.org or run a local instance. You can also create one at WordPress.com. (Note, you need to have a business-level plan to install plugins on WordPress.com)

  2. Go to the admin panel in your WordPress Dashboard and click on Plugins in the sidebar menu.

  3. Click on Add New.

  4. Search for Material Design.

  5. Click Install Now from the search results.

  6. After installation, click the Activate button.

  7. Follow the step-by-step Quick Start to install the Material WordPress theme and examples.

link
Copy link Link copied

Create a Material theme

Set up and preview your global Material theme styles within the customizer. Choose colors, typography, shapes, and icons to express your unique style. For guidance on customizing Material theme styles to express your product’s unique style, check out our series of posts on Material Theming.

Start from our existing styles and use Material Theming to create a custom look and feel. Choose colors, typography, shapes, and icons to express your unique style.
link
Copy link Link copied

Build with Material blocks

Add Material Components like buttons and cards, and create layouts for things like image-heavy pages or styled contact forms. Customize the look of your blocks by adjusting global theme styles, or setting the style of a single component in the block editor.

Add Material blocks inline and customize them using the block editor panel.
link
Copy link Link copied

Tell us what you think

Material Design for WordPress is an experiment. We want to use this time to learn more about what you want and need from a Material experience for WordPress. Love it? Hate it? What features would you like to see? Your feedback can help us understand what people building content-oriented sites need from a design system, making Material for the web better for everyone.

Give Material Design for WordPress a try, and share your feedback directly in WordPress or tweet us at @materialdesign.