Activate the theme

Activate the theme

Go to WP-admin -> Appearance -> Themes as seen on the screenshot and click the "Activate" button.

You will now be walked through the One Click Installation process. Just keep pressing Next Step button and then Finish it.

In the next step you can have a look at your site.

Ta-daa!

Ta-daa!

If you now open your site on the front end, you can see the barebones of the theme. For your convenience we have already filled it with some content, but you should learn how to add the rest of the content later in this Documentation.

Photos have been blurred/changed due to copyright reasons, please use your own images.

What is the difference between Basic and Full Demo Installations

What is the difference between Basic and Full Demo Installations

After you first activate the theme, you will be prompted with a Basic Installation that will create some content for you, but not much. If you wish to import even more content to make it look more like on our Live Preview server then you should do the Full Demo Installation. Make sure you carefully read all alerts before proceeding. Below you can see 2 screenshots, the first one is the Basic Demo Installation and the second image is the Full Demo Installation.

Basic Demo Installation - Front End

Basic Demo Installation - Front End

 

Full Demo Installation - Front End

Full Demo Installation - Front End

 

Creating your Top Navigation

Creating your Top Navigation

As you can see in the screenshot we need to create your Top Navigation

Create a Top Navigation Menu

Create a Top Navigation Menu

(1) Open Appearance -> Menus

(2) Enter your desired name for the Top Navigation

(3) Save it

Assign Your Navigation to Navigation

Assign Your Navigation to Navigation

Now we have created a navigation called Top Navigation and we need to assign it under the Navigation select.

We have also added some Menu Items (Sample Page, Uncategorized) from the left side, please do so as well.

Ta-daa!

Ta-daa!

Done. As you can see you now have your Top Navigation ready.

Contact Tab in Top Navigation

Contact Tab in Top Navigation

You can edit/disable the "Contact" tab in:

"Theme Options -> Contact"

 

 

Theme supports Retina devices. There were several approaches on how to implement this support, but in the end we opted for the most simple one. That means you only upload 1 image. That image is automatically scaled for normal and retina devices and saved into 2 separate images and served to retina devices - also automatically. Let me give you an example:

 

In the screenshot (taken on a normal non-retina device) you can see that the image area is 240x126px in size. That means you should (but you don't have to if you don't want to support retina) upload at least double it's size, that's 480x252px. The theme then takes your 480x252px image, scales it and saves it as normal.jpg(240x126) and retina.jpg(480x252). The uploaded image does not have to be double, it can be triple or just about any size - the bigger the better.

So the bottom line is...

Upload images in as high resolution as you can - theme takes care of the rest.

 

 

This is a basic "Sample Page" that comes with each basic WordPress installation. We will try to customize it now.

 

 

The most important option here is the "Page Template" selectbox on the right side. You can easily switch your page template from right sidebar, to left, to contact or even a wiki.

 

 

Let's start by switching the page template to "Sidebar Right" and saving. Next, let's look at the result.

 

 

As you can see the page template has changed and now shows a sidebar on the right side.

 

 

Create a page and name it for example "Get in Touch with Us". Also switch to a "Contact" page template and then fill all the other boxes like shown in the screenshot above.

 

 

Let's have a look at the front end. As you can see, we still need to add our Contact Form and Contact Sidebar widgets. Let's do it now.

 

 

Theme comes with a Contact Form 7 Plugin out of the box (if you installed the Basic content).

Navigate into the plugin tab and copy the Contact Form shortcode into your clipboard.

 

 

Paste the copied shortcode into your post content area and save it.

 

 

As you can see your new Contact Form has been added. Let's customize the form a little bit by implementing a CAPTCHA field.

 

 

Click on the EDIT button so we can customize our form

 

 

Contact Form 7 plugins needs another plugin called Really Simple CAPTCHA in order to insert CAPTCHA field.

Generate the CAPTCHA tag as shows in the screenshot.

 

 

 

 

 

 

Now we need to customize the sidebar on this Contact Page.

As you can see the theme runs multiple sidebars. The main one is the "Global Sidebar" which is being shown everywhere unless overwritten by other child sidebars. So let's overwrite for Contact Pages only by adding some widgets to the "Page Contact" sidebar.

 

 

Let's drag some widgets into our Page Contact sidebar.

 

 

As you can see the sidebar has changed from Global to Contact. This sidebar will be shown on all pages that have selected "Contact" as their Page Template.

 

 

Now all we need to is to add our new Contact page into the Top Navigation menu we have created earlier in the Installation chapter.

 

 

Great, Contact menu item has been added. If you would like to disable/edit the Contact tab (the last, 4th in the menu up there now), you can do it in:

"Theme Options -> Contact"

 

 

Let's create the parent Wiki page where we will later connect all the subpages.

Let's create the parent Wiki page where we will later connect all the subpages.

As you can see, the Wiki is now empty, so we need to add some subpages to it, see the next steps.

As you can see, the Wiki is now empty, so we need to add some subpages to it, see the next steps.

Now let's create some pages and assign them UNDER the Wiki parent. That's all you need to do to have the appear in the Wiki.

 

 

Tadaa, that's your new Wiki page with all the subpages connected to it.

 

 

Finally we can add the Wiki page into our Top Navigation.

 

 

 

 

All the 3 post types (Portfolio, Projects, Products) work the same so we will show you how it's done on the Portfolio post type now.

 

 

1) Name your post

2) Add some content to the post content area

3) Set a Featured Image

4) Fill the excerpt

5) Fill the Intro

6) You MUST create your first Portfolio Category, we simply called it Portfolio

7) Save it

8) View the result

 

 

 

 

 

 

 

 

Now let's add our new Portfolio category into the Top Navigation

 

 

 

 

Portfolio, Projects and Products support sorting like shown in the sreenshot. All you need to do for this sortable bar to appear is to assign tags to your posts/items.

For the purpose of this documentation I have created 3 posts/items in the Portfolio category - they are the same, just have a different Post Title.

 

 

Please add some tags to your post/item as show in the screenshot.

 

 

 

 

 

Please always backup your files and database before updating.

You have 2 ways to update:

A) Replace the old theme folder with the new one, navigate to "Appearance -> Themes" and re-activate the theme.

B) Replace only the changed files as per our changelog: http://demo.freshface.net/file/bt/wp/wp-content/themes/bonton/changelog.txt When done, navigate to "Appearance -> Themes" and re-activate the theme.

Insert your Tracking/Analytics code here:

Insert your Tracking/Analytics code here: