There are two ways to install the theme:

  • FTP Upload: Unzip the “better-theme.zip” file and upload the contents into the /wp-content/themes folder on your server.
  • WordPress UploadNavigate to Appearance > Add New Themes > Upload. Go to browser, 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.

Install the plugins

After activating the theme, you will be prompted to install a couple of plugins required by the theme:

  • Krown Portfolio – this is the plugin which activates the portfolio & gallery custom post types. It doesn’t require any setup, just installation and activation, for the theme to have portfolios / galleries.
  • Revolution Slider – this is the the awesome layered slider which can be used anywhere in the theme. Read the documentation for it here!
  • Visual Composer – the actual page builder (shortcode editor) of the theme. It comes with some of the original plugin shortcodes and some custom crafted shortcodes.
  • oAuth Twitter Feed for Developers – this isn’t a critical plugin, but it is needed if you want to use the twitter widget anywhere in your website. More about how to work with it later on.

 IMPORTANT

Please understand that this is a bundled version of the Visual Composer plugin and some features are intentionally disabled and some shortcodes are missing. This is normal and it doesn’t affect your website with anything – you can still create the awesome website with all the elements that we advertise in the online preview.

If you do not see the notice to install these plugins or miss it somehow, you can go to Appearance > Install Plugins and you’ll see the full list there.

Another plugin which will not popup here is WooCommerce. This plugin is only useful if you want to have a shop on your website, otherwise you can skip it. So if you do need it, please download it from here: http://www.woothemes.com/woocommerce/

This plugin has it’s own documentation available here: http://docs.woothemes.com/documentation/plugins/woocommerce/

Import the demo content

There is an xml import file in the download  (“better-import.xml”), which can be used to achieve a near example of the online demo. Please note that the images which you see online will not be available when you do the import, since they’re copyrighted.

This is a great starting point for your website, as you’ll be able to delete everything at any time and only keep what you need, that start from there!

To use it, go to  Tools > Import > WordPress and upload the xml file, choose to import everything, hit the button and wait.

Please note that this import is not perfect and it might fail sometimes, but it’s a good solution if you can’t or don’t know where to get started.

Read this  troubleshooting guide  if you encounter any issues.

Theme Options & Customizer

Theme Customizer

The WordPress customizer is a tool which allows you to edit all the style options from a theme and visualize the changes live, as you make them. To open it go to  Appearance > Customize.

1. Header

Here you are able to set certain elements for the space above the header and also configure the search icon.

2. Logo

You can upload your logo, which can be of any size. You need to also upload a double sized logo for retina displays and a favicon. If you do not do this, the theme’s logo will appear on retina displays and the favicon will be also the theme’s. Make sure that you also complete the logo’s size correctly (in px).

3. Navigation

In this section you can change the theme’s main menu and enable / disable the breadcrumbs.

4. Portfolio

This section has one option – the setting of the default portfolio page. Note that even if you’re using multiple portfolios, having a default one is required!

5. Blog

Just as above, you need to choose the default blog page and the blog layout.

6. Footer

The footer offers only a place to write some copyright information and configure the CTA area. The contents are widgets.

7. Background

Since this theme has a boxed design, you can choose a background color or upload an image to be used as a background.

8. Colors

There is only one main color accent which you can change. It appears on hovers, various backgrounds, etc..

9. Typography

The last section of the customizer holds two fields for custom fonts. These are all  Google Fonts. Please note that because Google changes it’s fonts on a regular basis, not all of the fonts you see on Google may be included here.

 The font used in the online theme preview is Raleway (both headings and body).

For info on how to use a different Google Font than the ones in the list or even a custom font, please refer to the article   Improve theme typography

Whenever you make a change you’ll see the actual website refresh with the changes you do. Make sure that when you’re done, you hit the Save & Publish button. After this, you can close the customizer.

Theme Options

Other than these options which apply to the styling of the theme, you have another set of options, which don’t affect the style, but the functionality, and you should do a quick look there. You can find a new menu item under  Appearance > Theme Options.

1. Analytics

Inside this section you should paste your Google Analytics code. If you do use these, please don’t forget to enable them first, otherwise not all page clicks will be triggered, even if you have your code placed.

2. Custom CSS

If you have any css rules that you may want to add to the website, this is the place to add them. However, if you want to do extensive modifications, i suggest that you go with a child theme, because it’s better. But more on this later. If you don’t have more than 100 lines of code you can paste them here.

3. Custom Sidebars

In this area you can define as many unique sidebars as you want.

 Please notice that you have to give a unique lowercase id (only letters, no spaces) to each sidebar in order for it to work properly.

