Nirvata

Installation

Top
1. Install Nirvata Base Theme
  1. In your wp-admin, go to Appearance > Themes
  2. Click on the Add New Theme button at top
  3. Search for Nirvata in the search field
  4. In the results, hover on Nirvata theme and click the Install button

Note: Skip the steps above if you already have Nirvata Theme installed.



2. Install Nirvata Premium Plugin [ Recommended Method ]
  1. First, install the Nirvata Base Theme as described above.
  2. Next, Click here to download your premium theme zip file.
    Note: On iOS, Safari automatically unzips ZIP files when you download them. To avoid this, either disable Safari's auto-unzip or use another browser (like Chrome) to download.
  3. In your wp-admin, go to Plugins > Add New Plugin
  4. Click on the Upload Plugin button at top
  5. Select the nirvata-premium.zip file you downloaded in above step
  6. Click Install Now button
  7. Once the plugin is uploaded, click the Activate Plugin button

The steps above need to performed only once to install the plugin.
Once the plugin has been installed, you can now activate the license key to enable plugin updates.

Troubleshooting:
If you are getting a 'Exceeds the maximum upload size' error, this means that your hosting company has a restriction on size of uploaded files (sometimes this limit can be as set as small as 2MB). Open a support ticket with your hosting company asking them to increase the PHP upload size to atleast 20MB. Most hostings will do it for you within a couple of minutes.
Alternately you can upload the plugin using FTP.



2. Install Nirvata Premium Plugin [ Alternate Method - FTP ]

Some servers place a restriction on the file size you can upload via web interface. If you are getting a 'exceeds the maximum upload size' error uploading the plugin via WordPress Admin, you can upload it using a FTP program like Filezilla.

  1. Unzip nirvata-premium.zip file you downloaded above on your computer.
  2. Start FileZilla and login to your server using FTP details provided by your Hosting Company (hostname, FTP Username, FTP Password).
  3. In left panel, browse to your computer folder where you have the unzipped plugin folder from Step 1 above
  4. In right panel, browse to your wp-content/plugins folder. Most servers have it in the www folder
  5. Right click your local folder and click upload. It will take a few minutes to upload the plugin.Screenshot showing how to upload 'Olius Premium' Plugin
  6. Once upload finishes go to Plugins > Installed Plugins
  7. Locate Nirvata Premium in the list and click Activate

License Activation Premium Version

Top

In order to update the premium plugin, you will need to activate your License Key

» How to find your License Key

You can find your license key at any of these places

  • On the landing Purchase Receipt page when you make the payment.
  • In the welcome email you received when you made the purchase
  • You can also find your license keys on the My Account page on wphoot.com (click the My Account link visible in top Menu when you are logged in)
» Activating One Click Update on your site
  1. In your wp-admin area, go to Appearance > Nirvata Dashboard iBased on your theme version, this may appear under:
    wp-admin > Nirvata
  2. Click the Activate License tab.
  3. Enter your License Key and click the Save License Key button
  4. You can now Activate/Deactivate the license key for this specific site by clicking the Activate License Key for this Site button
» Updating the plugin

You will get a notice within your wp-admin area once a new version is available. Simply click the update now link to update the theme.

» Deactivating Licenses

If you do not intend to use Nirvata on a specific domain anymore, or if you are changing domain names, you can deactivate a license for your domain right from your wp-admin > Appearance > Nirvata Dashboard > 'Activate License' tab iBased on your theme version, this may appear under:
wp-admin > Nirvata > 'Activate License' tab

However, if you have already deleted/migrated your site from a domain without deactivating the license first, you can do so later at any time from your wphoot.com members area.

  1. If you are not already logged in, login to your wphoot.com account.
  2. Once you are logged in, click the My Account link in the top menu to go to Your Account page.
  3. Click on the Licenses tab in left navigation bar.
  4. Click on Manage Sites link next to your purchased theme license.
  5. Click the Deactivate Site link next to the domain you want to remove from your license activations.


 
