Bostan

Retina Responsive Multi-Purpose Theme

• created: 24/06/2013
• latest update: 02/25/2016
• by: Ahmad Works
• email: support@ahmad.works

Thanks for purchasing Bostan theme! If you like the theme, we'll be very grateful if you rate us :) Click Here To Rate.

To install Bostan theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex

Uploading Theme

Extract the zipped package downloaded from ThemeForest to your computer, inside the package you will find Bostan.zip file. You can install the theme in two ways:

• via FTP : Extract Bostan.zip file and upload the extracted folder to /wp-content/themes/ folder on your server.
• via WordPress : Navigate to Appearance > Install Themes > Upload page. Select Bostan.zip file. Press the Install Now button to upload and install the theme.

Activating Theme

you have to activate it after uploading. go to Appearence > Themes page to activate the theme.

Automatic Update

We strongly recommend updating the theme regularly to ensure recieving new features and fixes, and the theme settings won't be overwritten, but any changes at theme files will be overwritten, so we recommend applying changes to a child theme.

To receive new updates for your theme, all you need to do is going to backup options in your Bostan Theme Options and fill your Themeforest username and API key, you can generate api from your theme forest [My settings] tab > [API KEYS] .

To import data it's now more simple than before, you can just go to Theme options > Backup Options > Import Demo Content , once you click it you should wait for some minutes depending on internet connection to get everything imported, but note that this step will override all your old content, so don't use this button on active live site.

General Settings

In Bostan > General tab you will find the main settings configure your for you theme

1. Change your logo

   From Logo url you can change your website logo, just paste the logo image url or upload new logo and insert it in the text form.
   
   Also you can upload logo for Retina screens, just upload the same logo bigger twice from the original.

2. Change your favicon

   From Favicon url you can change your website favicon, just paste the favicon url or upload new one and insert it in the text form. also you can upload icons for Apple iphone and ipad.

3. Change your default image

   The default Image is the image which appears ast he post thumbnail if the post has no featured image, and also apears on Facebook opengraph.

4. Header Phone Number: 
   Here you insert phone number to appear at topbar, leave empty to disable it.
    
5. Header Email Number:  
   Here you insert email to appear at topbar, leave empty to disable it.
    

6. copyright text:
   Change the copyright text which appears in the footer.

7. Header Custom Code:
   Code to be inserted before closing html tag </html> . could be used to insert google analytics code.

8. Footer Custom Code:
   Code to be inserted before closing body tag </body>.

9. Custom CSS:
   Code used to custom style the website.

Layout Settings:

You can set your general theme's layout through Appearance > Theme Options > Layout Settings.

1. Site Width:
   Here you can set site width to 1200px for screens bigger than 1200px wide.
2. Color Switcher:
   You can turn on/off color switcher, could be useful for you to test different colors for your site.
3. Boxed Layout:
   If you set boxed layout on, you can change background color from (Theme Options > Colors Settings > Body color), or background image from (Theme Options > Backgrounds Settings > Enable Site Custom Background, then choose image you like).
4. Sticky Header.
5. Disable Breadcrumb:
   Here you can disable or enable breadcrumb that shows you at which page you're now.
6. Logo Margin Top:
   The space between logo and top menu in px, add the number you want (for example 30).
7. Main Menu Margin Top:
   
   The space between main menu and top in px, add the number you want for example 22.
8. Portfolio Page URL:
   Link to the default portfolio page to use at Breadcumb.
9. Number of Posts in Portfolio Page:
   Default Number of posts to show on portfolio pages.
10. Blog Page URL:
    Link to the default blog page to use at Breadcumb.
11. Number of Posts in Blog Page:
    Default Number of posts to show on blog pages.

Posts Settings:

Here you can set settings for default posts.

1. Posts Layout:
   Here you can set the position of sidebar or disable it as a default for posts at the site.
2. Custom Sidebar:
   Here you can set sidebar to be displayed at posts pages.
3. Posts Page Title Holder.
   
4. Posts Custom page title background URL.
   
5. Posts Author Box.
   
6. Posts Share Icons.

Projects Settings:

Here you can set settings for default Projects.

1. Projects Layout:
   Here you can set the position of sidebar or disable it as a default for Projects at the site.
2. Projects Details:
   Show/Hide projects details.
3. Projects Social Share:
   Show/Hide projects social share.
4. Other Projects:
   Show/Hide other projects section.

Social Settings:

Via Social tab you configure your social settings.
You can insert all your social media links Facebook, Twitter, Google plus, Linkedin, Vimeo, VK, Youtube, Pinterest, Github, Instagram, 500px and Flickr,