4. Admin

Here you have a field for the replacement of the administrator login logo. Just make sure that you will respect the size written there and you can replace the theme’s login logo with your own brand or the client’s.

5. Updates

This is the place where you can configure auto updates by inserting you marketplace username and API key.

This feature doesn’t always work on certain servers because of various limitations or issues that caused by Envato and thus out of our range to fix.

If this is your case, please use automatic updates.

 

 

Homepage & menu setup

Setting your homepage

To set up your homepage, you first have to create a basic page, or any page template(about page templates later). After you decide what page do you want to use, go to Settings > Reading and in the Front page displays choose A static page, then select your just created page.

Also, please don’t select anything for your Posts page, otherwise your blog will not work!


Next, you should setup your permalinks to look pretty. Please go to Settings > Permalinks, choose the Custom Structure, and use this: /%category%/%postname%/

READ THIS about permalinks on Windows Servers!

Setting your menu

For creating your main menu, go to  Appearance > Menus and you will see a panel where you can create new menus. Create one, add your created pages to it (from the left side panels) and save it. After this, in the left side you have a drop down box where you can select the Primary Navigation. Choose your newly created menu, hit “Save” and you’re all set.

 

Adding Posts

These are the default steps that you need to do in order to add a blog post:

1. Go to Posts > Add New

2. Enter a title and some content.

3. Select a post category.

4. Add some relevant tags.

5. Choose a post format from the right. There are a few types of custom formats that can be used, and each one of these can be setup in the Post Media / Content meta panel.

6. Setup the content of the post format(either a gallery, a link, an image, a quote, an mp3 or a video). All the fields are properly documented so you should have no issue on setting up your content.

7. Insert all of your remaining content in the content area. You can have images, paragraphs, etc..

8. Write a few words excerpt(it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your post).

9. Hit “Publish” and you’re all done.

 

Adding Pages

The process of adding pages is quite similar to adding posts:

1. Go to Pages > Add New

2. Enter a title and some content.

3. Select a page template or leave the default (more on this just after).

4. Select a layout for the page. Each page can have a custom sidebar or not.

5. Write a few words excerpt(it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your page).

6. Hit “Publish” and you’re all done.

Page Templates

As you might already noticed, there are a few Page Templates available for you to use. Each template will configure your page to look and act in a different way.

1. Default Template

This is the default template and it outputs exactly the content of the page, without any modifications.

2. Archives

This is a page which displays all of your archives(it might be good for SEO to have it and also for users in order to give them a broader perspective over your blog).

3. Blog

This page outputs all the posts that you have in your blog. It uses a classic format with all the posts one below the other. This works best for large blogs with lots of posts.

4. Contact

This one has a map available in it. Note that the content (contact form) still needs to be added separately (via shortcodes), but this page template is the starting point for any contact page. The map is configured in the Map Options and each field is properly detailed, so you shouldn’t have any issues with this.

5. Portfolio

This page outputs the entire contents of your portfolio. You can also select the number of columns and which portfolio categories you want embedded in each portfolio page, thus being able to create unlimited portfolios.

6. Sitemap

Similar to the archives template, this one displays a sitemap with the pages of your website. It is good for SEO to have such a page and maybe put a link to it in the footer.

7. Slider

This page gives you the ability to use either an image or an instance of the Revolution Slider as the header. You can also put a tagline above the header. Another cool feature is that you can add tabs to the slider if you wish – they will be displayed under the slider and each tab will link to a certain slide.

 

Adding Projects

The process of adding projects is quite similar to adding posts:

1. Go to Portfolio > Add New

2. Enter a title and some content.

3. Choose a category or more.

This is a must, because these categories will be used to filter projects in the grid.

4. Set a featured image. The size of the featured images depends on the number of columns that you want to use and whether you want this to be retina ready or not, but as a general rule, you should upload images as large as possible and let the theme do the cropping.

If you’re really picky about thumbnails, these are the sizes from the demo:

  • 4 columns – 205×156
  • 3 columns – 290×221
  • 2 columns – 453×345
  • with sidebar – 210×160

For changing these standard sizes, please refer to the Tips & Tricks section.

5. Write some content.

6. Setup the slider and project options (more info below).

7. Write a few words excerpt(it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your page).

8. Hit “Publish” and you’re all done.

You’ll see two sections below the content window. These sections control everything related to the projects.

Project Media

This is the actual gallery. When you choose to create the gallery you will be taken to the WordPress default Media Manager. With it you can upload a large amount of images for your project or choose images from the media library, thus being able to save a lot of time when creating your projects.

