Lava – Theme Spirit

Requirements For Lava

To use Lava theme, a working installation of WordPress version 4.5 or greater is required. We strongly recommend all our theme users to use the latest version of WordPress, and properly config your server settings before working on creating your website.

Server Requirements

Apache or Nginx
PHP version 5.4 or greater ( recommended: PHP 5.6 or greater )
MySQL version 5.0 or greater ( recommended: MySQL 5.5 or greater )
The mod_rewrite Apache module ( required for multi-site)

Recommended PHP Configuration

memory_limit 64M
upload_max_filesize 32M
post_max_size 32M
max_execution_time 180
max_input_vars 3000

How to check your System Information?

Once the theme is installed, you can check your system information from Lava > System Status page.

Note: If you don’t feel comfortable changing these settings on your own, you can always contact your host and ask them to adjust them for you.

Theme Installation

There are two ways you can install the theme. You can choose to install it via WordPress or via FTP. Before you can install the theme, you need download the necessary theme files from your account.

Install Via WordPress

Navigate to Appearance > Themes
Click Install Themes and click the Upload button.
Browse to find the themename.zip file on your computer and click Install Now
Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.
Once you activate the theme, you will see a notification message to install the required & recommended plugins.
In the notification message, click the ‘Go Install Plugin’ button to go to the Plugins tab where you can install and activate the required & recommended plugins.
Click on Install button on each plugin to start installing them. After you’ve installed them, Activate them.

Install Via FTP

Connect to your hosting space via an FTP software.
Unzip the themename.zip file and ONLY use the extracted theme folder.
Upload the extracted theme folder into wp-content > themes folder.
Log in to WordPress admin and activate the newly installed theme by going to Appearance > Themes and click the Activate button.
Once you activate the theme, you will see a notification message to install the required & recommended plugins.
In the notification message, click the ‘Go Install Plugin’ button to go to the Plugins tab where you can install and activate the required & recommended plugins.
Click on Install button on each plugin to start installing them. After you’ve installed them, Activate them.

Demo Installation

Make sure you’ve installed all the required & recommended plugins by the theme before demo installation.
Once you’ve done that, go to Lava > Demos section, click the Install button to import your selected demo.
Wait until the installation progress complete, this could take a minute or more. That’s it.

After importing the demo, you may also want to import the demo slider on homepage. Go to Masterslider > Masterslider and click on the Import & Export button to import the demo slider.

demo_masterslider.json is located in the Demo data folder of your theme package.

Header

Header Style

Header Style 4

Lava currently offer 4 header styles, follow the steps below to change your header style.

Go to Appearance > Customize > Header section
Select your header style under Header Style
Click Save button

Logo & Favicon

To be retina friendly, 2 versions of logo is needed. First the normal size and the second exactly double the height and width of the normal one.

Small Logo – an alternative logo used on mobile screen or when the header is in sticky state. If small logo is not set, main logo will be used instead.

How to Upload A Logo

Go to Appearance > Customize > Site Identity section
Upload your logo under Logo
Upload your Retina logo (2x size) under Retina Logo
Upload your Nav/Mobile logo under Small Logo
Upload your Nav/Mobile Retina logo (2x size) under Small Retina Logo
Click Save button

How to Upload A Favicon

Go to Appearance > Customize > Site Identity section
Upload your favicon under Site Icon
Click Save button

Navigation / Menu Setup

Lava theme uses standard WordPress menu system for navigation. To setup your menu, go to Appearance > Menus page.

There are 4 theme locations to assign your menus:

Main Menu – navigation menu for header style 1
Fullscreen Menu – navigation menu for header style 2 and header style 1 on small screen

How To Setup A New Menu

Go to Appearance > Menus page.
Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu button.
To add a menu item, select one of your created pages on the left hand side and click the Add to Menu button. You can also add all kinds of different posts from the left side.
To add a custom menu item, enter a custom name and link into the Links.
Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item, and it will lock into place and create a dropdown section.
After setting up your menu, scroll down to the bottom of the page to assign the menu to one of the 2 locations in the Theme Locations box.
Once its all done, make sure you click the Save button.

How To Setup A Mega Menu

