close

 

Getting started

This is the Zakra theme instruction page. We have tried our best to keep it as simple as possible. If you think it can be made even simpler, let us know. We will be glad to change it. Let’s start! On the left side, you can see the table of contents of this documentation. Jump to the section you want, or read it all through – your choice. Let’s move on!

Installation

Installing your theme is pretty easy! After downloading, you should have a zakramo.zip file. This is a compressed file containing all of the reqdired templates and images required for the theme to function properly.

Upload Theme

  1. Go to Appearance > Themes in the WordPress Dashboard
  2. Click on the Add New button
  3. Click on the Upload link
  4. Select the zakra.zip file
  5. Click on the Install Now button

Activate the theme

Go to Appearance > Themes in the WordPress Dashboard.
Now, hover over the Zakra theme thumbnail and press the Activate button

Additional information: WordPress Codex – Using Themes

Custom Menu

By default, the menus will fallback to Pages. That means just after activation of the theme, you will see all the pages as menus. If you want selective menus with the combination of links, pages, categories, then the custom menu is what you should be looking for.

Set up a Custom Menu

  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 Create Menu button
  4. Now, choose the pages, categories, custom links from the left side of your screen by selecting the checkbox and click on Add Menu
  5. Under the Menu Settings, located at the bottom of your screen, select the Display location (i.e., Primary, Header Top or both ) option and click on Add Menu
  6. Click Save Menu after adding the required pages, categories & custom links in the menu
Additional information: Have a look here if you are still confused WordPress Custom Menu

Site Identity

This theme supports the default Site Identity section provided by the WordPress and we have integrated some options in this section of the theme.

Site Identity

Logo, Site Title, Tagline & Site Icon can be upload and changed to best suit your site.

  1. Go to Appearance > Customize >Site Identity section
  2. Now, upload the required Logo for your site
  3. Insert the title and tagline as required in the site
  4. Click on the Publish button to save the changes made on the site

It is shown in the image below:

Modular instruction header logo

To show site title & Tagline, set the Display Site Title and Tagline as checked and uncheck to hide.

Header Image

This theme supports the Header Image provided by the WordPress.

Header Image

  1. Go to Appearance > Customize >Header Image section
  2. Click on Add new image to upload the required image for your header
  3. Click on the Publish button to save the changes made on the site

You can upload an image of your choice to display in the header as below:

Modular header media

Background Image

This theme supports the background image option. For choosing background color:-

Background Image

  1. Go to Appearance > Customize > Background Image section.
  2. Now, choose the required background image for your site
  3. After you have chosen the required background image for your site, you can click on the Publish button to save the changes made on the site.

Theme Options

This theme has different options available for customization. All of the Theme Options are available in the Theme Options section. Below are the options available for customization of the theme:-

Header

All of the Header Options are available in Appearance > Customize > Theme Options > Header. Different options for Header are Header Top Bar & Header Main Area

Header Top Bar

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Header > Header Top Bar section.
  2. Switch on the Header Top Bar to show the header top bar options
  3. From the Left content options, select one among the Text/HTML, Menu and Widget
  4. If you choose Text/HTML in Left content options, insert the content in the Text editor below the Left content
  5. If you choose Menu in Left content options, select the menu from the available menus under Select a Menu for Left Content below the Left content
  6. If you choose Widget in Left content options, you need to insert the widget by going to Appearance > Customize > Widgets > Header Top Bar Left sidebar/Header Top Bar Right sidebar and insert the widget of your choice
  7. Choose the color from the Background Color option or image from the Background Image option according to your need
  8. After you have inserted the content, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Header Background Color is changed and shown in the image below:

added-social-icons

Header Main Area

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Header > Header Main Area section.
  2. Choose the Style from available options
  3. Enable the Search icon to show it beside the menu
  4. Slide the slider under the Border Bottom options for changing the size of the border under header main area
  5. Choose the color from the Border Bottom color option to change the border color
  6. Choose the color from the Background color option to change the background color of the header
  7. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Menu

All of the Menu Options are available in Appearance > Customize > Theme Options > Menu. Different options for Menu are Primary Menu & Mobile Menu

Primary Menu

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Menu > Primary Menu section.
  2. Switch off the Disable Primary Menu option to show the header top bar options
  3. Choose the color from the Menu Item Color option to change the color of the menu
  4. Choose the color from the Menu Item Hover Color option to change the color of the menu while hovering the mouse over it
  5. Choose the color from the Menu Item Active Color option to change the color of the selected menu
  6. Select the border under the Active Menu Item Style options for showing the border around the active menu
  7. Slide the slider under the Border Bottom options for changing the size of the border under the primary menu
  8. Choose the color from the Border Bottom color option to change the border color below the menu
  9. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Mobile Menu

    1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Menu > Mobile Menu section.

—-

  1. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

