DOCUMENTATION OLAM WORDPRESS THEME

Transcription

1 DOCUMENTATION OLAM WORDPRESS THEME INDEX Theme installation 2 Setting up website 3 Sidebars & widgets 5 Working with EDD 8 Working with Unyson 8 Content Elements 9 Media elements 9 Olam elements 10 Creating a new page 11 Setting up home page search 12 Setting up contact page 14 Setting up mega menu 16 Setting up MailChimp 17 Setting up pricing table 17 Adding filters to shop page 19 Setting up author page 20 Adding a parallax background 21 Olam theme options 22 EDD Front End Submission plugin for multivendors 26 Version update 30 Version 3.4 update 31 Version 4.0 update 32 1

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 4. Layero Related Downloads 5. Olam Multiple Images 6. Olam EDD Meta Fields (optional) 2

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 This is built on Unyson framework, so implementing demo contents is a little different and way easier than usual WordPress demo content import. The demo content file is already inside the theme file you downloaded. All you have to do is follow the below steps to make your website look like our demo. 1. Log into your website dashboard and navigate to Dashboard->Unyson 2. Click on Show other extensions and install and activate the extension Backup & demo Content. 3. Go to Dashboard->Tools->Demo Content Install 4. Install the Olam Theme Demo you want. This will take a few minutes and once the import is complete you will be redirected to the home page PS2: Please note that all the images in our theme preview will be replaced by dummy images in your demo to avoid any possible copyright violations. 3

4 Third party plugins bundled with the theme The following 3 rd party plugins are bundled with the theme; Unyson To enable page builder, mega menu and testimonials Easy Digital Downloads (ver2.5.10) for digital marketplace MailChimp for WordPress for subscription Olam EDD Meta Fields (Our own plugin, needed when FES is used) Olam Multiple Images (Our own plugin, needed to upload multiple images as a slider) The above plugins and styled to suite the design of the theme. No other plugins are bundled with the theme. Third Party Plugins used in demos but are not included in the theme file: Theme demo 1 - themes.layero.com/olamwp/ 1. EDD Front End Submission - to enable multiple vendors Theme demo 3 - themes.layero.com/olamwp3/ 1. Easy Digital Downloads - Downloads As Services To enable services Theme demo 3 - themes.layero.com/olamwp4/ 1. Revolution Slider To display a slider on homepage 2. Easy Digital Downloads - Bookings Note: We use Revolution slider for demo 4 and many of the supported EDD extensions in demo 1 to show thei compatibility with the theme. These plugins are paid plugins and you will need to purchase them separately to get those functionalities. 4

5 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 6. Woocommerce Sidebar for woocommerce pages (from version onwards.) 5

6 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

7 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 5. Olam cart count displays cart 6. Olam social widgets displays social media icons for sharing content. 7

8 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 - Working with products - Product Display - Complete guide - 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 - 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: 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. 8

9 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 NOTE:THIS IS NOT AVAILABLE NOW. 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 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 9

10 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 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 10

11 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 make the menu transparent by checking the Header Overlay option. This is used while creating a page with full with banners as in the Olam home page. 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

12 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. 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. 12

13 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. 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, , 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. 13

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 14

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. 15

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 - Setting Up MailChimp for WP MailChimp is a great plugin for 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 - 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 16

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. 17

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 18

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. 19

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. 20

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. General 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. Header background color Select the header background for the theme Theme Styles 1. Enable dark Style enable dark theme version 2. Choose Style Choose between three theme styles 21

22 Typography 3. No. Of product columns Select the number of product columns in downloads and EDD archive pages 4. Align menu/logo center center align menu and logo 5. Enable sticky header This make makes the menu scroll along with the page. 6. Theme page header banner upload an image to display in the background of the header in all pages. 7. Enable retina images enables retina images on retina displays 8. Enable preloader enable/disable preloader 9. Preloader image select an image for preloader 10. Enable categories drop down in header search shows a category drop down in the search area in downloads and archive pages 11. Hide price and icons in download listings To hide the price and download icons in product listing pages and shortcodes. Helpful when using the theme for bookings or services. 12. Custom product count add the number of products/downloads to be displayed on each page in the shop, categories, tags and search result pages for the Downloads post type. 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 22