Also you'll need Facebook API keys for social share, and Twitter APP Keys.

Fonts:

Here you can set font types for general site and titles.

Typography Settings:

Here you can set font size, line height, font weight and color for many elements of the site.

Translating:

Here you can set alternative words to be used on projects pages.

Backgrounds:

Here you can set different backgrouns of site elements.

Colors Settings:

In Bostan theme panel you can change your site colors just by picking the color you want, you can also change the whole site color by the first field [skin color].

Bostan Has 8 sidebars to insert your widgets

Blog Page sidebar

Category sidebar

Single blog post sidebar

Single page post sidebar

Footer Area One

Footer Area Two

Footer Area Three

Footer Area four

Go to Appearance and then click on Widgets and choose a sidebar expand it, drag and drop the widget you want to show in a sidebar area.

To create page using page builder you need first to create template. go to  Appearance > Page Builder. Then create new template and place the blocks you want into the template area, drag and drop them and go by your mouse to the edge to resize the block, after finishing template save it.

Then you need to create new page and assign the template to it, go to Pages > Add New Then click Add Template button, choose the template from template list, then change the page template from the right side to (page builder) and publish your page.

To set page as homepage.

From wordpress control panel, go to Settings > Reading. and change the option (front page display) to A static page, and choose your front page from pages list.

Visual Composer is another template builder that you can use at Bostan, but it's included as external plugin, you can install through (Appearance > Install Plugins).

How to update the plugin, it asks for purchase code?

No need to worry about plugin's notice to add purchase code to update, as Bostan has extended license of Visual Composer and updates are provided through theme updates.

First you'll need to deactivate the plugin temprorarily through (Apprerance > Plugins), and then update from (Appearance > Install plugins)

How to use Visual Composer?

You can use Visual Composer through clicking on Backend Editor button above page edit page, after you change page template to Page Builder if you want full width style or VC template if you want content width style.

Click Classic Editor to revert to wordpress text editor

For more information on using Visual Composer, also you'll find it included at theme's package at folder named (Extra).

Revolution Slider is slider used for creating beautiful advanced sliders, and is external plugin, included especially for Bostan users, can be installed through (Appearance > Install Plugins).

How to update the plugins? / There's a notice that tells me to add purchase code to install updates, where can I find it?

You can dismiss this notice and don't worry about license or purchase code, as Bostan have extended code for Revolution Slider, and its updates are included at Bostan updates, and can get them (after updating theme) through (Appearance > Install Plugins).

How to include slider at pages/posts?

You can add slider at page template, visual composer or shortcode, all you need is slider alias which you can get from (Slider Revolution > Slider Revolution) Hover Needed Slider and click arrow then choose Embed Slider.

A new window will appear with shortcode to include in posts and pages, you can get alias only to use at page builder/visual composer revolution slider element.

Create Blog Post

To add new blog post, add new post, fill title, (text) and set featured image to apear as the project thumbnail.
 

Under the text area choose the options for you post. select from banner (Video, Featured Image, Quotation) to specify post type and the banner appear above the post.

Create Pages

There're different types of pages at Bostan, which can be chosen through page template, are Blog, Page Builder, Portfolio, Portfolio 2 columns, and Portfolio 3 columns.

Customizing Pages/Posts

Each Page/Post can have different style from Page and Post Options under text area.

At Page Builder and Visual Composer you'll find several blocks, here we'll introduce some:

Service

Shortcode:

[service title="Responsive Design" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis." icon_class="icon-desktop" url="//ahmad.works/bostan"]

Element attributes:

title: Name of the service.

text: Service Description.

icon_class : name of fontello icon to use, you can get it from Fontello then mouse over icon to get its name.

url: if you want the service linkable assign a link to this attribute.

Projects Carousel

Shortcode:

[projects title="Projects" url="//ahmad.works/bostan" postnumber="12" max="4" cycle="2" tags_ids="project"]

Projects can be created and edited from dashboard sidebar (Portfolio > Add New).

You can set client name, and url for link of the project, and featured image for project thumbnail.

Element attributes:

title: Heading of the carousel.

description: description written under headeing.

url: link to portfolio page.

postnumber: total number of posts.

max: number of posts to show.

cycle: number of posts to switch while navigating.

tags_ids: show projects with tags, separated by comma ','

Team Carousel

Shortcode:

[teamblock title="Team" postnumber="12" max="6" cycle="2"]

Team members can be created and edited from dashboard sidebar (Team Members > Add New).

Bostan - Member Options under text area, you can set member info. and set member image from featured image.

Element attributes:

title: Heading of the carousel.

description: description written under headeing.

postnumber: total number of members.

max: number of members to show.

cycle: number of members to switch while navigating.

Testimonials Carousel

Shortcode:

[testimonials title="Testimonials" number="3"]

Testimonials can be created and edited from dashboard sidebar (Testimonials > Add New).

You can set testimonial info. from testimonial options under text area.

Element attributes:

title: Heading of the block.

number: number of testimonials to show.

Blog Posts List

Shortcode:

[bloglist title="Blog" url="//ahmad.works/bostan" postnumber="6" tags_ids="bostan,blog"]

Element attribute:

title: Heading of the block.

url: link to blog page.

postnumber: number of posts to show.

tags_ids: posts with tags to show, separated by comma ','

Clients Carousel

Shortcode:

[clients title="Clients" number="6"]

Clients can be created and edited from dashboard sidebar (Clients > Add New).

You can set link to the client from url.

Element attributes:

title: Heading of the block.

number: Number of clients to show.

Pricing Table

Shortcode:

[pricingblock title="Pricing Table" tableid="13012" columns="four"]

You'll need first to create Pricing Packages, which can be created and edited from dashboard sidebar (Pricing Packages > Add new).

Pricing Package page will include Package Price, Buy Now Link and Buy Now Title which are required, you can also add/remove features of the package.

You can set the package to recommended to be highlighted at show.

After creating pricing packages, you'll create Pricing Tables which group pricing packages, from dashboard sidebar (Pricing Tables > Add new).

Pricing Tables page contains pricing packages to choose from. after saving the pricing table go to (Pricing Tables > Pricing Tables) to get the pricing table id.

Element Attributes:

title: heading of the pricing table.

tableid: pricing table id which you can get from dashboard sidebar (Pricing Tables > Pricing Tables).

columns: number of columns of the table, recommend number of pricing packages included in the table for best show.

Google Maps

Shortcode:

[googlemap src="https://maps.google.com/maps/ms?msid=212261688122193312302.0004dca6a4049cd50ea59&msa=0&ll=30.606853,32.300105&spn=0.018007,0.033023" width="600" height="300"]

Element attributes:

src: url of the map, and you can get it from visiting google maps, then at the location you want to add click share, then embed share tab, you'll find something like:

< iframe height="480" src="https://www.google.com/maps/d/embed?mid=zvtZM8Q9iPdY.kxf9rc3q9boI" width="640">

You'll extract what's after src between quotes https://www.google.com/maps/d/embed?mid=zvtZM8Q9iPdY.kxf9rc3q9boI

width: width of map block.

height: height of map block.

Alerts

Shortcode:

[box type="warning"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut.[/box]

Element attributes:

type: type of the alert (download, warning, info, shadow and success).

Tabs

Shortcode:

Tabs consists of two shortcodes, tabs shortcode which contains all tabs, and tab shortcode for each tab content and title like the following:

[tabs title="Tabs" vertical="true"]
[tab title="Tab 1"]lorem porem[/tab]
[tab title="Tab 2"]lorem porem2[/tab]
[/tabs]

Element attributes:

For tabs shortcode:

title: heading of the tabs block.

vertical: choose vertical tabs (true) or horizontal (false).

For Tab shortcode:

title: title of the tab.

Progress Bars

Shortcode:

Progress Bars consists of 2 shortcodes, Progress Container shortcode which contains all the progress bars and specify their style, and Progress Bar shortcode.

[progresscon title="Progress Bars" type="striped"]
[progress title="Progress Bar 1" percent="50"]
[progress title="Progress Bar 2" percent="100"]
[/progresscon]

Element attributes:

For Progress Container shortcode:

title: heading of the progress bars block.

type: style of progress bars (basic, striped and animated).

For Progress Bar shortcode:

title: name of progress bar.

percent: percentage of progress bar.

Revolution Slider

Shortcode:

[revslider alias="home"]

Element attributes:

alias: alias of slider to use, to know how to get it go to Revolution Slider section.

Here in Bostan we provide Mega Menu that enables you to include any content at menus, you can add it through (Appearance > Menus) and checking Mega Menu checkbox.

Here's options of Bostan's Mega Menu:

Menu Title: check whether the menu item is linkable (like other menus) or just used as menu title.

Dropdown opens to: the direction at which menu is opened, for example if the menu item is latest, then choose right.

Width: width of the mega menu dropdown.

Text Block (Shortcodes allowed): Mega menu dropdown content, can include page builder template (i.e. [template id=""]) or shortcodes in general (i.e. [projects title="Projects" url="//ahmad.works/bostan" postnumber="12" max="4" cycle="2" tags_ids="project"]).