Materialize

Material Design Multipourpose WordPress Theme

We would like to thank you for purchasing Materialize Wordpress Theme! We are very pleased you have chosen Materialize Wordpress for your website, you will be never disappointed!

Before you get started, please be sure to always check out this documentation. We outline all kinds of good information, and provide you with all the details you need to use Materialize Wordpress. Materialize Wordpress can only be used with Wordpress and we assume that you already have Wordpress installed and ready to go.

If you are unable to find your answer here in our documentation, we encourage you to contact us through themeforest item support page with your site CPanel (or FTP) and wordpress admin details. We're very happy to help you and you will get reply from us more faster than you expected.

Thank you, we hope you to enjoy using Materialize Wordpress Theme!

Overview

Materialize - Theme Overview

Materialize is a multi-purpose WordPress theme that truly has it all. It will provide you with virtually everything you could want and need.
 
Materialize is a material design based multi-purpose responsive WordPress Theme. By utilizing elements and principles of Material Design, Materialize comes with 200+ pre built pages and over 150+ unique content blocks.
 
Materialize empowers you to build sites under Corporate, Creative, Agency, Restaurant, Blog, Charity, Consulting Firm, Portfolio, Construction, Parallax, App Landing, Book Opening and much more categories.
Moreover, Materialize comfortably suits all common website styles.

Features

Materialize - Theme Features

 

Theme Installation

Check our Video Channel for easy installation and setup process.
 

Theme Installing and Activating

There is three way to install theme :

A. Adding New Themes using the Administration Panels:

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. Select Add New.
  4. Either use the Search or Filter options to locate a Theme you would like to use.
  5. Use the Upload link in the top links row to upload a zipped copy of a Theme that you have previously downloaded to your machine.

B. Adding New Themes by using cPanel:

If your host offers the cPanel control panel, and the Theme files are in a .zip archive follow these instructions. Note: This assumes the Theme you download is a compressed (.zip) file containing a folder under which all the Theme files reside.

  1. Download the Theme .zip file to your local machine.
  2. In cPanel File Manager, navigate to your Themes folder. If your WordPress is installed in the document root folder of your web server you would navigate to "public_html/wp-content/themes" and if you have WordPress installed in a sub-folder called WordPress, you would navigate to "public_html/wordpress/wp-content/themes".
  3. Once you've navigated to the Themes folder in cPanel File Manager, click on Upload file(s) and upload that .zip file you saved in Step 1.
  4. Once the .zip file is uploaded, click on the name of that file in cPanel, then in the panel to the right, click on "Extract File Contents", and that .zip file will be uncompressed.
  5. Follow the Selecting and Active Theme process from bellow.

C. Adding New Themes Manually (FTP):

To add a new Theme to your WordPress installation, follow these basic steps:

  1. Download the Theme archive and extract the files it contains. You may need to preserve the directory structure in the archive when extracting these files. Follow the guidelines provided by your Theme author.
  2. Using an FTP client to access your host web server, create a directory to save your Theme in the wp-content/themes directory provided by WordPress. For example, a Theme named Test should be in wp-content/themes/test. Your Theme may provide this directory as part of the archive.
  3. Upload the Theme files to the new directory on your host server.
  4. Follow the Selecting and Active Theme process from bellow.

Selecting the Active Theme

