Hello from Team Knacc. Firstly if you have purchased our Expressivo 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.
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 Expressivo 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 Expressivo 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 Expressivo 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.
define( 'ACF_LITE' , true );
in the functions.php file and comment this out. Then just look out for the Custom fields menu item at the bottom of the admin sidebar once you have activated the Expressivo theme.
If you need any help with this, just shoot us a support ticket.
Bootstrap 3 (BS) (http://getbootstrap.com)
As regards front-end, the Expressivo 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 Expressivo 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.
Once you have WordPress installed, you are ready to get going...
If you need help installing WordPress, look here.
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 "expressivo-theme.zip"
- Using your favorite FTP program, upload the unzipped expressivo 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 expressivo 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 Expressivo theme and hitting Activate.
Initial Theme Set-up
Before you start adding content, theres a few things to do to set-up the theme...
After installation, go to the Expressivo 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 Expressivo theme options look for the 'Expressivo' link towards the bottom of the admin menu with a cog icon.
There are 3 plugins that come with the Expressivo theme:
Knacc Bootstrap Shortcodes (http://plugins.knacc.co/knacc-bootstrap-shortcodes.zip) - 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 recommended plugin, it does not have to be installed or activated but we recommend you do.
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.
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.
Setting up your Pages
Now is a good time go ahead and create your basic pages that you need for your site. As a minimum you will need a page for your blog homepage.
This documentation covers the setting up of each main template page that comes with the Expressivo 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 Your Blog Posts Page and Static Homepage
To do this go to Settings > Reading. You will see the following at the top of the page:
If you want your blog page to be your homepage then leave the Front Page option blank. Otherwise if you want to set a custom homepage (using the homepage template or any other template) then for the Front Page option, select your homepage.
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 Sidebar Menu and click Save. Your new menu will now be used and displayed within the sidebar.
If you have followed all of the steps above, the basics of your theme have been setup. Now you can dive into the theme options to make some customisations (see below). Oh Yeah!
Importing Demo XML
You may want to use the layouts and content that you saw in the Expressivo theme demo, which you can do by importing the demo content XML file (click button below to download). Once you have downloaded the XML file, navigate to Tools > Import > WordPress. Choose to import the demo content XML file and click Upload file and import.
Download Expressvio Demo XML File
To access the Expressivo theme options look for the 'Expressivo' link (with a cog icon) towards the bottom of the admin menu. You will see the options are split between 5 sub pages:
Apple Touch Icon
Here you can upload a Apple touch icon for your website.
Here you can upload a favicon for your website.
Here you can add your custom footer text. If you leave this option blank then no footer will display.
Add Copyright Line
Select this option if you want the theme to add a copyright line with the current year in the footer. (Format: © Copyright 2014)
Display Social Network Icons
Select this option if you want to display social network icons in the footer. (See Social options section also)
Here you can add custom css code to override or add style to the Expressivo theme. This is handy for small quick CSS changes.
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.
Header & Sidebar Options
Desktop Logo (Primary)
Upload your primary header logo here. This will be used for all desktop sized screens. For the next two options you have the ability to upload specific logo(s) for mobile and tablets devices. This is very useful as you may want to display a smaller logo version for smaller screens. If however you only upload a desktop logo, then this will be used for all devices as a default.
If you want to display a specfic logo for tablet devices, upload it here.
If you want to display a specfic logo for mobile devices, upload it here.
Header Layout Style
Expressivo comes with 3 header layout styles (1. Logo Left, Widgets Right, 2. Logo Right, Widgets Left & 3. Logo & Widgets centred. Use this option to select which one you want to use.
Header Background Colour
Here you can select a colour if you want to set a custom background colour for the header. This option will overide any theme colour skin you select.
Header Background Image
This option allows you to set a custom background image for your header. This will override the background colour option above.
Here you can choose which side, left or right, you want to display the sidebar on.
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 theme's default primary colour and any selected colour skin selected in the option below.
Theme Colour Skin
The Expressivo theme comes with some rather nice preset colour skins. These skins affect the colour of key elements of the theme such as the header and sidebar background. If you don't want to use a colour skin then you can select the first No Skin (default) option.
The following contrast options work alongside with the above colour skin option. This option allows you to set the colour contrast of the header background, so you can have a light header or dark header.
This option allows you to set the colour contrast of the sidebar background, so you can have a light sidebar or dark sidebar.
This option allows you to set the colour contrast of the body background, so you can have a light body or dark body.
Body Background Colour
Here you can set a custom background colour for your websites body background. This option will override the theme's default primary colour and any selected colour skin selected.
Body Background Image
Here you can set a custom background image for your websites body background. This will override any background colour selected.
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.
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.
Simply add the URLs to each of your social networks accounts. You can then use the Knacc Social Networks widget, that comes included with the Expressivo theme to add social network icons (linked to your accounts) in the header or sidebar. Icons will also appear in your footer, if you have the Footer Social Icons option selected.
The options for your blog (posts) homepage are not stored in the theme options but can be found on the page edit screen for whichever page you have assigned as your posts page.
Display Featured Post Slider
Expressivo gives you the functionality to display a featured posts slider at the top of your blog page. Select this option if you want to display the slider, you then also need to select some featured posts using the option below.
Using this option you can now easily select some posts to feature in the slider from the list of posts on the left. All of the featured posts you select will then be listed on the right.
Blog Homepage Layout
This option lets you confiure the layout of your blog page. You can choose the traditional list layout OR a Masonry layout (as shown in the theme demo)
Number of Columns
If you selected the Masonry option above then you will see two further options. The first option, will let you select how many columns you want your Masonry layout to use. Choose from 2, 3 or 4 columns.
The second option allows you enable or disable Infinite Scroll for your Masonry layout. This is enabled by default.
Display Author Details Option
In addition to these blog options above, there is one more custom option which relates to the blog, however this option can be found at the bottom of your user profile page. (This can be found by navigating to the Users section within WordPres admin menu, and clicking on a user)
This option allows you to display or hide the author details box on single post pages, which appears below the post content. By default, this box will not display but you can enable it here. The author details box displays the post author's name, avatar and description. Clicking on the authors name will take you to the author's profile page.
The reason that this option is on it's own in the user profile edit screen, is so it can be set per user, which is handy.
Here we are going to run through the page templates that come with the Expressivo theme and how to use them...
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.
Contact Form - Here you can add a contact form to the contact page. This is powered by the Contact Form 7 Plugin that is a reconmended plugin for the Expressivo 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.
Full Width Template
The full width template is fairly self explanatory. Select this template if you want your page to be full width (fluid). Your page content and featured image will then span 100% within your page. Click here to see the demo example.
The homepage template allows you to display a full screen, featured or latest posts slider. Click here to see the demo example. When you select the homepage template, you will see the following options appear:
The first option allows you to choose if you want your slider to display some of your latest posts, or some featured posts. If you select the featured posts option, then you will be able to select which posts you want to feature.
The homepage slider uses the post title and featured image of each post as its content.
Everyone loves widgets, and we do too. Expressivo comes with 3 widget areas and one Social Networks widget.
Blog Sidebar Widget Area
This sidebar widget area will only appear for your blog posts and post single pages. You can use it to display blog related widgets like blog categories and tags etc.
Page Sidebar Widget Area
This sidebar widget area will appear for pages, which are not related to your blog.
Header Widget Area
As well as the sidebar, the header has a widget area too. This allows you to add widgets to your header and customise its look. You can add menus to your header too by using the Menu widget.
Knacc Social Networks Widget
This a custom knacc widget that comes with the Expressivo theme. It allows you to add social network icons (linked to your accounts) to your sidebar or header widget areas. See the social options section also.
Recommended Image Sizes
Images are a key part of any theme and knowing the optimum image sizes to use before uploading your images can really help save time and will ensure your images look great.
Expressivo has 3 pre-set (retina ready) post thumbnail image sizes (1200, 1600 & 2400px), so when you upload a image, it will automatically create for you the correct sized images. This is really handy and saves you a lot of hard work! Having the right sized images for each area of the theme means that images will load faster and save you bandwidth.
Customisation & Child Themes
We know the importance of being able to customise a theme to you own style and taste. That's why the Expressivo theme is child theme ready.
We have tried to get the correct balance of providing the right number theme options for you to customise the Expressivo 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.
Expressivo comes child theme ready so all you need to do is go to Appearance > Themes and activate the Expressivo child theme. (If you don't see it make sure you have uploaded it to the themes directory along with the Expressivo parent theme).
Once the child theme is activated then you can start adding your custom CSS in the style.css file within the Expressivo 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!
We have en-devoured to cover all of the features of Expressivo 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.