Lahanna Documentation

Overview of the theme, its contents, and how to get started with the theme

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, you can sign in to our support forums with your Item Purchase Code. And please rate the theme on ThemeForest if you liked it. Thanks so much!

- Pixelwars Team

Support Forums

Any questions that are beyond the scope of this help file, use support forums.

Visit Support Forums

Follow Us

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

Follow us on ThemeForest

Rate Theme

If you liked the theme you can rate it on ThemeForest in your downloads menu.

Rate on ThemeForest

We assume you have basic knowledge of WordPress. In this doc you will learn how to setup, use and customize the theme.

Useful Resources

We've assembled some links to get you started:

Learn WordPress: Level up your WordPress skills.


WordPress Documentation: A variety of resources to help you get the most out of WordPress.


WordPress Support Forums: Community-based Support Forums are a great place to learn, share, and troubleshoot.


Free Plugins: The WordPress Plugin Directory is the largest directory of free and open source WordPress plugins. Extend your WordPress experience with plugins.

Install Theme

  • The theme is under Theme folder in the package.
  • Install the theme via WordPress admin panel.
  • Go to: Appearance > Themes > Add New > Upload.
  • Install and activate the theme.

Note: This theme is about 10 MB. Some hosts don't allow to upload over 8 MB. So, if you see an error message for the above way, please try the below ways.

OTHER WAYS TO INSTALL A THEME

Note: This theme uses custom image sizes. If you have images in your Media Library, run Regenerate Thumbnails plugin once. Install and activate the plugin then go to Tools > Regenerate Thumbnails.

Child Theme

Child theme inherits the functionality and styling of the parent theme. Child theme is the recommended way of modifying the parent theme.

  • This package includes a child theme.

Import Demo Data

There are two ways. Choose one of them.

Way 1:

  • Install and activate One Click Demo Import plugin from Appearance > Install Plugins. Then, go to Appearance > Import Demo Data and click on the Import button of a demo.
  • Install and activate Regenerate Thumbnails plugin from Appearance > Install Plugins. Then, go to Tools > Regenerate Thumbnails and run the plugin once.

Way 2:

  • Go to: Tools > Import > WordPress.
  • WordPress might offer you to install the WordPress Importer plugin, if you haven't installed it before do it now.
  • Install and activate the plugin.
  • Once you've installed WordPress Importer plugin, browse to the package folder, select XML data file under Sample Data folder and upload it.
  • Go to: Appearance > Menus. Select theme location for the imported custom menu.

Page Template

This theme has custom page templates you can use for certain pages that have additional features or custom layouts. You can see them in the Template dropdown menu in Page Attributes box of editing screen.

Sidebar

You can select sidebar from Sidebar box in editing screen.

Create blog posts for your blog page.

Create A Blog Post

  • Go to: Posts > Add New.
  • Enter title.
  • Set featured media. (Image/Audio/Video)
  • Assign to a category.
  • Add tags.
  • Select post format. (see formats below)
  • Publish your post.

Post Formats

Change your post format for style and functionality. Select from Format box in editing screen.

  • Standard: Regular post.
  • Image: Like standard format, but has camera icon above post title.
  • Gallery: Create a gallery from "Add Media" button. Make your gallery a slider from "Gallery Type" box.
  • Audio
  • Video
  • Quote
  • Link: First link has a background color.
  • Chat
  • Status: Background colored post content.
  • Aside: Special background style for post content.

Specific Formats

CHAT
JOHN: Hey there

MARY: Aye, matey!

JOHN: Huh?

QUOTE

Use [quote] shortcode.

Example:

[quote align="" name=""]Text here.[/quote]


align="" ... alignleft, alignright

Activate Portfolio Posts

Go to "Appearance > Install Plugins". You can see the plugin "Pixelwars Core" in the list. Install the plugin. When you click the "Install" link, it will be installed and activated automatically. Then go to your main dashboard page. Now you can see the "Portfolio" menu.

Portfolio Menu

