Documentation Menu

About Laramiss

This documentation will provide you all the details you need to use the Laramiss theme and understanding of how Laramiss is structured and guide you in performing the most common features. If you require further assistance, related to topics not covered in this documentation, then please contact us via our support forum.

We assume that you already have WordPress installed and ready to go. If you do not, please see our section on WordPress to help you get started.

screenshot Laramiss

WordPress Instructions

To use this theme you need a working version of WordPress already installed on your server or the local environment. We have given the documentation links, where you will find the requirements and the other details about WordPress.

Theme Requirements

To use the Laramiss theme you need the latest version of WordPress, PHP Version 7 or higher, and MySQL 5 or higher. Apart from the necessary WordPress requirements here are listed recommended server configuration requirements to make the theme work properly.

  • PHP – Version 7.2 or higher
  • MySQL – Version 5.6 or higher ( OR MariaDB version 10.1 or higher)
  • memory_limit – 128M or higher
  • max_execution_time – 180 or higher
  • upload_max_filesize – 32M or higher
If you are not sure about the server requirements here is the quick guide on how you can easily change the server requirements. Changing server requirements. We still prefer contact your server provider for this.

What’s Included

In the product files we providing the theme files, required plugins for the theme, the documentation for this theme along with the child theme so you can customization in theme without changing the actual code.

Getting Support

Support is limited to questions regarding the theme’s features or problems with the theme. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme then you should enlist the help of a developer.

Theme Installation

We assume that WordPress website is set, Now the next step is to install the theme. To get started with theme installation you’ll need to download the theme file. To download the theme file, go to ThemeForest Downloads and locate the theme. Click the download button to see the two options. The Main Files and the Installable WordPress Theme, here The Main Files contains all the files including the documentation, child theme, and plugins, and another option contains the theme zip file. Select the “Installable WordPress file only.” It will download WordPress theme zip file for the theme.

There are three ways to install the theme in you wordpress environment you can use any of them to install theme.

  • Envato Market Plugin – You can use the envato market plugin for this.
  • FTP Client – You can use the FTP Client for this.
  • Through WordPress – You can install it directly using WordPress theme installation.

Envato Market Plugin

This plugin helps customers receive updates to their premium Themes & Plugins purchased through Envato Market (ThemeForest & CodeCanyon). In this method, you can install the theme directly from Themeforest with the Envato Market plugin.

Follow the steps below to install via WordPress.

Step 1 – Download the ZIP file from here.

Step 2 – Login to your WordPress Dashboard

Step 3 – Go to Plugins > Add New

Step 4 – Click “Upload Plugin” at the top.

Step 5 – Upload the envato-market.zip file.

Step 6 – Once installed, click “Activate Plugin”

Step 7 – Visit the new “Envato Market” menu item

Step 8 – The plugin Settings Page allows you to configure your Envato API Personal Token. This API Token is generated from build.envato.com and will allow WordPress to securely receive item updates. 

Step 8 – Copy your token code and paste into the Token field on the Envato Market plugin page then Save Changes. Once token saved, you will able to see all of your purchases. Just click the Install button to install your theme.

FTP Installation

Follow the steps below to install via FTP.

Step 1 – Log into your web server with FTP client software

Step 2 – Unzip the Laramiss.zip file and ONLY use the extracted Laramiss theme folder

Step 3 – Upload the extracted theme folder into wp-content > themes folder

Step 4 – To Activate the newly installed theme. Go to Appearance > Themes and activate it.

WordPress Installation

Follow the steps below to install via WordPress.

Step 1 – Navigate to Appearance > Themes.

Step 2 – Click Install Themes and hit the upload button.

Step 3 – Navigate to find the “Laramiss.zip” file on your systen and click “Install Now”

Step 4 – Activate the newly installed theme. Go to Appearance > Themes and activate it.

Demo Content

