Bonno WP - Documentation

Version 1.0.10

Cross Browser, High Quality and Responsive Multipurpose HTML Template.

Thank you very much for purchasing our theme. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions.

This document covers the installation and use of Bonno WordPress theme. We encourage you to read this document thoroughly if you are having any difficulties.

If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.

Don’t forget to rate this theme, it helps us improve our products.

We invite you to view our portfolio.

Thanks so much!

Getting Started

To install this 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 - http://codex.wordpress.org/Installing_WordPress

Installation

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

  • FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server.
  • WordPress Upload: Navigate to Appearance > Add New Themes > Upload Theme. Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate your chosen theme.

Demo Content

Note: We do not recommend this if you have existing content in your WordPress installation, as it will add numerous posts, pages, categories, media and more to your site. Also, we recommend replacing all content as soon as possible to avoid negative SEO effects or image licensing repercussions.

By default, a WordPress theme does not include pre-installed content. If, however, you would like to install your theme’s demo content to be used as a guide, you can do so by following these instructions.

  1. Log into your dashboard.
  2. Install and activate Bonno Theme first! (see appropriate section of this manual)
  3. Find the file link called bonno-demo-content.xml in your ThemeForest archive.
  4. You may not have this plugin installed so install it first, please. After install you will see the after-install page with plugin activation link. Hit it once and follow further instructions.
  5. Navigate to Tools > Import, and choose the ‘WordPress’.
  6. When prompted, upload your demo content bonno-demo-content.xml file.
  7. After you have initiated the demo content upload, you will be asked to assign or create a new author for your demo content — this is your choice. You will also be given a checkbox option to ‘Import File Attachments’. Check this box to import the media you see in your theme’s demo.
  8. Once imported succesfully, navigate to Appearance > Bonno Settings and configure your content
  9. ATTENTION! Navigate to Settings > Permalinks, choose Custom Structure, fill the field with /%category%/%postname%/ and save changes.
  10. ATTENTION! To enable menu go to Appearance > Menus, choose the tab Manage Locations, click on Top primary menu dropdown and select Top menu. Save changes - that's it, demo content is installed.
  11. Note: footer data from Bonno Settings does not take a part in import process. Fill footer settings in Appearance > Bonno Settings > Footer section to have a nice footer content.

Setting up the Homepage

To set up the homepage you should create a new page, you can do so by navigating to Pages > Add New. You can give this page a title yet you do not have to include any content.

Once you have created your new page which you want to use as home page, navigate to Settings > Reading and configure the Front Page Displays setting. Select the static page option and choose the page you just created as your front page.

Setting up the blog archive page

To set up the blog archive page you should create a new page. Once you have created one, navigate to Settings > Reading and configure the Front Page Displays setting. Select the static page option and choose the page you just created as posts page.

If you prefer to use your front page as blog archive don't create pages above and select Your latest posts option in Front Page Displays setting.

Bonno Settings

Bonno Settings is a Bonno theme settings page with theme specific options. To view this page navigate to Appearance > Bonno Settings.

Bonno Settings page has a number of setting sections. Let's look at each of them closer.

Colors

Colors settings have one item Main color. It is used for setting the main color of theme.

Logotype

Logotype setting allows you to set text or image logotype.

To set text logotype enter text you need to Logotype > Text text field. Make sure you checked off Logotype > Use image checkbox!

To set image logo click Upload image link in Logotype > Image section, upload or chose existing image and click Insert into Post. If you have already chosen image for logo you will see the image itself and text link Delete image. In this case you can upload image with click on uploaded image or delete image and upload as described above.

Make sure you checked on Logotype > Use image checkbox!

Favicon

A favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more[1] small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page - Wikipedia

To set image favicon click Upload image link in Favicon > Image section, upload or chose existing image and click Insert into Post. If you have already chosen image for favicon you will see the image itself and text link Delete image. In this case you can upload image with click on uploaded image or delete image and upload as described above.

Note: please, choose .ico file. There are many favicons generators to create proper favicon online.

Preloader

Preloader is an image (usally animated gif) which is shown on page load before all page content is loaded.

To set image preloader click Upload image link in Preloader > Image section, upload or chose existing image and click Insert into Post. If you have already chosen image for preloader you will see the image itself and text link Delete image. In this case you can upload image with click on uploaded image or delete image and upload as described above.

