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
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.
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.
- Log into your dashboard.
- Install and activate Bonno Theme first! (see appropriate section of this manual)
- Find the file link called bonno-demo-content.xml in your ThemeForest archive.
- 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.
- Navigate to Tools > Import, and choose the ‘WordPress’.
- When prompted, upload your demo content bonno-demo-content.xml file. 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.
- Once imported succesfully, navigate to Appearance > Bonno Settings and configure your content
- ATTENTION! Navigate to Settings > Permalinks, choose Custom Structure, fill the field with /%category%/%postname%/ and save changes.
- 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.
- 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 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 settings have one item Main color. It is used for setting the main color of theme.
Logotype setting allows you to set text or image logotype.
Setting text logo
To set text logotype enter text you need to Logotype > Text text field. Make sure you checked off Logotype > Use image checkbox!
Setting image logo
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!
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 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 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.
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 section contains not-found-page options. Look at images to figure out settings meanings, please.
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.
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.
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.
This section allows you to configure works archive page header and works filter. Look at images to figure out settings meanings, please.
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 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.
These settings allow to configure blog archive and single post options.
Header, Header text and Header icon options allow to set defaults for blog archive and blog post pages.
Sidebar position options allow to set default sidebar position for blog post pages.
In this section you can set default slides height.
In this section you can set default photo gallery preview image height.
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.
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
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.
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:
Detailed info how to fill content you can read in Shortcodes section.
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.
To figure out how to place Slider in your content see Slider Shortcode instructions.
Creating photo gallery
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.
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.
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.
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.
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.
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.
- Width: define the width of column inside its row.
- Text align: aligns column text to the left, right or center.
Divider creates block which separates content. All parameters are very optional.
- 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.
Client logos shortcode creates a carousel with clients logos with links (links should be setted on particular client edit page).
- 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.
Team shortcodes generates markup to show your team members or vacancies.
- 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.
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 contains miscellaneous useful set of shortcodes.
Button generates a button with a link.
- 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.
Photo gallery shortcode generates carousel of images from any existing photo set.
- 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 slider shortcode generates images slider from any existing photo set.
- 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.
Carousel creates content carousel. Every carousel shortcode item should be placed in item shortcode.
- Effect: sets one of three available effect for a carousel.
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.
Increment creates container with a digit which increments from zero to Number parametr on page scrolls to its page position.
- Number: sets a target to increment to.
- Increment: sets a step of increment.
Map shortcode is used to show a Google map.
- 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).
Icon shortcode inserts an icon with or without a link. All available icons are from FontAwesome icons font.
- 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.
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 shortcode is used to create proper profile markup.
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.
Item shorcode is used to place carousel content in. Each child of carousel shorcode shuld be placed in item shortcode.
Pricing shortcodes allow to generate pricing tables.
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.
Tab shorctode is used inside of Tabs shorcode to group set of pricings.
- Name: the name of wrapped pricing set.
Plan is used to describe one of pricing plan.
- 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.
This section shorcodes are used to generate content of works.
Work title is used to create special work title markup with a specific class to use main theme color.
Work category shortcode is used to generate current work comma-separated categories name list.
Works filter shortcode creates line of links with categories names to filter works tiles.
- 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 shortcode generates works preview tiles.
- Categories (optional): list of categories to show works from. Check none to show all categories.
- Works (optional): list of works you want to show.
Featured works shorcode is used to display works marked with Featured checkbox.
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"]
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.