This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

MDL Shortcodes


Note: The plugin has been adopted and is under development. A lighter version is now available and more releases will be pushed in the near future. Stay tuned and report bugs or code inconsistencies.

*Note:** A new version is coming with fully compatible editor blocks, design patterns, a reusable block library and a UI kit.

Read more on getButterfly.


Special thanks to:


  • MDL Shortcodes settings in the WordPress Customizer. Get there by clicking the "MDL Shortcodes Options" wp-admin menu item (next to "Appearance" menu item).

  • Shortcodes render in the wp-admin Visual Editor when Shortcake (Shortcode UI) plugin is active.

  • With Shortcake (Shortcode UI) plugin activated you'll be able to click "Add Media" then "Insert Post Element" then select one of the shortcodes to customize.

  • Example Shortcake (Shortcode UI) interface for building a MDL Button shortcode.

  • Front-end example: MDL Icon, MDL Badge, MDL Button

  • Front-end example: MDL Card pulling in post info (blurred out) and MDL Card with manually-entered text.

  • Front-end example: MDL Grids and MDL Cells

  • Front-end example: MDL Tabs

  • Front-end example: MDL Menu

  • Front-end example: MDL Tooltip


  1. Upload to your plugins folder, usually wp-content/plugins/
  2. Activate the plugin on the plugins screen.
  3. Configure the plugin from Settings -> MDL Shortcodes (coming soon).


What shortcodes are available?

  • mdl-badge
  • mdl-button
  • mdl-card
  • mdl-cell
    • These do the same but exist so they can be nested without closing/breaking parent shorcodes:
    • mdl-cell-a
    • mdl-cell-b
    • mdl-cell-c
    • mdl-cell-d
    • mdl-cell-e
    • mdl-cell-f
    • mdl-cell-g
    • mdl-cell-h
    • mdl-cell-i
    • mdl-cell-j
    • mdl-cell-k
    • mdl-cell-l
    • mdl-cell-m
    • mdl-cell-n
    • mdl-cell-o
    • mdl-cell-p
    • mdl-cell-q
    • mdl-cell-r
    • mdl-cell-s
    • mdl-cell-t
    • mdl-cell-u
    • mdl-cell-v
    • mdl-cell-w
    • mdl-cell-x
    • mdl-cell-y
    • mdl-cell-z
  • mdl-grid (no UI)
    • These do the same but exist so they can be nested without closing/breaking parent shorcodes:
    • mdl-grid-a
    • mdl-grid-b
    • mdl-grid-c
    • mdl-grid-d
    • mdl-grid-e
    • mdl-grid-f
    • mdl-grid-g
    • mdl-grid-h
    • mdl-grid-i
    • mdl-grid-j
    • mdl-grid-k
    • mdl-grid-l
    • mdl-grid-m
    • mdl-grid-n
    • mdl-grid-o
    • mdl-grid-p
    • mdl-grid-q
    • mdl-grid-r
    • mdl-grid-s
    • mdl-grid-t
    • mdl-grid-u
    • mdl-grid-v
    • mdl-grid-w
    • mdl-grid-x
    • mdl-grid-y
    • mdl-grid-z
  • mdl-icon
  • mdl-menu
  • mdl-nav (no UI)
  • mdl-tab-group (no UI)
  • mdl-tab
  • mdl-tooltip

What are some shortcode examples?

When you install and activate the MDL Shortcodes plugin, a new Page will be created. It will be titled “MDL Shortcodes Plugin Demo Examples” and is only a Draft, not Published. You can click in to edit this page; go to the Text Editor (not Visual Editor) to see the shortcodes in use. Note that this will be the page you preview when clicking the “MDL Shortcodes Options” wp-admin menu link to pick your CSS colors.

