Materializer

The Documentation for Materializer WP

Materializer WP

A set of Material Design components for WordPress

Materializer WP is a fully-featured set of Material Design components, packed up in a WordPress plugin, and ready to be used on any website.

The plugin is ‘short-code based’, so you can use all of the features easily on any post, page, or custom post type. There over 25 different short-codes and components that take care of all the hard work, and allow you to turn any blog or website into a Material Design wonderland.

Getting Started

Installation

To install the plugin:

Quick Start

As a quick example of what’s possible, here is how you would set up a Material Design Card:

  [card title="A Cool Card!" text="text-darken-3 grey" title_color="blue"]
  I am a very simple card. I am good at containing mall bits of
  information. I am convenient because I require little markup to use
  effectively.
  [link text="blue" to="/"]Go Home[/link]
  [/card]

In this example, we have a [card][/card] shortcode, with a few attributes. A title, the text color, and the title color. Inside of the shortcode we have a couple more things: The card’s text, and action links (which also have a text color attribute, and a to attribute which links to the home page).

And a Material Design card is as easy as that. Cards are a great way to have useful information and actions pop out at your visitor, while keeping a slick design.

Features

Shortcodes

There are over 25 different shortcodes and components to choose from. All of the shortcodes contain “attributes” that allow several different ways to build one component.

Below is a list of all the currently available components, click on one to view an example, and see how to customize it.

Cards

Buttons

Collapsibles

Collections

Dropdowns

Images

Pagination

Loading Icons

Tables

Viedos

Color Pallette

There is a built in Material Design Color pallette that be used with every short-code. You’re not stuck with the default color scheme, so you can integrate Materializer into your existing website seamlessly.

…more info coming soon!

Shortcode Details

Cards

Basic Card

Available Attributes:

Example:

  [card title="A Cool Card!" text="text-darken-3 grey" title_color="blue"]
  I am a very simple card. I am good at containing mall bits of
  information. I am convenient because I require little markup to use
  effectively.
  [link text="blue" to="/"]Home[/link]
  [/card]

A Basic Card can also be refitted to be a more simple Card Panel:

Example:

[card color="teal" text="white"]
This is a simple panel card, these are really great for just
blocking together small bits of markup on a nice eye-catching
color
[/card]

Image Card

Available Attributes:

  [card_img img="/wordpress-logo.png"]
  I am a very simple image card. I am good at containing images with
  action links.
  [link text="blue" to="/"]Home[/link]
  [/card_img]

Revelealing Card

A Revealing Card is like a Basic Card that can be opened to display more information.

Available Attributes:

Example:

[card_revealtitle="A Revealing Card"]
I am a very cool revealing card. I am good at containing content, with
more content inside.
[link text="blue" to="/"]Go Home[/link]
[card_open]And here is some more content inside with some other really cool stuff.[/card_open]
[/card_reveal]

Buttons

Raised Button

Available Attributes:

Example:

[btn to="/" color="blue" text="white"]Materializer Button[/btn]

Floating Button

Available Attributes:

Example:

[btn_floating to="/"  color="red" text="white"]Home[/btn_floating]

Fixed Action Button

Available Attributes:

Example:

[btn_fixed_action color="red" text="white"]Home
[action to="/contact-us" color="yellow" text="red"]Hi[/action]
[action to="/" color="blue" text="white"]You[/action]
[/btn_fixed_action]

Flat Button

Available Attributes:

Example:

[btn_flat to="/"]Home[/btn_floating]

Large Button

Available Attributes:

Example:

[btn_large to="/"]Home[/btn_floating]

Collapsibles

Collapsible

Available Attributes:

Example:

[collapsible]
[collapsible_item title="Item One"]Some content in here.[/collapsible_item]
[collapsible_item title="Item Two"]Some more content in here.[/collapsible_item]
[collapsible_item title="Item Three"]And some more content in this guy.[/collapsible_item]
[/collapsible]

Collections

Collection

Available Attributes:

Example:

[collection]
[collection_item]Alvin[/collection_item]
[collection_item]and the[/collection_item]
[collection_item]Chipmunks[/collection_item]
[/collection]

Link Collection

Available Attributes:

Example:

[collection type="links"]
[collection_item]Alvin[/collection_item]
[collection_item]and the[/collection_item]
[collection_item]Chipmunks[/collection_item]
[/collection]

Dropdowns

Dropdown

Available Attributes:

Example:

[[dropdown name="mydrop" text="white"]
Drop Me Down
[dropdown_item to="/"]Home[/dropdown_item]
[dropdown_item to="/services/"]Services[/dropdown_item]
[dropdown_item to="/contact"]Contact Us[/dropdown_item]
[/dropdown]]

Images

Material Box Image

The Materializer Image Box displays a normal image, and when it clicked, it open the image in a fullscreen “lightbox” style display.

Available Attributes:

Example:

[img_box src="http://mysite.com/image.jpg"]

Responsive Image

Automatically makes images responsive

Available Attributes:

Example:

[img_responsive src="http://mysite.com/image.jpg"]

Circular Image

Makes any image circular

Available Attributes:

Example:

[img_circle src="http://mysite.com/image.jpg"]

Pagination

Pagination

Available Attributes:

Example:

[pagination]
[pag_item disabled]<[/pag_item]
[pag_item to="#!" active]1[/pag_item]
[pag_item to="/page-2"]2[/pag_item]
[pag_item to="/page-3"]3[/pag_item]
[pag_item to="/page-4"]4[/pag_item]
[pag_item to="/page-5"]5[/pag_item]
[pag_item to="/page-6"]6[/pag_item]
[pag_item to="/pages"]>[/pag_item]
[/pagination]

Loading Icons

Linear Loader

Available Attributes:

Example:

[preloader_linear]

Fixed Linear Loader

Available Attributes:

Example:

[preloader_linear width="75%"]

Circular Loader

Available Attributes:

Example:

[preloader_circular]

Flashing Circular Loader

Available Attributes:

Example:

[preloader_circular flashing]

Tables

The table shortcodes are a bit different in that they only wrap existing HTML (or shortcodes).

You can use any of the table types (striped, hoverable, centered, responsive, bordered) together in the same shortcode.

Example:

[table style="striped"]
<thead>
 <tr>
   <th data-field="name">Item Name</th>
   <th data-field="price">Item Price</th>
 </tr>
</thead>
<tbody>
    <tr>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
    <tr>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Lollipop</td>
      <td>$7.00</td>
    </tr>
</tbody>
[/table]

Striped Table

Available Attributes:

Hoverable Table

Available Attributes:

Centered Table

Available Attributes:

Bordered Table

Available Attributes:

Responsive Table

Available Attributes:

Videos

Responsive Video

Available Attributes:

Example:

[video src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" width="500px" width="100%" allowfullscreen]

HTML5 Video

Available Attributes:

Example:

[video src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" width="500px" width="100%" allowfullscreen]