Troubleshooting

If for some reason you are unable to activate your license key, you can manually update the premium plugin by following the steps below:

  1. Download the latest version (.zip format) from the My Account page on wphoot.com (click the My Account link visible in top Menu when you are logged in).
  2. In your wp-admin, go to Plugins > Add New Plugin
  3. Click on the Upload Plugin button at top
  4. Select the nirvata-premium.zip file you downloaded in above step
  5. Click Install Now button
  6. Once the plugin is uploaded, click the Replace current with uploaded button

Plugin Installation (HootKit)

Top

Nirvata works best with its companion plugin HootKit

HootKit is a wpHoot plugin which adds various functionalities to Nirvata theme such as widgets and sliders.
It is highly recommended to install HootKit plugin to maximize Nirvata's potential.

Lightweight & Fast
HootKit sliders and widgets were developed and styled specifically for Nirvata theme, so they fit Nirvata perfectly.
This keeps your site lightweight and fast without adding any bloated code.

  1. In your wp-admin, go to Appearance > Nirvata Dashboard iBased on your theme version, this may appear under:
    wp-admin > Nirvata
  2. Click the Theme Plugins tab.
  3. Click the Install button below HootKit plugin.
    Alternate Method: You can also install HootKit by going to Plugins > Add New in your wp-admin. Search for 'Hootkit' in the search box on top right. Once HootKit is shown in results, click Install Now
  4. Once activated, you can find the HootKit Settings in Settings > HootKit

Install Demo Content

Top

Installing demo content is the easiest way to setup your theme and make it look exactly like the Demo Site.
New users often find it more helpful to quickly edit content instead of creating site from scratch.

  • Your existing content (posts, pages, categories, images etc) will NOT be deleted or modified.
  • Demo Posts, Pages, Images, Widgets, Menus and other theme settings will get imported and installed. This action cannot be undone.
  • It is recommended to install demo content only on a fresh new site.
  1. Install the Hoot Import plugin.
    • In your wp-admin, go to Appearance > Nirvata Dashboard iBased on your theme version, this may appear under:
      wp-admin > Nirvata
    • Click the Theme Plugins tab.
    • Click the Install button below Hoot Import plugin.
  2. Go to Appearance > Import Nirvata Demo
    • Optional Plugins: You can install the plugins listed under Optional. These plugins are used on the demo site, however you can easily replace them with the plugins of your choice.
    • eCommerce Shop: Note that the WooCommerce XML (sample products data) will only be activated if you have the WooCommerce plugin active on your site.

    The demo content includes widgets which are a part of the HootKit plugin
    Hence, it is highly recommended to install and activate the HootKit plugin before running the demo import to make sure all the widgets are properly imported.

  3. Click the Import Demo button below.
  4. This process will take some time. Please do not navigate away or close the window till the Import process is finished.

Site Menu

Top

When you install Nirvata, you may not see any menu depending on your WordPress settings. Displaying a Custom menu is very simple with WordPress and Nirvata

Setup Custom Menu
  1. In your wp-admin, go to Appearance > Menus
  2. Click on the create a new menu link.
    (If you already have an existing menu from a previous installation, jump to Step No. 6)
  3. Give a name to your menu in Menu Name and click Create Menu button
  4. Now add the pages, categories, custom links you want from the leftside of your screen to this menu.
  5. Click Save Menu
  6. Click Manage Locations tab at the top
  7. Select the menu you just created in the Primary Menu dropdown.
  8. Click Save Changes
Menu Location Settings
  1. In your wp-admin, go to Appearance > Customizer.
  2. Click on the Header Layout section.
  3. In Menu Location setting, select where you want the menu to be displayed.
Display Menu Item Descriptions

Nirvata can display small descriptions below each menu item label. To enter menu item descriptions, make sure Descriptions checkbox is checked in Screen Options dropdown at the top.