Before you start importing the demo content make sure you have installed all the required plugins for the theme so that demo content import properly. Here is the plugin list that you need to install and active before you start import. You will find them in ( Appearance > Install Plugins )

  • Slider Revolution
  • WPBakery Page Builder
  • Sigma Core
  • Redux Framework
  • One Click Demo Import
  • Contact Form 7
  • Elementor
  • Woocommerce
  • YITH Woocommerce Wishlist
  • YITH Woocommerce Quickview

Now for the demo import, you have to go to the ( Appearance > Import Demo Data ). Now select the demo you want to import Default Demo or Elementor Demo.
Then click on the import button and wait for some time your demo will be ready in a few minutes.

Some notes about other plugins

The following plugins will also be installed, but are not required to run the theme.

  • Autoptimize - is used to optimize your website
  • Litespeed Cache - is used to optimize your website
  • Instagram Feed - is used to connect your instagram account
  • Twitter Feed - is used to connect your twitter account

Page Settings

Page settings are a way to help you distinguish each page from the other, for example you might want to have one page with a small change in the header, or a light tweak in the subheader, or even a page with no sidebar. This is what page settings are for, they are settings for an individual page.

Note that those options will override any option you set from the Theme Options for this specific page.

1 - Custom Page Layout

Page layouts is used to group a list of pages with specific custom settings, for example in the home page you want to have header style 1, but in all internal pages, you might want to have another header style. This is what page layouts is for and will be discussed later down the line in the documentation

2 - Disable page subheader

Disable the subheader for this specific page.

3 - Custom title

Set a custom title in the subheader. This will replace the title in the subheader only., and will not affect the page SEO in any way.

4 - Custom subtitle

Similar to the custom title, this replaces the subtitle with a custom one.

5 - Sidebar positionstrong

This will allow you to adjust the sidebar position, between left and right, and even remove the sidebar for this one page.

6 - Boxed Layout?

This will allow you to set the page to either full width or boxed

7 - Custom Subheader Image

This will allow you to set a custom image to the subheader.

Team Settings

1 - Member Name

This field is responsible for the team member's name

2 - Member Description

This field is responsible for the team member's description

3 - Member Excerpt

This field is responsible for the team member's short description

4 - Member Details

Those fields are responsible for all team member details.

5 - Member Category

This field is responsible for assigning a category to a member (This could be useful if you want to seperate staff department members)

6 - Member Image

This field is responsible for the team member's image

Testimonial Settings

1 - Testimonial Member Name

This field is responsible for the testimonial member's name

2 - Testimonial Description

This field is responsible for the testimonial's description

3 - Testimonial Details

Those fields are responsible for all testimonial details.

4 - Testimonial Category

This field is responsible for assigning a category to a testimonial

5 - Testimonial Image

This field is responsible for the testimonial member's image

Portfolio Settings

1 - Portfolio Item Name

This field is responsible for the portfolio item's name

2 - Portfolio Description

This field is responsible for the portfolio item's description

3 - Portfolio Details

Those fields are responsible for all Portfolio details.

4 - Portfolio Category

This field is responsible for assigning a category to a Portfolio

5 - Portfolio Image

This field is responsible for the Portfolio item's image

Header Settings

General Header

Using the Header settings theme options you can manage the header layouts, Header logo, search options, links and much more.

Select Header Layout

Changes the header style

Select Header Color Scheme

Changes the header color scheme. Example: Dark layout adds white links and typographic colors incase your header overlaps over a dark background.

Header Position

There are two options here, one is to allow the header to overlap the content Absolute , and the other allows the header to be placed above the content Relative

Set Custom Header Width

Changes the header width On Desktop Only to the desired size you set.

Enable Sticky Header

Adds a sticky navigation header.

Sticky Color Scheme

Similar to the Header Color Scheme option, this sets the color scheme for the Sticky header

Sticky header Background color, Color and Hover color

Set the colors for the sticky header

Display Collapse Bar

Checking this option will enable the collapse sidebar on desktop & mobile. This option doesn't only require you to enable it for it to work. You will have to go to Appearance > Widgets, and add a widget to Header Collapse Sidebar