General

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > General section.
  2. Choose the style from the Container Style option to change the style of the container
  3. Slide the slider under the Container Width options for changing the width of the container
  4. Slide the slider under the Content Width options for changing the width of the content
  5. Slide the slider under the Sidebar Width options for changing the width of the sidebar
  6. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Post/Page/Blog

All of the Post/Page/Blog Options are available in Appearance > Customize > Theme Options > Post/Page/Blog. Different options for Post/Page/Blog are General, Blog/Archive & Single Post.

General

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Post/Page/Blog > General section.
  2. In the Page Title option, choose the page title to show either in Page Header or Content Area
  3. In the Markup option, select the heading which contains the Page Title
  4. Choose the color from the Text Color option to change the color of the Page Title
  5. Slide the slider under the Font size option for changing the size of the Page Title in the container
  6. Choose the alignment of the Page Title and Breadcrumb under the Alignment option from the available alignments
  7. Insert the padding value in the box under the Padding option to increase or decrease the padding between the Page Title and its border
  8. Choose the background color under Background Color option to change the background color of the Page Title
  9. If you want to use an image instead of color, choose the background image under Background Image option to change the background image of the Page Title
  10. Switch on the Enable Breadcrumb option to show the breadcrumb in the page header
  11. Slide the slider under the Font size option for changing the size of the Breadcrumb in the page header
  12. Choose the color from the Text Color option to change the color of the Breadcrumb
  13. Choose the color from the Separator Color option to change the color of the selector in the Breadcrumb
  14. Choose the color from the Link Color option to change the color of the link in the Breadcrumb
  15. Choose the color from the Link Hover Color option to change the color of the link on hover in the Breadcrumb
  16. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Blog/Archive

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Post/Page/Blog > Blog/Archive section.
  2. Drap and drop the items in the Post Content Order option to give priority for showing items on the top or bottom
  3. Drap and drop the items in the Meta Tags Order option to give priority for showing items on the top or bottom
  4. Choose the Excerpt or Content under the Post Content option to show the excerpt of the post/page or full content
  5. Switch on the Enable Read More option to show the read more link when the Excerpt option is selected
  6. Choose the style under the Read More Style option to show the read more link either in the left or right side of the content
  7. Click on the Publish button to save the changes made on the site.

Additional information: Clicking on eye icon will hide the content in the display window.

Single Post

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Post/Page/Blog > Single Post section.
  2. Drap and drop the content items in the Single Post Content Order option to give priority for showing items on the top or bottom
  3. Drap and drop the meta items in the Meta Tags Order option to give priority for showing items on the top or bottom
  4. Click on the Publish button to save the changes made on the site.

Additional information: Clicking on eye icon will hide the content in the display window.

Layout

All of the Layout Options are available in Appearance > Customize > Theme Options > Layout. Different options for Layout are Default, Archive/Blog, Single Post & Page.

General

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Layout > General section.
  2. In the Default option, choose the layout from the available layout options such as Boxed, Left sidebar, Right sidebar & Full width
  3. In the Blog/Archive option, choose the layout for blog or archive from the available layout options such as Boxed, Left sidebar, Right sidebar & Full width
  4. In the Single Post option, choose the layout for the single post from the available layout options such as Boxed, Left sidebar, Right sidebar & Full width
  5. In the Page option, choose the layout for pages from the available layout options such as Boxed, Left sidebar, Right sidebar & Full width
  6. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Styling

All of the Styling Options are available in Appearance > Customize > Theme Options > Styling. Different options for Styling are Base Colors, Link Colors & Buttons.

Base Colors

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Layout > General > Base Colors section.
  2. Choose the color from the Primary Color option to change the color of the site
  3. Choose the color from the Text Color option to change the color of the text on the site
  4. Choose the color from the Border Color option to change the color of the border on the site
  5. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Link Colors

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Layout > General > Link Colors section.
  2. Choose the color from the Link Color option to change the color of the link on the site
  3. Choose the color from the Link Hover Color option to change the color of the link on hover on the site
  4. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Button

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Layout > General > Button section.
  2. Choose the color from the Text Color option to change the color of the button on the site
  3. Choose the color from the Text Hover Color option to change the color of the button text on hover on the site
  4. Choose the color from the Background Color option to change the color of the button background on the site
  5. Choose the color from the Background Hover Color option to change the color of the button background on hover on the site
  6. Slide the slider under the Roundness option for changing the edge of the button on the site
  7. Insert the padding value in the box under the Padding option to increase or decrease the padding in the button
  8. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Typography

All of the Typography Options are available in Appearance > Customize > Theme Options > Typography. Different options for Body & Heading are available under Typography.

Base Typography

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Typography > Base Typography section.
  2. Under the Body option, choose the customization for body fonts such as font family, variant, font size and Line Height
  3. Under the Heading option, choose the customization for heading fonts such as font family, variant, font size and Line Height
  4. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Footer

