Bigboom Documentation - 20Script

    Introduction
    ==========

    We would like to thank you for purchasing Bigboom! We are very pleased that you have chosen Bigboom for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation. We outline all kinds of good information, and provide you with all the details you need to use Bigboom. The theme can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please go to [wordpress.org](http://wordpress.org) to download and install the latest version of Wordpress.

    -----------------------------

    Files included in the package
    =========================

    When you purchase our theme from ThemeForest, you need to download the theme package from your themeforest account. Navigate to your downloads tab on ThemeForest and find Bigboom. Click the download button to see the two options. The **All files & documentation** contain everything, the **Installable WordPress** Theme is just the installable WordPress theme file. Below is a full list of everything that is included when you download the main files, along with a brief description of each item.

    - `bigboom.zip`: main theme file that need to be uploaded to host to install Bigboom theme.
    - `bigboom-child.zip`: basic child theme of Bigboom theme. It is created for people who want to customize code of the Bigboom theme.
    - `demo-content.xml`: this file contains all sample content which will help you to have a first look of how we use Bigboom theme.
    - `theme-options.txt`: theme option backup file. You'll need this to restore the default theme options that setup for demo website.
    - `widgets-data.wie`: this file contains all widgets which are exported from our demo.
    - `Homepages`: this folder contains files which are our homepages content. They are used to help people who want to build a homepage like ours but don't want to import all demo content.
    - `Documentation`: documetation folder that contains documentation files.
    - `Sliders`: this folder contains sliders which are exported from our demo.
    - `Plugins`: this folder contains plugin packages which are downloaded from Codecanyon.
    - `PSDs`: this folder contains PSD files.

    ------------------------------

    Installation
    =========

    Step 1 - Install theme
    -------------------------

    After you download the package from ThemeForest, please unzip it. You'll see a file `bigboom.zip`, which is the main file that needed to upload and install.

    You can either choose to upload and installl the theme using **WordPress theme install** or use **FTP** function.

    **Install theme using WordPress install function**

    - Go to `Appearance > Themes` and click **Add New**
    - Select **Upload**
    - Click **Browse** and select the `bigboom.zip` file
    - Click **Install Now**
    - When upload and installation progresses are completed, click **Activate**, or go to `Appearance > Themes` and activate the **Bigboom** theme

    **Upload and install using FTP**

    If you get any fail when install theme by Wordpress install function, we recommend to use FTP:

    - Unzip the `bigboom.zip` file, you'll get a folder `bigboom`
    - Use a FTP client like [FileZilla](http://filezilla-project.org/) and upload that folder to `wp-content/themes` folder on your host
    - Go to `Appearance > Themes` and activate the **Bigboom** theme

    Step 2 - Install plugins
    ----------------

    After installing the Bigboom theme, you'll see a notification in the top of the page that says the theme needs some plugins to function properly.

    The Bigboom theme **requires** following plugins:

    - [Meta Box](https://wordpress.org/plugins/meta-box/): plugin for creating meta boxes for posts, pages,... It is free and available on WordPress.org
    - [Woocommerce](https://wordpress.org/plugins/woocommerce/): it is a powerful, extendable eCommerce plugin that helps you sell anything.

    The Bigboom theme **recommends** following plugins:

    - TA Portfolio: this plugin is used to manage portfolios.
    - TA Team: this plugin is used to manage team members.
    - [Contact Form 7](https://wordpress.org/plugins/contact-form-7/): plugin for creating contact forms. It is free and available on WordPress.org

    Bigboom is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme.

    To install these plugins:

    - Click **Begin installing plugins**
    - You'll be redirect to a page where all needed plugins are listed. Just click on **Install** below each plugin's name
    - After installing, if it's required to activate the plugin, just activate

    ![install plugins](images/install-plugins.png)

    Step 3 - Config plugins
    -----------------------

     After finishing to install these plugins, you need to change the size of product images for catalog.

    -  Go to `Woocommerce > Settings > Products > Display`, under the Product Images section, you will find Catalog Images, Single Product Images, and Product Thumbnails.
    - Catalog Image is for your images on the shop page and for shortcodes. Single Product Image is for your images on the single product pages. Product Thumbnail is for your smaller product thumbnails for widgets.
    - Change the size of Catalog Image to 300 x 300, Single Product Image to 600 x 600, Product Thumbnail to 180 x 180.

    ![plugins settings](images/woocommerce-settings.png)

    Step 4 - Import demo content
    ------------------

    If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

    - Go to `Tools > Import`
    - Select **WordPress** from the list
    - If you haven't installed the **WordPress import plugin**, a popup window will appears and ask you to install it. Just click **Install Now**. When the installation progress is completed, click **Activate Plugin & Run Importer**. If you have installed this plugin, skip to next step.
    - Click **Browse** and select `sample-content.xml` file from the download package
    - Click **Upload file and import**
    - When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox **Download and import file attachments**.

    ![import](images/import-data.png)

    ![install plugin importer](images/install-plugin-importer.png)

    ![select demo content](images/select-import-data.png)

    After completing all above steps, go to `Posts`, `Pages`, `Portfolios`, `Team` to see imported data.

    Step 5 - Import Widgets Data
    -------------------

    - Install and activate the [Widgets Importer/Exporter](https://wordpress.org/plugins/widget-importer-exporter/) plugin.
    - Go to `Tools > Widget Importer & Exporter`, click **Choose file ** button and select `widgets-data.wie` file from the download package.
    - Click to **Import widgets**.
    ![import widgets](images/import-widgets.png)-

    Step 6 - Import Revolution Sliders
    -------------------------
    - Go to `Revolution Slider`.
    - Click **Import Slider ** button on the bottom right.
    - Click **Choose file** and select a slider in `Slider` folder from the download package.
    - Click **Import Slider** button to start importing. It usaually takes seconds to finish.

    ![import rev slider](images/import-rev-slider.png)
    ![select import rev slider](images/select-import-rev-slider.png)

    Step 7 - Import Theme Options
    ----------------------------------

    - Open the `theme-options.txt` file from from the download package.
    - Copy all content inside this file.
    - Go to `Appearance > Theme Options > Backup - Restore`, and paste the text file’s contents into the ‘Backup Settings’ field.
    - Click the **Import Options** button to start importing theme opitons.
    ![import theme options](images/import-theme-options.png)

    Step 8 - Setup homepage and blog page
    -------------------------------------

    After install demo content, you'll see a page `Front Page`. This page will be used as the homepage of the website. To set it as homepage, please go to `Settings \ Reading`, under **Front page displays**, please chose **A static page (select below)** and select **Front Page** for **Front page** and **Blog** page for **Posts page**.

    ![setup front page](images/setup-front-page.png)

    Step 9 - Setup Menu
    --------------

    Although the theme is working now and it shows menu, but because we haven't created a menu for primary location, the theme will display all pages by default.

    ###Edit imported menu (recommend)

    When you import the demo data, WordPress automatically create menus for you. These menus are the same as our demo.

    - Go to `Appearance > Menus`
    - Select **Main Menu** and click **Select** button to edit it.
    - Scroll to bottom of page and check **Primary Menu** for **_Theme location_**
    - Click **Save Menu**

    ###Create New Menu

    Following these steps to create a menu:

    - Go to `Appearance > Menus`
    - Click the **create a new menu** link to create new menu.
    - Select items from the left meta boxes and click **Add to Menu**
    - On the right, feel free to drag and drop menu items to organize them
    - When you're done moving menu items, check **Primary Menu** for **Theme locations** at the bottom of the page
    - Click **Save Menu**

    ![edit menu](images/edit-menu.png)

    ###Config Mobile Menu

    The Bigboom theme allows you to select what menu will be used as menu for mobiles. By default, it will use the **Primary Menu** as mobile menu. But if you want to display another menu on mobles or small screen devices, please go to `Appearance > Menus`, select **Manage Locations** tab then select a menu for **Mobile Menu** location.

    ![edit menu](images/mobile-menu-select.png)

    ###Config Mega Menu

    The Bigboom theme add some options to the menu item. They allow you to config mega menu. Click the arrow icon next to any menu item to expand options.

    ![edit menu](images/mega-menu.png)

    - **(1)**: Turn on or off the mega menu item. Only top level items can enable the Mega Menu.
    - **(2)**: Set the width of mega menu. It is optional. The default value is 100%. It affects on the top level items only. It usually used to set the width of vertical mega menu.
    - **(3)**: Pick an icon for the menu item.
    - **(4)**: Select the width of submenu column. This option affect to the second level items only.
    - **(5)**: The text area allow you to put any custom content for menu item, like HTML or shortcodes. It affects on second level items and third level items only.

    ![edit menu](images/menu-levels.png)

    ###Menu's special CSS classes

    Beside options for mega menu configuration, the theme also support some special CSS class name:

    ![edit menu](images/menu-classes.png)

    - `new`: display the NEW badge on menu items
    - `hot`: display the HOT badge on menu items
    - `sep`: display menu item as a separator line. It affect on second level items only and inside mega menu only.
    - `hide-text`: hide the link label. It affect on second level items only and inside mega menu only.

    >**Note:** If you want to set a Custom Menu widget as responsive menu as our Product Categories menu, just add a custom class `bb-product-categories` to the widget element in Visual composer editor.

    Step 10 - The final step
    -----------------------

    1. The import funciton of Wordpress doesn't support importing mega menu. So the **Main Menu** and **Product Categories** menu which are imported will display as normal menu. If you want to have same mega menus as our demo, you have to config them manually. Lucky it is quite simply and we wrote about it in the previous step. Go to `Appearance > Menus` then select **Main Menu** and **Product Categories** menus to edit.

    2. The import function of Wordpress doesn't support to import setting of widget **Custom Menu**, you have to edit all of them and select the menu you want to show. We will list all **Custom Menu** widget you have to edit manually. Firstly, go to `Appearance > Widgets`:

    	-  **Topbar Left**: remove default widgets and add widgets as you want to show here.
    	-  **Topbar Right**: select **Top Menu** menu.
    	![topbar right](images/topbar-right.png)
    	- **Shop Sidebar**: select **Product Categories** menu.
    	![shop sidebar](images/shop-sidebar.png)
    	- **Footer 2**: select **Information** menu.
    	![footer 2](images/footer-2.png)
    	- **Footer 3**: select **Services** menu.
    	![footer 3](images/footer-3.png)
    	- **Footer 4**:  select **Account** menu.
    	![footer 4](images/footer-4.png)

    3. As same as **Custom Menu** widgets in the sidebars, you have to go to edit each home pages to select the **Product Categories** for *WP Custom Menu** element.

    ![custom menu](images/homepage-custom-menu.png)

    ![edit column categores](images/edit-column-categories.png)

    ------------------------------

    Create Your Homepage
    ====================

    Create your homepage
    --------------------------

    Bigboom theme comes with Visual Composer plugin. This plugin allows you to forget about shortcodes and create most complex layouts within minutes without writing a single line of code!

    You want to have a homepage as same as ours, but some time you don't want to import all demo content. We will show you one of the easiest way to create your homepage:

    In the theme package folder, you will see a folder name **Homepages**. This folder contains `.txt` files. They are content of home pages on our demo. You can copy the content inside a file and paste to your homepage, so you already have a home page like ours.

    ![text ediotr](images/text-editor.png)

    _You have to paste the content into **Text** tab_

    Visual Composer Basics
    ----------------------------

    It has very simple and intuitive interface, but before getting started, you may find it useful to get accustomed with its documentation:

    [Visual Composer Documentation](https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress?title=Visual_Composer)

    In Bigboom theme, we also create some new elements and add some new parameters to exists elements of Visual Composer. It will help you a lot to build your HomePage easier. Following we will go through some popular elements of Visual Composer and all of new elements that Bigboom theme brings to you.

    ###Row

    This is the most popular you can't live without when using Visual Composer. In Bigboom theme, we use it as a section of One Page. So, when you edit a row, there is new parameters you will see beside the defaults:

    - **ID**: it is new parameter which is used to set the CSS ID of a section. This ID will be used to link to a menu item, as we wrote in the Menu section about.
    - **Full width content**: select this option will allow you to display all content inside this row in full width.

    ###Column

    As Row, column is also the most popular element in Visual Composer, they are always be together. In Bigboom theme, we add new tab called "**Animation**" when you edit a column. This tab contains options allow you to set up animation for that column when it appear on screen for the first time. This tab contains following options:

    - **Animation**: select an animation for this column. You can learn more about these animation in this link: [http://daneden.github.io/animate.css/](http://daneden.github.io/animate.css/)
    - **Duration**: set animation duration in ms.
    - **Delay**: set delay time to fire animation.

    ###Products Carousel

    This element is used to display a products carousel on your page.

    - **Products**: select which product will be display: recent, featured, best selling, top rated or on sale.
    - **Title**: enter the title for carousel.
    - **Total Products**: enter the number of how many product do you want to get.
    - **Product Per View**: enter the number of products to be showed on each slide.
    - **Columns**: enter number of columns will be used to display **Product Per View**.
    - **Spacing**: set the spacing between columns.
    - **Slider autoplay**: enable it if you want the carousel slider auto play.
    - **Hide prev/next buttons**: enable to hide the arrows of carousel slider.
    - **Extra class name**: enter extra class names if you want to apply your own style rule.

    ###Products Carousel 2

    This element is used to display a products carousel on your page, in a difference view, without dividing to row and columns.

    - **Title**: enter the title for carousel.
    - **Total Products**: enter the number of how many product do you want to get.
    - **Category**: select the product category to get products from it.
    - **Product Per View**: enter the number of products to be showed on each slide.
    - **Order By**: select the product's field to be used to order products.
    - **Order**: select the order of products: Ascending or Descending
    - **Slider autoplay**: enable it if you want the carousel slider auto play.
    - **Hide prev/next buttons**: enable to hide the arrows of carousel slider.
    - **Extra class name**: enter extra class names if you want to apply your own style rule.

    ###Products Carousel 3

    This element is used to display a products carousel on your page, in a difference view, very similar to **Product Carousel** element.

    - **Products**: select which product will be display: recent, featured, best selling, top rated or on sale.
    - **Title**: enter the title for carousel.
    - **Total Products**: enter the number of how many product do you want to get.
    - **Product Per View**: enter the number of products to be showed on each slide.
    - **Columns**: enter number of columns will be used to display **Product Per View**.
    - **Slider autoplay**: enable it if you want the carousel slider auto play.
    - **Hide prev/next buttons**: enable to hide the arrows of carousel slider.
    - **Extra class name**: enter extra class names if you want to apply your own style rule.

    ###Hot Deal Products

    This element is used to display deal products as a carousel.

    - **Title**: enter the title for carousel.
    - **Product Per View**: enter the number of products to be showed on each slide.
    - **Columns**: enter number of columns will be used to display **Product Per View**.
    - **Order By**: select the product's field to be used to order products.
    - **Order**: select the order of products: Ascending or Descending
    - **Extra class name**: enter extra class names if you want to apply your own style rule.

    ###Icon Box

    This element is used to present a single service or small paragraph with an icon. It contains following options:

    - **Icon**: select icon for this box.
    - **Icon Position**: select position to display icon in this box: top, left or right.
    - **Title**: enter the box's title.
    - **Subtitle**: enter the box's sub-title.
    - **Content**: enter content of this box.
    - **Read more text**: enter the read more text.
    - **Link**: enter the link for the box.
    - **Extra class name**: enter extra class names if you want to apply your own style rule.

    ###Bigboom Images Carousel

    Beside the default Images Carousel of Visual Composer, we create another this element because we see the default element of Visual Composer does not work correctly in mobile. We use this element to show client's logos in our demo. It contains following options:

    - **Images**: uploads your images.
    - **Image size**: enter the image size you wish to display images in.
    - **Custom links**: enter link for images, each link in a single line.
    - **Custom link target**: select target to open a link.
    - **Slides per view**: set numbers of slides you want to display at the same time.
    - **Slider autoplay**: select this option if you want slider to auto play.
    - **Hide prev/next buttons**: select this option if you want to hide navigation buttons.
    - **Extra class name**: enter extra class names if you want to apply your own style rule.

    ###Bigboom Posts Carousel

    Display posts as a carousel slider.

    - **Title**: enter the carousel title.
    - **Total posts**: enter the number of post to be get.
    - **Category**: select category to get posts from.
    - **Order By**: select the post's field to be used to order posts.
    - **Order**: select the order of posts: Ascending or Descending
    - **Excerpt Length (words)**: enter number of words of the post excerpt.
    - **Hide Readmore Text**: enable this option if you want to hide the read more text.
    - **Readmore Text**: enter the read more text link.
    - **Slides per view**: enter the number of posts to be displayed.
    - **Slider autoplay**: select this option if you want slider to auto play.
    - **Hide prev/next buttons**: select this option if you want to hide navigation buttons.
    - **Extra class name**: enter extra class names if you want to apply your own style rule.

    ------------------------------

    Theme Options
    =============

    Bigboom theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!

    ![theme-options](images/theme-options.png)

    All options have full description so you can know what you are doing. Just click and save!

    Post Format
    ===========

    [Post Formats](http://codex.wordpress.org/Post_Formats) is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.

    In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

    Bigboom theme supports the following post formats:

    - `gallery` - A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
    - `link` - A link to another site.
    - `image` - A single image, which will be shown above post title.
    - `quote` - A quotation.
    - `video` - A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
    - `audio` - An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player provided by Wordpress as default player.

    Using post format in Bigboom lets you differentiate post from each other and make the blog page / single page looks more beautiful.

    [Go to blog page](http://demo.themealien.com/bigboom/blog/) to see how post formats look.

    When you edit a post, select a format you want to apply to that post on the **Format** meta box on the right:

    ![formats](images/post-format-box.png)

    When you choose a format, a corresponding meta box will appear **below** the content editor, here's the list of them:

    ![formats](images/post-formats.png)

    All you need to do is just enter **all** information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc.

    ------------------------------

    Translation
    =========

    ###Tell WordPress which language file to use.

    If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation.

    You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation.

    ust add the line below to your wp-config.php or change it if it already exists:

    `define ('WPLANG', 'fr_FR');`

    ###First Method: Using Codestyling Plugin

    The easiest way to translate your theme locally is by using the [Codestyling Localization](https://wordpress.org/plugins/codestyling-localization/) plugin. After you have installed and activated the plugin, simply go to `Tools > Localization` (shown in your language) and translate the theme from your WordPress backend following the [plugin instructions](http://www.code-styling.de/english/development/wordpress-plugin-codestyling-localization-en)

    ###Second Mothod: Using Poedit

    Poedit is a common program which you can use to translate the theme. It’s available for free on [poedit.net](http://www.poedit.net/).

    After you have installed Poedit, you can open it and select `File > New Catalog from POT file`. Then select the .pot file from the theme you wish to translate which you can find in the `/lang/` folder of theme.

    Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example `es_ES.po`). Normally Poedit automatically creates the .mo file and saves it, too.

    The last step you have to do is to upload your created language files to the language folder of your theme using FTP.

    ------------------------------

    Child Theme
    ===========

    Bigboom is fully child theme compatible. We have attached a basic child theme to the download package which contains the minimum of required files. If you are planing any code customizations we highly recommend to do this inside the child theme! Learn more about child themes [here](http://codex.wordpress.org/Child_Themes)

    Bigboom provides some hooks to help child theme customizes code easily. Learn more about hooks here : [WordPress Hooks](http://codex.wordpress.org/Plugin_API/Hooks)

    **Actions**

    1. `bigboom_before_header`: Display something before site header. It is used to display top bar and promotion.
    2. `bigboom_after_header`: Display something bellow site header.
    3. `bigboom_before_footer`: Display something before site footer. It is used to display footer Ads.
    4. `bigboom_after_footer`: display something after site footer.

    ------------------------------

    FAQs
    ====

    1. **How to change the default logo to other?**

    	Go to `Appearance > Theme Options > Header`, the option for change logo is there.

    2. **How to change the color of theme?**

    	Go to `Appearance > Theme Options > Style`. There are options to pick color form pre-defined colors or pick your favorite color.

    3. **Does Bigboom theme support child theme?**

    	Yes, it does. Please see details in above section.

    4. **How to enable instance seach (live ajax search) for _Product Search_ widget?**

    	To to config the _TA - Product Search_ widget and select the checkbox _Instance search_.

    5. **How to make _Product Categories_ on the homepage have the same position as the demo site?**

    	Go to edit the column which contains _WP Custom Menu_ element, then click to _Design_ tab and set the top margin to `-60px`.

    -------------------------

    Need Helps
    =========

    If you need help, please do not hesitate to contact us! To grant best support we set up a support forum at [http://themealien.com/support](http://themealien.com/support). Channeling all requests at one place keeps and makes it simple, easier and even more effective for every customers to get quick help. All issues, requests and questions can be discussed and answered at one place.

    Please note, you will only get access to our forums with a valid purchase key!