boka Theme Documentation

Introduction

This page content shows how to create a nice website with the Boka theme. Boka is a responsive multipurpose wordpress( content management system ) theme. To use this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress.org

Before you get started, please be sure to always search our documentation and tutorials. On the left side you can find all the details about how you can create your website with Boka theme. Follow the instructions step by step and create your complete own site.

Installation

Installing your theme is pretty easy! Download the theme from: https://www.themetim.com/wordpress-themes/boka/

After downloading the Boka theme you should have a boka.zip file. Now you have to follow the following three steps to complete full installation.

Upload the theme:

  1. Login to your WordPress Dashboard
  2. Go to ( Appearance > Themes )
  3. Click on the Add New button
  4. Click on the Upload Theme button
  5. Select the boka.zip file
  6. Click on the Install Now button

It will take a moment to upload your theme and install.

Now your theme is installed and ready to use but not activated yet. To activate the theme instantly, click on the Activate link that appears after installation finishes. Or if you want to activate the theme later, follow the instructions below.

Activate the theme:

  1. Go to ( Appearance > Themes ) in the WordPress Dashboard.
  2. Hover over the Boka theme thumbnail and press the Activate button.

Install required plugins:

  1. Go to ( Appearance > Install Plugins ) in the WordPress Dashboard.
  2. The plugin installation page opens, Click on the Insall links for each plugin.
  3. Click on the Activate links for each plugin.

Site Header:

Setting up your site header area is very simple. This is the top common part of every page. Header includes logo, menu, search etc. Follow the instructions below for these settings.

Upload your logo:

  1. Go to ( Appearance > Customize ) in the WordPress Dashboard.
  2. Click on Header from the list.
  3. Under LOGO settings click on the Select Logo button.
  4. Then upload your logo image with the wordpress media uploader then click on select button.
  5. You have to crop your logo image to fit on header, adjust the crop select box and click on Crop Image button.
  6. You can see your logo immediately in the preview panel. Click on Save & Publish button and you are done.

Upload your Favicon:

  1. Go to ( Appearance > Customize ) in the WordPress Dashboard.
  2. Click on Header from the list.
  3. Under FAVICON settings click on the Select Image button.
  4. Then upload your favicon image with the wordpress media uploader then click on select button.
  5. You have to crop your favicon image to give it a square shape, adjust the crop select box and click on Crop Image button.
  6. Click on Save & Publish button and you are done.

Navigation Menu:

By default the page titles are shown on the menu when you setup the theme. You can customize this menu with combination of pages, categories, links. Follow the instructions below to control you menu items:

  1. Go to ( Appearance > Menus ) in the WordPress Dashboard.
  2. Click on Create a new menu link
  3. Give a name to your menu in Menu Name and click on Create Menu button
  4. Now choose the pages, categories, custom links from the left side by selecting the checkbox and click on Add to Menu button for each type items.
  5. Under Menu Settings section, select the Primary checkbox for Theme locations.
  6. Finally click on the Save Menu button and your new desired menu is all set.

Social Media Icons:

This is the social media icons ( with links to your social media pages) shown on right side of your site header.

Follow the instructions below to add the header banner image:

  1. Go to ( Appearance > Customize ) in the WordPress Dashboard.
  2. Click on Social Media from the list.
  3. Select the Enable Social Media checkbox.
  4. Input your social media links for facebook, twitter etc you want.
  5. You can see the icons immediately in the preview panel. Click on Save & Publish button and you are done.

Header Image:

This is a banner image shown at the very top of your site ( above the header logo and menu area )

Follow the instructions below to add the header banner image:

  1. Go to ( Appearance > Customize ) in the WordPress Dashboard.
  2. Click on Header Image from the list.
  3. Click on the Add new image button.
  4. Then upload your banner image with the wordpress media uploader then click on Select and Crop button.
  5. Adjust the crop select box and click on Crop Image button.
  6. You can see your header banner image immediately in the preview panel. Click on Save & Publish button and you are done.

Header Search Bar:

This is a quick search option at header. The search bar shows at the right side of the header.