Contact Info Style

Changes the Contact information style that go in the header Note that this option doesn't work on all header layouts

Display Email, Phone, Address

Check any of the 3 options to hide/show the specific contact detail in the header

Contact info background color, and color

Set the colors contact information

Header Background color, Color and Hover color

Set the colors for the header


Note: that Contact Information should be filled from the Contact Information Tab from theme options

Header Logo

Using the Header logo settings allows you to adjust the header logo and more

Site Logo

Site header logo

Sticky Logo

Sticky header logo

Logo Text Link Options

This option allows you to control the typography of your logo text. Note that Logo text will show if you decide not to assign a logo to your website. Then instead of the logo, you will see your Website Name, and Website Description

Display Info Card

This is an option which will show a cover when you mouse over your logo. This card will contact general contact information of your business

Info card background color and color

Set the colors for your info card

Info card logo

Set a logo for the info card

Display options

Check which option you want to hide/show in the info card


Note: that Contact Information should be filled from the Contact Information Tab from theme options

Header Top

Using the Header top options allows you to adjust your site's top header

Display Top header

Whether to hide or show your top header

Set Custom Header top width

Changes the header top width On Desktop Only to the desired size you set.

Display Social Media

Check if you want to show your social media links in the top header.

Display Top Header Menu

Check if you want to show the top header menu.


Note: that social media links should be filled from the Contact Information Tab from theme options

Contact Information

Everything related to Contact Information / Social Media from the Header settings, should be filled from this part of the theme options

Email

You can set the email here.

Phone Number

You can set phone number here.

Address

Set the the address here.

Company Google map link

Copy your Google maps link which the user will get redirected to when they click on the map link

Company Description

Set the the company description here.

Social Media to display

You might have all social media links, but you only want to show 3. This is the option which allows you to hide/show specific social media links

Social Media URLs

This is where you set all your social media URLs

Subheader Settings

Subheader settings contain the Subheader and the breadcrumb, you can enable/disable them, you can also set the background, colors, alignment, style and so on.

Display Subheader

Check to show the subheader

Subheader style

Select the subheader style

Display breadcrumb

Check to show the breadcrumb

Breadcrumb Position

Where you want to show the breadcrumbs, whether After the title , Below the title or Bewlow the Subheader

Subheader alignment

Select where you want to align the subheader content

Background Image

Specify the subheader background image

Subheader Caption

Specify the caption that will go in the subheader

Subheader Background Opacity

Set the background color overlay for the subheader

Blog Settings

Using the blog settings, you can manage the blog sidebar and the social share for the blog.

Blog Style

Select the blog style you want to show (This is for the archive)

Number of columns

Set the number of columns you want to show per row in the blog archive page

Blog Sidebar

Where you want the sidebar to be positioned, whether to the left or to the right of the content. This requires you to fill some widgets in the Blog Sidebar in the Appearance > Widgets page

Share toggles

Check any of the boxes to hide/show any social media share in the blog details page

Page Settings

Using the page settings, you can manage the page sidebar position, and the width of the pages.

Page Sidebar

You can select the sidebar position for pages.

Page Layout

Select whether you want the pages to be boxed or full width


Note: This option can be specified for every individual page if you desire. Check Meta Fields > Page tab in the documentation

Typography

Using the typography settings, you can manage the typography of your whole website

Body and small text Color

Manage the colors of your general website text

Headings Color

Manage the color of all your headings

Custom Heading Title Font

Manage the typography for Custom heading shortcode title.

Custom Heading Subtitle Font

Manage the typography for Custom heading shortcode subtitle.

Body Font

You can manage the typography for body.

H1 Headers Typography

Manage the typography for H1 tag.

H2 Headers Typography

Manage the typography for H2 tag.

H3 Headers Typography

Manage the typography for H3 tag.

H4 Headers Typography

Manage the typography for H4 tag.

H5 Headers Typography

Manage the typography for H5 tag.

