Installation

Getting Started

To install "Zen" theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

Update WordPress: To ensure a positive user experience, we highly recommend you update your WordPress to the latest stable version 3.6+. This will help to ensure that you are able to utilize all of the latest features of WordPress.

Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find zen.zip file.

You can install the theme in two ways:

  • via FTP: Extract zen.zip file and upload the extracted folder to /wp-content/themes/ folder on your server.
  • via WordPress:
    1. Login to admin panel.
    2. Go to Appearance - Themes and click on the tab Install Themes. Choose upload.
    3. Click on Browse..., select the "zen.zip" and click in Install Now.
    4. After successfull installation click on Activate or go to Appearance - Themes and click on Activate to activate the newly installed theme.
    5. Next you will see a new menu item Appearance - Theme Options.

Theme Update

IMPORTANT: Backup your old theme folder. Download it to your computer locally.

You can upgrade the theme in a couple of ways:

Overwrite the entire theme folder

Extract zen.zip file and upload the extracted folder via FTP to /wp-content/themes/ folder on your server.

Re-upload via WordPress admin panel

Navigate to Appereance - Themes page. Activate a different theme. Delete previous version of Zen and re-upload the zen.zip file (refer to basic installation) downloaded from package.

What you start from

Now, you have installed and activated the theme 'Zen'. What's next?

The first thing you need to do is configure the parametres required, in the menu Appearance - Theme Options. There are quite a lot of them, but almost all of the parameters have default settings that will suit most of the users. Therefore, you can start with uploading a logo and favicon for your website, entering your personal data and saving the settings. All other parameters can be set up later on.

Homepage

Now, let's create a homepage. To get the same page, as the one on our demo, you can add following set of shortcodes into the page body:

[gap id="any_unique_id" bg_img='Background_image_url' parallax='true']
	[features cat='the_category_you_selected' title='We can help you with']
[/gap]

[headline]We do it[/headline]

[portfolio count='6' switcher='true' cols='3']

[parallax id="generated_id"][testi_slider title='Rumors' count='3' category='the_category_you_selected'][/parallax]

[tabs tab_names='Follow|Get in touch|Message' initial='2' style='2']
	[tab][social][/tab]
	[tab][contacts][/tab]
	[tab][contact_form title='Contact Form' description=''][/tab]
[/tabs]
					
In the field Post Header you should add [slider category='the_category_you_selected'].

Main Slider

Now, let's set up the main theme's slider.

To create the slider similar to the one you can seen on the homepage, please use the shortcode [slider]. In parameters of the shortcode you can indicate the category:

[slider category='category_name']
or ID's of posts:
[slider ids='11, 12, 13']

Also, you can specify number of the posts to be displayed in the slider (default number of posts displayed by the slider is three):

[slider ids='11, 12, 13' count='3']
					

In the post to be displayed in the slider you can add an icon and choose the curve of its movement.

To do that, you need to select the icon from the list, copy its name (e.g."icon-down-dir") and insert it into the field Post Format URL:

Now, you have finished up the appearance of the homepage of your website. It is time to start a blog.

To use the blog's functionality in our theme, you need create the blog stream page. To do this, you need to:

  • Go to Pages under the WordPress menu and then click on Add New.
  • Put your Title as usual ("Blog streampage" for example)
  • Choose "Blog streampage" as the page's template

  • Publish this page.

Now assign the newly created page as "Posts page" (blog streampage). To do this:

  1. Select the menu item Settings - Readings


  2. In the field Front page displays select "A static page (select below)" , and in the list "Posts page:"choose the page you have created. .

Blog Items

Now you can create blog posts.

  • Go to Posts under the WordPress menu and then click on Add New.
  • Put your Title as usual.
  • Put Content if needed.
  • Select one or more categories to the Categories.

  • Select desired Post Format.

    1. Standard - just set the featured image or without featured image.
    2. Gallery - In the field Custom Post Format, please, add links to the pictures (or use Media manager). Every link must be inserted on the new line.
    3. Video - Insert link to the video (Youtube or Vimeo) in the field Custom Post Format.
    4. Audio - Insert link to the audio file in the field Custom Post Format.
    5. Quote - Add text of the quotes. In the field Title you can specify author of the quote. You can add link to the author's page by adding URL in the field Post Format URL.
    6. Link - Add a link to the Custom Post Format field.
    7. Status - Allows to use post as a status-message of the blog's author.
    8. Image - Displays only featured image and title of the post.
    9. Chat - Displays a quote from chat, e.g.:
      <ul>
      	<li><a href="#">user 1</a>
      		<ul>
      			<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, magna aliqua.</li>
      		</ul>
      	</li>
      	<li><a href="#">user 2</a>
      		<ul>
      			<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</li>
      		</ul>
      	</li>
      </ul>
      										
    10. Aside - Displays text of the post.
  • For every post item it is needed to upload an image and to set it as a featured image. Click Set featured image on the right in the Featured Image section.

  • Click Select Files button and select image to upload (the full size image).

  • After image was uploaded you need to set this image as featured. Click Use as featured image.

  • Publish this post.

