The Documentation for 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.
To install the plugin:
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.
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
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!
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]
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]
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]
Available Attributes:
Example:
[btn to="/" color="blue" text="white"]Materializer Button[/btn]
Available Attributes:
Example:
[btn_floating to="/" color="red" text="white"]Home[/btn_floating]
Available Attributes:
[action]
shortcodes, that are the small popups when
the button is hovered, they take all the attributes, plus the “to”
attribute which is a link to a page.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]
Available Attributes:
Example:
[btn_flat to="/"]Home[/btn_floating]
Available Attributes:
Example:
[btn_large to="/"]Home[/btn_floating]
Available Attributes:
[collapsible_item]
shortcodes, that make
up each item in the component. They take a title, color, and
text attribute.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]
Available Attributes:
[collection_item]
shortcodes, that make
up each item in the component. They take a color and text
color attribute.Example:
[collection]
[collection_item]Alvin[/collection_item]
[collection_item]and the[/collection_item]
[collection_item]Chipmunks[/collection_item]
[/collection]
Available Attributes:
[collection_item]
shortcodes, that make
up each item in the component. They take a color and text color
attribute - as well as a “to” attribute which is a page link.Example:
[collection type="links"]
[collection_item]Alvin[/collection_item]
[collection_item]and the[/collection_item]
[collection_item]Chipmunks[/collection_item]
[/collection]
Available Attributes:
[dropdown_item]
shortcodes, that make up
each item in the component. They take a color and text color
attribute - as well as a “to” attribute which is a page to link to.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]]
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"]
Automatically makes images responsive
Available Attributes:
Example:
[img_responsive src="http://mysite.com/image.jpg"]
Makes any image circular
Available Attributes:
Example:
[img_circle src="http://mysite.com/image.jpg"]
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]
Available Attributes:
Example:
[preloader_linear]
Available Attributes:
Example:
[preloader_linear width="75%"]
Available Attributes:
Example:
[preloader_circular]
Available Attributes:
Example:
[preloader_circular flashing]
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]
Available Attributes:
Available Attributes:
Available Attributes:
Available Attributes:
Available Attributes:
Available Attributes:
Example:
[video src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" width="500px" width="100%" allowfullscreen]
Available Attributes:
Example:
[video src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" width="500px" width="100%" allowfullscreen]