Miao Theme Documentation

Created: April 2015 / Current Version: 1.07 / by ThemeVan

Introduction

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, You can asking on the support forum after you sign up with your purchased code. Thanks so much!

Support Forums

Any questions that are beyond the scope of this help file, asking on support forum

Visit Support Forum

Follow Us

Follow us on ThemeForest and don't miss our new upcoming premium themes.

Follow on ThemeForest

Rate Theme & Support

If you like our theme or support, please rate on ThemeForest in your download page.

Rate on ThemeForest

Getting Started

If you are first time to use WordPress, I think maybe you need to read the offical documentation for how to use WordPress, click here to read it.

About WordPress installation, you should download the latest version of WordPress code from WordPress.org, then upload all the WordPress files to your webhost(Some webhost is provide one-click installation, e.g. Bluehost), then, visit your website with your IP address or domain name, fill the MY SQL and Administrator information step by step. You can refer to the following Video:

Also, there are many useful How-to videos in WordPress.tv

Theme Installation

Unzip the downloaded package. Find the zipped theme file called miao_theme_v1.x.zip.

Go to "Appearance > Themes" in your dashboard side menu. Click “Install Themes” tab and upload the zipped theme file. Activate it after uploading is finished.

You can also upload the theme to "/wp-content/themes" directory via FTP client.

Initialization

After you actived the theme, please initalize the theme as the following steps.

1. Change default image size to double size for retina screen

First of all, I strongly suggest you change the default image size to double size in "Setting > Media" in order to make the images looks more clear on Retina screen.

Please note, if you actived WooCommerce plugin, you should also change the default image size in "Woocommerce > setting > catalog > image options", just change all default size to double size, for example, change 150px to 300px.

If you have already uploaded images before, you should regenerate all old thumbnails with regenerate thumbnail plugin.

2. Install the require plugins

After you installed and actived the theme, you will see the plugin installation notification, I suggest you install all the plugins I required and recommended.

Click the "Begin installing plugins" link. After the plugins installed, don't forget active them.

Then, just add the post categories, some neccessary pages, for example, about, contact,etc.. Don't forget set the custom menu in "Appearance > Menus" and put the pages and categories into the primary menu, footer menu or language list.

If you are unfamiliar with this theme or not super experienced with Wordpress we HIGHLY recommend you to install the Dummy Data before moving forward. It will be easier for you to remove this data later than to spend tons of time trying to figure out I set this theme up without using the dummy data. Jumping to Dummy data section.

Dummy Data

If you are newbie and unfamiliar to use this theme, we suggest you import the demo data in order to getting started quickly.

After you activated all required plugins, especially one click demo import plugin, just go to "Appearance > Import Demo Data", click the import button, waiting for a few minutes until the import process finished, that's it.

Additionally, we include the theme option data in the main package which you downloaded from ThemeForest, you will find 'options.txt' file, just copy the file content to "Appearance > Theme options > Utility > Import field" and hit the import button, the demo theme options data will be imported into your website.

Homepage

There are four kinds of layout for the default homepage after you installed the theme that you can find them in the "Appearance > Theme options > General Settings > Default Homepage Template". If you want to create a custom homepage with rich content such like the demo site, you should do it as following steps.

First of all, add a new page in "Pages > Add New", there are three homepage templates that you can select one in the page attributes area, save the page.

You can also install "Page Builder by SiteOrigin" plugin to make your own custom homepage, if so, please select "custom template".

After you added the homepage, then go to "setting > reading", select "A static page" checkbox for the first option, and don't forget select your own custom homepage in the drop list.

Now go back to the homepage in front-end, refreshing and you will find the homepage is changed.

Page Templates

The default page is only display the content text in the main container. If you want to create a new homepage, gallery or contact page, you can select the specific page template from the Page Attributes box.

  • - HomePage

    There are 3 preset templates for the homepage, you will see the appearance of them if you check the demo site.

  • - Contact

    After you select Contact template, you will see the "contact page settings" section appeared as following screenshot.

    If you want to set your own google map, you need to get the google map embed code first, then, edit the contact page, you will find the google map field in the contact page settings section, just put the code into it.

    Please note, you can use "contact form 7" plugin to create your own custom form to instead of the default form. Just generate the form shortcode from the plugin, and copy the shortcode to "Contact Form 7 Shortcode" field.

Category Templates

We include four kinds of templates for the blog archive page: standard template, standard with sidebar, masonry template and masonry without sidebar, when you add or edit the category in "Post > Categories", just select the template in "Select Template" drop list.

If you want to place a beautiful slider on the top of the category page, just copy the revolution slider shortcode into "slider shortcode" field.

Widgets

There are 8 widgets area in "Appearance > Widgets" like below

"Shop sidebar" is only show up on the product archive page and product detail page when you have already actived Woocommerce plugin.

"Bottom widgets" will show up at the bottom section of each pages.

In particular, "Miao Recent Posts with thumbnail" and "Miao Flickr" are our custom widgets.

Shortcodes

Although you can use "Page Builder by SiteOrigin" plugin to create different layout and add some useful elements, we also provide many shortcodes that can help you to create some different layout or elements, they are easy to use.

We integrate the shortcode generator on the editor tools that you can set the shortcode arguments and insert the shortcodes to the content visually.

- Columns

One half

[alaya_one_half]....[/alaya_one_half] [alaya_one_half_last]....[/alaya_one_half_last]

One third

[alaya_one_third]....[/alaya_one_third] [alaya_one_third]....[/alaya_one_third] [alaya_one_third_last]....[/alaya_one_third_last]

One fourth

[alaya_one_fourth]....[/alaya_one_fourth] [alaya_one_fourth]....[/alaya_one_fourth] [alaya_one_fourth]....[/alaya_one_fourth] [alaya_one_fourth_last]....[/alaya_one_fourth_last]