Portfolio

Portfolio - custom post type with special set of fields that allow to provide full information on the work done.

Portfolio Options. General.

  • Show post in the blog stream page. - this option allows to display portfolio post in the blog stream page.
  • Project Link - link to the work result.
  • Release date - date of project's release.
  • Client - a customer.
  • Artwork by - an author of the project.
  • Link target for Artwork by - a link to the page of author of the project.
  • Post Format URL - is used to add gallery or video to the post.
  • Upload or select media - Allows to add contents into the field Post Format URL using Upload Manager.

Portfolio Options. Secondary.

  • Post Header - allows to edit header of post.
  • Animation select - select type of hover effect..
  • Project Filed Label - Label of the project's author; it can be changed, e.g. into "directed by"or "created by".

Portfolio Post Formats

To create a gallery inside the portfolio post, select the post format Gallery, and for video post, select the post-format Video. Other post-formats are not supported in the portfolio.

Parallax

Post type Parallax is used to create fullwidth-block, with parallax-effect. Upon saving Parallax post, you receive a shortcode. Just copy it and paste it in any place on your website. Between opening tag [parallax id=''] and closing one [/parallax] you may place any contents.

Parallax Options

  1. Post Format URL - A field to insert gallery in parallax-block.
  2. Upload or select media - Use media manager to add pictures in parallax-block.
  3. Image Change Frequency - Selection of frequency of background image change.
  4. Parallax shortcode - copy and paste the shortcode generated in this field; add any contents between opening and closing tags.

Also, image gallery for background can be added in the field Post Content using Add Media -> Gallery.

If you want to design fullwidth-parallax block with one background image, you can use shortcode [gap][/gap]

Custom pages

Now we can prepare the other pages of our blog. This is not required, but if you want to change the display settings on Page 404, Archive pages or Search results - you have to create separate pages and customize them.

Consider the example of the Page 404. For pages Archive pages or Search results (if needed) configuration should be done the same way.

Page 404

Let's set up an error 404 page. To do this, you need to:

  • Go to Pages under the WordPress menu and then click on Add New.
  • Put your Title as usual ("Page 404" for example)
  • Choose "Page 404" as the page's template

  • In "Page Options" area we set up the display of this page:
    • Select Sidebar
    • Show Sidebar
  • Publish this page.

Archives

Archives Page Setup is similar to "Page 404"(see above)

Theme Options

Now, let's talk about the theme's settings: Appearance - Theme Options. Here you will get full control over display and functionality of the web-site.

General

In this section you can set the following settings:

  • Site Logo - in this field you can upload your logo.
  • Select the type of logo - select the type of logo display - image or text.
  • Favicon - In this field you can upload the icon to your website.
  • Footer copyright text - In this field you need to enter any text to be displayed in footer.
  • Analytics tracking code - In this field you can insert the code to monitor activity on your website.
  • Image dimensions - Allows to choose quality of the pictures displayed on the website. Select High Resolution for correct image display on displays with high pixel density. To do this, you need to upload pictures twice bigger.
  • Show "back to top" button: - Show or hide back to top button.
  • Options block - Show or hide block with options.
  • Submenu width: - using this option you will be able to choose width of drop-down menu.
  • Main theme color: - set main accent color of the theme.

Sidebars

Here you can add and remove sidebars. You will be able to configure the widgets for the newly created sidebars in the menu Appearance - Widgets

Portfolio

In this section theme options you can specify labels of fields for work description in portfolio, as well as select standard animation for portfolio posts.

Blog

In this section you can switch display of the author's block and related posts on single page on and off.

Social

Pick and download any social network icon, and specify URL of your profile. The list of your accounts in social networks can be displayed using shortcode [social].

Contacts

Contacts - section of Theme Options, where you can specify contact information. To display contact info, please use widget ThemeRex Contacts.