Make sure that you don’t exaggerate with the number of images in each project, because each image will make the project load slower.

About sizes, just use whatever you’re comfortable with. There is no default or optimal size, since all the projects are highly customizable and support anything. A final note, your images will never be resized more than their original size!

You can also use an instance of the Revolution Slider for the project.

 

Theme Shortcodes

This theme is full of shortcodes! Inside the custom page builder you can achieve whatever you want, as everything is easy to use, customize and understand.

It uses a slightly modified version of the popular Visual Composer plugin, with some default shortcodes and custom build ones as well.

Note 1: Not all of the original VC shortcodes are available in this theme, but everything what you see in the online demo can be achieved with shortcodes.

Note 2: At the time of writing this, the front editor of the Visual Composer plugin doesn’t work well with the theme (there are a couple of big bugs and conflicts). This will be fixed in the future, but in the meantime just use the regular backend editor, which works 100%.

Below you’ll find a list of all available shortcodes:

1. Row

The row is the base of everything in the Visual Composer.

2. Text Block

This is the most basic shortcode of them all. Whenever you need some text or add a custom shortcode (not available in here), or an iframe, or anything which uses text / HTML, use this shortcode.

3. Separator

This is a simple blank separator. You can choose both a top or a bottom margin so please experiment with this to see what works when. Not everything works all the time, so that’s why there are two options. You can also put a border on the divider.

4. Separator with Text

Adds a custom title (bigger and better for large sections). You can have a title and an optional border.

5. Message Box

A simple text box with three style options.

6. Single Image

If you’re looking to add an image in your text block, please use the WordPress default media uploader for this purpose (see this article for more info: http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages). If you’re looking for standalone images which open more complex links and allow for size definement, use this shortcode.

7. Tabs

This is a simple tabs shortcode, available in two different styles. Each tab can have an icon near the title.

8. Accordion

This is a simple accordion shortcode, available in two different styles. Another cool feature is the ability to choose how it reacts on click (as a toggle or as a regular accordion).

9. Posts Carousel

This shortcode allows you to build up a custom posts carousel. You can choose how many items to appear in the list and also the number of columns. If you choose more items than the columns number you’ll get the carousel manually rotating through the posts.

With the “build query” option you can also build a complex query in order to create unlimited blogs on your theme. You should only work with the post type, because portfolios have their own shortcode. You can choose categories, tags, individual posts, authors, etc.. Using this builder you can really divide your blog posts into custom blogs, each with it’s own functionality.

10. Widgetised Sidebar

If you have some awesome WordPress widgets that can’t be embedded in any place other than a sidebar, you can use this shortcode to choose a custom sidebar (which you create in the Theme Options).

11. Button

This is a simple button, with different styling options.

12. Raw HTML

If you want to add raw html code to the site this is the way to do it (although you can add simple stuff like iframes and tables into the text blocks).

13. Raw JS

I can’t think why would you need javascript added in the body of the site, because of such purposes you should use plugins, hooks and external files, but if you want to go wild with this shortcode, here you go.

14. Flickr Widget

As the title suggests, it is a basic feed from a user’s latest flickr stream.

15. Pricing Tables

Simple pricing table, which offers the ability to have any kind of content inside. The contents of the inner pricing tables are given inside when you create the shortcode, so you’ll just have to duplicate what you see there in order to multiply your columns. I want to write a tip here though – it’s about the way the pricing is created, since it may not be that obvious. Well, in the title property, everything which you write wrapped in a single asterix sign (*content*) will become superscripted, while everything that is wrapped in two asterix signs (**content**)will become subscripted. That’s why in the example you see there you’ll get the following: *$*99**/month**

16. Revolution Slider

Insert a Revolution Slider, which can also be done in the Text Box, via the shortcodes provided by the plugin.

17. Icon Text Block

This is a regular text block which provides an icon available in four different styles. You can also wrap the icon in a link which can point to anywhere you want.

18. Contact Form

A simple Contact Form with various options. If you want a more complex contact form you should use a popular plugin, such as Contact Form 7.

19. Portfolio Carousel

This is just like the blog carousel, but it display posts from the portfolio instead.

20. Promo Box

A simple text box which provides certain background styling.

21. Team Member

A simple team member, which can be used in any other way (it’s basically a text block with an image at the top). The content should be used to insert the social shortcode.

22. Twitter Widget