Display Floating Tags

Nirvata can display small floating tags on top of Top Level menu items. These can be added in the Appearance > Menus screen. You can even set the background and font color for each of these tags individually.

Note that these menu tags are available only for top level menu items.

991 Menu Icons Premium Version

Premium version comes with the ability to add menu icons. In the Appearance > Menu screen, simply select the icon from dropdown in each menu item.

Header Layouts

Top

Nirvata comes with various header and logo options. You can select any of these options to create multiple combinations of unique looking headers.

  1. In your wp-admin, go to Appearance > Customizer.
  2. Click on the Header Layout section.
  3. Select any of the available layouts under Display Header Side Widget Area setting.
  4. You can also select menu display options in the Menu Location setting.
  5. Next, go back and click the Logo section.
  6. Select from the available type of logos.
  7. Premium Version Next, go back and click the Colors / Background section.
  8. Premium Version Here you can select backgrounds for the entire Header, just the Logo and/or for the Menu

Setup Frontpage

Top

Nirvata theme comes with a Frontpage which is made up of several widget areas and sliders. You can easily arrange them in any order, and apply backgrounds/parallax effects to them.

Please install the HootKit plugin to activate various widgets that come with Nirvata theme.
(Ref: How to install HootKit plugin)

1. Setting Up The Layout
  1. In your wp-admin, go to Appearance > Customizer.
  2. In the Frontpage - Modules section, you will find the options to manage the layout.
  3. You will notice that for the demo blog, we have not used all the modules. (You can disable modules by clicking the eye icon.)
  4. Click the gear icon next to each module for more options.
  5. You can also add Module Backgrounds and apply Parallax effect to the background image.
  6. Within Module Backgrounds, if you are selecting a background and want to modify font color to complement the new background color, you can try the Custom Font Color options. This will try to change the font color for the module.
    (Note: Some plugins/widgets may have css which may not be compatible with this option. In such cases, please contact wphoot support).
  7. Save the Changes.
2. Adding a Full-Width Stretched Slider
  1. In your wp-admin, go to Appearance > Customizer.
  2. Go to Frontpage Modules section.
  3. Click the gear icon of an area for example: Widget area A
  4. Set it to 'full-width' layout.
  5. In your wp-admin, go to Appearance > Widgets.
  6. Add Hootkit > Slider Images widget to Widget Area A.
    If you do not see the HootKit > Slider Images widget, then please install the HootKit plugin first.
    (Ref: How to install HootKit plugin)
3. Widget Area Content
  1. In your wp-admin, go to Appearance > Widgets.
  2. Add Widgets to the Frontpage Widget Areas (A-L)
    Note that the only the Active widget areas will be displayed. You can activate/deactivate a widget area by clicking the 'eye' icon as shown in the section above.
    Based on the number of columns you set in Customizer for each module, the widget areas would be named as Left, Right, Centre etc
4. Frontpage Content Module

The Frontpage Content module will either display your Blog or the Static Page Content based on your selection in wp-admin > Settings > Reading .

For more details, see the next section.

Setup separate Home and Blog Pages

Top

By default, the Frontpage Content module (discussed in previous section above) displays your Blog.

However, on the the demo site we have set separate Home and Blog pages as described below.
Hence the Frontpage Content shows the "static page content" instead of Blog Posts.

Setup Separate Homepage
  1. In your wp-admin area, click Pages > Add New to create a new page.
  2. Give this page a Title. (Lets call it "My Home Page")

    You can enter page content as well. This will be displayed as the FrontPage Content module (see Frontpage Content Module above).

  3. Publish the page.
  4. In your wp-admin area, go to Settings > Reading.
  5. Select the Static Page option.
  6. Select the page you just created in Step 2 above in the Front Page drop-down.
  7. Save the Changes.