H6 Headers Typography

Manage the typography for H6 tag.

Navigation level 1

Manage the level 1 menu typography in the header

Navigation level 2

Manage the level 2 menu typography in the header

Header top navigation

Manage the typography in the top header


Note: Regarding the Line Height option of the typography, it is calculated as follows (Font Size * Line Height) Example: Line height to be 1.8 and font size 16px (1.8 * 16) = 28.8. This will be your line height

Color Scheme

Manage the color options for your website.

Primary Color

You can select the primary color for your website.

Secondary Color

You can select the secondary color for your website.

Tertiary Color

You can select the tertiary color for your website.

404 Page

Here you can manage the 404 page for your website

404 Page type

Similar to footer type, you can select from either Static , Slider Revolution or Page Template . The only new addition is that you get to select a slider revolution template which will show in your 404 page

404 page Title

Sets the title for the 404 page

404 page description

Sets the description for the 404 page

404 Background

Sets the background image / color for the 404 page

Back to home

Check if you want to show the Back to Home button in the 404 page

Woocommerce Settings

Using these settings, you can manage the Woocommerce options.

Shop Layout

Select Shop layout Boxed or Full Width

Display Cart

Check if you want to display the cart in the header If the header supports it)

Display the user Icon

Check if you want to show the user Icon which will redirect the user to the WooCommerce account page

Woocommerce Product Page settings

Using these settings, you can manage the Shop page.

Product card style

Select product cart style

Show featured badge?

Option to show featured badge on product

Show sale badge?

Option to show sale badge on product

Show Excerpt?

Option to show excerpt of product

Excerpt Length

Add no of words to display in excerpt

Show Notification On added to cart

Check if you want to show a notification popup when a user adds an item to the cart.

Woocommerce Product Detail

Using these settings, you can manage the Product details page.

Product details style

Select the style of your product details page

Google Settings

Using these settings, you can manage Google Analytics, Tag Manager, and Web Master Tools.

Google Analytics

Enter the Google Analytics Code

Google Tag Manager

Enter the Google Tag Manager Code

Google Web Master Tools

Enter the Google Web Master Tools Code

Page Templates

Like we mentioned previously in the documentation, 404 page and Footer can have custom Page templates assigned to them. This gives you total control over how your footer or 404 page looks using WP Bakery shortcodes. For this example we will be building a custom 404 Page, and keep note that the same process applies to the Footer Page Template

Consider yourself creating a normal page, so after you followed the article in How To > Enable Bakery for Post Types, navigate to Templates > Add New in your WordPress dashboard.

Step 1:

Start by giving a name to your Page template

Step 2:

Enable Backend Editor for the template

Step 3:

Add your content to the page, and hit save

Step 4:

Navigate to the theme options, and select the Page Template as a 404 page type, and then select your desired page template


About Footer Templates

The exact same concept applies to the Footer Page Templates. Instead you have to assign the template in the Footer Settings of theme options


Note: Check the How To > Enable Bakery for Post Types article in the documentation to enable Backend editor for Page Templates

Page Layouts

You can consider page layouts as theme options for a specific page. Although, not all theme options are supported in page layouts. To get started, simply follow the below steps

Step 1:

Navigate to Page Layouts > Add New

Step 2:

Adjust the settings to your liking under the Layout Settings fields

Step 3:

Head over to the page you want this page layout to get assigned to, and assign it


Notice how in the images in the right hand side, that our home page has a header style, and our contact page has another style since we selected a different header style for our Contact Page Layout, and assigned it only to our contact page

Mega Menu

Make sure you have WordPress 5.4.x and above for the MegaMenu to work.

Consider yourself creating a normal page, so after you followed the article in How To > Enable Bakery for Post Types, navigate to Mega Menus > Add New in your WordPress dashboard and follow the below steps:

Step 1:

Let's start by creating a megamenu. First go to your WordPress dashboard and navigate to Mega Menus > Add New

Step 2:

Create your megamenu content. All shortcodes work in the megamenu, but we added specific shortcodes that just work for the megamenu, you can find them in Sigma Header tab of the WP Bakery shortcode library

Step 3:

For this example we will be adding 1 Column of Icon Box shortcode, and 3 columns of Mega Menu shortcodes, and we will also fix the row spacing to make the mega menu look well spaced.

Step 4:

Once you created your Mega menu content, head back to the All Mega Menus page, and copy the mega menu shortcode

Step 5:

Navigate to Appearance > Menus and create a new menu or use an existing one, and paste the Megamenu shortcode where you want it to appear ONLY WORKS ON LEVEL 1 MENU ITEMS, and activate megamenu for this item

If you can't see the Mega Menu fields pointed out in the image, scroll to the top of your page and look for screen options, and turn on Activate Mega Menu and Mega Menu Shortcode


Note: Check the How To > Enable Bakery for Post Types article in the documentation to enable Backend editor for Mega Menus

Vertical Mega Menu

Make sure you have WordPress 5.4.x and above for the Vertical MegaMenu to work.

To get started, follow all 5 steps in the Mega Menu article, and then follow the below steps:

Step 1:

Vertical Megamenu only works in Header Layout 5. So you need to head over to Theme Options > Header settings and activate Header style 5

Step 2:

Scroll a bit, till you find the Display Vertical Mega Menu option, and turn it on, then fill the two other options (Vertical Megamenu Text and Select Menu), where the menu is the one you assigned in the previous step

Wp Bakery Shortcodes

We have created the many shortcodes so that you can create the page as per your requirements. Every shortcode contains a different perspective and the features to make the page dynamic. You will find the shortcode in ( Pages > Add Element > Sigma ). These shortcodes have different fields for the facility. You also can make changes in the shortcode by extending them and overriding the shortcode template in the theme. Below are the shortcode that you will find in the theme:


Category: Sigma
  • Portfolio - Show portfolio Items
  • Team - Show team members
  • Counter - Show a counter
  • Testimonials - Show testimonials
  • Progress Bar - Display round or linear progress bar
  • Infobox - Displays icon with title and text
  • Video - Display a popup video
  • Custom Tabs - Add tabbed content
  • Blog - Display your blog posts
  • Custom Heading - Display section titles
  • List - Add a list, with or without icons
  • Gallery - Display your gallery
  • Post Slider - Display posts in a unique slider
  • Products - Display your Products
  • Product Categories - Display your product categories
Category: Sigma Footer
  • Footer Menu
  • Social Links

Category: Sigma Header
  • Megamenu Menu
  • Megamenu Products

Note: some shortcodes will have Layouts option, meaning you can select to style it in either a Grid layout,Slider layout, or Isotope layout. Examples of such shortcodes is: Blog, products or portfolio

Elementor Shortcodes

We have created the many custom elementor widgets so that you can create the page as per your requirements. Every widget contains a different perspective and the features to make the page dynamic. You will find the shortcode in left side panel after enable Edit with Elementor in page. These shortcodes have different fields for the facility. You also can make changes in the shortcode by extending them and overriding the shortcode template in the theme. Below are the shortcode that you will find in the theme:


Category: Sigma Core
  • SC: Portfolio - Show portfolio Items
  • SC: Team - Show team members
  • SC: Counter - Show a counter
  • SC: Testimonials - Show testimonials
  • SC: Progress Bar - Display round or linear progress bar
  • SC: Infobox - Displays icon with title and text
  • SC: Video - Display a popup video
  • SC: Custom Tabs - Add tabbed content
  • SC: Map - Show mapbox map layout
  • SC: Blog - Display your blog posts
  • SC: Heading - Display section titles
  • SC: Gallery - Display your gallery
  • SC: Places - Show Places Items
  • SC: Post Slider - Display Post Slider with cpt
  • SC: Products - Show Woocommerce Product Items
  • SC: Product Category Tabs - Show Product with specific category in tabs
  • SC: Product Categories - Show Product Categories