A simple twitter feed widget. The widget is simple, but the process of using it is a bit complicated because of twitter and their recent API changes. The thing is, you can’t display twitter feeds on your site now without an API key. But it’s not impossible to get this key either… If you go to Settings > Twitter Feed Auth you’ll notice some weird fields. Those are the fields that you actually need to complete and if you give a read to the description you’ll understand what you have to do. I’ve found this discussion on the Twitter forums and i thought that it’s a good resource on this topic:  https://dev.twitter.com/discussions/631.

23. WordPress Widgets

There are 13 default WordPress widgets which can normally be used only in widget areas, but with the Visual Composer you can use them anywhere you want.

But more than this, you also have some shortcodes which are not available in the composer, but can be added easily as regular shortcodes via a Text Block or the classic editor.

All these shortcodes have the ability to select a custom class. This class can be useful for extra editing (there are already some classes available, but you can create custom CSS code and apply it to certain shortcodes by using the custom class field).

24. Gallery

The gallery shortcode is a basic WordPress shortcode which in this theme translates into a slideshow or a grid. You can add a gallery by hitting the “Add Media button” and following the instructions there. The columns do work with this theme, so you can style the gallery exactly like you want.

Another cool feature of this theme is that you can turn a WP gallery into a shortcode, so you can easily insert sliders absolutely everywhere you want! To change a grid gallery into a slider, go to the “Classic Editor” and you’ll see the gallery shortcode like this (just an example):

You need to simply add type=”slider” as a parameter, like this:

If you want to add captions either to the galleries or sliders, simply caption the images that you want to have a caption in the WordPress gallery creator. All images with a caption added in the backend will feature a caption on the site.

25. Self Hosted Video & Audio

While embedded videos (or maps) can be added via iframes (all these sites such as YouTube, Vimeo, Google Maps, offer embedding options via iframes, so there’s no need for custom built shortcodes). So while embedded videos have their own method, you can also add custom videos using the WordPress video shortcode. More info here: https://codex.wordpress.org/Video_Shortcode & https://codex.wordpress.org/Audio_Shortcode

26. Social Icons

The social icons are an easy shortcode which can be added manually like the shortcodes above.

[vc_social_links twitter="http://twitter.com/yourprofile/" facebook="http://facebook.com/yourprofile/" 
target="_blank"]

Each new attribute represents an url, and these are the possible values: twitter, facebook, dribbble, vimeo, linkedin, behance, pinterest, delicious, digg, youtube, cloud, github, flickr, gplus, tumblr, stumbleupon, lastfm, evernote, picasa, googlecircles, skype, instagram, xing, soundcloud, aim, steam, dropbox, mail, rss. All these social icons are available for use in this theme.

Don’t forget the target property which can be either _blank (opens links in new windows) or _self (opens links in the same window, default).

27. Email / Phone Info

Not exactly a shortcode, but i’ve used this in the header and need to write about it here. It’s actually pure HTML code and it looks like this:

<a href="mailto:youraddress@domain.com"><a href="mailto:youraddress@domain.com">youraddress@domain.com</a></a> 
<a href="tel:460123456789">+460 123 456 789</a><span>Your Address Here</span>

28. Lightboxes

To create a ligthbox gallery use WordPress galleries and configure the gallery exactly like you wish. To create a lightbox image, simply put an image linked to the large version and it will transform into a lightbox.

To create an iframe which loads an iframe or use a button to open an image into a lightbox, use these codes:

A. Iframe wrapped in a thumbnail

	<a href="//player.vimeo.com/video/90480436?title=0&byline=0&portrait=0&color=e5493a" data-fancybox-type="iframe"><img alt="" src="http://yourwebsite.com/path_to_thumbnail_img.jpg" /></a>

B. Iframe wrapped in a button

	<a href="//player.vimeo.com/video/90480436?title=0&byline=0&portrait=0&color=e5493a" data-fancybox-type="iframe">Your Label</a>

C. Iframe wrapped in a text link

	<a data-fancybox-type="iframe" href="//player.vimeo.com/video/90444206?title=0&byline=0&portrait=0&color=e5493a">Your Text</a>

D. Image wrapped in a button

	<a  href="http://yourwebsite.com/path_to_thumbnail_img.jpg">Your Text</a>

E. Image wrapped in a text link

	<a  href="http://yourwebsite.com/path_to_thumbnail_img.jpg">Your Text</a>

Using this method above you can use the ligthbox exactly as you wish. These are the available options.

Make sure than when embedding content from video sites and such, you only take the href or src from the embedding code. Don’t put everything in there!

29. Video / audio playlists

Just as you add a video or an audio file to any page, you can now add full media playlists as content. When inserting media, along with the old gallery button you can now see two other buttons, which will guide you through an easy way to add the playlists on your pages.