Follow the instructions below to enable or disable the header search bar:

  1. Go to ( Appearance > Customize ) in the WordPress Dashboard.
  2. Click on Header from the list.
  3. Under HEADER TOP settings you can enable or disable the Enable Search.
  4. You can see your header search bar immediately in the preview panel. Click on Save & Publish button and you are done.

Setting A Static Front Page:

By default your latest posts are shown on the front page. Setting a static front page allows you to add static content on your homepage. Follow the instructions below to setup a static front page for homepage:

  1. Go to ( Pages > Add New ) in the WordPress Dashboard.
  2. Input your content and click on the Publish button.
  3. Go to ( Settings > Reading )
  4. Select the option A static page (select below)
  5. Click on the Front page: dropdown and select your the new page you just created.
  6. Scroll down and click on the Save Changes button

Page Templates:

Boka theme includes four Page Templates that you can choose from. Each Page Template caters to user’s specific needs. For example, if you want a page that is full width of the browser window, then you would select the Full Width page template.

The three page templates are:

  • Default: This page template has the standard width that a bootstrap container has, no sidebar.
  • Full Width: This is the page template that is full width of the browser window, no sidebar.
  • Left Sidebar: This page template has the sidebar on left side.
  • Right Sidebar: This page template has the sidebar on right side.

Page Builder:

Boka theme comes with the most popular site origin page builder. With this drag and drop interface you can create your page layout easily so you don’t have to write html/css/js codes for your pages. Make sure the site origin page builder plugin is installed and activated which comes with the theme.

When you are creating or editing a page or post you’ll a new option Page Builder in your editor tab. Click on that to switch to the page builder interface. Check site origin page builder documentation to learn how to work with this page builder:

Boka Page Builder Widgets:

We’ve added some new options in Boka theme as part of our integration with the Page Builder plugin. To use these additional builder options, click on Add Widget button from the toolbar. On the left side list you’ll ses the categories of widgets. Click on Boka Widgets from the list and you can see the theme widgets on right side panel. These widgets are described below.

Boka Brand Widget:

The Boka Brand Widget is for showing other brands that using your service or for any other purpose. The options for Boka Brand Widget are:

  1. Text Alignment: Controls the alignment of the title for the brand area.
  2. Heading: The title of the brand area.
  3. Brand: The brand items. The options for brand items are:
    1. Image: The image for the logo or and image of the brand.
    2. Button URL: Link to the brand website.

Boka Camera Slider Widget:

The Boka Camera Slider Widget widget is for creating a slider with some image and texts. The options for the slider items are:

  1. Text Alignment: Controls the alignment of the title for the slide.
  2. Text Position: Controls the position of the title.
  3. Title: The title of the slide.
  4. Title Color: Controls the color of the title.
  5. Sub Title: The subtitle of the slide.
  6. Sub Title Color: Controls the color of the subtitle.
  7. Slide Image: This option is for adding an image to the slide.
  8. Editor: This option is for adding some text to the slide.
  9. Button Title: This option is for adding a button to the slide.
  10. Button Style: Controls the style of the button.
  11. Button URL: The link of the button, opens when you click on the button.

Boka Editor Widget:

The Boka Editor Widget is for creating an area of a combination of heading, text, icon, button etc. The options for Boka Editor Widget are:

  1. Text Alignment: Controls the alignment of text that you input in the editor.
  2. Select an icon: This option is for adding an icon in the area.
  3. Icon Size: Controls the size of the icon you select.
  4. Icon Color: Controls the color of the icon.
  5. Heading: Input your heading of the area here.
  6. Sub Heading: You can also add a subheading.
  7. Editor: The content for the widget.
  8. Button Title: This option is for adding a button in the area you are creating.
  9. Button Style: Controls the style of your button.
  10. Button URL: Controls the link of the button.

Boka Fact Widget:

The Boka Fact Widget is for showing some content boxes with titles. You can add multiple items. The options for Boka Fact Widget are:

  1. Title: The title of the content boxes area.
  2. Text Align: Controls the alignment of the title.
  3. Items: The items are the content boxes. The options for each items are:
    1. Title: The title of the item shows above the box.
    2. Description: The description of the item shows inside the box.

Boka Newsletter Widget:

The Boka Newsletter Widget is for showing a subscribe for newsletter box inside your page content. The options for Boka Newsletter Widget are:

  1. Heading: The heading of the subscription area.
  2. Action URL: The url that you get from your mailchimp account.

Boka Portfolio Widget:

The Boka Portfolio Widget is for showing your portfolios. The options for Boka Portfolio Widget are:

  1. Title: The title of the portfolio area.
  2. Text Alignment: Controls the alignment of the title.
  3. Portfolio: The portfolio items. The options for items are:
    1. Image: An image for the portfolio item.
    2. Tile: Button text for the portfolio item.
    3. Button URL: The link of the portfolio item. It opens when you click on the button.
  4. Menus per row: Controls how many portfolio items to show in one row.

boka Pricing Table Widget:

The boka Pricing Table Widget is for showing a packages and pricing area. The options for boka Pricing Table Widget are:

  1. Text Alignment: Controls the alignment of the Heading.
  2. Heading: The title of the pricing area.
  3. Pricing: The options for each packages are:
    1. Select an icon: An icon for the package.
    2. Icon Size: Controls the size of the icon.
    3. Icon Color: Controls the color of the icon.
    4. Title: The name/title of the package.
    5. Price: Price of the package.
    6. Editor: Text content of the package in details.
    7. Button Title: Button text for the package.
    8. Button Style: Controls the style of the button.
    9. Button URL: Link to the full package details page.
  4. Per Row: Controls how many members to show in one row.

Boka Service Widget:

The Boka Service Widget is for creating an area of a service. The options for Boka Service Widget are:

  1. Text Alignment: Controls the alignment of the service area contents.
  2. Select an icon: This option is for adding an icon in the area.
  3. Icon Size: Controls the size of the icon you select.
  4. Icon Color: Controls the color of the icon.
  5. Heading: Input your heading of the service.
  6. Editor: The content for the service.
  7. URL: Link to the service page.

boka Social Media Widget:

The boka Social Media Widget is for showing the social media icons anywhere inside your page or post. You can also add a heading title for the social media icons section.

Boka Team Widget:

The Boka Team Widget is for representing your team. The options for Boka Team Widget are:

  1. Title: The title of the team area.
  2. Sub Title: The subtitle of the team area.
  3. Team: The options for team members are:
    1. Title: Name of the member.
    2. Text: Bio of the member.
    3. Image: Photo of the member.
    4. Facebook URL: Facebook profile link of the member.
    5. Linkedin URL: Linkedin account link of the member.
    6. Twitter URL: Twitter account link of the member.
  4. Per Row: Controls how many members to show in one row.

Boka Testimonial Widget:

The Boka Testimonial Widget is for showing your testimonials slider. The options for Boka Testimonial Widget are:

  1. Text Alignment: Controls the alignment of the title for the testimonial area.
  2. Title: The title of the testimonial area.
  3. Testimonial: The testimonial items. The options for testimonial items are:
    1. Name: The name of the testimonial item.
    2. Description: The text for the testimonial item.
    3. Image: The image for the testimonial item.

Theme Options:

Settings related to the theme are available through the wordpress customizer. Go to ( Appearance > Customize ) in the WordPress Dashboard for all the theme settings. Click on the specific titles to open their settings.

The preview panel on right side shows the changes immediately if you make any change. These settings are described below.

General Settings:

Click on General Settings from the wordpress customizer to open General Settings. The options for General Settings are:

  1. Site Layout: Select your site layout.
    1. Wide: A modern full width style.
    2. Boxed: Centered Boxed style site layout.
  2. Body Background Image: A background image for the site shown on every page. Useful for Boxed Layout.

Header:

Click on Header from the wordpress customizer to open header settings. The options for header settings are:

Header Content:

  1. Logo: The logo upload option for your site.
  2. Site Title and Tagline: If no logo is uploaded then the site title and tagline are shown at the place of logo.
  3. Show/Hide Search: Enables or disables the search icon on the header.
  4. Favicon: Favicon upload option. The favicon is used as a browser and app icon for your site.

Header Design Options:

  1. Header Background Color: Controls the background color of the header area.
  2. Header Border Color: Controls the header bottom border color.
  3. Header Border style: Controls the header bottom border style.
  4. Header Border Size: Controls the header bottom border size.
  5. Header Padding Top: Padding above header content.
  6. Header Padding Bottom: Padding below header content.
  7. Site Title and Tagline Color: Controls the color of Site Title and Tagline.

