getButterfly
Resume

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 https://getmdl.io/components/.

Highlights

  • 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

[mdl-icon icon=”router” color=”mdl-color-text–pink” bgcolor=”mdl-color–white” class=”hello special”] [mdl-icon icon=”add”] [mdl-icon icon=”account_box” color=”mdl-color-text–red”]

MDL Badge

[mdl-badge type=”span” badgetext=”Followers” data=”74″]

[mdl-badge data=”4″ type=”link” url=”https://www.google.com/” target=”blank” badgetext=”This link has a badge.”]

[mdl-badge data=”74″ type=”div” overlap=”true” icon=”true” badgetext=”account_box”]

MDL Button

[mdl-button type=”fab” icon=”flip_to_front” url=”https://www.getmdl.io/components/index.html#buttons-section” target=”_blank”]

[mdl-button type=”raised” text=”Button Text Here”]

[mdl-button type=”raised” class=”mdl-button–colored” text=”Button”]

[mdl-button type=”raised” class=”mdl-button–accent” text=”Button”]

[mdl-button type=”fab” disabled=”true” icon=”add”]

[mdl-button icon=”add”]

MDL Card (pulling in a single Post ID)

[mdl-card postid=”20378″ menu=”info” menulink=”http://www.getmdl.io/components/index.html#cards-section” menutarget=”_blank” mediaplacement=”mediaarea” supporting=”Overriding excerpt text here… that is, if it had an excerpt.” actionstarget=”_blank” shadow=”2″]

MDL Card (manually created)

[mdl-card title=”Custom Title Text Here” menu=”info” menulink=”http://www.getmdl.io/components/index.html#cards-section” menutarget=”_blank” supporting=”Supporting text here.” actions=”An MDL Card” actionsicon=”event” shadow=”2″]

MDL Grid: MDL Cell: 8 + 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 Grid (no spacing): MDL Cell: 3 (text and bg color) + 3 (bg color) + 3 (bg color) + 3 (bg color)

[mdl-grid spacing=false]

[mdl-cell size=”3″ desktop=”0″ tablet=”0″ phone=”0″ color=”mdl-color-text–white” bgcolor=”mdl-color–blue-A700″]1st quarter
second line

BR was above

added a P here[/mdl-cell]

[mdl-cell size=”3″ desktop=”0″ tablet=”0″ phone=”0″ bgcolor=”mdl-color–orange-A700″]2nd quarter[/mdl-cell]

[mdl-cell size=”3″ desktop=”0″ tablet=”0″ phone=”0″ bgcolor=”mdl-color–deep-purple-50″]third quarter[/mdl-cell]

[mdl-cell size=”3″ desktop=”0″ tablet=”0″ phone=”0″ bgcolor=”mdl-color–lime-200″]4th quarter[/mdl-cell]

[/mdl-grid]

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)

[mdl-grid color=”mdl-color-text–grey-600″ bgcolor=”mdl-color–light-blue-50″]

[mdl-cell size=1 tablethide=”true”][/mdl-cell]

[mdl-cell size=”10″ desktop=”0″ tablet=”0″ phone=”0″ tablethide=”true”]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-cell]

[mdl-cell size=1 tablethide=”true”][/mdl-cell]

[/mdl-grid]

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

[mdl-grid]

[mdl-cell desktop=”6″ tablet=”4″ phone=”2″]Left side half-width
[mdl-grid-a]
[mdl-cell-a size=10 align=”middle”]MDL-Cell-A (size 10, Flexbox align Middle) inside MDL-Grid-A inside MDL-Cell
[mdl-grid-b]
[mdl-cell-b size=12]MDL-Cell-B (size 12) inside MDL-Grid-B inside MDL-Cell-A[/mdl-cell-b]
[/mdl-grid-b]
[/mdl-cell-a]
[mdl-cell-a size=2]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…[/mdl-cell-a]
[/mdl-grid-a]
[/mdl-cell]

[mdl-cell size=”0″ desktop=”6″ tablet=”4″ phone=”2″ align=”top” text=”justify”]Right side half-width[/mdl-cell]

[/mdl-grid]

MDL Tabs

[mdl-tab-group]

[mdl-tab title=”Starks” active=”true”]

  • Eddard
  • Catelyn
  • Robb
  • Sansa
  • Brandon
  • Arya
  • Rickon

[/mdl-tab]

[mdl-tab title=”Lannisters”]

  • Tywin
  • Cersei
  • Jamie
  • Tyrion

[/mdl-tab]

[mdl-tab title=”Targaryens”]

  • Viserys
  • Daenerys

[/mdl-tab]

[/mdl-tab-group]

MDL Tabs (without Click Effects)

[mdl-tab-group effect=”false”]

[mdl-tab title=”Lannisters”]

  • Tywin
  • Cersei
  • Jamie
  • Tyrion

[/mdl-tab]

[mdl-tab title=”Targaryens” active=”true”]

  • Viserys
  • Daenerys

[/mdl-tab]

[/mdl-tab-group]

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

[mdl-tooltip text=”XML”]eXtensible Markup Language[/mdl-tooltip]



My Battle Tested Recommendations

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.