Setup Separate Blogpage
  1. In your wp-admin area, click Pages > Add New to create a new page.
  2. Give this page a Title. (Lets call it "My Blog")

    You can enter page content as well. This will be displayed as description in the header on the Blog Page. (click here to see screenshot)

  3. Publish the page.
  4. In your wp-admin area, go to Settings > Reading.
  5. We have already selected the Static Page option in "Setup Separate Homepage" section above.
  6. Select the page you just created in Step 2 above in the Posts Page drop-down.
  7. Save the Changes.
You may want to add links to these pages (Home and Blog) to your menu.
  1. In your wp-admin, click Appearance > Menu
  2. Add pages you created in above 2 sections to your menu. These would be your Home and Blog pages.
Blog Archive Layouts
  1. In your wp-admin, click Appearance > Customizer.
  2. Goto the Archives section.
  3. Select the layout you want under the Archive (Blog) Layout option.
  4. Premium Version Premium version offers additional archive layout styles.
  5. Save the Changes.

This layout will be used throughout your site including the blog page, category page, tag page, and any other archive list page.

Category and Blog Page Descriptions

Top

Nirvata displays archive descriptions (optional) in the header while viewing the archive index

Blogpage Description

For entering Blog page's description, please refer to the Setup Blog Page section above.

Category / Tag Page Descriptions
  1. In your wp-admin area, click Posts > Categories.
  2. Click the Category name to edit the category.
  3. Enter the description in the Description textbox.
  4. Save the Changes.
Category / Tag Page Images

You can dsplay a parallax image behind the category Header area (Title/Description) by assigning a Featured Image to the Category.

  1. In your wp-admin area, click Posts > Categories.
  2. Click the Category name to edit the category.
  3. Click the Upload/Add Image button in the Featured Image field.
  4. Save the Changes.
  5. You can set the image display from your Appearance > Customize > Archives section

Animated Scrolling / One Page Websites / Landing Pages / Table of Contents

Top

You can make One Page websites with menu items linking to different sections of the page. The page will scroll down to a section on the page when the site visitor clicks these menu item.

See the demo site to see Scrollpoints in action.

This is not just limited to menu items. You can manually add links as well to different sections of a page to create a Table of Contents. For example, if you have a very large article, you can add links at the top to different article sections. When a visitor clicks on any of these links, the page will automatically scroll down to the corresponding section of the page.

Creating Scrolling Links

Click here to see detailed steps of how to add Scrollpoint links to menu and/or create manual scroll links.

Insert Widgets in Pages/Posts

Top

Nirvata lets you insert any widget directly inside your pages, posts, or anywhere shortcodes are supported. Follow the steps below to enable the feature and generate widget shortcodes.

This feature works through HootKit, so first make sure that HootKit plugin is installed and active on your site.

Enable "Widgets as Shortcodes" in HootKit
  1. In your wp-admin, go to Settings > HootKit
  2. Open the Misc tab.
  3. Make sure Widgets as Shortcodes is checked.
Create Widgets
  1. In your wp-admin, go to Appearance > Widgets.
  2. Scroll to the bottom until you find the widget area named: HootKit - Widget Shortcodes
  3. Drag and drop any widget into this area.
  4. Each widget you add here will automatically display its corresponding shortcode.
Insert the Widget Anywhere Using Its Shortcode

You can now copy the shortcode from the widget and paste it into:

  • Pages
  • Posts
  • Custom post types
  • Any editor or input field that supports shortcodes

The widget will appear exactly where the shortcode is placed.

Lightbox - Images and Galleries

Top
Images (jpg, jpeg, gif, png) in Lightbox

Lightbox gets activated automatically on installing Nirvata Premium. By default it opens all links pointing to images (.jpg .jpeg .gif and .png) in a standalone lightbox.

WordPress Gallery in Lightbox

When you create WordPress Galleries, Nirvata's Lightbox automatically converts the links to a lightbox gallery. Just make sure your gallery images link to Media File in the dropdown.