There are three sub menu under the portfolio menu:

  • Portfolio: You can see all portfolio posts in a list. They are listed by the date. So you can change the publish date from publish box in edit screen to change post order in the table. This will also effect item ordering in your portfolio page.
  • Add New: Create new portfolio items. (see instructions below)
  • Portfolio Categories: You can assign a category to a post in edit screen. Categories appear as filter in your portfolio page. Also you can create multiple portfolio pages with categories. (see instructions below)

Create A Portfolio Post

Portfolio items are similar to blog posts.

  • Go to: Portfolio > Add New.
  • Enter title and set featured image.
  • Assign to a category. This category will be displayed as a filter in your portfolio page.
  • Use "Excerp" field to show a short description under the post title in your portfolio page.
  • Choose post type from "Format" box. (see formats below)
  • Publish your portfolio post. (Edit publish date to change post order)

Portfolio Post Formats

  1. Standard: Add your content to editor. This type of posts go to single view when click in portfolio page.
  2. Image: Displays post featured image in a lightbox.
  3. Gallery: Displays images in a lightbox. Create a gallery from Add Media button above the content editor.
  4. Audio: Displays an audio in a lightbox. Use browser address url of an audio from SoundCloud. Add the url to "URL" field in Featured Video box.
  5. Video: Displays a video in a lightbox. Use browser address url of a video from YouTube or Vimeo. Add the url to "URL" field in Featured Video box.
  6. Link: Enter your custom url to "URL" field in Featured Video box.

Note: You can see a box called "Gallery Type" in edit screen. The type option effects content galleries when you view your portfolio post in individual page.
Note: You can turn on above talked boxes from "Screen Options" panel in upper right side if you do not see them in edit screen.

Portfolio Pages

There are two ways to build one or more portfolio pages.

  1. Portfolio Page Template: For single portfolio page.
  2. Portfolio Category Pages: For different portfolio pages. (see multiple portfolios below)

Make A Portfolio Page (with portfolio page template)

This page shows all published portfolio posts.

  • Go to: Pages > Add New.
  • Enter title.
  • Select "Portfolio" template from Page Attributes box.
  • Publish the page.
  • Add this page to your navigation menu. (Appearance > Menus)
  • Also, you can assign a sidebar to this page from Sidebar box.
  • Also, you can assign a featured area to this page from Featured Area box. (see featured area section for more information about the featured area)

Note: Add some text to content of the page to show it like a message in your portfolio page.
Note: Play with post publish date to change item order in your portfolio page.

Make Multiple Portfolio Pages (with portfolio category pages)

A portfolio category page shows its own published portfolio posts.

  • Go to: Portfolio > Portfolio Categories > Add New Category. (parent category)
  • Create portfolio posts assigned to this category.
  • Add sub categories under this category to filter posts. (assign posts to sub categories)
  • Add this portfolio category to your navigation menu. ("Appearance > Menus > Portfolio Categories". Show "Portfolio Categories" list from Screen Options panel in upper right side.)
  • Every parent category displays its portfolio posts. So you can have different portfolios in your site.

Note: Add some text to description field of a category to show it like a message in your portfolio category page. (Portfolio > Portfolio Categories > Edit > Description)
Note: Play with post publish date to change item order in your portfolio category page.

Portfolio Options in Customizer

Go to: Appearance > Customize > Portfolio.

  • Page Layout: Adjust portfolio page width.
  • Grid Type: Change image size in portfolio page.
  • Grid Post Width: Adjust post width in portfolio page.

Overflow Images in Content

This setting is used in single view of portfolio posts.

Activate Overflowing Functionality

  • Go to: Appearance > Customize > Single Post > Post Media Width.
  • Set to "Overflow" option.

Enable Overflowing For Images

  • Edit images in your content. Align an image as center from display settings.

Portfolio Sidebar

Control portfolio sidebar from Appearance > Customize > Sidebar:

  • Portfolio Category Sidebar: Activate sidebar area for portfolio category pages.
  • Portfolio Post Sidebar: Activate sidebar area for single portfolio posts.