Note: some shortcodes will have Layouts option, meaning you can select to style it in either a Grid layout,Slider layout, or Isotope layout. Examples of such shortcodes is: Blog, products or portfolio

Widget Sidebars

We have created different sidebars for the widgets. There are the individual sidebars for the Blog page, Normal page, and service page named with the Blog sidebar, Page Sidebar, Service sidebar. You can use the widgets to set the widgets as per your requirements. There are also other Fours sidebars for the footer area named Footer 1, Footer 2, Footer 3, Footer 4 to create the different grid layout for the footer.

Blog Sidebar – Sidebar for the blog details and the blog archive page.

Page Sidebar – Sidebar for pages.

Footer 1 – Sidebar for footer column 1.

Footer 2 – Sidebar for footer column 2.

Footer 3 – Sidebar for footer column 3.

Footer 4 – Sidebar for footer column 4.

Portfolio Sidebar – Sidebar for the portfolio details page.

Shop Sidebar – Sidebar for the shop page.

Product Details Sidebar – Sidebar for the product details page.

Header Collapse Sidebar – Sidebar for header collapse sidebar

How To's

The following articles will help you troubleshoot miscelaneous problems that you might stumble upon.


Note: We will assume that you already went over all the theme documentation before navigating to the How To part of the documentation

Enable Bakery Post Types

First, make sure you have WP Bakery plugin active, then navigate to WPBakery Page Builder > Role Manager, and change the Post Types option to Custom and select the post types that you want to enable WP Bakery backend editor for.


Note: this is where you activate bakery backend editor for Mega Menus and Page Templates

Enable Elementor Post Types

To edit pages using element builder first activate Elementor plugin. Then go to (Dashboard > Elementor) tab. Check the checkboxes of post types in which you want to edit the section using elementor builder.


Note: After enable builder in cpt open posts/pages and click on Edit with Elementor. After that page/post will be redirect on elementor builder and in left side all the elementor widgets are available.

Setup WooCommerce

When you first import a demo, WooCommerce settings might not come with it. So, you will need to do some minor configuration to get things going. This might cause some issues like redirecting to the Home page when you try to access the My account page, or even cart/checkout pages

Step 1:

To solve this, navigate to your WordPress dashboard and go to WooCommerce > Settings > Products, and assign a shop page

Step 2:

Then go to the Advanced tab, and assign your cart, checkout and account pages.


Note that the pages should have the following shortcodes added to their content as per the WooCommerce documentation:

  • Cart Page: [woocommerce_cart]
  • Checkout Page: [woocommerce_checkout]
  • My Account Page: [woocommerce_my_account]

Update Premium Plugins

The theme will include premium plugins like WP Bakery and Slider Revolution. Many of these plugins will ask you for a “license”. You can ignore this as bundled plugins do not come with an additional license. Due to licensing issues, we can only issue updates for these plugins when we issue a theme update.

Translation

Laramiss theme is comes with the multi-language support. It means you can translate the site into any language. There are various options to translate the site. You can do it by either editing .pot file, or by using plugins.

Translation with Poedit

This app provides the easy method to create new translations for any language. Follow the below steps to edit .po file:

Step 1 – Open Poedit.

Step 2 – Choose “New from Po/POT file.

Step 3 – Select the .pot file from wp-content/themes/laramiss/languages/laramiss.pot.

Step 4 – Select the new language you want to translate.

Step 5 – Save the file with your language name, prefix with the theme name. It will generate both a .po and .mo files for your translation.

Step 6 – Place these files into the wp-content/languages/themes/

Using plugins (Recommended)

You can easily translate the string using the available translation plugins like WPML and Loco Translate

Here is some documentation for these plugins which will be helpful to create the translation files.

For loco translate.

https://localise.biz/wordpress/plugin/manual
https://localise.biz/wordpress/plugin/beginners

For WPML.

Getting Started Guide
WPML Documentation

Source & Credits