To prevent preloader image displaying set Hide preloader checkbox on.

Header

In this section you can set header menu fixed.

Footer setting section contains just one option Text. It is represented with defaulr WordPress rich editor. You can add there any content like in any other editor. Shortcodes are enabled.

404 page

404 page section contains not-found-page options. Look at images to figure out settings meanings, please.

Bonno 404 page settings section
Page view

Post Formats

Post Formats is a theme feature introduced with Version 3.1. A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. The Post Formats feature provides a standardized list of formats that are available to all themes that support the feature. - WordPress Codex

Bonno uses post formats to show icon on post thumbnain in posts list.

Icon is visible on hover over posts list item.

Bonno Settings Post Formats section options allow to upload images to show them as post formats icons.

To set post format icon click Upload image link in Post Formats > Post format you need section, upload or chose existing image and click Insert into Post. If you have already chosen image for post format you will see the image itself and text link Delete image. In this case you can upload image with click on uploaded image or delete image and upload as described above.

Posts Navigation

In this section you can set posts list and single post navigation options.

Posts list navigation setting has two options. The first Posts list navigation allows to choose how to paginate posts list. If Pagination option is selected (by default) posts list will have paginations links. If the AJAX option is selected posts lists will have Load More button to load the next posts without page reload.

Show prev/next links for single post setting allows to enable or disable Previous and Next posts link under post content.

Works

This section allows you to configure works archive page header and works filter. Look at images to figure out settings meanings, please.

Bonno works settings section
Works page header view

Note: you can leave this options blank or fill it separately to have different headers.

Note: these options apply to the real archive page, i.e. you can create custom page and show works there with shortcodes.

To set All Works label fill the Works filter "All Works" label option

Works filter

Works navigations links allow to set global work links settings. Check Show under content to show previous and next work links on a work page. To reverse links position check Reverse position.

Blog

These settings allow to configure blog archive and single post options.

Header

Header, Header text and Header icon options allow to set defaults for blog archive and blog post pages.

Sidebar position

Sidebar position options allow to set default sidebar position for blog post pages.

Slides

In this section you can set default slides height.

In this section you can set default photo gallery preview image height.

Content creating

Understanding Content

Bonno theme offers to create any content of pages, posts, etc. with shortcodes, not templates. It means your content can be any you want. Your creativity is limited just by shortcodes bundle.

Creating pages

Pages are for content such as "About," "Contact," etc. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site -- information that is always applicable. You can use Pages to organize and manage any content. - WordPress Codex

To create a new Page, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > Pages > Add New option to begin writing a new Page.

See good explanation of pages at WordPress Codex

Work page
  1. Page title. It is used just for administration pages list.
  2. The content.
  3. Photos for photo gallery. To show photo gallery in the content use [photo_gallery] shortcode.
  4. Add button creates new photo gallery item.
  5. Delete all button delete all photo gallery content you created. It will ask you before deleting.
  6. With this handler you can drag-n-drop extra text items to change their order.
  7. Photo gallery item preview.
  8. Photo gallery full-size photo.
  9. Photo gallery item text. May be empty.
  10. Delete this item.
  11. Heading metabox is used to set heding options. Note: if both text and icon are not setted, the default works archive heading will be shown.
  12. The text to show in heading.
  13. The icon to use in heading.

Creating blog posts

Posts are entries that display in reverse order on your blog page. Posts usually have comments fields beneath them and are included in your site's RSS feed. - WordPress Codex

See good explanation of posts at WordPress Codex

To create a new Post, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > Posts > Add New option to begin writing a new Post.

Work edit screen
  1. Post title
  2. Content
  3. Excerpt.
  4. Tags
  5. Format
  6. Categories
  7. Header meta box allows you to set current post heading options.
    • Use default value: the page of current post will use options setted in Bonno Settings page.
    • Use custom: the page of current post will use options setted in Heading meta box (see detalis below).
    • Do not use: the page of current post will not use header.
  8. Featured image: it is used as posts list image.
  9. Sidebar position meta box allows to set presense and position of sidebar on post page.
    • Use default position: the sidebar will use optons setted in Bonno Settings page.
    • Do not use sidebar: sidebar will be not displayed on this post page.
    • Left: sidebar will be shown on the left side of the post content.
    • Right: sidebar will be shown on the right side of the post content.
  10. Heading metabox is used to set heding options. Note: if both text and icon are not setted, the default works archive heading will be shown.
  11. The text to show in heading.
  12. The icon to use in heading.

