1

DOCUMENTATION

OLAM WORDPRESS THEME

INDEX

Theme installation 2 Setting up website 3 Sidebars & widgets 4 Working with EDD 7 Working with Unyson 7

Content Elements 8 Media elements 9 Olam elements 9

Creating a new page 10 Setting up home page search 11 Setting up contact page 13 Setting up mega menu 15 Setting up MailChimp 16 Setting up pricing table 16 Adding filters to shop page 18 Setting up author page 19 Adding a parallax background 20 Olam theme options 21

2

Theme installation

Installing the theme can be done two ways. You can upload the theme ZIP file using the built in

WordPress theme upload, or copy the files through an FTP client.

1) Using WordPress Theme Upload

Be sure to extract the file "olam-download-file.zip" from the ThemeForest download before

uploading. Using the ThemeForest ZIP file directly will result in a "Missing Style Sheet" error.

1. Login to your WordPress admin.

2. In the "Appearance > Themes" menu click the tab "Install Themes"

3. At the top of the page click, "Upload", then click the file input to select a file.

4. Select the zipped theme file, "olam.zip", and click "Install Now"

5. After installation you will receive a success message confirming your new install.

6. Click the link "Activate"

2) Uploading by FTP

1. Login to your FTP server and navigate to your WordPress themes directory.

Normally this would be "wp-content/themes"

2. Extract the files from the zipped theme.

3. Copy the folder "olam" to your themes directory.

4. After the files finish uploading, login to your WordPress admin.

5. In the "Appearance" menu click "Themes"

6. Click "Activate" for the theme "Olam"

Once the theme is activated you will be asked to install the following plugins. Please install and

activate all of them.

1. Unyson

2. Easy Digital Downloads

3. MailChimp for WordPress Lite

3

Activating Unyson Elements

Once you install and activate all the plugins required go to Dashboard->Appearances->Theme

Options and you will be asked to activate the following Unyson elements.

1. Page Builder

2. Mega Menu

3. Feedback

Please activate all the above three.

Setting up website

1. Log into your website dashboard and navigate to Tools > Import, and choose

‘WordPress‘ importer. Now you will be asked to install that plugin, please proceed.

2. When prompted, upload your demo content file olam.xml (Located in the folder ‘ demo

contents’)

3. After you have initiated the demo content upload, you will be asked to assign or create

a new author for your demo content — this is your choice. You will also be given a

checkbox option to ‘Import File Attachments‘. Check this box to import the media you

see in your theme’s demo.

4. Now go to Dashboard->Settings->Reading and select ‘Home’ as the front page and

‘Blog/News’ as the ‘posts page’.

5. Please go to Dashboard->Appearance->menus and create the appropriate menus.

Installation will import the style settings of the demo theme to your website automatically.

Following the above steps will make your website look like the demo. You may now edit the

contents and make them suitable for your online store. It is optional to import this content but

recommended for learning how the theme works.

Third party plugins used in the demo

The following 3rd party plugins are bundled with the theme;

1. Unyson – To enable page builder, mega menu and testimonials

2. Easy Digital Downloads (ver2.5.9) – for digital marketplace

3. MailChimp for WordPress – for email subscription

The above plugins and styled to suite the design of the theme. No other plugins are bundled

with the theme or used in the demo.

4

Sidebars and Widgets – By Olam

In addition to the default sidebars and widgets by WordPress I have created the following for

Olam.

Sidebars:

1. Single Download sidebar – This is displayed in pages of a download/product.

2. Download Category sidebar – This is displayed in search results and category pages of

the products

3. Author downloads sidebar – Displays in author page

4. Footer 1 – Displays widgets in footer area 1

5. Footer 2 – displays widgets in footer area 2

5

Widgets:

1. Olam download details - This widget displays the pricing details, add to cart button,

categories and tags used for a download. This widget is for Single Download Sidebar.

2. Olam Download features widget - It displays the features added for a download/product

6

3. Download performance details - Displays the number of items sold, rating and

comments received. To be used on Single Download sidebar.

4. Olam Author Downloads – Displays author info in a product page

7

5. Olam cart count – displays cart

6. Olam social widgets – displays social media icons for sharing content.

Working with Easy Digital Downloads

Easy digital downloads is a plugin which allows you to sell digital goods. You can build a theme

or icon store with this plugin.

Store Settings - http://docs.easydigitaldownloads.com/category/850-store-settings

Working with products - http://docs.easydigitaldownloads.com/article/177-creating-products

Product Display - http://docs.easydigitaldownloads.com/category/870-product-display

Complete guide - http://docs.easydigitaldownloads.com/category/845-getting-started

Working with Unyson

Unyson frameworks supports the shortcodes and page builder used in Olam. Using Unyson