Add your menu items to the menu and arrange them in 3 levels. See the screenshot below.
On the first level menu item, check Enable Mega Menu option.
Set Mega Menu Width in columns, each columns equals 220px in width. For full width menu simply select 8 columns.
On the second level, set Column Width relative to the menu width. e.g. 1/2 is the same as 50% of menu width.
Second level menu items also act as the column titles, hide the title by checking the Hide Text option.
Third level is where you put most of your mega menu items.
Alternatively you could also assign a Widget Area to a menu item, so it can display widget content as drop down.
Once its all done, make sure you click the Save button.

Enable Mega Menu

Add Menu Icon to Menu Item

You could either use icon font or an image as menu icon.

To use an icon font, simply enter the icon name in the Menu Icon field. Here’s a list of icons available for use: Material Icons
To use an image icon, click on the Set Image Icon button to upload your image.

Enable Call To Action (CTA) button & Search button on Navbar

CTA button only show on Header Style 2 and Header Style 4. Both of the buttons can be edited in Appearance > Customize > Header section.

Sidebars

Lava allows you to create unlimited number of widget areas / sidebars, and these widget sidebars can be assign to varies WordPress templates and individual posts/pages.

How To Create A Widget Area / Sidebar

Go to Lava > Widget Areas tab.
Click Add New Widget Area button after naming your sidebar. New widget area / sidebar will show on the right side of widget creation box as well as on Appearance > Widgets page where you can add new widgets to this widget area / sidebar.
To remove a sidebar, simply click Remove button within your widget box.

Page Settings

Homepage Setup

Setting up your home page is the same as setting up any other regular pages, except that you need to specify in the settings which page will be your Home Page. If demo installer is used, this step can be skipped.

Navigate to Settings > Reading page
Choose the page you want as your home page from the Front page drop down list.
Choose the page you want as your blog page from the Posts page drop down list.
Click Save button.

Page Header

Page header is by default displayed on top section of every page. You may also choose to display a slider or hide the page header completely on single pages.

If you only want to display the navigation ( Header Style 2 ) in the header area, please select “Placeholder” option.

Global page header image can be set from Customize > Page Settings > Page Header section, this is the default header image for all pages.

Blog page header image can be set from Customize > Page Settings > Blog Page section.

Posts/page header image can be set on Page Settings metabox on Post/Page Edit page, this will also override the global header image.

To display Master Slider on a page, you will also need to enter the slider shortcode.

Page Container

Color Settings

You could tweak your site’s colors from Customize > Color Settings.

Typography

Navigate to Customize > Typography to customize your site typography.

Theme Fonts

Lava has an ease-to-use font system integrated seamlessly with the theme.

Fonts available with lava:

Standard Web Fonts
Google Web Fonts ( 700 + fonts )
Custom Fonts ( requires font file )

By default the theme will load fonts from the Theme font list and Customize > typography settings, To optimize your website loading speed, it’s recommended to only include fonts, variants, that are needed for the website.

How To Add Custom Font

It’s easy to use custom fonts with Lava, you could literally install any font to your theme through theme’s custom font system.

Step 1. Prepare font files for upload. Your fonts files should be in one of these formats:

EOT – Embedded OpenType ( Required for Internet Explorer )
TTF – TrueType ( Works in most browsers except IE and iPhone )
SVG – Scalable Vector Graphics ( iPhone/iPad )
WOFF, WOFF2 – Web Open Font Format ( Compressed, emerging standard )

To provide the best range of browser support, its best to include as many font formats as possible. Please make sure that you have the appropriate license to use the font. Almost all free fonts can be used on a website and many premium fonts are available with a license that covers web usage.

Step 2. Go to Lava > Fonts, find Add Custom Font section. Click Upload buttons to select your font files from your computer and give your font a unique name.

If your font files include svg format, please make sure your font name is the same as the font id in svg file. You could check the font id by opening the svg file in a text editor.

Step 3. Click Add Custom Font, and wait for your font files to be uploaded. Your custom font will appear on the Custom Fonts list when its added successfully.

How To Use Custom Fonts

Simply clicking the + button to add your custom font to the theme font list then click Save Fonts.

Your Custom Font will be ready to use on Customize > Typography settings when it’s on theme’s default font list.

Page Builder

Lava is integrated with SiteOrigin Page Builder – an awesome content creation interface. Read Page Builder Documentation to get a grasp of how to use this plugin.

Aside from default widgets provided by the page builder plugin, lava comes with 20 custom widgets. To locate the custom widgets simply click + Add Widget button and click Lava Widgets tab on the pop up window.