All of the Footer Options are available in Appearance > Customize > Theme Options > Footer. Different options for Footer are Footer Widgets, Footer Bottom Bar & Scroll To Top.

Footer Widgets

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Footer > Footer Widgets section.
  2. Switch on the Enable Footer Widgets to show footer widget in the footer
  3. Under the Footer Widgets option, choose the Style such as one column, two column, three column or four column for footer widgets
  4. Under the Footer Widgets option, choose the Background Color/Background Image for footer widgets
  5. Slide the slider under the Border Top option for changing the size of the border above the Footer widget
  6. Under the Footer Widgets option, choose the Border Top Color for border above footer widgets
  7. Switch on the Hide Widgets Title to hide the title in the footer widget
  8. Choose the color from the Widget Title Color option to change the color of the title in the footer widget
  9. Choose the color from the Text Color option to change the color of the text in the footer widget
  10. Choose the color from the Link Color option to change the color of the link in the footer widget
  11. Choose the color from the Link Hover Color option to change the color of the link on hover in the footer widget
  12. Slide the slider under the List Item Border Bottom option for changing the size of the border under the item in the Footer widget
  13. Choose the color from the List Item Border Bottom Color option to change the color of the border under the item in the footer widget
  14. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Footer Bottom Bar

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Footer > Footer Bottom Bar section.
  2. Under the Footer Bottom Bar option, choose the Style to show content at the side or at the center
  3. Under the Section Two Content option, choose whether to display nothing or the menu in the footer bottom bar
  4. If you choose to display menu, under the Menu option, select the menu to display in the footer bottom bar
  5. Choose the color from the Text Color option to change the color of the text in the footer bottom bar
  6. Choose the color from the Link Color option to change the color of the link in the footer bottom bar
  7. Choose the color from the LInk Hover Color option to change the color of the link on hover in the footer bottom bar
  8. Slide the slider under the Border Top option for changing the size of the border above the Footer bottom bar
  9. Choose the color from the Border Top Color option to change the color of the border above the footer bottom bar
  10. Under the Footer Widgets option, choose the Background Color/Background Image for footer bottom bar
  11. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Scroll to Top

  1. From your WordPress Dashboard, go to Appearance > Customize > Theme Options > Footer > Scroll to Top section.
  2. Switch on the Enable Scroll to Top option to show the Scroll to Top icon in the footer
  3. Choose the color from the Color option to change the arrow icon color of the scroll to top in the footer
  4. Choose the color from the Hover Color option to change the arrow icon color on hover in the scroll to top
  5. Choose the color from the Background Color option to change the background color of the arrow icon in the scroll to top
  6. Choose the color from the Background Hover Color option to change the background color of the arrow icon on hover in the scroll to top
  7. After you have chosen the required option, you can now click on the Publish button to save the changes on your site.

It is shown in the image below:

added-social-icons

Page Settings

This theme has different options available for Page customization. All of the Page Settings Options are available in the Page Editor section. The options available for customization of the Page are:- General, Header, Primary Menu & Page Header

General

  1. From your WordPress Dashboard, go to Pages section.
  2. Now, choose the required Page you want to customize
  3. Below the editor, go to the Layout Settings option
  4. Under the Layout option, select the layout from the available layouts for pages such as right sidebar, left sidebar, boxed layout and full width content
  5. Under the Remove content margin option, check the checkbox to remove the content margin
  6. Under the Sidebar option, choose which sidebar content to show if the above selected layout contains the sidebar
  7. After you have chosen the required option, you can click on the Publish button to save the changes made on the site.

Header

  1. From your WordPress Dashboard, go to Pages section.
  2. Now, choose the required Page you want to customize
  3. Below the editor, go to the Page Settings option
  4. Under the Enable Transparent Option, check the checkbox for making the Header transparent
  5. Under the Logo option, click on upload logo to show on the logo on the page
  6. Under the Style option, choose the style for the Header
  7. After you have chosen the required option, you can click on the Publish button to save the changes made on the site.

Primary Menu

  1. From your WordPress Dashboard, go to Pages section.
  2. Now, choose the required Page you want to customize
  3. Below the editor, go to the Page Settings option
  4. Under the Menu Item Color option, select the color for the menu
  5. Under the Menu Item Hover Color option, select the color for the menu to show on hover
  6. Under the Menu Item Active Color option, select the color for the active menu item
  7. Under the Active Menu Item Style option, select whether to show the border in left, right or bottom of the active menu item or not to show the border
  8. After you have chosen the required option, you can click on the Publish button to save the changes made on the site.

Page Header

  1. From your WordPress Dashboard, go to Pages section.
  2. Now, choose the required Page you want to customize
  3. Below the editor, go to the Page Settings option
  4. Under the Page Header option, check the checkbox to enable the Page Header
  5. After you have chosen the required option, you can click on the Publish button to save the changes made on the site.
Zakra