Many possible orderings may exist, for example:

One third & Two third

[alaya_one_third]....[/alaya_one_third] [alaya_two_third_last]....[/alaya_two_third_last]

One fourth & Three fourth

[alaya_one_fourth]....your content here...[/alaya_one_fourth] [alaya_three_fourth_last]...your content here...[/alaya_three_fourth_last]

- Skill

[alaya_skills]
[alaya_skill title="Dreamwaver" percent="100%" hide_percent=0 text="Instead of Percent"]
[alaya_skill title="Photoshop" percent="80%"]
[alaya_skill title="illustrator" percent="60%"]
[alaya_skill title="HTML5" percent="70%"]
[alaya_skill title="jQuery" percent="50%"]
[/alaya_skills]

If you want to hide the percent number, please set "hide_percent" to 1 like first line [skill title="Dreamwaver" percent="100%" hide_percent=0], inversely, set it to 0 or remove the "hide_percent" argument.

If you want to use the other text to instead of the percent number, just set "text" argument.

- Toggle

[alaya_toggle title="Toggle Title..." status="off"]
....content....
[/alaya_toggle]

status options: on or off

- Tabs

[alaya_tabs]
 [alaya_tab title="Title 1"]..Content..[/tab]
 [alaya_tab title="Title 2"]..Content..[/tab]
 [alaya_tab title="Title 3"]..Content.. [/tab]
[/alaya_tabs]

- Button

[alaya_button href="http://" text="Button" color="black" size="small" text_color="#fff" bg_color="#" align="left" target="_blank"]

color value: black, green, blue, orange, yellow, red,white,gray,pink,purple
bg_color value: custom background color, e.g. #990000, if you don't want the background color, please set it to "none"
border_color: the border color of button, e.g. #000000
size value: small, large,large-x
target value: _blank, _self
align value: left, center, right
text: the text of button
anchor value1 or 0. If you want the button link to be a anchor link, please set its value to "1".
lightbox value: 1 or 0. If you want to open a lightbox for image when click button, please set lightbox=1, default is 0

- Heading

[alaya_heading heading="HEADLINE EXAMPLE" top="10px" bottom="10px" size="h2"]

size value: h2,h3,h4,h5,h6
top and bottom: adjust the top and botton distance.

- Feature item

[alaya_feature_item title="TITLE" image_url="IMG URL"]....Content.. [/alaya_feature_item]
[alaya_feature_item title="Clickable Example" image_url="IMG URL" href="http://domain.com" target="_blank"]....Content.. [/alaya_feature_item]

You should put each feature item shortcode into columns shortcode if you want to list multiple items in the same line.

Additional, you can get more beautiful free icons in The Noun Project

- Member

[alaya_member name="Johnny" avatar="http://domain.comm/avatar_URL.jpg" job="Designer" gender="gentle"]I'm a web designer.[/alaya_member]

- Dropcap

[alaya_dropcap]1/2[/alaya_dropcap]Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

- Separator

[alaya_line color="#ccc"]

- Clear float

[alaya_clear]

- Social icon

[alaya_social_icon color="dark" facebook="http://www.facebook.com" twitter="http://twitter.com"]

Social options:
facebook, twitter, tumblr, flickr, linkedin, youtube, vimeo, weibo, github, soundcloud, wechat, dribbble, behance, googleplus, pinterest, deviantart, xing, vk, yelp, instagram, rss

size:
small, big

Revolution Slider

Revolution slider is a advanced & easily using plugin developed by themepunch. You can create a parallax slider with it. If you have any questions about using this plugin, you can ask the plugin author here, but don't forget to tell the author you have purchased "miao" theme which is integrated Revolution Slider plugin with Extend License.

Also, the plugin documentation is included in this package, you can check it here.

Customization

We provide some options for customize the theme in "Appearance > Customize", e.g. changing color scheme, intergrated google webfonts for change the text font,etc...

  • - Secondary development

    If you are going to secondary developing, please don't modify the source code of the theme, you'd better create a child theme, or add your custom CSS/javascript in "Appearance > Theme Options > Custom Codes > CSS codes(or javascript code)", it will not conflict with the future upgrading, otherwise, you can't upgrade your theme smoothly.

    For how to create a child theme, you can refer to the following offical documentation, http://codex.wordpress.org/Child_Themes. Also, our support service is not include helping user to create a child theme, but we would like to answer your questions about the php function, file structure or CSS.

  • - Support Service

    If you want to deep customize the theme or secondary develop, unfortunately, we are not provide customization service, the support service is only include fixing bug and trouble using. Maybe you can look for a freelancer developer on http://www.microlancer.com/ or http://freelancer.com

Localization

This theme is ready for localization. We have made every string translate able with the text domain "alaya", use Poedit editor to translate it.

For how to create your own language file, please do it as following steps

  1. Go to /wp-content/themes/miao/languages directory, you will find the default.po file
  2. Just copy this file and rename the file in format language.po (ie. pt_BR.po, de_DE.po, etc.)
  3. Then, just open this file with Poedit editor, translate all words to your language, save the file.
  4. Go to "Setting > General > Site language", you will find the language options at the bottom, select your language.

Upgrade

Every times when we release the new version, you need to know how to upgrade the theme. Generally, if you haven't modified any source files of the theme, just remove the old version and reinstall the new version directly, if you have changed some source files, you can't reinstall the new theme, it's hard to upgrade, you must move all your changes to the new theme before you reinstall or override the old files.

Credits

thanks all creator of these great files

All pictures in the demo site is from Flickr.com, view the picture credits.

Thanks for your reading, enjoy in the theme!