Sidebar for Portfolio Page Template: Adjust sidebar from Sidebar box in edit screen.

Portfolio Widget Area: You can see the Portfolio Sidebar widget area listed in the Widgets page under Appearance menu.

Activate Recipe Posts

Go to "Appearance > Install Plugins". You can see the plugin "Cooked" in the list. Install the plugin. When you click the "Install" link, it will be installed and activated automatically. Then go to your main dashboard page. Now you can see the "Recipes" menu.

Create Recipe Archive Page

  • Create a new page
  • Select Page Attributes > Templates = Medium width
  • Paste this shortcode to content area: [cooked-browse]
  • and publish!
  • Go to Recipes > Settings > Browse/Search Recipes Page and select your newly created recipe page.

Change Colors for Recipes

  • Go to Recipes > Settings > Design
  • Main Color = #ccc0ae
  • Main Color (on hover) = #333333
  • then click Update Settings.

Recipe Template

When you are in Recipe Add/Edit screen under Layout tab > Recipe Template, remove [cooked-image] shortcode to prevent duplicate featured image show! Then click 'Save as Default' and 'Apply to All'.

Creating and Publishing a Recipe

  • Firstly add your recipe : Recipes > Add New
  • Add ingredients, directions etc.. and hit publish!
  • then copy the shortcode from Layout tab > Recipe Shortcode; it should be a code like this: [cooked-recipe id="149"]
  • Then go to 'Posts > Add new' and create a new post with the similar or same title, set the featured image and excerpt again and paste the recipe shortcode in the content editor and hit publish!
  • That's all!

Check Cooked Plugin Documentation for more https://docs.cooked.pro

Custom Theme Widgets

This theme has custom widgets.

  • Go to: Appearance > Widgets.
  • Drag and drop widgets to widget areas.

Available Widgets

  • Main Slider: Display your site's posts. Use in the Featured Area.
  • Intro: Show a brief description with an image in the Featured Area.
  • About Me: Show a brief description with an image in the sidebar.
  • Link Box: Make a link with an image in the Featured Area.
  • Social Media Feed: Display your social media feed for available networks.
  • Social Media Icon: Add social media icons for your social media profiles.

Note: Check out Plugins section for "Subscribe" and "Trending Posts" widgets.

Intro Widget

Background Self-Hosted Video: You need to upload one MP4 format video.

Background Embed Video: Use an embed code of any YouTube, Vimeo video.

Example: (Vimeo)

<iframe src="https://player.vimeo.com/video/111529240?autoplay=1&loop=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Note: ?autoplay=1 and &loop=1 are optional.

Shortcode Generator

Use shortcode generator to add shortcodes. Click the "Insert Shortcode" button from the content editor.

All Shortcodes

Grid

[row]
Column shortcode here.
[/row]


[column width=""]
Content here.
[/column]


width="" ... 1 to 12. (required). 12 = 100%, 6 = 50%, 3 = 25%.

width_xs="" ... 1 to 12. (optional). Extra small devices - Phones (<768px).

width_md="" ... 1 to 12. (optional). Medium devices - Desktops (≥992px).

width_lg="" ... 1 to 12. (optional). Large devices - Desktops (≥1200px).


Example 1: (Two Columns)

[row]
[column width="6"]
Content here.
[/column]
[column width="6"]
Content here.
[/column]
[/row]


Example 2: (Three Columns)

[row]
[column width="4"]
Content here.
[/column]
[column width="4"]
Content here.
[/column]
[column width="4"]
Content here.
[/column]
[/row]


Example 3: (Four Columns)

[row]
[column width="3"]
Content here.
[/column]
[column width="3"]
Content here.
[/column]
[column width="3"]
Content here.
[/column]
[column width="3"]
Content here.
[/column]
[/row]

button

[button text="" url="" new_tab="" size="" icon=""]


new_tab="" ... yes

size="" ... big

icon="" ... See Icons section.


Example:

[button text="My Button" url="http://www.example.com"]

social_icon

[social_icon type="" same_tab="" url=""]
[social_icon type="" same_tab="" url=""]
[social_icon type="" same_tab="" url=""]


same_tab="" ... yes

type="" ...

facebook, twitter, linkedin, google-plus,

pinterest, github, behance, dribbble, instagram,

lastfm, vimeo, forrst, skype, picasa, youtube, flickr,

tumblr, blogger, delicious, digg, friendfeed, wordpress,

foursquare, xing, soundcloud, slideshare, fivehundredpx,

weibo, stack-overflow, vine, vkontakte, bloglovin, rss


Note: You can use your site's feed url for the rss icon: http://www.yoursite.com/feed/


Example 1:

[social_icon type="facebook" url="http://www.facebook.com/username"]
[social_icon type="twitter" url="http://twitter.com/username"]


Example 2:

[social_icon type="facebook" same_tab="yes" url="http://www.facebook.com/username"]
[social_icon type="twitter" same_tab="yes" url="http://twitter.com/username"]

contact_form

[contact_form captcha="" to="" subject=""]


to="" ... Your email address.

captcha="yes"


Example:

[contact_form to="yourname@example.com" subject="New Message from My Site"]

alert

[alert type=""]Text here.[/alert]
 
 
type="" ... success, error.
 
 
Example 1:
 
[alert]My alert text.[/alert]
 
 
Example 2:
 
[alert type="success"]My alert text.[/alert]
 
 
Example 3:
 
[alert type="error"]My alert text.[/alert]

tab

[tab_wrap titles="" active=""]
[tab]Text here.[/tab]
[tab]Text here.[/tab]
[tab]Text here.[/tab]
[/tab_wrap]


titles="" ... Separate with commas.


Example:

[tab_wrap titles="Tab One,Tab Two,Tab Three"]
[tab]
Tab one text here.
[/tab]
[tab]
Tab two text here.
[/tab]
[tab]
Tab three text here.
[/tab]
[/tab_wrap]

accordion

[accordion_wrap]
[accordion title=""]Text here.[/accordion]
[accordion title=""]Text here.[/accordion]
[accordion title=""]Text here.[/accordion]
[/accordion_wrap]

toggle

[toggle_wrap]
[toggle title=""]Text here.[/toggle]
[toggle title=""]Text here.[/toggle]
[toggle title=""]Text here.[/toggle]
[/toggle_wrap]

quote

[quote align="" name=""]Text here.[/quote]


align="" ... alignleft, alignright

timeline

[timeline]
[event_group_title icon="" text=""]
[event current="" date="" title="" sub_title=""]Text here.[/event]
[event current="" date="" title="" sub_title=""]Text here.[/event]
[event current="" date="" title="" sub_title=""]Text here.[/event]
[/timeline]


icon="" ... See Icons section.

current="" ... current

skill

[skill title="Fireworks" percent="90"]
[skill title="Photoshop" percent="70"]
[skill title="Illustrator" percent="50"]

testimonial

[testimonial image="" title="" sub_title=""]Description text here.[/testimonial]
[testimonial image="" title="" sub_title=""]Description text here.[/testimonial]
[testimonial image="" title="" sub_title=""]Description text here.[/testimonial]


title="" ... Person's name.

sub_title="" ... Person's job.

image="" ... An image url. Upload your image to your Media Library, then copy its url and use in this parameter.

section_title

[section_title]Title here.[/section_title]

fun_fact

[fun_fact]
An image here.
Heading 4 title here.
[/fun_fact]

service

[service]
An image here.
Heading 4 title here.
Description here.
[/service]

Full-width Images

Edit images in your content. Add full keyword as Image CSS Class to your image from advanced options.

Zoomable Images

Edit images in your content. Add zoom keyword as Link CSS Class to your image from advanced options. And Link To: Media File from display settings.

Parallax Images in Posts

Edit images in your content. Add parallax or parallax half keywords as Image CSS Class to your image from advanced options.