Creating portfolio

Bonno Theme is packed with Portfolio bundle which contains Work custom post type and portfolio categories.

To create a new Work, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > Portfolio > Add work option to begin creating a new Work.

Look at the picture below:

Work edit screen
  1. Work title
  2. Content
  3. Images for work slider. To add an image click button Add (#4) and hit Upload, then add or choose image from Media Library.
  4. Add button creates new item to upload image in.
  5. Delete all button delete all images you created. It will ask you before deleting.
  6. With this handler you can drag-n-drop images to change their order.
  7. The image of a slide. Hover it to see the upload button.
  8. Delete this image.
  9. Extra text is used on page in specific way. To add extra text items to your content use [extra_text] shortcode. See corresponding image below.
  10. Add button creates new item of extra text.
  11. Delete all button delete all extra text items you created. It will ask you before deleting.
  12. With this handler you can drag-n-drop extra text items to change their order.
  13. Extra text item title
  14. Extra text item text. You can use shorcodes here.
  15. Delete this extra text item.
  16. Work preview. It used in works list. Actually it is featured image with renamed header. Use it the same way you use Fetured images
  17. Work categories are like post categories. They are used to group your works.
  18. Freatured checkbox is used to group works in special group to show'em with [featured_works] shortcode.
  19. Heading metabox is used to set heding options. Note: if both text and icon are not setted, the default works archive heading will be shown.
  20. The text to show in heading.
  21. The icon to use in heading.
  22. Work individual options to show previous and next links. Check off the Use global settings to enable individual settings.
Work page
  1. Work title.
  2. Slider.
  3. Extra text block.

Detailed info how to fill content you can read in Shortcodes section.

Creating slider

Bonno Theme is packed with Photo Sliders bundle which contains Slider custom post type. Slider is used to show slides with images and optioanl text and link above the image.

Slider edit page
  1. Slider title. It is used just for administration sliders list.
  2. Add button creates new slide for current slider.
  3. Delete all button delete all slides from current slider. It will ask you before deleting.
  4. With this handler you can drag-n-drop items to change their order.
  5. Slide image.
  6. Delete this slide.
  7. Optional slide text.
  8. Optional slide text link.
  9. Slide text color.
  10. ID of current slider to use it in shortcodes.

To figure out how to place Slider in your content see Slider Shortcode instructions.

Bonno Theme is packed with Photo Galery bundle which contains Photo Gallery custom post type. Photo Gallery is used to show carousels with images and can show full size image in full-screen box.

Photo gallery edit page
  1. Photo gallery title. It is used just for administration phot galleries list.
  2. Add button creates new photo for current slider.
  3. Delete all button delete all photos from current gallery. It will ask you before deleting.
  4. With this handler you can drag-n-drop items to change their order.
  5. Photo preview.
  6. Photo image.
  7. Optional text to show above photo.
  8. Delete this photo.
  9. ID of current photo gallery to use it in shortcodes.

To figure out how to place Photo Gallery in your content see Photo Gallery Shortcode instructions.

Creating team

Bonno Theme is packed with Team bundle which contains Member custom post type. Team is used to show team members and vacancies with image and descriptions.

Member edit page
  1. Member name or vacancy title.
  2. Member or vacancy description.
  3. Position of member in team (e.g. designer or manager).
  4. ID of current member or vacancy to use it in shortcodes.
  5. Photo of a member or image of vacancy. It is just renamed featured image.

To figure out how to place Team in your content see Team Shortcode instructions.

Creating clients

Bonno Theme is packed with Clients bundle which contains Client custom post type. Clients is used to show clients carousel with ability to attach link to every client.

Client edit page
  1. Client name. It is used as logotype image alt text.
  2. Client logo. It is just renamed featured image.
  3. Optional client link.
  4. ID of current client to use it in shortcodes.

To figure out how to place Clients in your content see Clients Shortcode instructions.

Shortcodes

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut. Support — WordPress.comm

Bonno WordPress Theme is packed with a great bundle of shortcodes. They allow you to create your own markup and add content elements.

Shortcodes button
  1. Place a caret to place in text your want to add shortcode or select some text to wrap it with shortcode you want. Then click the Shortcodes button on editor tools panel.

Markup section

Row

Row shortcode is used to determine a row for columns on your page. It is important to use this one shortcode, because it helps to fix common style issues of markup. Do not use any formatting directly on row-shortcode content, instead of it use column-shortcodes and format the latter content if you need.

Example: [row]...columns...[/row]

Column

Column shortcode is used to determine a column with a content. You can use plain text as a column content or use some of WordPress formatting on column's content. Sure, you can use other shortcodes as a content of column-shortcode. Do not use column-shortcode in column-shortcode, it will break your page layout.

Parameters
  • Width: define the width of column inside its row.
  • Text align: aligns column text to the left, right or center.

Example: [column width ="1/2" align ="left"]...content...[/column]

Divider

Divider creates block which separates content. All parameters are very optional.

Parameters
  • Title: sets the title of divider.
  • Subtitle: sets the subtitle of divider.
  • Button text: Sets button text. If this parameter is not setted the button will no be shown.
  • Link: button link.

Dividers variants.
  1. Divider with title and subtitle
  2. Divider with title
  3. Divider with subtitle
  4. Divider with title, subtitle and button
  5. Divider with title and button
  6. Divider with subtitle and button
  7. Divider with button
  8. Divider
Example: [divider title="Title" subtitle="Subtitle" button="Button text" link="#button-link"]

Clients section

Clients Logos

Client logos shortcode creates a carousel with clients logos with links (links should be setted on particular client edit page).

Parameters
  • Effect: sets one of three available effect for carousel.
  • Clients: sets the list of client to show in carosuel. Note: you can drag-n-drop clients to change theirs order in generated carousel.

Clients carousel
Example: [client_logos effect="fade" id="1,2,3,4"]

Team section

Teamers

Team shortcodes generates markup to show your team members or vacancies.

Parameters
  • Teamers: sets the list of team members or vacancies to show on your page. Note: you can drag-n-drop teamers to change theirs order in generated markup.

Team view
Team member view.
Example: [team id="1,2,3"]

Note: It is possible to disable expanding team member data. Just do not create any content for member and member will be unclickable on team page.

Elements section

Elements section contains miscellaneous useful set of shortcodes.

Button

Button generates a button with a link.

Parameters
  • Text: a text to show on generated button.
  • Link: a link for a button.
  • Type: a type of a button. Solid color and Stroke color take color from Bonno Settings > Colors > Main Color.

Buttons example.
Example: [button link="#button-link" type="solid-color"]Button text[/button]

Photo gallery shortcode generates carousel of images from any existing photo set.

Parameters
  • Effect: sets one of three available effect for photo gallery carousel.
  • Height: sets height of photo gallery previews.
  • Photo galleries: activates any photo gallery to be used as a source of images and data. Note: you can choose from photo galleries as custom post type or from photo set of current page if it is available.

Photo gallery example.
Example: [photo_gallery effect="fade" height="200" id="1"]

Photo Slider

Photo slider shortcode generates images slider from any existing photo set.

Parameters
  • Effect: sets one of three available effect for photo slider carousel.
  • Height: sets height of photo gallery previews.
  • Navigations: sets slider navigation elements.
  • Photo sliders: activates any photo slider to be used as a source of images and data. Note: you can choose from photo sliders as custom post type or from photo set of current page if it is available.

Photo slider example.
Example: [slider_photo effect="fade" height="500" navs="pagination,arrows" id="278"]

Carousel

Carousel creates content carousel. Every carousel shortcode item should be placed in item shortcode.

Parameters
  • Effect: sets one of three available effect for a carousel.

Carousel example.
Example: [carousel effect="slide"]...content...[/carousel]

Extra text

Extra text create special markup using Extra text meta box data if presense. Extra text is available for works only. You can use shortcodes in Text field.

Note: use [link href="LINK-URL"]LINK-TEXT[/link] shortcode to create a link.
Note: text field preserves line breaks on generating markup.

Extra text example.
Example: [extra_text]

Increment

Increment creates container with a digit which increments from zero to Number parametr on page scrolls to its page position.

Parameters
  • Number: sets a target to increment to.
  • Increment: sets a step of increment.

Example: [increment num="10" inc="1"]

Map

Map shortcode is used to show a Google map.

Parameters
  • Latitude: the latitude of a point on map.
  • Longitude: the longitude of a point on map. Note: to get your coordinates visit this page
  • Map height in pixels: integer value of height (default is 400).
  • Zoom: integer value of zoom (from 1 to 26).

Example: [map lat="52.370216" long="4.895168" height="400" zoom="12"]

Icons section

Icon

Icon shortcode inserts an icon with or without a link. All available icons are from FontAwesome icons font.

Parameters
  • Link: the link of an icon.
  • Icon: FontAwesome icon class. Note: instead of filling this field manually you can choose an icon from FontAwesome icons parameter with 1 click.
  • Size in pixels: size of an icon. Default size depends on a surrounding content font size.
  • FontAwesome icons: clickable list of FontAwesome icons set.

Example: [icon link="#icon-link" icon="fa-star" size="14"]

Containers section

This section shortcodes are used as a parent shortcodes for columns. They generates rows with a specific classes to improve generated markup. Containers shortcodes should contain columns shortcodes.

Profile

Profile shortcode is used to create proper profile markup.

Profile markup example.
Example: [profile]...content...[/profile]

Group

Group shortcode is used to create proper group markup. You can use row shortcode instead of this one, but group shortcode will generate better markup.

Group markup example.
Example: [group]...content...[/group]

Item

Item shorcode is used to place carousel content in. Each child of carousel shorcode shuld be placed in item shortcode.

Example: [group]...content...[/group]

Pricing section

Pricing shortcodes allow to generate pricing tables.

Tabs

Tabs shortcode is used as a parent of pricing tables. For example if you have monthly and yearly pricings sets for the same products you should place each of sets to the tab shortcode and wrap the whole structure in a tabs shorcode.

[tabs]...tabs content...[/tabs]

Tab

Tab shorctode is used inside of Tabs shorcode to group set of pricings.

Parameters
  • Name: the name of wrapped pricing set.

Example: [tab name="Tab name"]...pricing plan content...[/tab]

Plan

Plan is used to describe one of pricing plan.

Parameters
  • Background: allow to "highlight" a plan with a gray color.
  • Title: sets the special title of plan, e.g. Most popular.
  • Name: sets the name of plan, e.g. Basic.
  • Currency title: sets the line after plan cost, e.g. Per month.
  • Currency: allow to set a symbol or name of currency of plan, e.g. $ or €.
  • Cost: sets the cost of plan.
  • Width: you can't use this option if plans are placed in Tabs > Tab shortcodes; if you place them in row you can use a width to specify it.
  • Between [plan ...] and [/plan] shortcodes you can place any markup as an extra plan info.

Pricing example.
Example: [plan background="gray" currency="$" currency_title="Currency title" name="Plan name" cost="100" title="Title"][/plan]

Works section

This section shorcodes are used to generate content of works.

Work title

Work title is used to create special work title markup with a specific class to use main theme color.

Example: [work_title]

Work category

Work category shortcode is used to generate current work comma-separated categories name list.

Work title and work category example.
Example: [work_category]

Works filter

Works filter shortcode creates line of links with categories names to filter works tiles.

Parameters
  • Categories: list of categories to show in a filter. Check none to show all categories. Note: you can dag-n-drop categories to change their order in generated filter.

Works filter.
Example: [works_filter id="1,2,3"]

Works

Works shortcode generates works preview tiles.

Parameters
  • Categories (optional): list of categories to show works from. Check none to show all categories.
  • Works (optional): list of works you want to show.

Works
Example: [works id="1,2,3"]

Featured works shorcode is used to display works marked with Featured checkbox.

Example: [featured_works]

Contact form

To use contact form on your pages you should install Contact Form 7 plugin. To install it follow plugin installation instruction. In case you have already installed the plugin use [contact-form-7 HERE-GOES-PARAMETERS-OF-THE-FORM] shortcode. Please, see Contact Form 7 docs to figure out how to use it.

To configure a look of form properly, wrap your fields with <div class="formwrap"></div>, for example:

[response]
<div class="formwrap">
[text* your-name placeholder "Name"]
[email* your-email placeholder "Email"] 
[textarea* your-message placeholder "Message"] 
</div>
[submit class:button "Send"]
				

Widgets

Bonno WordPress Theme is packed with one custom widget. Its name is Bonno Post Data. This widget has no options and is used to show Author avatar, post comments count and post categories.

Bonno Post Data widget view.