For universal reference, here are some shortcode examples:

  • MDL Icon with custom color and background color: [mdl-icon icon="router" color="mdl-color-text--pink" bgcolor="mdl-color--black" class="hello special"]
  • MDL Badge: [mdl-badge badgetext="Followers" data="74"]
  • MDL Button: [mdl-button type="fab" icon="flip_to_front" url="" target="_blank"]
  • MDL Card pulling in a single Post’s info and overriding the excerpt text: [mdl-card postid="382" menu="info" menulink="" menutarget="_blank" mediaplacement="mediaarea" supporting="Overriding excerpt text here... that is, if it had an excerpt." actionstarget="_blank" shadow="2"]
  • MDL Card with manual/custom content: [mdl-card title="Custom Title Text Here" menu="info" menulink="" menutarget="_blank" supporting="Supporting text here." actions="An MDL Card" actionsicon="event" shadow="2"]
  • MDL Grid with MDL Cell 8 + MDL Cell 4: [mdl-grid][mdl-cell size=8]something here that will be 8 columns wide[/mdl-cell][mdl-cell]something here that will be 4 columns wide, since 4 is the default size[/mdl-cell][/mdl-grid]
  • MDL Tabs: [mdl-tab-group][mdl-tab title="Starks" active="true"]content here[/mdl-tab][mdl-tab title="Lannisters"]content here[/mdl-tab][/mdl-tab-group]
  • MDL Menu: [mdl-menu nav="37"]
  • MDL Tooltip: [mdl-tooltip text="XML"]eXtensible Markup Language[/mdl-tooltip]

Don’t forget most of these shortcodes have a user interface (UI) to make it easy to create them (so you don’t have to manually enter all that shortcode garbly-gook).

These components will be styled as seen at unless customized.

Does MDL Shortcodes work with my theme?

The styling of all these components is essentially self-contained. Due to the nature of implementing the shortcodes (they require the Icon Font, CSS, and JS files to be loaded), this plugin can feel like it “takes over” your theme’s styling. In summary, yes, it should WORK with your theme (not cause PHP or other errors), but it may not LOOK GREAT with your theme (although that doesn’t mean it can’t with some tweaks).

How can I override the Roboto font being used everywhere?

This comes from the MDL stylesheet (CSS). It can be easily overridden via Easy Google Fonts.

Can I use my own version of the CSS (e.g. Sass)?

Yup. There are a few filters for that.

Why does this plugin add the MDL styling to the wp-admin area?

In order to render shortcode previews in the TinyMCE Visual Editor, the 3 MDL files are loaded whenever there’s a TinyMCE Visual Editor present. This obviously happens on Page/Post Editing screens, but it can also happen elsewhere in wp-admin. It shouldn’t be causing any issues other than styling inconsistencies among wp-admin screens.


شتنبر 3, 2016
Exactly what i needed and was looking since long time,i am very happy 🙂 , thanks alot to the developer, one think if u could help me that will be great. That is "how to set (decrese actually) MDL card size when having separte image placement ". Even if image size is decreased the height remains the same. please tell me Hiw can i achieve that in custom CSS 🙂 thanks
Read all 1 review

Contributors & Developers

“MDL Shortcodes” is open source software. The following people have contributed to this plugin.


Translate “MDL Shortcodes” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.



  • UPDATE: Updated WordPress compatibility
  • UPDATE: Updated required PHP version


  • UPDATE: Updated plugin tags
  • UPDATE: Updated changelog
  • UPDATE: Updated readme.txt (in progress)
  • UPDATE: Removed demo page
  • UPDATE: Removed plugin settings page (based on Customizer)
  • UPDATE: Refactoring of several classes
  • UPDATE: Removed TGM Plugin Activation dependency
  • UPDATE: Removed Shortcake UI dependency (no shortcode builder available)
  • UPDATE: Prepared plugin for next big release with user options, help, documentation and shortcode builder
  • UPDATE: Updated WordPress compatibility
  • UPDATE: Updated required PHP version
  • UPDATE: Removed included language file and prepared the plugin for native internationalisation (i18n)


  • Move TGM Plugin Activation file to ‘inc’ directory to avoid it showing up as a separate plugin in site’s list of plugins


  • Updated to load MDL Version 1.0.6


  • Updated to load MDL Version 1.0.5 instead of 1.0.4


  • Initially uploaded to on September 14, 2015