page builder is pretty easy and self-explanatory. Therefore I am

This is a basic video tutorial on using the Unyson page builder for customizing pages -

https://vimeo.com/105004388. Please check the video and see how the pages are created. We

have stripped many design elements for the ease of use on ‘Olam’

There are 4 main types of design elements as follows:

8

Layout elements – They help you create columns

1. 1/1, ½, 1/3, ¼, 1/6, 2/3 and ¾ elements - create columns with widths as indicated by

their names. For example a ½ element creates a column 50% the width of the page.

2. Section – It creates a full width area where you can add contents and images. You can

add a background color or image for this area. It has lots of options which are given in

detail there.

Content Elements – It consists of a number of design elements.

3. Accordion – for creating accordions

4. Button – for creating buttons

5. Call to Action – For creating buttons with a call to action text and a title

6. Contact Form – This is the Unyson default contact form which cannot be used for this

theme. We have created a custom contact form, the details of which you can find

below.

7. Divider – Helps to create a horizontal diving line or a blank space. Best for separating

different design elements.

8. Icon – Adds an icon

9. Icon Box – Add an icon box

10. Map – Create a map

11. Special Headings – Allows to add a heading

9

12. Table – Adds a table. Also used to add pricing table

13. Tabs – to create tabs

14. Team Member – Used to display team members

15. Testimonials – Add and display testimonials

16. Text block – used to create blocks with text contents

17. Widget area – You can use it to display widgets from different widget areas located in

Dashboard->Appearance->Widgets

Media Elements

18. Image – Adds an image

19. Slider – Adds a Unyson slider. This works only if you enabled ‘Slider’ in Unyson

extensions.

20. Video – lets you add a video

Olam Elements:

These are shortcodes we created specially for Olam WordPress theme.

21. Olam Contact – A custom contact form

22. Olam featured downloads – displas all featured downloads on a page

10

23. Olam gadgets – It basically displays a bar graph with values displaying in a mobile, tablet

and a PC.

24. Olam Pie chart – displays a pie chart

25. Olam progress bars – create any progress bar chart with this

26. Olam recent downloads – displays all the latest products

27. Olam search – The main search you see on the home page of our demo is created with

this element. This is used for product search.

28. Olam shortcode – for adding shortcodes of sliders

29. Olam team member – displays team members

30. Olam testimonials – display testimonials

PS: Testimonials and contact form shortcodes already come with Unyson by default. You can

either use them or use the ones we created.

Creating a new page

You can create unlimited number of pages using Olam.

1. To create a page go to Dashboard->Pages->Add New.

2. Give a title for the page in the title column and build page elements using Unyson page

builder. You can also use the visual or text editor directly without using Unyson ‘Visual

page builder’.

3. You can display an alternate title for the page by adding it in the ‘Page Alternate title’

field. Adding a word between <span></span> elements will change the text color to the

theme color.

4. You can add a sub title to the page using ‘Page Subtitle’ field

5. You can enable search functionality on the header area of any page by checking the

‘Enable header search option.’

6. You can add a background image in your header by uploading a banner image using

‘Featured Image’ option.

We also created a custom page template named ‘Downloads’. While creating a shop page

listing all the digital products this template has to be assigned for that page.

11

Setting up Search on home page

Olam is a very simple theme, everything is easy once you get a hang of our drag and drop page

builder. One confusing area would be the setting up of home page search field and banner.

This how the home search area look from the backend.

It is created as follows:

1. Add a ‘Section’ by drag and drop

2. Add ‘Olam Seach’ widget onto it.

12

3. When you click on the ‘Olam Search’ widget a popup will appear showing options like

title description, counter 1 title etc. Fill those fields with your data.

4. Click on the ‘Section’ element. It also will show a popup displaying lots of options

including enabling page overlay, background color, background image etc.

5. Enable the options ‘Check this to enable dark overlay’, ‘Make this section a full height

section’

6. Add a background image and set set color to #fff or any color of your choice.

7. Save and publish the page.

13

Setting up a contact page

A contact page can be easily built using Unyson elements. To create a contact page;

1. Create a page by going to Dashboard->Pages->Add New

2. Give it a name and click on the ‘Visual Page Builder’ button to enable drag and drop

page builder

3. From ‘Layout Elements’ add a new section. Then drag and drop any column layout

suitable for your design onto this ‘section’

4. Click on ‘Olam Elements’ tab and drag and drop the ‘Olam Contact’ widget there. This is

a custom widget created by us, it doesn’t have any customization options but will

display three fields; name, email, message and a submit button.

5. You can add a custom contact form by choosing ‘Contact Form’ widget from ‘Content

Elements’ tab.

6. The above widget contains a lot of contact fields. Use this builder in a similar way as the

visual page builder in order to create your desired contact form by dragging & dropping