23 6. Instagram 7. Pinterest 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 Backup options Used to backup your theme options. This has nothing to do with backing up your website data, it will back up only your theme options data. 23

24 24

25 EDD Front End Submission Plugin This is a great plugin to use if you want to build a marketplace for digital goods. This makes it easy for new vendors to signup and upload their products without accessing the back end of the website. This is a paid plugin though. Please see more about this plugin - Setting up front end submission plugin - frontend-submissions-basic-setup We created a plugin Olam EDD Meta Fields. This plugin is used to add some additional fields for the digital products like preview url, sub title and product thumbnail. Both the above plugins are needed only if you need to create a digital marketplace allowing access to multiple vendors. Version updates: 1. Made the theme compatible with Woocommerce plugin 2. Modified the author widget to incorporate vendor contact form 3. Allow multiple images as slider in single downloads page 25

26 Version 2.0 updates: 1. Made the theme compatible with the following plugins: a. Commissions b. Wishlists c. Reviews d. Points and rewards e. Social Login f. Recommended products g. Acquisition survey h. Recurring Payments 2. Added an option to add category drop down to search form 3. Fixed IE11 compatibility issue with menu drop down Version 2.1 updates: 1. Made the theme compatible with free downloads plugin 2. Created the following additional page templates; a. Custom Page A page with white background b. Page with right sidebar c. Page with left sidebar 3. Solved search bar problem 4. Variable price option bug fix Version 2.2 updates: 1. Variable price option bug fix 2. Added listing/thumbnail widget for showing downloads based on categories and recent filters. 3. Fixed support mail problem Version 2.3 updates: 1. Added instagram to social profiles 2. Added unlimited sub-menus 3. Fixed mail delivery problem 26

27 Version 3.0 updates: 1. Added an option for dark theme To enable the dark version of the theme pls go to Dashboard->Appearance->Theme Options->Home Settings To change the background color please go to Dashboard->Appearance->Customize->Colors and change the background color from there. 2. Modified thumbnail design to round instead of square. Files edited; a. css/style.css b. dark-style.css c. functions.php d. admin/functions/functions.options.php e. woocommerce-style.css Version 3.1 Updates: Added the following options; 27

28 1. Three styles 2. Option to hide price and icons in product listing pages 3. Option to change menu background color 4. 2 new demos 5. Made compatible with EDD Bookings and Contact form 7 plugins 6. Option to change number of product columns in download and archive pages 7. Option to center menu and logo 8. Option to change preloader 9. Added an option to add any class in Unyson Section Shortcode File edited; 1. style.css - /css/style.css 2. checkout_cart.php - /edd_templates/checkout_cart.php 3. widget-cart-item.php - /edd_templates/widget-cart-item.php 4. taxonomy-download_category.php - taxonomy-download_category.php 5. taxonomy-download_tag.php - taxonomy-download_tag.php 6. view.php - /framework-customizations/extensions/shortcodes/shortcodes/olam-recentdownloads/views/view.php 7. archive-download.php - archive-download.php 8. author.php - author.php 9. template-downloads.php- template-downloads.php 10. single-download.php - single-download.php 11. functions.php - functions.php 12. taxonomy-download_tag.php - taxonomy-download_tag.php 13. taxonomy-download_category.php - taxonomy-download_category.php 14. author-default.php - /includes/author-default.php 15. author-downloads.php - /includes/author-downloads.php 16. loop-shop-listings.php - /includes/loop-shop-listings.php 17. widget-cart-item.php - /edd_templates/widget-cart-item.php 18. wish-list-view.php - /edd_templates/wish-list-view.php 19. checkout_cart.php - /edd_templates/checkout_cart.php 20. widget-olam-download-details.php - /includes/widgets/widget-olam-downloaddetails.php 21. functions.options.php - /admin/functions/functions.options.php 28