Available icons here. Select your icon from the list. Don't use the prefix pw-icon-. Only use icon name for the icon="" parameter of the shortcodes.

Customizer

This theme supports the live theme customizer. You can customize almost every bit of your site from live customizer.

  • Go to: Appearance > Customize.

Styled Free Plugins

Go to: Appearance > Install Plugins.

  • Top 10 - Popular Posts

    Track daily and total visits on your blog posts. Display the count as well as popular and trending posts.

  • MailChimp for WordPress

    Subscribe your WordPress site visitors to your MailChimp lists, with ease.

  • WP Instagram Widget

    WP Instagram widget is a no fuss WordPress widget to showcase your latest Instagram pics. It does not require you to provide your login details or sign in via oAuth.

  • I Recommend This

    This plugin allows your visitors to simply like/recommend your posts instead of comment on it.

Setting Up WP Instagram Widget

Change photo size option of the widget to set image count in a row.

  • Thumbnail: 12 images.
  • Small: 8 images.
  • Large: 6 images.
  • Original: 4 images.

Setting Up MailChimp for WordPress

  • Go to MailChimp for WP > Forms > Fields,
  • Paste this code to textarea:
  • <p>
       <label>Subscribe your e-mail address and get to know about fresh stuff!</label>
    </p>
    <p>
       <input type="email" name="EMAIL" placeholder="Your email address" required="required">
    </p>
    <p>
       <input type="submit" value="Sign up">
    </p>
    
  • Switch to Appearance tab and select "Inherit from Lahanna theme" in "Form Style".

Recommended Plugins

Go to: Appearance > Install Plugins.

  • Regenerate Thumbnails

    Allows you to regenerate the thumbnails for your image attachments. This is very handy if you've changed any of your thumbnail dimensions (via Settings -> Media) after previously uploading images or have changed to a theme with different featured post image dimensions.

  • WPFront Scroll Top

    Allows the visitor to easily scroll back to the top of the page.

  • Selection Sharer

    Medium like popover menu to share on Twitter, Facebook, LinkedIn or by email any text selected on the page.

This theme is ready for localization. We have made every string translatable, use a plugin or an editor.

There is a POT file (lahanna.pot) under languages folder in the theme. It contains all theme texts to translate. In here, translation is localization. Localization mean is not only changing words to another language. It is basically changing texts to another texts. For example; if your local is English (en-US) and in the theme there is title text Browsing Category for category archives. You can change it what you want like Posts under Category in your local.

Plugins

Editor

Note: The translation files are located under languages folder in the theme folder.

Update Your Theme

Before you update, it is best practice to always make a backup of your theme folder.

Download the new theme package from your ThemeForest account.

The theme is under "Theme" folder in the package.

Choose to upload the theme via Envato Market plugin or via WordPress or via FTP.

Update Your Theme via Envato Market Plugin

The Envato Market plugin can install WordPress themes purchased from ThemeForest by connecting with the Envato Market API using a secure OAuth personal token. Once your themes are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.

Update Your Theme via WordPress

  • You need to deactivate your theme in the "Appearance > Themes" section by simply activating a different theme. Once you activate a different theme, you can delete your theme. Don't worry, your content will not be lost. (The translation files are located under languages folder in the theme folder.)
  • Then simply upload the new theme file in the "Appearance > Themes" section.
  • Once it uploads, choose to activate the theme.

Update Your Theme via FTP

There are two ways of getting files onto your site, and once there, changing them.

  1. By using an FTP client.
  2. By using the file manager provided in your host's control panel.
  • Go to "/wp-content/themes/" location and backup your current theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost. (The translation files are located under languages folder in the theme folder.)
  • Retrieve the new zipped theme file from your new ThemeForest download, and extract the file to get the theme folder.
  • Then simply drag-and-drop (Upload) the new theme folder into "/wp-content/themes/" location, and activate the theme in the "Appearance > Themes" section. (Choose to "Replace" the current one if you did not delete it.)