any of the form fields on the page.

14

7. Click any shortcode to access the options for that field. From here you can control

different settings depending on the field: label, mandatory setting, restrictions,

placeholder text, etc

15

Setting up Mega Menu

If you enabled the ‘Mega Menu’ extension of Unyson then you can create mega menus;

1. Go to Dashboard->Appearance->Menus

2. Check the ‘Use as mega menu’ check box in the menu drop down.

16

3. Check the ‘This column should start a new row’ to create a new row of menus. Any

menu added as its sub menu will be displayed below it like in a column.

4. Click the ‘Save Menu’ button to save the menu.

A simple guide to setting up the default WordPress menu option can be found here -

https://codex.wordpress.org/WordPress_Menu_User_Guide

Setting Up MailChimp for WP

MailChimp is a great plugin for email marketing. MailChimp integrates with the web services

you already use, so you can easily sync your data, import content from other sources, and get

reports on how your newsletters are impacting your business.

A full guide to setting up the plugin is here - https://connect.mailchimp.com/how-to/128

Olam uses a MailChimp widget to display ‘Subscribe to newsletter’ option on its footer. The

widget can be accessed by going to Dashboard->Appearance->Widgets->MailChimp Sign-up

Form. Drag and drop it to any one of the footer widget areas to display it on front-end.

Setting up Pricing Table

The pricing box shown in the home page of Olam demo is created using ‘Table’ widget located

in the ‘Content Elements’ tab of Unyson page builder. Drag and drop this widget to where you

17

want the pricing table to be displayed. When you click on the ‘Table’ it will pop up and show

lots of options to create columns, rows etc.

This ‘Table’ can be used both to display a pricing table and tabular data so if you want to create

a pricing table you should choose ‘Use the table as a pricing table’ option from the drop down.

You can create as many rows and columns as you like. You can highlight a column by choosing

the ‘Highlight Column’ option. Once you create the table don’t forget to ‘Save’.

18

Adding Filters to Shop Page

These filters are added via two widgets.

1. Olam download filters – displays the sorting buttons ‘Newest items, cheapest and best

selling’

2. Downloads Categories/Tags – displays categories and tags used in digital downloads.

Both these widgets are displayed by adding them to the ‘Download Category Sidebar’ in

Dashboard->Appearances->Widgets

19

Setting up Author Page

Author page displays all the products uploaded by that author. This is actually the modified

version of the user profile in WordPress. To update that page with Author information go to

Dashboard->Users->Your Profile

In addition to the default user fields we created a number of new fields to add author data. The

information updated here will reflect in the theme author profile page.

20

Adding a Parallax Background

If you check the ‘Testimonials’ section in our theme demo you will see that the section

background also moves while scrolling. This effect is enabled through the ‘section’ widget in our

page builder.

For this click on the section widget, add a background image and check ‘Check this to enable

parallax section’ box.

21

Olam Theme Options

You can customize Olam using our theme options panel. It can be accessed via Dashboard-

>Appearance->Theme Options. The details of what each option do is clearly explained there so I

am not repeating them in this documentation.

Home Settings – It contains the following options

1. Theme logo – Upload theme logo here

2. Theme retina logo – A high resolution version of the logo to be displayed on retina

screens (optional)

3. Theme favicon – upload the favicon here

4. Theme primary color – Select the primary color of the theme using this color picker.

5. Theme secondary color – Select the secondary color of the theme here.

6. Enable sticky header – This make makes the menu scroll along with the page.

7. Enable transparent header – checking this will make the header transparent.

8. Theme page header banner – upload an image to display in the background of the

header in all pages. Setting featured image in pages will over ride this option.

9. Enable retina images – enables retina images on retina displays

10. Enable preloader – enable/disable preloader

22

Typography

1. Heading fonts – Select a font family for headings including H1-H6, product names, prices

on pricing table and section titles.

2. Heading color – select a font color for the headings above

3. Body typography – select the body font color

4. Select body font – select a font family for all contents other than headings

5. Choose body size – set the font size for body text

6. H1 size – select the size for H1 title

7. H2 size – select the size for H2 title

8. H3 size – select the size for H3 title

9. H4 size – select the size for H4 title

10. H5 size – select the size for H5 title

11. H6 size – select the size for H6 title

Social – You can add your social profile links here for the following social networks

1. Facebook

2. Twitter

3. Linkedln

4. Youtube

5. Google Plus

Miscellaneous

1. Custom CSS – Add your custom css codes here

2. Google Analytics – To add Google Analytics or any other tracking codes

Footer Options

1. Footer copyright text – Enter your copyright text here

2. Footer background image – upload your background image for footer

3. Disable quick support widow – disables the support widow displayed on the right

bottom sides of all pages

23