To select a Theme for your site:

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. From the Themes panel, roll over the Theme thumbnail image for the Theme you are interested in to see options for that theme.
  4. You can view more information about any theme by clicking Theme Details.
  5. A live preview of any Theme (using your blog's content) can be seen by clicking Live Preview.
  6. To activate the Theme click the Activate button.

After activating theme make sure to install required and recommended plugins.

You can watch our installation video for better understand.

WordPress Upload Limit Problem

By default wordPress allow upload 2MB to 128MB file size from dashboard. For that reason you may encounter "upload_max_filesize" issue when you upload large file.

 
Editing PHP.ini

Best way to increase the file upload size is to make changes to your server's php.ini file.

Depending on your web host, you may be able to edit this php.ini file directly. php.ini file is located typically in a "conf" or "etc" folder in root directory of your server. Search through these folders to find a file labeled "php.ini". Drag this file to somewhere on your local hard drive, and open it up in any text editor.

A snippet from php.ini

First, find the "memory_limit" value, and change this to 256M (unless this is already set to something higher). Next, find the the "post_max_size" and change this to 48M. Finally, find the "upload_max_filesize" and once again change this to 48M. You may also want to find the "max_execution_time" variable and set it to something like 300, "max_input_time" to 600 and "max_input_vars" to 5000. This will ensure that your site does not time out when uploading larger files.

In the end, your values will look like this:

memory_limit=256M
post_max_size=48M
upload_max_filesize=48M
max_execution_time=300
max_input_time=600
max_input_vars = 5000

Though these values will be scattered throughout the file. When you are done, save your file, and drag it back to the directory where your php.ini file is located and overwrite the existing file.

This is how it works for all themes on Themeforest and not only in our case.

Plugin Installation

After activating the theme, you will see a Required Plugins notice located on top. You have to install all required and recommended plugin to be fully operational.

The installation process bellow: 
 
1. At first, click Begin installing plugins from Required plugins notice located on top.
2. Then you will see all plugin list that you have to install, for that check all plugin and select Install from Bulk Actions then click Apply. You need to wait several minute to install all plugin.
3. After installing you need to Activate all installed plugin, for that check all plugin and select Activate from Bulk Actions then click Apply. You need to wait few minute to active all install plugin.
 
You can watch our installation video for better understand.

One Click Demo Import

If you want to build you site as like our demo then you need to follow this step. It helps you to create your website faster.

Before you begin, make sure all the required plugins are activated and php configuration limits to a minimum as follows:
max_execution_time=300, max_input_time=600, max_input_vars=5000, memory_limit=256M, post_max_size=48M, upload_max_filesize=48M.
You can verify your PHP configuration limits by installing a simple plugin found here. In addition, you can always contact your host and ask them what the current settings are and have them adjust them if needed

Importing demo data (post, pages, images, theme settings, widget data, contact form and newsletter) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch.

When you import the data, the following things might happen:





You can watch the one click demo install video for better understand.
 

Manual Import Demo Content

 
If you don't like to oneclick demo process then you can try to import manually:  
 
1. Go to the Tools > Import menu in your WordPress Dashboard.
2. Choose WordPress and install the plugin if you haven't done so already.
3. Choose the demo-content.xml (it can be found in your downloaded folder > Demo Content) and press Upload file and import.
 
When it's finished, you will see new posts, pages, reformation, event items and menu.
 
Note: Some photos are used for demo purpose only. If you want to use demo photo on your site then you need to collect their license.
 

Importing Widget Data:

1. Go to Plugins > Add New menu in your WordPress Dashboard.
2. Type Widget Importer & Exporter on the Search Plugin box and hit enter then you will see the Widget Importer & Exporter plugin install and activate then plugin.

3. Then you will see  Widget Importer & Exporter option and click.
4. Choose the widget-data.wie (it can be found in your downloaded folder > Demo Content) and press Import Widgets.


Importing Theme Option:

1. Go to Nominee Options menu in your WordPress Dashboard.
2. Select Import/Export located in the bottom
3. Click Import from file and past theme-option.json code into there. (theme-option.json code can be found downloaded folder > Demo Content > theme-option.json, open it with editor and copy all code and past into import from file box on theme option)
4. Finally, click Import, it takes few second to import.
 

Basic Setup

After installing theme, plugin and importing all demo content you need to make basic setup.

Front page and post page setup:

Go to the Settings > Reading menu in your WordPress Dashbord and select A Static Page at the Front page displays setting. Choose your own Homepage or one of the Home layouts that imported with the demo content and a Blog page there:

 

Menu Setup:

1. Go to the Appearance > Menus menu in your WordPress Dashbord and select Manage Location tab.
2. Select Primary Menu that imported with the demo content.
3. After selectin primary menu then go back Menu Edit and select Primary Menu checkbox located in the Theme Location on the bottom.
4. Save Menu.

Theme Options

Theme Options Panel is a place where you can control every aspect of your website with few button clicks. It is accessible from the "Materialize Options" menu in your WordPress Dashboard:

Each available option there is well described so you shouldn't have any problems with any of them.

1. Saving Changes:

After you have made some changes in the panel, please don't forget to click the "Save Changes" button located both in the bottom and top section of the panel.

2. Reset Section: 

If you like to make selected section is default then you can use this section.

3. Reset All:

To reset all custom settings of Materialize option then you can use reset all option.

4. Import / Export:

If you want to backup your Materialize option then you can use this tab. Just visit the "Import/Export"  tab and follow the instructions. You can copy/download your current option settings. Keep this safe as you can use it as a backup. 

After you download data file you can then load it anytime later or on a different site location (while migrating servers and so on).

Options Details

General Settings:

In the general settings menu, you can change page Breadcrumbs and Smooth Page Scroll.

Breadcrumb: There are two buttons named "Show and Hide" you can choose Show or hide your website breadcrumb from here.

Smooth Page Scroll: There are also two buttons named "Enable and Disabled"  you can make enable or disabled page smooth scroll effect from here.

 

Logo Settings:

To setup logos please navigate to Materialize Options > Logo Settings and you will be able to upload Custom, Retina & Sticky Header Logos.
 
Under you can also setup some different logo options. Please remember that Retina Logo should be always 2x larger than Custom Logo (this field is optional).

Site Logo: Upload your logo here. Logo dimension should be min-width: 145px and min-height: 55px for best fit.

Retina Logo Image(high density): Add a double size logo of your main logo for retina display.

 

Header Settings:

Header is probably the most important section for theme because this is what users see first. That's we created 9 different header styles for better purposes. 
 
What you can also do is show/hide sticky menu, menu topbar, search and much more. This is not all because you can also setup different header styles for different pages. Below we will try to describe all header possibilities.

From Header Settings you can select Header Style and Menu Hover Style. 

You can also change main menu margin, padding, background color, menu font color, sticky menu visibility, search form visibility and header topbar visibility from this section.

Page Header Images:

In page header images menu you can change all images of every page header. We recommended 1920px width and 450px height image for best fit.

 

 

Preset Color: 

In this menu section, you can change some basic theme color as like, 1.Site Accent Color,  2.Site Link Color

 

 

Background Color: 

In this menu section, you can change some basic background color as like, 1. Body background color  2. Menu background color  3. Sticky menu background color.

 

 

Typography: 

In typography section, you can change almost all typeface, font-family, font-size, font-weight and line height of your website's text. In specifically you can change 1. Body Font  2. Menu Font  3. Heading Font and all heading font sizes and line-height.

 

 

Blog Settings: 

From this menu section, you can control almost everything in the blog page. A little description given below how can you control your blog page:
 
Blog Page Title: Enter Blog page title here, if leave blank then site title will appear.
 
Blog sidebar setting: You can change your blog page layout as like 1. With left sidebar 2. With right sidebar or 3. Without any sidebar.
 
Post meta options: You can choose which post meta you want to show with your blog post.
 
Share Button: You can show or hide share button from your blog post.
 
Blog Pagination or Navigation: You can choose blog pagination style, posts pagination or newer / older posts.
 
Facebook comment: You can enable or disable facebook comment option from your blog post. Beside this you can also use WordPress post comment system.

 

Page Settings: 

In page settings menu you can change page layout style. You can choose a page with "left sidebar" or with "right sidebar" or without any sidebr. 

 

Portfolio Settings: 

Portfolio navigation visibility: You can show or hide portfolio navigation bar from single portfolio page.
 
All Portfolio page link: You can select portfolio page to linking with all portfolio page.
 

 

Portfolio Category Settings:

From this menu you can select portfoilo style, grid column, title visibility, button text etc.

 

Preloader Settings:

Page Preloader: You can enable or disable page preloader from here.
 
Preloader background color: Pick color for preloader background (default: #ffffff).
 
Animation file: Upload loader gif animation file.
 

 

 

404 Page:

From this menu you can select 404 page style and other options.

 

Footer is a section located at the very bottom of your site. It can hold the copyright data and social icon . You can select footer style and other option from here. 

Footer Copyright Text:  Write your copyright text here.
 
Back-to-top button:   show/hide and select button style from this option
 
Social icon visibility:  Show or hide social icon from footer.
 
Social Link:  Enter social page or profile link. Leave blank to hide icon.
 
 

Import/Export:

Import Options: WARNING! This will overwrite all existing option values, please proceed with caution!
 
Export Options: Here you can copy/download your current option settings. Keep this safe as you can use it as a backup should anything go wrong, or you can use it to restore your settings on this site (or any other site).

Creating Pages and Content

Creating your own page has been never so easy.  This section covers information about the page and content creating process.

General Information:  There are two ways of creating pages and posts content in Materialize theme:

A. With page builder
B. Classic Way

A. Page Builder (Visual Composer): If you wish to built your page by using page builder (visual composer) then you need to select "Backend Editor".
 
 
 
and you will see the three button to starting.

 
 
 
 
1. Add Element: If you select Add Element then you will see all Visual Composer default Shortcode elements and Materialize Shortcode Elements. All Materialize elements can be found under "TT Elements" tab.
 
 
 
Here you will find details use of Materialize shortcode.
 
2. Add Text Block: For starting with text block.
3. Add Template: If you wish to start with our default pre-defined template then select this option. If you select this option you will see all Materialize's Selection and page template. You can use is just one click. More details here.
 
 
B. Classic Way: Insert your content the classic way - directly to the Content Editor. This method is a default for blog posts.
 

Page Settings

Materialize comes with a truly simple page settings management systems that lets you easily choose a page layout and each page and post individually. 

Default Page Setting: You can change/setup all pages from Theme Options which will apply on all of the pages of this theme. 

Individual Page Setting: By default all pages and it's all styles will inherits from Theme Options default settings. At the same time you can customize each of the page individualy from their bottom "Page Setting" section.

You can also Enable/Disable Page Header, change page header background image, change page title content alignment and can Show/hide breadcrumb from here.

 

From the page sidebar section you can also change Page Header Styles, show/hide page header topbar and can change footer styles

Slider

In package downloaded from Themeforest you can find slider-data folder where you got many .zip files with different sliders for different homepages.
 
On the list of available sliders, in the right bottom section you will see "Import Slider" button. All you need to upload slider is choose right .zip file with slider from slider-data folder and then you must click "Import Slider" button.
 

 

Slider management

After pressing the "Create New Slider" button you will reach a form where you are asked to enter a Slider Title (used for the Slider overview in this backend) and a Slider Alias (a slug that is used to implement the Slider in your WP later, so keep it simple with no spaces and special chars).
 
You are also prompted to enter the Sliders Basic Settings, a Slider Title (for you to remember the Slider by) and a Slider Alias (please do not use special characters or spaces here, this defines the shortcode for you to use in your content).
 
The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouseover so they are not explained here.
 
The Slider Type can be fixed (not responsive, fix dimensions), responsive (changes depending on the size of its max. sizes given later in relation to the screen size) or fullwidth (always 100% in width of the screen size, but height keeping the aspect ratio).
 
The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.
 
The next step is creating/editing slides. You get there by just clicking on "Edit Slides" in the Slider Form window.
 
Just press "New Slide" and the native WP Media Upload dialog window will appear. Choose or Upload the slide's background image, choose "Full Size" and then "Insert Into Post" (all like you are used to it in your WP editor). You can always click on the pic to change it.
 
Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown) or delete it with the "Delete" button.
 
The "Edit Slide" leads you to the next chapter "Slide".
 
In the "Edit Slide" view you see the heart of our plugin. The drag&drop Caption editor.
 
But first please note that you have another chance here to change the background image with the "Change Image" button.
 
To create a Layer (Caption, Image or Video) press the button "Add Layer" or "Add Layer: Image". In case of a text layer a basic layer will be created you can use the "Text" field in the Layer Params to change the caption on it. The "Style" selectbox shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the "Edit CSS File").
 