Widgets

  1. ThemeRex - Flickr photos - used to display your pictures from Flickr.
  2. ThemeRex - Contacts - used to display your contact info.
  3. Follow Me - used to display the list of your accounts in social networks.
  4. Popular - used to display popular posts. The first tab puts out posts in order by number of views, the second tab - by number of comments.

Shortcodes

Shortcodes are a cool feature in WordPress that essentially allows you to do some pretty incredible things by just inserting a shortcode into a page or post. Using Shortcodes is a breeze, just insert one where you want the relevant content to show up.

The theme comes pre-packed with a number of shortcodes allowing you to add the info easier.

IMPORTANT: Please make sure to always start new shortcodes on new lines. Most of the time you wont encounter any errors if you don't do that but unfortunately WordPress does mess up the html sometimes. This is true for all shortcodes, but the inline ones like highlight, those are the only ones that don't need a new paragraph.

Here's a list of the shortcodes included in Zen theme:

Accordion

Creates blocks of the "accordion" type . Attention: at the same time only one of the blocks can be open

Parameters:

  • initial - (number). The number of the initially open block (from 1 to the number of blocks). Attention: if you want make so, that all accordion item are closed initially - write parameter initial greatest, than items count!
  • title - (string). Applied only for the shortcode [accordion_item]. Contains the title for the current element as favorite.
[accordion style="2" initial="2"]
[accordion_item title="Et adipiscing integer"]Et adipiscing integer, scelerisque pid.[/accordion_item]
[accordion_item title="A pulvinar ut"]A parturient enim porta ut sed, mus amet nunc.[/accordion_item]
[accordion_item title="Duis sociis"]Duis sociis, elit odio dapibus nec.[/accordion_item]
[/accordion]

Audio

Inserts an audio file.

Parameters:

  • url or src - (string). URL of an audio file
  • controls - (number). Whether to display the playback controls. The value can be 0 or 1.
  • width - (number). The audio container's width (in percent or pixels).
  • height - (number). The audio container's height (in pixels).
[audio src="http://somesite.com/audio/filename.mp3" width="100%" height="30"]

Button

Creates different types of buttons.

Parameters:

  • Style - regular or border, defines the button type.
  • Size - small, medium, large, huge
  • Link - set the link url
[button style='regular']Button caption[/button]

Columns

Creates columns in the text

Parameters:

  • count - (number). The number of columns in the generated block. IMPORTANT: Inside the block [columns] ... [/columns] the number of blocks [column_item] ... [/column_item] must correspond to the parameter count.
  • span - (number). Applied only to the shortcode [column_item]. Indicates the number of merged columns.
[columns count="2"]
[column_item]Et adipiscing integer, scelerisque pid, augue mus vel tincidunt porta.[/column_item]
[column_item]A pulvinar ut, parturient enim porta ut sed, mus amet nunc, in.[/column_item]
[/columns]
[columns count="4"]
[column_item]Et adipiscing integer, scelerisque pid, augue mus vel tincidunt porta.[/column_item]
[column_item span="2"]This column's width twice enlarges. A pulvinar ut, parturient enim porta ut sed, mus amet nunc, in.[/column_item]
[column_item]A pulvinar ut, parturient enim porta ut sed, mus amet nunc, in.[/column_item]
[/columns]

Display Contact form

[contact_form title="Contact Form" description="Mauris aliquam habitasse magna a arcu eu mus sociis"]

Dropcaps

Used to create the dropcaps effect - special highlighting of the first letter in a paragraph.

[dropcaps]Paragraph text[/dropcaps]

Google Map

Displays Google map at the address you specified

Parameters:

  • address - (string). The address to which you want to display the map
  • width - (number). Map frame width (in pixels or percents)
  • height - (number). Map frame height (in pixels)
[googlemap address="25 Broadway, New York" width="400" height="300"]

Highlight

Used to highlight a text with the font's color and / or background.

Parameters:

  • color - (string). The color of the text. You can specify the color (white|black|red|blue|green|brown|... - up to 140 styles) ot its code in format #rrggbb, where rr is a hexademical value of the red component, gg - a hexademical value of the green component, bb - a hexademical value of the blue component
  • backcolor - (string). The background color of the text. The same parameter as color.
  • style - (string). Arbitrary set of CSS-properties (for advanced users only)
[highlight color="white" backcolor="red"]highlighted text[/highlight]

Image

Inserts an image into the text, pressing it (image) to the left or right edge of the text, and the next image text flows around it on the opposite side.