Menu Design:

  1. Menu Layout: Controls the layout of the menu.
    1. default: The default style menu.
    2. collapsed: Collapsed menu items. opens on click.
  2. Menu Item Font Color: Controls the font color of menu items.
  3. Menu Item Font Size: Controls the font size of menu items.
  4. Menu Item Font Weight: Controls font weight of menu items.
  5. Show/Hide Dropdown Indicator: A dropdown indicator for submenu menu items.
  6. Dropdown Area Background Color: Controls the background color of dropdown menu.

Top Bar:

  1. Show/Hide Top Bar: Enables or disable a Top Bar area above header.
  2. Top Bar Background Color: Controls the background color of the Top Bar.
  3. Show/Hide Social Icons in Top Bar: Enables or disables social media icons in top bar area.
  4. Top Bar Text: You can show text in the top bar with this.

Hero Area:

  1. Hero Area Background Color: Controls the background color of the area.
  2. Hero Area Heading: Heading text of hero area.
  3. Heading Font Color: Controls font color of the heading.
  4. Heading Font Size: Controls font size of the heading.
  5. Hero Area Paragraph: A paragraph for the hero area.
  6. Paragraph Font Color: Controls font color of the paragraph.
  7. Paragraph Font Size: Controls font size of the paragraph.
  8. Hero Area Button Text: A button for the hero area.
  9. Button URL: Controls the link of the button.
  10. Button Background Color: Controls background color of the button.
  11. Button Text Color: Controls font color of the button.
  12. Button Text Size: Controls font size of the button.

Typography:

Click on Typography from the wordpress customizer to open typography settings.

The options for typography settings are:

  1. Body Font: Controls typography of your body font and paragraph.
    1. Body Font Color: Controls the color of body font.
    2. Body Font Size: Controls the font size of body font.
    3. Body Font Name: Controls the font family name of body font.
    4. Body Font Family: Controls the font family of body font.
    5. Body Font Weight: Controls the font weight of body font.
  2. H1 Font: Controls the typography of H1 Heading.
    1. H1 Font Color: Controls the color of H1 Heading font.
    2. H1 Font Size: Controls the font size of H1 Heading font.
    3. H1 Font Name: Controls the font family name of H1 Heading font.
    4. H1 Font Family: Controls the font family of H1 Heading font.
    5. H1 Font Weight: Controls the font weight of H1 Heading font.
  3. H2 Font: Controls the typography of H2 Heading.
    1. H2 Font Color: Controls the color of H2 Heading font.
    2. H2 Font Size: Controls the font size of H2 Heading font.
    3. H2 Font Name: Controls the font family name of H2 Heading font.
    4. H2 Font Family: Controls the font family of H2 Heading font.
    5. H2 Font Weight: Controls the font weight of H2 Heading font.
  4. H3 Font: Controls the typography of H3 Heading.
    1. H3 Font Color: Controls the color of H3 Heading font.
    2. H3 Font Size: Controls the font size of H3 Heading font.
    3. H3 Font Name: Controls the font family name of H3 Heading font.
    4. H3 Font Family: Controls the font family of H3 Heading font.
    5. H3 Font Weight: Controls the font weight of H3 Heading font.
  5. H4 Font: Controls the typography of H4 Heading.
    1. H4 Font Color: Controls the color of H4 Heading font.
    2. H4 Font Size: Controls the font size of H4 Heading font.
    3. H4 Font Name: Controls the font family name of H4 Heading font.
    4. H4 Font Family: Controls the font family of H4 Heading font.
    5. H4 Font Weight: Controls the font weight of H4 Heading font.
  6. H5 Font: Controls the typography of H5 Heading.
    1. H5 Font Color: Controls the color of H5 Heading font.
    2. H5 Font Size: Controls the font size of H5 Heading font.
    3. H5 Font Name: Controls the font family name of H5 Heading font.
    4. H5 Font Family: Controls the font family of H5 Heading font.
    5. H5 Font Weight: Controls the font weight of H5 Heading font.
  7. H6 Font: Controls the typography of H6 Heading.
    1. H6 Font Color: Controls the color of H6 Heading font.
    2. H6 Font Size: Controls the font size of H6 Heading font.
    3. H6 Font Name: Controls the font family name of H6 Heading font.
    4. H6 Font Family: Controls the font family of H6 Heading font.
    5. H6 Font Weight: Controls the font weight of H6 Heading font.