Use Prebuilt Layouts

Lava comes with 6 prebuilt page builder layouts, which makes page building process much easier.

Recommended Settings

By default, page builder is not enabled for Offer and Room post types, you want to enable them in order to use them in post edit screen.

Because we’re using full screen layout, we recommend to widen the responsive break point for tablet and mobile width to 1200 and 1020 for better viewing experience.

Hotel Booking

Add Room Capacity

Before creating a room, first you need to create a Room Capacity which determines the number of guests( adults ) that a room allows. The search room function will return 0 results if room capacity is not assigned to a room. ( e.g. room capacity for a single room is 1 )

Navigate to Room > Room Capacities.
Enter a room capacity name and click Add New Room Capacity button.
Change the capacity value of your newly created room capacity.
Click Update button.

Add Extra Packages

Go to WP Hotel Booking > Additional Packages.
Click Add another item and fill in the package details.
Click Save Extra button.

Create New Room

Room Layouts – Lava offer 3 room layouts – sidebar right, sidebar left, custom, it can be edited from Page Settings metabox.

Room Subtitle – optional subtitle displayed below the main room title, it can be edited from Page Settings metabox.

Change Rooms & Room Type Slug

Navigate to Appearance > Customize > Hotel Booking > General.
Enter the room & room type slug you’d like to use, and click Save/Publish button.
Navigate to Settings > Permalinks, click Save Changes button. This will activate the new slugs.

Add Text Before Price

Navigate to Appearance > Customize > Hotel Booking > General > Price Prefix option.
Enter the text you’d like to add e.g. “From”, and click Save/Publish button.

WP Hotel Booking Add-ons

You can extend plugins function by installing additional plugins provided by WP Hotel Booking, you can install these plugins on Appearance > Install plugins page.

wp-hotel-booking-authorize-sim – Authorize payment gateway for WP Hotel Booking
wp-hotel-booking-block – Block booking rooms for specific dates
wp-hotel-booking-coupon – WP Hotel Booking Coupon
wp-hotel-booking-report – WP Hotel Booking Report
wp-hotel-booking-room – Support book room without search room
wp-hotel-booking-stripe – Stripe payment gateway for WP Hotel Booking
wp-hotel-booking-woocommerce – Support paying for a booking with the payment system provided by WooCommerce

Custom Post Types

To use Offer post types, you must have Custom Post Types plugin activated.

Create An Offer

Navigate to Offer > Add New.
Fill out post content and Offer Info, such as offer price and offer price unit.
Click Publish/Update button to save the post.

Change Custom Post Type Settings

Offer Type Slug
Offer Category Slug
Header Option
Archive Title
Archive Posts Per Page

Go to Customize > Offer to make these changes.

Custom Codes

Header Code

Go to Appearance > Customize > Custom Codes section. Add your before </head> code under Header Code. e.g. Google Analytics and click Save button.

Footer Code

Go to Appearance > Customize > Custom Codes section. Add your before </body> code under Footer code and Save.

Custom CSS

Go to Appearance > Customize > Custom Codes section. Enter your CSS code under Custom CSS and Save.

Translation

Lava is translation ready. It’s easy to localize/translate your WordPress website, simply follow these 3 steps to run a completely localized website:

Install WordPress in your language or install your language from WordPress Admin.
Upload the translated PO file to theme’s languages folder.
Create contents in your language.

How To Install A New Language

Since WordPress 4.1 you can install new languages (and change your website language) from the WordPress dashboard. It’s very easy. Skip this if you already run a copy of WordPress in your language.

Go to WordPress Admin Settings > General option
Under Site Language, select the language you’d like to install and click Save Changes button.

How To Translate WordPress Theme

Download and install POEdit translation editor.
Open POEdit and click Create new translation.
Select the lava.pot file from theme languages folder ( lava/languages/ ) and click Open.
Select a translation language from the popup window.( e.g. German (Germany) )
Translate all the strings in the list and save the .po file without altering the file name.
Upload these files (.po and .mo) to lava/languages/ folder on your server. That’s it!

Multilingual Sites

For multilingual sites, we recommend to use plugins like WPML and Polylang. These plugins are well-known solutions for multilingual websites and it’s popular among WordPress users. Lava theme is compatible with these plugins.