Parameters:

  • src - (string). URL of the image
  • width - (number). the image's width (in pixels).
  • height - (number). the image's height (in pixels).
  • title - (string). Text at the bottom of the image.
  • align - (string). Alignment of the image. It can take one of the following values​​: left|right
[image src="images/1200.jpg" width="300" height="150" title="Funny cat" align="left"]

Infobox

Creates different types of messages.

Parameters:

  • style - (string). The infobox style. It can take one of the following values: regular|info|success|error|result. If this parameter is not specified - it gets 'regular'
  • static - (number). Sign of the static block. If this parameter is set to 0 - right in the block there is a button "x" and the block may be closed (disappear) when you click on it. If this parameter is not specified - it gets 1.
[infobox style='regular' static='1']Highlight text here[/infobox]

Line

It creates the link of the set style

Parameters:

  • style - (string). The line style. It can take one of the following values: none|solid|dashed|dotted|double|groove|ridge|inset|outset
  • width - (number).The line width. It can be set in pixels (simply specify the number) or as a percentage of the page width (specify number with percents). If this parameter is not specified - it gets100%.
  • height - (number). Line width (in pixels)
  • color - (string). The color line. You can specify the color (white|black|red|blue|green|brown|... - up to 140 styles) ot its code in format #rrggbb, where rr is a hexademical value of the red component, gg - a hexademical value of the green component, bb - a hexademical value of the blue component
[line style='solid' top='10' bottom='10' width='100%' height='1' color='#FF0000']

Follow

Displays list of social network accounts.

Lists of accounts and icons can be edited in Theme Optionsin section Social.

[follow]

Contacts

Puts out skypename and mailto-link from the section Theme Options -> Social.

[contacts]

Gap

Adds fullwidth-page gap, for pages without sidebar.

Parameters:

  • id - unique ID of the block.
  • bg_img - URL of background picture
  • parallax - true, if you want to use Parallax effect int he background block.
[gap bg_img='images/parallax1.jpg' parallax='true' id='parallax_block1']

Portfolio

Put out Portfolio Posts.

Parameters:

  • count - number of posts displayed.
  • cat - slug or an ID of the category.
  • cols - number from 2 to 4. Number of columns.
  • swticher - true or false switch for number of columns.
  • excerpt - true or false. If set true - post excerpt will shows instead categories list.
[portfolio count='6' switcher='true' cols='2']

Fetures

Shortcode to design features posts block.

To make a post in the features section a link, you need to specify URL in the field Post Format URL.

Parameters:

  • count - A number. Number of posts displayed.
  • title - Title of post.
  • category - Category of posts. ID or slug.
  • ids - List of posts' id's, separated by comma. If parameter 'ids' is specified, parameter 'category' is ignored.
[features cat='' ids='249, 89, 88' title='We can help you with']

List

Creates lists of different styles

Parameters:

  • style - (string). List display style. It can take one of the following values​​: ordered|unordered.
[list style="ordered"]
[list_item]Et adipiscing integer.[/list_item]
[list_item]A pulvinar ut, parturient enim porta ut sed, mus amet nunc, in.[/list_item]
[list_item]Duis sociis, elit odio dapibus nec, dignissim purus est magna integer.[/list_item]
[list_item]Nec purus, cras tincidunt rhoncus proin lacus porttitor rhoncus.[/list_item]
[/list]

Quote

Used to insert quote blocks.

[quote]Et adipiscing integer, augue mus vel tincidunt porta[/quote]

Skills

Parameters for [skills]:

  • Title - Set the block's title.
  • Style - Radial or Bar
  • id - ID of the block. Please note, id must be unique!

Parameters (only for [skills_item]):

  • title - (string).The name of the current element.
  • level - (number). Ability level for the current element (from 0 to 100)
  • color - (string). Color block with percentahge for the current element. The main color of accented theme's elements is used by default.
[skills]
[skills_item title="PHP" level="95%"]
[skills_item title="MySQL" level="90%" color="#55ff55"]
[skills_item title="Javascript" level="90%"]
[/skills]

Slider

Displays posts of the selected category.

[slider category='slider' count='3']

Parameters:

  • category - slug or id of category of posts.
  • ids - (optional) list of id's of posts. List of id's has a higher priority than parameter category.
  • count - number of sliders displayed..
  • gallery - true or false. If parameter is set "true" - slider will shows featured images insted post content.

Text of the post inside the slider may contain shortcodes.

To learn more how to prepare posts for slider, visit this link.

Slider. How to.