Color:

Click on Color from the wordpress customizer to open Color settings. The options for Color settings are:

  1. Primary Color: Controls the primary color of the site.
  2. Site Background Color: Controls background color of the whole site.
  3. Link Color: Link color controls the color of all the links of your posts and pages.
  4. Link Hover Color: Controls the color of your links when you hover on it.

Social Media:

Click on Social Media from the wordpress customizer to open social media settings.

The options for social media settings are:

  1. Facebook: Controls the icon and link for your facebook page.
  2. Twitter: Controls the icon and link for your twitter account.
  3. Linkedin: Controls the icon and link for your linkedin account.
  4. Pinterest: Controls the icon and link for your pinterest account.
  5. Instagram: Controls the icon and link for your instagram account.
  6. Dribbble: Controls the icon and link for your facebook account.
  7. Plus Google: Controls the icon and link for your google plus page.
  8. YouTube: Controls the icon and link for your youtube channel.

Blog:

Click on Blog from the wordpress customizer to open blog settings. The options for blog settings are:

Post Meta:

  1. Show/Hide Blog Posts Meta: Controls the visibility of post meta options on the blog listing page.
  2. Show/Hide Single Posts Meta: Controls the visibility of post meta options on the single post page.

Post Excerpts:

  1. Show/Hide Post Excerpts: Controls the visibility of post excerpts on the blog listing page.
  2. Excerpt length: Controls the length( words ) of the post excerpts.

Featured Image:

  1. Show/Hide Blog Posts Featured Image: Controls the visibility of featured image on the blog listing page.
  2. Show/Hide Single Posts Featured Image: Controls the visibility of featured image on the single post page.

Footer:

Click on Footer from the wordpress customizer to open footer settings. The options for footer settings are:

Footer Content:

  1. Footer Column Settings: Controls the column settings of footer contents.
  2. Show/Hide Social Icons in Footer: Enables or disables social icons in footer area.
  3. Footer Copyright Text: Controls the footer copyright text.

Footer Design Options:

  1. Footer Background Color: Controls the background color of the footer area.
  2. Footer Border Color: Controls the footer top border color.
  3. Footer Border style: Controls the footer top border style.
  4. Footer Border Size: Controls the footer top border size.
  5. Footer Padding Top: Padding above footer content.
  6. Footer Padding Bottom: Padding below footer content.
  7. Footer Text Color: Controls the text color of footer.

Menus:

Click on Menus then Menu Locations from the wordpress customizer to open menu settings. The options for menu settings are:

  1. Primary: Sets the primary menu. Select the menu for primary menu area shown on header.
  2. Footer Menu: Controls the footer area menu.

Widgets:

Click on Widgets from the wordpress customizer to open widgets settings. The available widgets areas are:

  1. Footer 1: The widget area for showing on footer left column.
  2. Footer 2: The widget area for showing on footer center column.
  3. Footer 3: The widget area for showing on footer right column.

Static Front Page:

Click on Static Front Page from the wordpress customizer to set a static front page for homepage. The options for static front page settings are:

  1. Front page displays: If A static page option is selected, the options appears for the front page and posts page.
  2. Front page: Sets the homepage.
  3. Posts page: Sets the posts page.

Additional CSS:

Click on Additional CSS from the wordpress customizer to add some custom css code to your site.

Site Footer:

Footer is the common bottom area shown on every pages of your site. The footer content is controlled by widgets. There are three footer column widget areas. Follow the instructions below to setup your footer content:

Go to ( Appearance > Widgets ) in the WordPress Dashboard.
You see four widget areas ( Sidebar, Footer 1, Footer 2, Footer 3 )

  1. Footer 1: Your footer left column widget area.
  2. Footer 2: Your footer center column widget area.
  3. Footer 3: Your footer right column widget area.