In case of an Image Layer you will see the native WP Media Uploader again. In case of a Video Layer you will prompted to a custom Video selection wizard.
 
You now can move the Layers around via drag&drop or type in the x and y coordinate in the corresponding fields.
 
The "Layers Sorting" drag&drop list determines the Layers' z-index. This list specifies the stack order of an element.
 
An element with greater stack order is always in front of an element with a lower stack order.
 
Please also note that slider is a plugin and whole documentation for this item you can find at: https://www.themepunch.com/revslider-doc/slider-revolution-documentation/
 

 

How to update Revolution Slider itself?

If you want to update current Revolution Slider version you have 2 ways to do it:

  1. Go to Revolution Slider section which is in main wp dashboard section on the left side. Then click on "Update Plugin" button in the right bottom corner, go to theme-name\functions\plugins folder and select revslider.zip file and just upload it. That`s it.
     
  2. You can do it via FTP. Just log in into your FTP server and go to wp-content/plugins/revslider/ folder. Unpack files from revslider.zip file which has been described in point 1 and replace files from unpacked folder into your FTP to wp-content/plugins/revslider/ folder.

 

Revolution Slider Purchase Code:

Revolution Slider is external plugin which is included into theme because for each product we purchase "Extended license" and that's why we are able to include it into them. This plugin works fine of course and you can always get current slider version if you want directly from us. What you need to do, to get this slider is send us request about it via contact form on our profile's page http://themeforest.net/user/trendytheme (it is in the right bottom corner) and we'll send you current version.
 
Remember, that we update revolution slider plugin with theme updates time to time so with each next theme update, slider will be also updated.
 
The option with registering Revolution Slider has been already added to plugin and this only allow you to get automatic updates and support for this plugin directly from author if you need. You don't need to register this product because it is not required but if you want to get those features, then you need to purchase this plugin directly from author. 
 
This is how it works for all themes on Themeforest and not only in our case.

Creating Homepage

In Materialize all Home page completely build with Visual Composer, you have to active visual composer plugin.

If you dot want to build a page from scratch, you may import the theme's demo content and you will get instant access to all of the homepages straight from the theme's live preview. If you would like to build one from scratch or simply learn the structure of it, please keep reading.

If you built a page from scratch then create "New Page" and Select page template "Home".

Next step is to enable the Visual Composer for the page by clicking the "Backend Editor"

You can watch this video to create a home page with one-page menu.

Creating Portfolio

To creating Portfolio post just go to Portfolio > Add New from dashboard and then follow:

1. Add Portfolio title
2. Add Portfolio content
3. Add additional information about work
4. Add featured image
5. Add portfolio gallery if you want. If you set add gallery image then it will show slider image instead of featured image.

Creating Blog Post

Here you will get idea about dashboard of Blog post.

 

1. Add post title: Add your post title.
2. Post content: you can put any text content here also you can use visual composer. If you want to show "Read More" button then put cursor where you want to show "Read More" button then click "Insert Read More Tag" from the Editor then you will see the More Tag on the Editor.

 

 

3. Post Format: By default standard blog post is selected and if you select others post format as like gallery then you will see the extra option on bottom of the editor box. You can create gallery for the post and if you use meta option then you do not need to add featured image because gallery will show instead of featured image. 

4. Category: You can select post category from there and if you want to create new category then use "Add New Category" option.
5. Tags: You can use post tag. If you wish to use previous tags then click "Choose from the most used tags" link and add new tags with comma (,) separator.
6. Featured Image: Post thumbnail.

 

Plugins

Materialize comes with 6 required and 2 recommended plugins:

Required Plugin:
1. WPBakery Visual Composer
2. Redux Framework
3. Trendy Theme Plugin
4. Meta Box
5. Contact Form 7
6. MailChimp for WordPress Lite
 
Recommended Plugin:
7. Regenerate Thumbnails
8. Slim Jetpack

You must have installed all required plugin to get all features.

1. Visual composer: Use Visual Composer page builder you can take full control over your site. Build any layout you can imagine with intuitive drag and drop editor – no programming knowledge required.

Here you will find visual composer documentation.

In Materialize theme, you need to change some settings. Go to Visual Composer menu form your dashboard and navigate to Role Manager then select your desired post type. You can enable Visual Composer for pages, posts and custom post types. Note: By default Visual Composer is available for pages only.



2. Redux Framework: Redux is a simple, truly extensible options framework for WordPress themes and plugins. If you wish to customize/or extend Materialize theme then follow Redux Framework documentation here.

3. Trendy Theme Plugin: Trendy Theme plugins comes with many features: all post type, custom widget, meta options and much more. So, you must be installed the plugin. You do not need any documentation for this plugin just install and enjoy.

4. Meta Box: Meta Box plugin is a powerful, professional solution to create custom meta boxes and custom fields for WordPress websites.
Plugin documentation can be found here.

5. Contact Form 7: Contact Form 7 is powerful contact management plugin.
Plugin documentation can be found here.

6. MailChimp for WordPress, the absolute best. Subscribe your visitors from your WordPress site to your MailChimp lists, with ease.

If you wish to create new form or somehow missing form style then you can use following markup:

<div class="subscribe-form mailchimp">
  <div class="clearfix">
    <div class="input-field">
      <label class="sr-only" for="email">Email</label>
      <input id="subscribeEmail" type="email" name="email" class="validate" >
      <label for="subscribeEmail">Type your email</label>
    </div>
    <button type="submit" class="btn waves-effect waves-light">Subscribe Now</button>
  </div>
</div>


Plugin documentation can be found here.

Widgets

We have included 5 custom widgets but in total you have 20+ different widgets to use. To get them, all you need to do is drag widgets available on left side and drop into right sidebars on the right side.

Google Map API

Few days ago Google changes their map integration system. Now Google Map need a "Google Maps API key" to be able to use Google Maps on website.

We've added an option under settings named "Google Map API Key".  Just put your API KEY in the input box and enjoy!

Here is the instruction how can you get your map API key:
Login your dashboard and go to Settings>Google Map API Key

 

You’ll need to sign in with a Google account if you’re not already logged in. Then Create a project for Google Map API

 

You'll be redirect to credentials page. Put a name on Name input box. Select HTTP referrers(websites) then put your website URL and click on "Create" button.

 

A dialoug box will be popup with your API key. Copy this key and enter your Google maps API key in your dashboard input box.

 

Customization

Materialize theme has lots of customization option. In Materialize Option you will find all customization option. You can customize theme typography from typography section:

and there is also have color change option. You can change theme accent and content color and also change theme background, menu background and sticky menu background color.

 

and you can also use theme hooks for advanced customization.

Theme Hooks

Action Hooks:

materialize_before_register_sidebar
materialize_after_register_sidebar
materialize_before_single_post_navigation
materialize_after_single_post_navigation
materialize_before_post_thumbnail
materialize_after_post_thumbnail
comment_form_before
comment_form_after
comment_form_must_log_in_after
comment_form_logged_in_after
comment_form_top
comment_form_before_fields
comment_form_after_fields
comment_form_comments_closed

Filter Hooks:

materialize_author_bio_avatar_size
materialize_content_width
materialize_blog_sidebar
materialize_page_sidebar
materialize_footer_sidebar
materialize_google_font_url
materialize_sticky_menu
materialize_primary_wp_nav_menu
materialize_page_header_section_title
materialize_page_header_background
materialize_post_comment_avatar_size
materialize_grid_post_author_size
comment_form_default_fields
comment_form_defaults
comment_form_logged_in
comment_form_field_comment
nav_menu_css_class
nav_menu_item_id
nav_menu_link_attributes
walker_nav_menu_start_el
 

Theme Update

For automatically update you need to use Envato WordPress Toolkit plugin. If you install this plugin then you will the bellow option on your WordPress dashboard.

You need to provide some info like Envato username and Secret API Key. To get details instruction watch this video.

Sources & Credits

HTML/CSS

Fonts + Icon

JavaScripts

Photos and Videos:

Important!
The images used on the demo site are for demonstration purposes only and are not included in the download file. You need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects. We have included placeholder images for each instance.