View
12
Download
0
Category
Preview:
Citation preview
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
Recommended