getButterfly Logo

MDL Shortcodes

Short-term scope

Resurrect the plugin and make it compatible with the latest versions of WordPress and PHP. Remove all external dependencies and refactor the code for speed.

Go through all GitHub issues and fix as many as possible.

Medium-term scope

Add a user control panel with a basic shortcode builder, help and documentation.

Long-term scope

The plugin is currently using the Material Design Lite components. Migrate to Material Design UI (GitHub).

This plugin is making it really easy to use Google’s Material Design Lite (MDL) components in WordPress via shortcodes. MDL components are viewable at


  • Icon font, CSS, and JS files load from Google’s servers, so they’re always fast and cacheable.
  • Some shortcodes can pull in post information (title, featured image, excerpt) or even navigation menus.
  • Internationalised/translatable via WordPress API.

MDL Icons

router add account_box

MDL Badge

Followers This link has a badge.

MDL Button

flip_to_front Button Text Here Button Button add add

MDL Card (pulling in a single Post ID)

How to make an iframe responsive using jQuery

jQuery Logo
Overriding excerpt text here... that is, if it had an excerpt.

MDL Card (manually created)

Custom Title Text Here

Supporting text here.
An MDL Card

MDL Grid: MDL Cell: 8 + 4

something here that will be 8 columns wide
something here that will be 4 columns wide, since 4 is the default size

MDL Grid (no spacing): MDL Cell: 3 (text and bg color) + 3 (bg color) + 3 (bg color) + 3 (bg color)

1st quarter
second line

BR was above

added a P here

2nd quarter
third quarter
4th quarter

MDL Grid (text and bg color): MDL Cell: 1 (empty–used for offset, hidden on Tablet) + 10 (has content, hidden on Tablet) + 1 (empty–used for offset, hidden on Tablet)

Ten wide with 1 column on each side for gutter effect. Lorem ipsum dolor sit amet, cum posse accumsan prodesset ne. Tale graeci cu ius, nec ne partem labores partiendo, id vel elitr primis veritus.

MDL Grid: MDL Cell: Half Width on all devices (6 on Desktop, 4 on Tablet, 2 on Phone) — and nested MDL Grids and MDL Cells

Left side half-width

MDL-Cell-A (size 10, Flexbox align Middle) inside MDL-Grid-A inside MDL-Cell

MDL-Cell-B (size 12) inside MDL-Grid-B inside MDL-Cell-A

MDL-Cell-A again (size 2). We can use MDL-Cell-A again because we already closed it. But we could also use MDL-Cell-F or whatever else if we wanted to…

Right side half-width

MDL Tabs

  • Eddard
  • Catelyn
  • Robb
  • Sansa
  • Brandon
  • Arya
  • Rickon
  • Tywin
  • Cersei
  • Jamie
  • Tyrion
  • Viserys
  • Daenerys

MDL Tabs (without Click Effects)

  • Tywin
  • Cersei
  • Jamie
  • Tyrion
  • Viserys
  • Daenerys

MDL Menu

Could not demo [ mdl-menu ] because no menus existed at the time of page creation. But you could delete this page and then go to MDL Shortcodes Options to get the page re-created.

MDL Tooltip

XMLeXtensible Markup Language

Subscribe to our mailing list