Introduction

Hello from Team Knacc. Firstly if you have purchased the Show + Tell theme then you are awesome and we want to say a big thank you. We have put many many many hours into this theme and we can't wait for you to start using it in all its glory.

All of what you need to know should be below but if you need some help, just get in touch with the knacc support team.

Enjoy!

Our Approach - Development

One of our biggest frustrations when choosing and buying a theme is that its often hard to understand how a theme has been developed before committing and purchasing the theme. Things like, which options framework has been used, which front-end framework has been implemented etc. So this section will briefly run through the foundations of the Show + Tell theme for you to get a good idea of how its been developed and what its built upon.

Underscores Starter Theme (_s) (http://underscores.me)

Every good theme needs a good solid foundation to start from, that's why the Show + Tell theme is built upon the Underscores starter theme. Underscores is developed and maintained by the company behind WordPress itself, Automattic.


Advanced Custom Fields (ACF) (http://www.advancedcustomfields.com)

Advanced Custom Fields is probably the one of the most powerful WordPress plugins ever made and in our opinion should be part of the WordPress core! The Show + Tell theme includes the ACF library as part of its core and uses it to power its theme options as well as create the custom fields for our theme page templates.

If you want to use ACF to create your own custom fields, you can, very easily. You do not need to install the ACF plugin manually as it comes pre-integrated with the theme. Just look out for the Custom fields menu item at the bottom of the admin sidebar once you have activated the Show + Tell theme.

Bootstrap 3 (BS) (http://getbootstrap.com)

As regards front-end, the Show + Tell theme is built upon the world famous Bootstrap 3. This front-end framework is widely used and classed as a standard by many. We decided to use a common framework so our customers would be familiar with how the front-end design is structured and this also means that you can easily extend / customise the theme if needed.

The CSS structure of the Show + Tell theme follows the same mobile first, responsive approach as the latest Bootstrap 3.


The Knacc approach and main aim when developing our themes is to always use native WordPress functionality / processes where possible unless there is a very good valid reason not to. We take time to consult and keep up to date with best WordPress development practices. We are passionate about writing clean lean code to create awesome themes that run fast and remain stable. We also put a lot of effort into creating the best user experience for site owners to add and work with their content using our themes.

Theme Installation

Once you have WordPress installed, you are ready to get going...

If you need help installing WordPress, look here.

Installation

To install this theme you need to upload the theme files to WordPress and then activate it. There are two ways to do this:

1. FTP Upload
  • Unzip the "show-tell-theme.zip"
  • Using your favorite FTP program, upload the unzipped show-tell folder to your server, into the /wp-content/themes/ directory.
  • Log in to WordPress, and go to Appearance > Themes

2. WordPress Upload
  • Go to Appearance > Themes > Upload
  • Follow the instruction and select the show-tell zipped theme folder.
  • Hit Install Now and the theme will be uploaded and installed.

You then need to activate the theme. You can do this by navigating to Appearance > Themes, finding the show+tell theme and hitting Activate.


Initial Theme Set-up

Before you start adding content, theres a few things to do to set-up the theme...

Theme Options

After installation, go to the Show + Tell theme options and set some options according to your preferences. See the theme options section below for info on each theme option. To access the Show + Tell theme options look for the 'Show + Tel' link towards the bottom of the admin menu with a cog icon.


Plugins

There are 3 plugins that come with the Show + Tell them:

  • Bootstrap Shortcodes (http://wordpress.org/plugins/bootstrap-shortcodes) - This plugin allows you to add shortcodes for all the major components of Bootstrap 3 within your post / page content. i.e. columns, tabs etc...

    This plugin is a required plugin and will be automatically activated when you activate the Show + Tell theme.
  • Contact Form 7 (https://wordpress.org/plugins/contact-form-7) - This plugin allows you to create amazing fully customisable contact forms within your site. It powers the contact form on the contact page template of this theme.

  • This plugin is a recommended plugin, it does not have to be installed or activated but we recommend you do.
  • Envato WordPress Toolkit (https://github.com/envato/envato-wordpress-toolkit) - This plugin allows you to keep up to date with theme updates of your purchased themes on Themeforest.net. It also allows install the theme update directly.

  • This plugin is a recommended plugin, it does not have to be installed or activated but we recommend you do.

Setting up your Pages

Now is a good time go ahead and create your basic pages that you need for your site. This documentation covers the setting up of each main template page that comes with the Show + Tell theme. These are:

Go ahead now and create the pages that you need and then finish up by following the last few steps of the set-up process below.


Setting up the Sidebar Menu

Now that you have created your basic pages, you can go ahead and configure the sidebar menu. To do this go to Appearance > Menus.

Create a new menu by giving your menu a name, (a good name would be 'Sidebar Menu') and clicking Create Menu. Now from the left select the pages you want to add to the menu and click Add to Menu. Once the pages have been added you can reorder them by dragging up each page up or down.

To finish up its important that under Menu Settings at the bottom, for the Theme Locations option, you select Primary Menu and click Save. Your new menu will now be used and displayed within the sidebar.

Be sure that you select the Primary Menu location for your new menu otherwise your menu will not appear correcly in the sidebar

Adding Menu Icons

A key feature of the Show + Tell theme's design is the menu icons. Team Knacc has especially designed a bespoke set of icons which you are free to use with the theme. Icons are added to the menu by adding a class to each menu item.

To add a icon class to a menu page item, click on the Page drop down arrow for a certain page within the menu structure screen. Once the box expands you should see a optional field named CSS Classes.

If you don't see this field then it may be hidden by default. Simply click on the Screen Options tab at the top right of your admin screen, once it drops down, select the CSS Classes option and the field will be added below.

The class name format for icons is as follows:

icon-knacc-iconname
For a full reference list of all the Knacc icons and their classes click here.

Setting Up Your Static Homepage and Blog Homepage

This is an important step within WordPress to define which of your pages displays as your homepage (front-page) and also the blog homepage (posts page). To do this go to Settings > Reading. You will see the following at the top of the page:

If you want your blog posts to be your homepage then leave the default Your latest posts option selected.

Otherwise if you want to set your portfolio page (or any other page) as your home page then select the second option and for Front page from the drop-down choose your desired page.

Do the same for the Posts page option, but in this case you need to select the page you have created for your blog.


Importing Demo Content

You may want to use the layouts and content that you saw in the Show + Tell theme demo, which you can do by importing the demo content XML file. To do this navigate to Tools > Import > WordPress. Choose to import the demo content XML file which is included within your theme download and click Upload file and import.


If you have followed all of the steps above then your theme should be now all setup and ready for your content. Oh Yeah!

Theme Options

To access the Show + Tell theme options look for the 'Show + Tel' link towards the bottom of the admin menu with a cog icon. You will see the options are split between 3 sub pages:


General Options

Site Logo

Here you can upload your custom site logo which will override the default Show + Tell theme logo. The recommended width for the logo is 250px wide, which is the main width of the sidebar. Set the height according to your logos design. If you want your logo to be optimised for retina displays then upload a logo which is double the size, i.e. 500px wide.


Footer

Here you can add your custom footer text. You can add plain text or HTML tags.


Blog Options

Here you can change the blog header title which is used on the blog homepage. By default it's 'blog' but you may want it to be something different.


Custom CSS

Here you can add custom css code to override or add style to the Show + Tell theme. This is handy for small quick CSS changes.

For any major CSS code / changes you should really use the Show + Tell child theme. See the child theme section.

Google Analytics

Here you can paste your Google Analytics tracking code. This will be added to the head of your site as required by Google Analytics to work correctly.

Design / Style Options

Theme Colour Skin

The Show + Tell theme comes with some rather nice preset colour skins. These skins affect the color of key elements of the theme such as the sidebar, body background and headings etc. If you don't want to use a colour skin then you can select the first default option.


Skin Colour Contrast

This option works along with the preset colour skin option above. It allows you to easily change the contrast combinations of the colour skins. For example, you may want a dark sidebar and a light body background, or a dark sidebar and a dark body background etc. Play around with this option to see its full effect, its rather clever!


Primary Theme Colour

Here you can set your own primary colour to be used by the theme. The primary colour is used for elements like hover states, button colour and various other key places. This option will override the default primary colour set by the theme and any colour skins.


Secondary Theme Colour

Here you can set your own secondary colour to be used by the theme. This option will override the secondary colour set by the theme and any colour skins.


Secondary Theme Colour

Here you can set your own secondary colour to be used by the theme. This option will override the secondary colour set by the theme and any colour skins.


Sidebar Background Colour

Here you can set the background colour of the sidebar. This option overrides any colour skin selected.


Sidebar Background Image

Here you can set the sidebar to have a background image. By default there is no background image set.


Body Background Colour

Here you can set the colour of the body background. This option overrides any colour skin selected.


Body Background Image

Here you can set the body background to have a background image. By default there is no background image set.


Header Background Colour

Here you can set a custom background colour for the page header. This option overrides any colour skin selected.


Headings Font

Here you can choose which font you would like to use for all of the theme headings. You can choose from a long list of the best Google Fonts currently available.


Body Font

Here you can choose which font you would like to use for all other text (body font) within the theme. You can choose from a long list of the best Google Fonts currently available.


Body Font Size

Here you can select what size the body font should appear in px's. The default is 16px.

Portfolio Options

Portfolio Post Type Label

The portfolio works by adding a custom post type to WordPress. We have developed the Show + Tell theme to be very flexible based on your content. So here you can set a custom label for the custom portfolio post type. The default is 'Portfolio' but it could be 'Work' or 'Projects' for example.


Portfolio Post Type Slug

As mentioned above, the portfolio post type is flexible and here you can set a custom slug to be used for the portfolio post type. The default is 'portfolio', but it could be 'work' or 'projects' for example. The slug is used to access the portfolio page and posts i.e. http://yourtheme.com/portfolio

Update Permalink Settings

After changing the portfolio post type, you will probaly need to flush and update your WordPress permalink settings for your changes to work. To do this, simply go to Settings > Permalinks and click on the Save Changes button at the bottom.

Number of Columns

Here you choose how many columns you want to be displayed for the portfolio homepage


Thumbnail Margin (px)

If you would like to add a margin around each thumnail image on the portfolio homepage then you can set this here in px's. By default there is no margin applied.


Display Portfolio Page Header

Here you can choose if you want to display the page header for the portfolio homepage or not. By default no header is shown.


Single Page Layout

Here you can set the default layout for each portfolio post single page. Fixed or Fluid. This is a global option but can be overridden within each post page.

Social Options

Social Networks

These options don't really need much explaining really. Simply add the URLs to each of your social networks accounts. This will make a linked social icon display for each account you have added a URL for to appear within the page header on the on right.

Page Templates

Here we are going to run through the page templates that come with the Show + Tell theme and how to use them...

Portfolio Template


To set-up your portfolio page simply create a page (if you haven't done already) and in the Page Attributes box select the Portfolio Template. And that's it! Simples. There are customisable options relating to this template within the Show + Tell theme options.

Once you have done this then you can start adding your portfolio items within the portfolio post section of the admin area. All posts added here will then display on your portfolio homepage.


Profile Template


To set-up your profile page simply create a page (if you haven't done already) and in the Page Attributes box select the Profile Template. When you do this additional fields will magically appear for adding your profile page content.

This is what you will see when selecting the profile template:

  • Profile Name - Add your name here!

  • Job Title / Occupation - Add your current job title or occupation here (will not display if left blank)

  • Profile Icons - Here you can add social icons (or any other icons) or just some line of text, e.g. 'Hire Me'. To add icons that are links to your social network accounts simply paste the icon HTML in like this:

    <a href="account-link-goes-here"><i class="icon-knacc-iconname"></i></a>

    For a list of all of the available knacc icons and their names see here.

  • Featured Text - Here you can add some featured text that really stands out. It could be a quote or some short bio text to describe who you are.

  • Profile Image - Here you can add a profile image, this replaces the default profile placeholder image.

  • Featured Image - Add a profile background image by adding a image to the default featured image meta box on the right.


Team Template


To set-up your profile page simply create a page (if you haven't done already) and in the Page Attributes box select the Team Template. When you do this addtional fields will magically appear for adding your team page content. This template uses a repeater custom field to allow add all of your team members with ease. This is what the team member fields look like:

Go ahead and add each of your team members with their details. To add another team member simply click the Add Member button.

You can add linked social icons just like for the profile page within the Member Icons field. See above for how to do this.

You can add normal page content in the default page content WYSIWYG editor and this will appear under the team members boxes on the team page.


Contact Template

To set-up your contact page simply create a page (if you haven't done already) and in the Page Attributes box select the Contact Template. When you do this additional fields will magically appear for adding your contact page content.

These are the custom fields you will see appear when selecting the contact template:


Contact Details - This fields allow you to input all of the standard contact info with ease. You have a option to display or hide this section. Also if no value is entered for one of the fields then that line will not display.

Google Map Options - Here you can configure the Google Map for the contact page which appears at the top by default. If you dont want to display a map, simply un-check the display option.

Setting your map location is so easy, just simply type your address in the Google Map Address field. You can put your full address, or just or ZIP / Postcode, or even just a town or city name if you wish. Then lastly you can choose which zoom level is right for you.

Contact Form - Here you can add a contact form to the contact page. This is powered by the Contact Form 7 Plugin that comes with the Show + Tell theme. (See plugins section).

The dropdown select field lists all of the contact forms that you have created within the Contact Form 7 plugin. Simply select the one you want to use for the contact page. If the drop-down is empty then you need to go ahead and create a form using the plugin first. You have of course the option to not display any form section on the contact page by un-selecting the display option.

Customisation & Child Themes

We know the importance of being able to customise a theme to you own style and taste. That's why Show + Tell is child theme ready.

We have tried to get the correct balance of providing the right number theme options for you to customise the Show + Tell theme as you need and at the same time not include an overly excessive number of theme options that slows the theme down and adds unneeded weight.

If you need to make a very small CSS customisation, then you could add this code to the Custom CSS field within the General theme options.

However its far better for any major customisations, to use a child theme. Child themes are very clever and you can read about how they work here.

Show + Tell comes child theme ready so all you need to do is go to Appearance > Themes and activate the Show + Tell child theme. (If you don't see it make sure you have uploaded it to the themes directory along with the Show + Tell parent theme).

Once the child theme is activated then you can start adding your custom CSS in the style.css file within the Show + Tell child theme folder. To modify page templates duplicate the file from the parent theme into the child folder and this version will override the parent and show any customisation you make. Nice!

The main purpose of using a child theme is that it allows you to update the parent Show + Tell theme with future updates without losing or overwriting any of you customisations. This is very much recommended.

Support

We have en-devoured to cover all of the features of Show + Tell theme and explain as much here as possible, however if after reading the documentation there is something you would like help with, please get in touch with our support team.