Detailed instruction: How to create a slider.

  1. Open Posts->Categories and create a new category, e.g. Slider 1 (name: Slider 1, slug: slider1).
  2. Create a new post. Assign category Slider 1for this post.
  3. Create a new page, and in the Page Content or Post Header insert the shortcode [slider category="slider1"]. In parameter category please specify the category you have created.
  4. If you specify true in the parameter gallery, your slider will be putting out Featured Image of the post. Example: [slider category="slider1" gallery="true"]
  5. To add more sliders , you need to create more posts and specify there the category Slider 1 (or the other one you created).

Testimonials Slider

[testi_slider title='Rumors' count='3' category='features'] Displays posts from the selected category.

Parameters:

  • title - title of the slider's block;
  • count - number of sliders displayed;
  • category - category of posts.

As a quote of the author the post's title is used.

As the photo featured image is used.

Table

Displays the table

[table]
Paste here table content, generated on one of many public internet resources, for example:
http://html-tables.com/
or http://tablegen.nfshost.com/
or http://www.impressivewebs.com/html-table-code-generator/
[/table]

Tabs

Creates blocks with tabs

Parameters:

  • tab_names - (string). Headlines tabs listed per the sign "|" (vertical bar)
  • initial - (number). The number of previously open tabs (from 1 to the number of tabs)
[tabs tab_names="Planning|Development|Support" initial="2"]
[tab]Randomised words which don't look even slightly believable.[/tab]
[tab]Fact reader will be distracted by the readable content of a page when.[/tab]
[tab]Distracted by the readable content of a page when. Looking at its layout.[/tab]
[/tabs]

Team

Displays the members of your team (photo with description)

Parameters:

  • user - (string). Applies only to the shortcode [team_item]. It contains the user login to your blog.The user's data contains the description and links to the user profile in popular social networks.
[team style="big"]
[team_item user="martha"]
[team_item user="john"]
[team_item user="mike"]
[/team]

Woocommerce

Please, download the plugin Woocommerce from the official website repository and upload it to the folder ' wp-content/plugins' using FTP-client. Or, you may use WordPress menu to install plugins (Plugins -> Add New).

PSD Files

We've included 21 PSD files with this theme. All PSD files you can find in the folder PSD

Demo Content

IMPORTANT: Please, note! Before you install demo-content, Woocommerce must be installed.

We've included XML file Zen_Demo_Content.xml with content from our demo site that you can find in DemoContent folder inside the archive that you have downloaded from ThemeForest.

To import this information into a WordPress site follow these steps:

  1. Log in to that site as an administrator.
  2. Go to Tools: Import in the WordPress admin panel.
  3. Install the "WordPress" importer from the list.
  4. Activate & Run Importer.
  5. Upload the file "Content.xml" file using the form provided on that page.
  6. You will first be asked to map the authors in this export file to users on the site. For each author, you may choose to map to an existing user on the site or to create a new user.
  7. WordPress will then import each of the posts, pages, comments, categories, etc. contained in this file into your site.

Sources and Credits

This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification.

  • Fonts:
    • Raleway (non standard)
    • Fontello (non standard, icons set)
    • Arial (standard)

All non standard fonts are from Google Web Fonts and Fontello icons set

We have used the pictures from:
http://www.bigstockphoto.com/

All images are copyrighted to their respective owners and not available for download with this theme.

Additional information from ThemeREX:

“Theme Rex” support team is happy to greet you here! Our operators and developers are always glad to help our customers. Should you have any questions, you may contact us for support:

10.00 – 19.00 (CET), Monday till Friday.

What is important to know about ThemeREX Support Policy

  • To get a pre-purchase advice, you may post in the theme’s forum
  • To get a response more promptly, you are recommended to use our Ticket-system (just click on banner “Support Sys” on the item page)
  • Important! For correct work of Ticket-system, you mustn’t switch cookies in your browser off
  • We try to answer your questions within 5-10 hours. However, if any delay occurs it doesn’t mean that we forgot about you. Some of the issues require testing and analyzing, so we could help you more profoundly

We love to intercommunicate with our customers from all over the world. We always love to explain how our themes work. However, sometimes we have to say No:

  • Please, note! We do not support queries if you do not have a purchase code
  • Item support does not include:
    • Customization and installation services
    • Support for third party software and plug-ins

How to find a purchase key (see the screenshot):

  • open the ‘downloads’ tab in your account on ThemeForest
  • find our theme in the list of products
  • click ‘download’ button, and in the drop down meny select “license sertificate & purchase code”
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form from our Profile Page on ThemeForest. Thank you so much!

ThemeREX