29 Version Updates: 1. Updated body typography issue in theme options 2. Updated problem with gallery images in download page Updates files; 1. includes/author-downloads.php 2. archive-dowload.php 3. single-download.php 4. functions.php 5. css/color.css.php 6. css/style.css Version 3.2 Updates 1. Added option toad video previews Updated files; 1. includes/author-downloads.php 2. archive-dowload.php 3. single-download.php 4. functions.php 5. css/color.css.php 6. css/style.css 7. /framework-customizations/extensions/shortcodes/shortcodes/table/includes/fwoption-type-table/class-fw-option-type-table.php Version 3.3 updates 1. Added option to add a custom preview image for downloads. This is to be displayed in pages like shop, categories, tags and archives. 2. Created a custom related downloads plugin. 3. Updated all woocommerce files and made them compatible with the latest WooCommerce version 4. Added a shortcode to display recent posts from blog. 5. Option to add alternate heading for pages, blog posts and downloads 6. Loading sign for registration form when clicking submit button 7. Fixed EDD reviews compatibility issue 29

30 8. Made it more mobile friendly EDD related plugin config: You can configure the related downloads section by going to Dashboard->Downloads- >Settings->Extensions Version The previous version had some bugs, which were fixed in this version. Changelog; css/style.css css/color.css.php css/dark-style.css css/woocommerce-style.css css/woocommerce.css js/olam-main.js functions.php edd_templates/edd.css Version Updated on 28/06/2017 Solved button not displaying problem on registration page Changelog css/style.css includes/popup-login.php edd_templates/shortcode-login.php edd_templates/shortcode-register.php Version (10/07/2017) Added a new option to hide page title Solved a problem with adding products in FES Changelog: css/style.css single-download.php 30

31 js/olam-main.js edd_templates/single_recommendations.php framework-customizations/theme/options/page-options.php functions.php admin/functions/functions.options.php Version 4.0 (25/11/2017) Added a new option to make the header area transparent so multiple pages with a full width banner like the Olam Home page can be created Added an option in theme options to set the number of downloads displayed per page Style changes Made the theme more mobile friendly Added video/audio previews in related downloads area Created a child theme WooCommerce file updates making it compatible with version Video player bar animations Minor bug fixes Made the theme compatible with EDD Front End Submission version Changelog: Updated demo import method considerably reducing the size of the theme file. 1. archive.php 2. index.php 3. css/color.css 4. includes/author-default.php 5. includes/widgets/widget-olam-vendor-contactform.php 6. includes/widgets/widget-olam-downloads-author.php 7. css/dark-style.css 8. css/style.css 9. css/admin-style.css 10. page.php 11. comments.php 12. single.php 13. pagebg.php 31

32 14. page-sidebar-left.php 15. page-sidebar-right.php 16. single-download.php 17. framework-customizations/extensions/shortcodes/shortcodes/olam-recentdownloads/views/view.php 18. archive-download.php 19. taxonomy-download_category.php 20. includes/loop-shop-listings.php 21. includes/author-downloads.php 22. woocommerce/myaccount/form-login.php 23. header.php Version 4.1 (14/03/2018) Changelog: Style changes Fixed responsive issue on tablets Added an option to show download category instead of author name in product listings Added an option to hide download icons but show price in download listings Updated the olam related downloads plugin to version 1.1 js/olam-main.js css/style.css includes/loop-shop-listings.php includes/author-downloads.php css/color.css.php functions/functions.options.php framework-customizations/extensions/shortcodes/shortcodes/olam-featureddownloads/views/view.php framework-customizations/extensions/shortcodes/shortcodes/olam-recentdownloads/views/view.php Version (21/7/2018) Unyson plugin updates 32

33 Changelog: olam\edd_templates\widget-cart-item.php olam\edd_templates\includes\checkout\template.php olam\edd_templates\shortcode-profile-editor.php olam\edd_templates\checkout_cart.php olam\functions.php 33