Disable Lightbox throughout Website
  1. In your wp-admin, go to Appearance > Customizer
  2. Click the General section.
  3. Scroll down to Miscellaneous and toggle the Enable Lightbox
  4. Save Settings
[Advance] Disable Lightbox for specific images

If for some reason, you want to disable a link pointing to an image, you can do this by adding the no-lightbox class to the link.

Custom 404 Page Content

Top

Nirvata Premium lets you display a custom page for the default 404 Not Found page.

  1. In your wp-admin area, go to Appearance > Customizer
  2. Click the 404 Page section.
  3. Select Custom 404 Page option.
  4. In the dropdown, select the Page you want to use as your 404 page.
  5. Save Settings

Once you have Saved the Settings, head over to Pages > All Pages to edit the content of this page.

Recommended Image Dimensions

Top
Featured Images

We recommend using featured images with dimensions 1600 x 600 pixels as this fits well in most scenarios.

However, based on your site's specific settings, you can select the sizes listed below.

690 x 550 pixel
Cropped
460 x 300 pixel
Cropped
Blog - Big
1035 x 425 pixel
Cropped
Premium Version
Blog - Medium
465 x 550 pixel
Non Cropped
Blog - Medium
460 x 300 pixel
Cropped
695 x 500 pixel
Non Cropped
465 x 550 pixel
Non Cropped
465 x 550 pixel
Non Cropped
Content Block Widget
  • Style 1, 2 and 3
1 Column Blocks
Full Width Image
Non Cropped
2 Column Blocks
920 x 425 pixel
Cropped
3 Column Blocks
460 x 300 pixel
Cropped
4 Column Blocks
460 x 300 pixel
Cropped
5 Column Blocks
460 x 300 pixel
Cropped
  • Style 4, 5
1 Column Blocks
920 x 425 pixel
Cropped
2 Column Blocks
460 x 300 pixel
Cropped
3 Column Blocks
460 x 300 pixel
Cropped
4 Column Blocks
460 x 300 pixel
Cropped
5 Column Blocks
460 x 300 pixel
Cropped

Insert Custom Code

Top
Insert Custom CSS

Add Custom CSS using steps below (instead of modifying theme's style.css file directly)
This way, your custom CSS code will not be lost when you update the theme/plugin.

  1. In your wp-admin, go to Appearance > Customizer
  2. Click the Additional CSS section.
  3. Insert your Custom CSS in the text box provided.
  4. Click the Publish button to save your changes.


Insert Custom PHP

Sometimes you may want to add custom PHP code to enhance the functionality of your site. Websites and help tutorials online often times instruct to add this code to your theme's functions.php file. However, editing theme/plugin files is not the recommended method as the custom code will be lost when you update the theme in future.

Add Custom PHP using steps below (instead of modifying theme's functions.php file directly)
This way, your custom PHP code will not be lost when you update the theme/plugin.

  1. In your wp-admin, go to Appearance > Nirvata Dashboard iBased on your theme version, this may appear under:
    wp-admin > Nirvata
  2. Click the Custom Code tab.
  3. Insert your Custom PHP code in the Custom PHP text box provided.
  4. Make sure to togle the Enable PHP toggle box.
  5. You can even select whether you want to run the PHP code just in the frontend or in the backend as well.
  6. Save Settings.


Insert Google Analytics

Add Google Analytics code using steps below (instead of modifying theme's header.php file directly)
This way, your Google Analytics code will not be lost when you update the theme/plugin.

  1. Setup your Google Analytics account and get your tracking code.
  2. In your wp-admin, go to Appearance > Nirvata Dashboard iBased on your theme version, this may appear under:
    wp-admin > Nirvata
  3. Click the Custom Code tab.
  4. Insert your Google Analytics code in the Header Code text box provided.
  5. Make sure to togle the Enable Header Code toggle box.
  6. Since Google Analytics code does not include any PHP code, you do not need to enable the php/shortcode option checkboxes.
  7. Save Settings.
Top