dhaka Theme Documentation

Introduction

This page content shows how to create a nice website with the Dhaka theme. Dhaka 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 Dhaka 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/dhaka/

After downloading the Dhaka theme you should have a dhaka.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 dhaka.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 Dhaka 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, banner 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.

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:

Dhaka 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:

Dhaka 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:

Dhaka Page Builder Widgets:

We’ve added some new options in Dhaka 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 Dhaka Widgets from the list and you can see the theme widgets on right side panel. These widgets are described below.

Dhaka Editor:

The Dhaka Editor widget is for creating an area of a combination of heading, text, icon, button etc. The options for Dhaka Editor 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.

Dhaka Fact:

The Dhaka Fact widget is for showing some content boxes with titles. You can add multiple items. The options for Dhaka Fact 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.

Dhaka Newsletter:

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

  1. Text Alignment: Controls the alignment of the title and button for the subscription area.
  2. Heading: The heading of the subscription area.
  3. Paragraph: For showing some text below the heading. Describe here why the visitors are subscribing.
  4. Action URL: The url that you get from your mailchimp account.

Dhaka Portfolio:

The Dhaka Portfolio widget is for showing your portfolios. The options for Dhaka Portfolio are:

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

Dhaka Testimonial:

The Dhaka Testimonial widget is for showing your testimonials slider. The options for Dhaka Testimonial 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.

Dhaka Address:

The Dhaka Address widget is for showing your address. The options for Dhaka Address are:

  1. Text Alignment: Controls the alignment of the title for the address area.
  2. Title: The title of the address area.
  3. Sub Title: The subtitle of the address area.
  4. Enter Contact Details: The options for each address are:
    1. Select Icon: An icon for the address.
    2. Icon Font Size: Controls the size of the icon for the address.
    3. Icon Color: Controls the color of the icon.
    4. Enter Title like Phone Number / Address / E-Mail: Title for address subitems.
    5. Enter Details for Above Fields: this is the address subitem.

Dhaka Call To Action:

The Dhaka Call To Action widget is for showing a special button. The options for Dhaka Call To Action are:

  1. Text Alignment: Controls the alignment of the title for the call to action area.
  2. Title: The title of the call to action area.
  3. Subtitle: The subtitle of the call to action area..
  4. Button text: This is the text for the special button.
  5. Destination URL: The link of the button, opens when you click on the button.
  6. Icon: This option is for adding an icon inside the button.
  7. Design and layout: Options for designing and styling the button.
  8. Other attributes and SEO: Some additional options for the button.

Dhaka Camera Slider:

The Dhaka Camera Slider 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. 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.

Dhaka Team:

The Dhaka Team widget is for representing your team. The options for Dhaka Team are:

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

Dhaka Title:

The Dhaka Title widget is for showing a detailed title area. The options for Dhaka Title are:

  1. Text Alignment: Controls the alignment of the title.
  2. Title: The title itself.
  3. Secondary Title: A secondary title for showing below the main title.
  4. Sub Title: A subtitle for showing below the main title and secondary title.

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:

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

  1. Layout Setting: This controls the page content’s maximum width thus site width.
  2. Top Margin: This controls the space between header and page content area.
  3. Bottom Margin: This controls the space between footer area and page content area.

Header:

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

  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. Favicon: Favicon upload option. The favicon is used as a browser and app icon for your site.

Colors:

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

GENERAL COLOR:

  1. Background Color: Controls the background color of your site.
  2. Body Text Color: Controls the color of your texts and paragraphs.
  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.
  5. Heading Color: Controls the color of Site Title and Tagline when no logo is uploaded.

BUTTON COLOR:

  1. Default Text Color: Controls the bootstrap default button text color.
  2. Default BG Color: Controls the bootstrap default button background color.
  3. Default Border Color: Controls the bootstrap default button border color.
  4. Default Hover Text Color: Controls the bootstrap default button text color when you hover on it.
  5. Default Hover BG Color: Controls the bootstrap default button background color when you hover on it.
  6. Default Hover Border Color: Controls the bootstrap default button border color when you hover on it.
  7. Primary Text Color: Controls the bootstrap primary button text color.
  8. Primary BG Color: Controls the bootstrap primary button background color.
  9. Primary Border Color: Controls the bootstrap primary button border color.
  10. Primary Hover Text Color: Controls the bootstrap primary button text color when you hover on it.
  11. Primary Hover BG Color: Controls the bootstrap primary button background color when you hover on it.
  12. Primary Hover Border Color: Controls the bootstrap primary button border color when you hover on it.
  13. Success Text Color: Controls the bootstrap success button text color.
  14. Success BG Color: Controls the bootstrap success button background color.
  15. Success Border Color: Controls the bootstrap success button border color.
  16. Success Hover Text Color: Controls the bootstrap success button text color when you hover on it.
  17. Success Hover BG Color: Controls the bootstrap success button background color when you hover on it.
  18. Success Hover Border Color: Controls the bootstrap success button border color when you hover on it.

Header Image:

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

  1. Current Header: Controls the header banner image shown at the very top of your site ( above the header logo and menu area ).

Typography:

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

You can use all the google fonts. Go to google fonts and choose your font family.

The options for typography settings are:

BODY FONTS:

  1. Font Name: Name of your chosen font from google fonts for using as body fonts.
  2. Font Family: Family identity of your chosen font from google fonts for using as body fonts.

HEADING FONTS:

  1. Font Name: Name of your chosen font from google fonts for headings like h1, h2, h3 etc.
  2. Font Family: Family identity of your chosen font from google fonts for headings like h1, h2, h3 etc.

Social Media:

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

If you select the Enable Social Media checkbox, the social media link icons like facebook, twitter etc will appear on the header.

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.

Background Image:

Click on Background Image from the wordpress customizer to open background image settings. The options for background image settings are:

  1. Background Image: This controls the background image of your site body.
  2. Background Repeat: Controls the repetition of the background image.
  3. Background Position: Controls the position of the background image.
  4. Background Attachment: If the fixed option is selected, the background image will be fixed positioned when you scroll a page.

Blog:

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

  1. Excerpt length: Controls the length ( word ) of your post excerpts.

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.

Widgets:

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

  1. Sidebar: The sidebar widget area.
  2. Footer 1: The widget area for showing on footer left column.
  3. Footer 2: The widget area for showing on footer center column.
  4. 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.

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.