Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here or submit ticket on purethemes.ticksy.com . Thanks so much!
Author: | Purethemes |
Item : | themeforest.net/item/nevia-responsive-wordpress-theme |
Created: | 2013-02-22 |
Modified: | 2013-03-06 |
Current Version: | 1.0.3 |
Documentation Version | 1.0.4 |
I assume you have your own WordPress installation, so let's get started!
You can do it in two ways:
Once the theme is uploaded, you need to activate it. Go to Appearance Themes and activate your chosen theme.
After activating the theme, you will notice under Appearance menu new submenu Theme Options. You'll find there Theme Options Panel, from where you can do a lot of cool stuff. Every section of Theme Options Panel will be described later.
Now open this Options Panel and hit Save button - it will set some options for the start.
If you want to have the same content on your website as Live Preview of Nevia theme, you'll need to import demo content. To do that please go to Tools Import WordPress, install plugin you'll see and than select file "extras/import.xml" from Theme Package (the unzipped file you've downloaded from ThemeForest after buying this theme).
If you don't want to import whole data, in "extras/layouts" you'll find txt files with code from Live Preview. You can choose for example home.txt, copy whole content of that file, than create new home page on your WordPress, paste it in Text view (the right top tab over Post/page Editor), and start working on your page based on this layout.
Notice All photos included with import file are just plain gray color, as they are copyrighted files purchased on PhotoDune. If you want to use them, list of links is at the end of this documentation.
If your import was successful, please go to Appearance Menus and in Theme Locations select "Menu", than save.
First you have to create a basic page, and select page template named "Home Page Template". Now you can fill it with your content and publish. Next, create another basic page with no content and default template, name it eg. Blog.
After that, go to Settings Reading and in the Front page displays choose A static page, then select your just created page Home.
For blog page you can select your page named Blog. Click Save Changes
Next, you should setup your permalinks to look pretty. You can go to Settings Permalinks, choose the Custom Structure, and use this: /%category%/%postname%/
This theme has two types of slider. First is based on FlexSlider by Woothemes, second is LayerSlider by kreatura. With Flexslider you can use slides based on a image&text layout, it's light, simple, elegant and fast. LayerSlider is a little bit heavier and harder to configure but gives you opportunity to create amazing animated slides with images and videos. Here is example of FlexSlider
To create slides for FlexSlider you need to go to Appearance Theme Options Slider and click Add new
You need to upload a backgroud to each slide, by default it should be 940x400px. The title is not required, if you want to show just and image, change "Empty slide" option to "yes"
To create slides for LayerSlider you need to go to LayerSlider in wp-admin and create new slider. Detailed howto for this is in next section
When you decide which slider to use, go to Theme Options and select Enable slider and choose name of script. If it's LayerSlider, select one from field below in Theme Options. Now, you'll see that slider on your homepage (if you've selected Home Page template, if your front page uses different Template, you'd need to select slider in this page editor.
You can find LayerSlider at the bottom of the WordPress Menu.
LayerSlider uses the WordPress contextual help menus to integrate documentation directly into the admin area where you will work on your sliders. It is much more convenient for everybody, and also, you can access to the documentation quickly. And because it is contextual, it only shows the things you will need to work with.
You can find the rest of our documentation about LayerSlider in the LayerSlider WP admin area. You can access it with the "Help" menu item on the top right corner of the page.
For the best visual effect you need to change some options for you slider.
When you are in Slider editor, you have the Global Settings tab.
Be sure to set there "Responsive" to on and in Appearance, select skin named nevia. You can of course use one of default skins or create your own.
Each slide can be created from many sublayers, sublayer could be an image, video, or some text. There's no predefinied styles, so each text box needs to be styled separately.
Here is table with CSS we've used on demo of Nevia in LayerSlider
Slide | Code |
---|---|
Slide 1 | padding: 18px 22px; color: #fff; font-size: 14px; font-weight: 600; border-radius: 2px; box-shadow: inset 0px -1px 0px 0px rgba(0,0,0, 0.1); background: #169fe6; |
Slide 2 | padding: 18px 22px; color: #fff; font-size: 14px; font-weight: 600; border-radius: 2px; box-shadow: inset 0px -1px 0px 0px rgba(0,0,0, 0.1); background-color: #4c4c4c; background: rgba(0, 0, 0, 0.40); |
To display slider on homepage, go to Theme Options - Slider tab, select LayerSlider, and choose which slider you want to show. Just how it's done on screenshot below:
If you want to display LayerSlider on any other page, set settings on page like on this screenshot (notice the Page Template, there are few with LayerSlider option)
This theme uses WordPress 3.0 Custom Menus. Go to Appearance > Menus and you will see a panel where you can create new menus. Create one, add your created pages to it(from the left side panels) and save it. After this, in the left side you have a Theme Locations drop down box where you can select the Menu. Choose your newly created menu, click Save and your menu is ready.
Nevia offers also Mega menu. This is still experimental feature, so we would really appreciate any feedback! Creating Mega menu is really easy, the image below should explain it. (Click to open in full size)
Creating posts is nothing new if you have even basic experience with WordPress. Nevia theme offers couple of additional options in Post editor.
Nevia support 3 types of posts. You can change them in right side box. Default is Standard - that one shows only text of post. Image type shows thumbs if it has any Featured Image. The Video post will display video if you'll fill Video URl option, and Gallery type will display gallery you've created in post. (How to create gallery is little bit further in docs)
Below Editor you'll see Layout box and Post options box.
Layout box gives you ability to select sidebar to display with post or page, and also select layout of post - you can put sidebar on left or right side, or just show full-width content. Right side is default.
You can create more sidebars in Theme Options in Sidebars section. Just follow instruction there.
You can choose here post display type.
If you want to use shortcodes in post content, you need to write the excerpt or you might see non parsed shortcodes in search results or in front page.
Pages have the same option for Layout like posts and couple more.
The Portfolio Template Options is used if you've selected one of portfolio templates for page. You can here choose which filters you want to show, that allows you to create couple portfolio sites, instead of default one site with all items
The Subtitle is a field where you can put nicely styled subtitle for a page
Slider settings - if you've selected Page template "Page with LayerSlider" here is the place where you choose which LayerSlider should be displayed
Template name | Description |
---|---|
Home page | Full width page with slider selected in Theme Options |
Portfolio page 2 columns | Page to list portfolio items in 2 columns |
Portfolio page 3 columns | Page to list portfolio items in 3 columns |
Portfolio page 4 columns | Page to list portfolio items in 4 columns |
Page with Flexslider | Page with flexslider |
Page with LayerSlider | Page with LayerSlider |
Portfolio page 2 colums + Flex Slider | page to list portfolio items in 2 columns and FlexSlider |
Portfolio page 2 colums + LayerSlider | page to list portfolio items in 2 columns and LayerSlider |
Portfolio page 3 colums + Flex Slider | page to list portfolio items in 3 columns and FlexSlider |
Portfolio page 3 colums + LayerSlider | page to list portfolio items in 3 columns and LayerSlider |
Portfolio page 4 colums + Flex Slider | page to list portfolio items in 4 columns and FlexSlider |
Portfolio page 4 colums + LayerSlider | page to list portfolio items in 4 columns and LayerSlider |
If you'll select one of "portfolio" templates for page, you can configure it using this Options box.
Portfolio is similar to posts. You can create portfolio item which will feature gallery of your images, or video clip. Fill the content ( by default it's 12 columns wide). Create Gallery the same way you do it in posts (reminder: screencast is here, and don't forget to set Featured Image.
Ideally images for portfolio should be 940px wide, smaller images won't look good as they will be strechted .
WordPress will try to resize images you're uploading, that may result in not the results you want. If you'll notice that, the best option for you is to prepare images in exactly the size you want (but width should be minimum 940px)
Now you have couple of custom options. First you can put subtitle to the Item name.
You can also switch gallery to Video, then just paste URL to the clip and it will be displayed in place of gallery slider. List of supported sites is here http://codex.wordpress.org/Embeds
By default content for text under portfolio item is 12 columns. In first 4 columns you can show informations like Date, Client name and link to Launch button. You need to first setup this fields in Theme Options. If you don't want this informations to be displayed, you can switch content width to Full - than it will be the same as Full width page, so 16 columns.
You can display 4 types on information for Portfolio item. "Text" and "Link" types values can be edited for each portfolio item (you'll find them under Portfolio Content Editor, "Filters" will display all filters selected for currently viewed portfolio and "Date of publication" is self explanatory :)
Example Portfolio Meta Informations:Filters acts like categories - you can add one portfolio item to many filters.
Here's some short info about basic plugins you could use in Nevia
After installing WooCommerce, be sure to go WooCommerce - Settings and uncheck option "Enable WooCommerce CSS styles"
From 04.03.2013 WooCommerce is in version 2.0. It has many changes from the previous versions 1.6.x, so I've updated Nevia to support WooCommerce 2.0. The file structure is a little bit different, and some php classes and names have been changed, so the support for 1.6.x is dropped. If you however need to use previous version of WooCommerce, you can still have it. Just remove from Nevia directory "woocommerce", and copy from "extras" folder "woocommerce 1.6.4" to your wp-content/themes/nevia, and rename it just to "woocommerce".
After installing, go to Settings - PageNavi, and be sure to have checked "Use pagenavi-css.css"
Nevia is fully compatible with WPML, which means you can create multilingual versions of your site.
You need to install two plugins from WPML - WPML Multilingual CMS and WPML String Translation. You'll find extensive documentation about using WPML plugin here http://wpml.org/documentation/getting-started-guide/, but you need to know two things about Nevia to fully translate it.
Except post pages and other content that is editable from wp-admin, theme has also couple of text string which are "hardcoded" in theme files. Good news, you can translate them also! You just need to go to wp-admin -> WPML -> String Translation, and find the strings you need to translate. The most crucial are this:
You simply click one and translate it, you need to check the box with "Complete translation" to be able to see it. This way you can translate Nevia related Portfolio and Blog page title, copyrights text and FlexSlider slides.
Currently LayerSlider plugin doesn't have support for WPML. However it has very neat functionality to duplicate sliders, and you can create unlimited number of them. So you can make slider in English, and than duplicate it on list of slides, rename it to French, change texts to French, and use on homepage.
How to display different LayerSlider on homepage by language
This apply only if you're using Home Page Template, for any other Page Template with LayerSlider you can select in Page Options which slider should be displayed on which language version. You need to edit file template-home.php: You'll find lines 23-24 with:$layerid = ot_get_option( 'pp_layerid', array() ); echo do_shortcode( '[layerslider id="'.$layerid.'"]' );replace them with this code:
switch (ICL_LANGUAGE_CODE) { case 'fr': echo do_shortcode( '[layerslider id="1"]' ); break; case 'de': echo do_shortcode( '[layerslider id="2"]' ); break; default: echo do_shortcode( '[layerslider id="3"]' ); break; }This is of course example code, what's important here is:
case 'fr': echo do_shortcode( '[layerslider id="1"]' ); break;This executes [layerslider id="1"] if current language code is fr (which is for French, 'de' for German, 'en' for English and so on)
Nevia has many shortcodes which will help you to build awesome layouts. In "extras" folder you have sample layouts saved as text files, so you can just copy them to your Editor and use them as a base for your site.
Here is list of all shortcodes as they appear in editor:
[headline margin="margin-reset" htype="h4"] Text [headline]
This will create H tag styled for nice start of paragraph. Use it a lot as it gives nice feel to content.
Options[dropcap color=""] R [dropcap]
This will change font size to bigger, use to create dropcaps in paragraphs
Options[tooltip title="" url=""] text [tooltip]
Create tooltip over link, showed on hover.
Options[list type=star] <ul> <li> list item </li> <li> list item </li> </ul> [/list]
Also available from TinyMCE gives you option to use nice list bullets.
[iconbox column="one-third" title="Easy to Customize" link="" icon="icon-bullhorn"]Proin iaculis purus consequat sem cursus digni ssim. Donec porttitor entume suscipit. Aenean rhoncus posuere odio in tincidunt.[/iconbox]
Iconbox gives nice icon to get attention of user, you can use e.g. it to list features of your products.
Nevia is based on modified Skeletons grid - Full width page has 16 columns, if it's page with sidebar it has 11 columns. Using columns shortcodes you can build your own layouts. You have also some preset layouts like:
You should use Columns Creator but it's easy to this shortcodes by hand. Look closely at this shortcode, the important part except the width is place. You have 3 options here - first, none or last. If last is used, it's assumed that this column is last in current row and floats will be cleared. First will set margin-left to 0px. If you have more than two columns you might want to use also place="center" - it will set margin left and margin right to 0px. It's good to try different parameters to find out what looks the best in specific situation.
[column width="1/3" place="first" ] Put here content [/column] [column width="2/3" place="last" ] Put here content[/column]
You can use other shortcodes in columns.
[notice title="This is a Headline" buttonlink="http://google.com" buttontext="Read More"] This is a example of style component for calling extra attention to featured content or information. Adipiscing elit. Cras eu nisl quam. Cras in elit a massa fermentum bibendum. [/notice]
it's good way to show "call to action" buttons and important informations.
[button size="small" color="green" url="#" icon="icon-ok" iconcolor="white"] Text [/button]
[tabgroup] [tab title="Tab 1" icon="icon-star"] Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.[/tab] [tab title="Tab 2"] Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.[/tab] [tab title="Tab 3"] Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit. [/tab] [/tabgroup]
You can add icons to tab by using parameter icon. Whole tab section must be in [tabgroup] shortcode.
It need's to be wrapped with [accordionwrap] shortcode
[accordionwrap] [accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, condiment ultrices consequat eu lorem ipsum dolor sit amet inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo dolor sit amet.[/accordion][accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, [/accordion][accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, [/accordion] [/accordionwrap]
It need's to be wrapped with [skillbars] shortcode
[skillbars] [skillbar title="Web Design 80%" value="80"] [skillbar title="HTML / CSS 90%" value="90"] [skillbar title="WordPress 85%" value="85"] [skillbar title="jQuery 70%" value="70"] [skillbar title="SEO 75%" value="75"] [/skillbars]
[box type=error] Error! Please fill in all the fields required. [/box]
Pricing tables are not available currently from TinyMCE editor.
Sample code for Pricing table:
[pricing_wrapper number="4"][pricing_table header="Standard" price="$9.99" per="per month" color="1" ]<ul> <li>5 GB Storage</li> <li>Free Live Support</li> <li>Unlimited Users</li> <li>No Time Tracking</li> <li>Enhanced SSL Security</li> </ul> <a class="sign-up" href="#"><span>Sign Up</span></a>[/pricing_table][pricing_table header="Premium" price="$29.99" per="per month" color="2" ]<ul> <li>5 GB Storage</li> <li>Free Live Support</li> <li>Unlimited Users</li> <li>No Time Tracking</li> <li>Enhanced SSL Security</li> </ul> <a class="sign-up" href="#"><span>Sign Up</span></a>[/pricing_table][pricing_table header="Professional" price="$69.99" per="per month" color="2" featured="yes" ]<ul> <li>5 GB Storage</li> <li>Free Live Support</li> <li>Unlimited Users</li> <li>No Time Tracking</li> <li>Enhanced SSL Security</li> </ul> <a class="sign-up" href="#"><span>Sign Up</span></a>[/pricing_table][pricing_table header="Maximum" price="$99.99" per="per month" color="1" ]<ul> <li>5 GB Storage</li> <li>Free Live Support</li> <li>Unlimited Users</li> <li>No Time Tracking</li> <li>Enhanced SSL Security</li> </ul> <a class="sign-up" href="#"><span>Sign Up</span></a>[/pricing_table][/pricing_wrapper]
You need to put all tables in container shortcode
[pricing_wrapper number="4"]
the parameter "number" has to be equal to number of tables you want to display.
Here's one regular column:
[pricing_table header="Standard" price="$9.99" per="per month" color="1" ]<ul> <li>5 GB Storage</li> <li>Free Live Support</li> <li>Unlimited Users</li> <li>No Time Tracking</li> <li>Enhanced SSL Security</li> </ul> <a href="#">Sign Up</a>[/pricing_table]
What's important here is header, price, per and color parameters.
The colors can be set to 1,2 or 3
Remember that there shoudn't be any white space between closing and opening tag [/pricing_table][pricing_table]
[team link="http://www.memberpage.com" photo="http://demo.purethemes.net/incredible/wp-content/uploads/2012/08/team_img.png" name="Fred Wallet" job="WordPress Developer" ] Tempus libero ellus viverra pharetra. Donec commodo gravida velit vel lorem ipsum dolor sit amet euismod. [/team]
Team shortcode is used on About Us page - it gives nicely styled boxes to feature team members of your comapny. Use example as a template for others.
[testimonials limit="4" title="Testimonials" subtitle=" / What Our Clients Say"]
This shortcode will display carousel with testimonials. You need to first add them in WordPress, in Testimonials menu (it's Custom Post Types)
[clients] <ul> <li><img title="logo_01" src="http://www.demo.purethemes.net/incredible/wp-content/uploads/2012/09/logo_01.png" alt="" width="187" height="95" /></li> <li><img title="logo_01" src="http://www.demo.purethemes.net/incredible/wp-content/uploads/2012/09/logo_02.png" alt="" width="187" height="95" /></li> </ul> [/clients]
You can display with this shortcode nice list of logo of e.g your partners, just put list of IMG tags in [clients] [/clients].
[recent_work limit="4" title="Recent Work" orderby="date" order="DESC" filters="" carousel="yes"] Some text [/recent_work]
You can display with this shortcode you recent portfolios on your page (note that it works as a carousel only on full width pages).
[recent_blog limit="2" title="Recent Work" subtitle="/ Stuff From Our Blog" words="15"]
You can display with this shortcode you recent blog posts.
[nevia_recent_products limit="10" carousel="yes"]You can also showcase products from your store using this carousel.[/nevia_recent_products]
You can display with this shortcode you recent products from WooCommerce shop.
[googlemap width="100%" height="250px" address='New York, United States']
You can display simple google map with address box, if you want something more advanced there are dozens of plugins you could use
Nevia Twitter widget is build on Twitter API 1.1, unfortunately Twitter is not that easy now to include on your website, you need to have API keys (similar to Facebook). To get the access keys you need to create an application on the Twitter Developer site. Once your application is created Twitter will generate your Oauth settings and access tokens. Now, when you have this informations, go to Appearance - Theme Options - Twitter and paste them to this 4 fields. Thanks to this you don't have to put these informations to widget, and it's hidden from other authors.
Options panel is based on amazing OptionsTree plugin.
You can choose from one of 500+ Google fonts. Select font for body and for headers. You can also just choose some nice font for a logo if you prefer to have text logo instead of image.
All sidebars that you create here will appear both in the Appearance > Widgets, and then you can choose them for specific pages or posts. Please choose a unique title for each sidebar and make it one word.
Nevia is using new feature of latest WordPress - Theme Customizer, you'll get there by clicking Appearance - Customize
It gives you real time preview of changes you made to your site.
You should use contact form 7 plugin for contact form. After installing it, go to Contact - Add new (or edit current one) and in Form field paste what's below:
<fieldset> <div> <label accesskey="U">Name:</label> [text your-name] </div> <div> <label>Email: <span style="color:#e4280f;">*</span></label> [email* your-email] </div> <div> <label>Message: <span style="color:#e4280f;">*</span></label> [textarea* your-message] </div> </fieldset> [submit class:button class:yellow "Send Message"] <div class="clearfix"></div>
Than at the top of page you'll see shortcode, for example:
[contact-form-7 id="503" title="Contact form 1"]Use it on a page you want to have contact form.
You'll find home, blog and portfolio pages in PSD format in "extras" folder.
You can learn from here about Translating theme into your language.
The .pot file is in 'nevia/languages' folder named 'default.pot'.
You can use Poedit to translate the .po file. You need to save it in languages folder, and name just the same way your
language is defined in WP config file. Open wp-config.php and check define ('WPLANG', '');
if it's for example fr_FR, save your .po file as fr_FR.po
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 a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.