Installation

The theme is built for use with WordPress 3.9 and we recommend an upgrade to that version before proceeding to the installation process.

For an easy installation and setup process, please check our Video Tutorial on YouTube!

You can always find the latest version of the Documentation online: http://veented.com/docs/north/

1.1. Uploading and Activating the Theme

There are two different methods to install North WordPress theme:

  1. Using the WordPress built-in theme uploader
    1. Go to the 'Appearance / Themes' menu in your WordPress Admin Dashboard:
    2. Click the 'Add New' button located on top:
    3. Click the 'Upload Theme' button located on top:
    4. Press the 'Choose File' button, select North.zip file and click 'Install Now':
    5. When the uploader is finished (might take a moment), click 'Activate Theme'

  2. Uploading the theme files through an FTP client
    1. Using an FTP client (like FileZilla), connect to a server with your WordPress installation
    2. Navigate to /wp-content/themes/ folder and upload the theme folder there
    3. Log in to your WP Admin Dashboard and open the 'Appearance / Themes' menu
    4. You will now see North listed among the other themes. Just activate it!

1.2. Installing Plugins

After activating the theme, you will see a Required Plugins notice:

They are absolutely necessary for the theme to be fully operational. For more information about specific plugin, please check the Plugins section.

NOTE: North Core is a dedicated plugin created for the North WordPress theme (to meet the new ThemeForest requirements) and is required for the theme to work properly.

1.3. Importing a Demo Content

This is an optional step but it helps you create your website faster thanks to pre-built pages, posts and portfolio taken straight from the theme's Live Preview.

Importing the Demo Content:
  1. Go to the 'Tools / Import' menu in your WordPress Dashboard
  2. Choose WordPress and install the plugin if you haven't done so already
  3. Choose the 'site-demo-content.xml' (can be found in /Demo Content/ folder) and press 'Upload file and import'
  4. When it's finished, you will see new posts, pages, portfolio items and menus on your website

NOTE: Some photos visible on the theme's Live Preview are not included with the demo content due to their license type.

1.4. Basic Setup

After you have the theme installed, you will need to make a basic setup:

  1. Go to the 'Settings / Reading' menu and select a 'static page' at the 'Front page displays' setting. Choose your own Homepage or one of the Home1-12 layouts imported with the demo content and a Blog page there:

  2. Go to the 'Appearance / Menus' tab, enter a 'Menu Name' and press 'Create Menu'. If you have imported the demo content - you can go straight to the next step because you already have a menu created.

    Now, just select the "Primary Navigation" checkbox located in the "Theme Locations" part:

    After you are done, just add some pages to your brand new menu and hit Save Menu button. Voila!

    NOTE: For more detailed instructions about creating a custom menu please visit This Section.

2. Theme Options Panel

Theme Options Panel is a place where you can control every aspect of your website with few button clicks. It is accessible from the "North" menu in your WordPress Dashboard:

Each available option there is well described so you shouldn't have any problems with any of them.

2.1. Saving the Theme Options Panel

After you have made some changes in the panel, please don't forget to click the "Save All Changes" 1 button located both in the bottom and top section of the panel.

2.2. Restoring the default settings

To restore the Theme Options default data, simply hit the 'Options Reset' 3 button located at the bottom of the Panel.

2.3. Backing up settings

Backing up the current Theme Options state is truly easy. Just visit the "Backup" 4 tab and follow the instructions. After you create a backup you can then load it anytime later or on a different site location (while migrating servers and so on).

3. Theme Structure

This section covers information about the main theme sections.

3.1. Header

Header is a section of your website that holds the logo image and the navigation menu:

You can configure, change the style and other settings of your Header in the Theme Options / Header menu:

3.3. Page Content

Page Content is a theme's section that holds your post and pages content. You may find more information about it in the Creating Content section.

Footer is a section located at the very bottom of your site. It can hold the copyright data and a logo image:

You can configure general Footer settings in the Theme Options / Footer menu:

4. Creating Pages and Content

This section covers information about the page and content creating process. If you want to go straight to the section about creating a One Pager Homepage, please click this link.

4.1. General Information

There are two ways of creating pages and posts content in North theme:

  1. Page Builder WPBakery Page Builder (former Visual Composer): This is a default way of building pages and posts content. Add rows, columns, content blocks and easily rearrange them with a drag and drop functionality. A full guide may be found here.
  2. Classic Way: Insert your content the classic way - directly to the Content Editor. This method is a default for blog posts.

4.2. Page Settings

North comes with a truly simple page settings management systems that lets you easily choose a page layout, header style, footer color and so on for each page and post invidually:

Those settings are:

  1. Page Title: Disable or enable the title section of your page.
  2. Page Tagline: If Page Title is enabled, you may insert a short summary of your page that will be displayed under the page title.
  3. Header Style: Choose a style of the header for your page.
  4. Header Color: Choose a color of your page header.
  5. Layout: Choose a layout for your page. NOTE! For WPBakery Page Builder (former Visual Composer) pages, it is recommended to use the "Fullwidth" page layout.
  6. Page Content Width: Decide if your page content should be held by a centered container (1170px width) or stretched fullwidth. NOTE! For Visual Composer pages, it is recommended to use the "Fullwidth" option.
  7. Footer Color: Choose a color for your page footer.

4.3. WPBakery Page Builder (former Visual Composer)

Creating page or posts content with WPBakery Page Builder (former Visual Composer) is extremaly easy. To start, click the "Backend Editor" button:

And this should be the effect:

As you can see, basic information is provided directly on the screen. However, let's make it easier! After hitting the "Add Row" button, here is what you get:

NOTE: The Page Builder plugin receives constant updates so the design & layout may be slightly different then what is presented on the screenshot above.

Numbers on the list represent points on the screenshot above:

  • 1 Add element - add a new row or content element to your page
  • 2 Add template
  • 3 Move the row
  • 4 Change the number of columns in the row
  • 5 Add column
  • 6 Edit the row settings
  • 7 Duplicate row along with it's content
  • 8 Delete row
  • 9 Edit the column settings
  • 10 Remove column
  • 11 Add an element to the row/column
  • 12 Add a new element to the bottom of the page
  • 13 Undo action
  • 14 Full screen mode
  • 15 Advanced page settings

Let's add a new content block to our page. Let's click the "Add element" button (or the plus sign on a column area). A popup window will show:

Simply choose a content block you would like to place on your page and click it. A new popup window will show up with block specified settings. It's that simple.

NOTE: As you can see, you may search blocks by name.

And this is an example view after adding few content blocks:

After you are done adding content to your page, simply hit the "Update" button located on the far right. Congrats! You've just created your first page using WPBakery Page Builder. Wasn't it simple?

4.4. WPBakery Page Builder Templates

North comes with prebuilt WPBakery Page Builder (former Visual Composer) templates so you can load the layouts straight from the theme's Live Preview directly into your website and then just adjust their content for your needs. Isn't that a time saver?

NOTE: Templatera templates are automatically imported with theme's demo content so if you have already loaded it, you don't need to separately import the file below.

To load templates, go to the "WPBakery Page Builder" (1) menu, click on the "Templatera" tab and press the "Choose File" button. After the window popups, choose the composer-templates.xml file located in the /Demo Content/ folder. After it's done, hit the "Save Changes" button. Voila!

How to use templates? Simple edit/create a page or post, enable the "WPBakery Page Builder" (Backend Editor) mode and either press the "Templatera" icon or add a new block called "Templatera" where you can select the specific template to be used.

4.5. Homepage

For a detailed guide how to build a One Pager Homepage, please visit this section.

4.6. Portfolio

Portfolio is a page where portfolio posts are being displayed. Check the Creating Portfolio section for more information.

4.7. Archives/Search

Archives and Search are special type of WordPress pages for search results and displaying posts by a certain category, tag, date or author. You can change their displays settings in the "Theme Options / Archives" menu.

5. Creating Homepage (One Pager)

The Homepage is a page built fully with the WPBakery Page Builder (former Visual Composer) plugin so it is necessary to have it installed.

To avoid a process of building this page from scratch, you may import the theme's demo content and you will get instant access to all of the 12 example homepages straight from the theme's live preview. If you would like to build one from scratch or simply learn the structure of it, please keep reading.

To get started, please create a new page and set it's Page Template to "Homepage (One Pager)":

Next step is to enable the WPBakery Page Builder (former Visual Composer) for the page by clicking the "Backend Editor":

After enabling it, you will get this view:

The basic part of a One Pager is the Row element. To add one, please click the big "+" plus icon on the top left and from the popup window select the "Row" element. After clicking it, a new section will appear in your editor. To add a new element inside, simply click the Plus button inside and choose an element to be placed.

One Pagers are known from a nice navigation bar scrolling effects. But how do they recognize which section should the About or Contact element refer to? That's why you need to use the Row Settings. To open them, simply click the Pencil icon on the right of the row element:

A popup window will appear:

Row ID is the field to type/insert your section's unique ID used later for your site navigation.

And basically - that is all. One Pager is a page with multiple rows like that, each (or not, like written below) with it's own, unique Row ID and invidual content. After creating your One Pager, please proceed to the Creating Site Navigation section.

NOTE: Please remember to set the Row ID of your first row/section to "first".

NOTE 2: You don't have to set a unique Row ID for each of your One Pager rows. Let's say your homepage structure is like following:

  • Revolution Slider - Row ID: first
  • Call to Action - no Row ID
  • Icon Boxes - no Row ID
  • Testimonials - Row ID: comments

The site navigation scroller script is smart enough to recognize that sections from Revolution Slider to Icon Boxes are ONE.

6. Creating Site Navigation

Because of the One Pager nature of the theme, creating the site navigation may take few seconds more than if built for a standard theme.

6.1. Creating New Menu

To get started, please visit the Appearance / Menus, type your 'Menu Name' and press 'Create Menu':

After it's created, please assign it to "Primary Navigation" theme location at the bottom of the site and hit "Save Menu":

Now we are ready to start adding navigation elements.

6.2. Adding Menu Elements

There are two types of menu elements to be added:

  • OnePager row links - linking your Homepage (One Pager) rows/sections.
  • Standard Pages/Posts - links to your other site pages and posts

To add a new OnePager link, please click the "Links" menu on the left side, type in the Link Text (row/section name) and the URL:

As you can see, you may use the "http://frontpage_url/" shortcode and the theme will dynamically replace it with your Front Page URL (set in Settings / Reading menu). You may also insert a full page URL which will allow you to create separate One Pagers - yes, it's possible! The "home" part is the unique Row ID of your Visual Composer row. After you are done typing the name and URL, click "Add to Menu" button.

To add a standard page/post link, just click the "Pages" menu on the left and choose pages to be added to your menu:

After you are done adding your new pages, don't forget to click the "Save Menu" button!

7. Creating Portfolio

7.1. Adding Portfolio Posts

Before creating the portfolio page itself, you will need to create some portfolio posts first. To do so, simply visit the Portfolio / Add new menu:

A super basic portfolio post requires the Post Content, Featured Image, Post Categories fields to be configured.

After you import the demo content or Templatera templates, you will be able to choose from one of three pre-built single portfolio post templates. Just enable the "Backend Editor" and choose Single Portfolio 1 template. This is what you should get:

NOTE 1: If you cannot see the "Backend Editor" button, please make sure that you have the WPBakery Page Builder (former Visual Composer) plugin installed and configured for portfolio posts, see guide.

NOTE 2: The Page Builder plugin receives constant updates so the design & layout may be slightly different then what is presented on the screenshot above.

As you can see, each field is very intuitive. Here is a list:

  • 1 Post Content built with WPBakery Page Builder (former Visual Composer)
  • 2 Post Categories - those are necessary for the filtering menu on the portfolio page to work. Simply add few by clicking the "Add New Category" button.
  • 3 Featured Image - the post's thumbnail is based on the post's Featured Image so it is necessary to upload one.

Since the 1.1 Theme Update, a new metabox is available under the Main Content area called "Portfolio Post Settings":

You can select here if your Portfolio post can be expandable in the Portfolio Grid (if available) or if the thumbnail should link to an invidual portfolio post page opened in a new window/tab

7.2. Portfolio Page

A portfolio page is simply a page with the Portfolio Grid section built with Visual Composer. You may also use a pre-built templatera template "Portfolio Page".

8. Blog Posts

Here is a basic view of the blog post in the dashboard:

As you can see, each field is very intuitive. Here is a list:

  • 1 Post Content - you can insert any text content here including shortcodes of course.
  • 2 Post Format - easily choose a format for your post. Each option will open an extra meta box for a specific type of a post, i.e. selecting the "Gallery" format opens a "Post Gallery" metabox that will let you create a gallery for your post.
  • 3 Post Categories - the post categories.
  • 4 Post Tags - the post tags.
  • 5 Featured Image - post thumbnail.

8.1. Standard

This is the simplest blog post format. The screenshot in the section above presents a standard blog post.

To create a Gallery type post, simple select the "Gallery" option in the "Post Format" metabox:

It will open a new "Gallery Settings" metabox:

To add images to the gallery, simply click the "Create Gallery" button. In the popup window click the "Add to Gallery" button:

Here you upload new images or select the existing from your media library:

After you are done, click the "Add to Gallery" button and then "Update Gallery". New thumbnails will appear in your "Gallery Settings" metabox:

After you have your gallery created, simply choose it's type in the "Gallery Type" select menu and Publish the post!

8.3. Video

First of all, select the "Video" option in the "Post Format" metabox. A new "Video Settings" metabox will open where you can insert a URL/link to your video:

A full list of supported sites can be found here.

9. Theme Customizer

One of the coolest North features is definitely our very own Theme Customizer. It is accessible directly from the Theme Options / Customizer tab:

Every change that you make appears immediately on a small preview on the right!

These tabs: Header, Page Title, Content and Footer don't need explanation - you can change main color aspects of selected theme sections. Rest of them are described below.

9.1. General

In the General tab you can change main settings of the theme looks like the Accent Color or Background Color. You can also choose one of the predefined styles either for Accent Color or a whole theme color scheme:

Changing a color scheme of your site was never easier!

8.3. Typography

In the Typography tab you can change font families for Headings and Parapgraphs, their weight and invidual font sizes:

Whole Google Font library accessible in a single mouse click!

10. Shortcodes

North comes with many shortcodes that will let you build any page content in no time. There are two ways to access shortcodes and each is explained below.

10.1. WPBakery Page Builder

The best and simplest way to manage your pages or posts content is WPBakery Page Builder (former Visual Composer). Most of shortcodes are available as element blocks that you can easily reconfigure, resize and modify at any time, without a need to insert them from scratch. More about WPBakery Page Builder (former Visual Composer) can be found in this section.

10.2. Quick Shortcodes

All simple shortcodes are easily accessible via the Quick Shortcode menu. While in the Page/Post Content Editor, click the double bracket icon and a dropdown menu will open:

There you can select one of numerous shortcodes available that will be immediately added to your editor's content.

11. Sidebars

North fully supports widget locations (sidebars). There are default ones that come automatically upon theme activation and with the Sidebar Generator you may create as you only need.

You can add widgets to your sidebars in Appearance / Widgets tab:

North comes with default sidebars for mayor locations:

Those are:

  1. Default Sidebar - this is a default sidebar set for any page that uses a "Sidebar" layout including blog posts and page.
  2. Archives/Search Sidebar - sidebar displayed on an Archives and Search results page

With the Sidebar Generator, you may create as many sidebar locations as you only need. It's accessible via the Theme Options / Sidebars menu:

To create a new sidebar, simply click the "Add new Sidebar" button. After you are done setting a name, Save Theme Options and visit your Appearance / Widgets menu. You will see your brand new sidebar listed among the theme's default sidebars!

12. Plugins

North comes with a number of plugins including premium ones like WPBakery Page Builder (former Visual Composer), Templatera, Revolution and Layer Sliders. Three plugins are required: North Core, WPBakery Page Builder (former Visual Composer), Templatera, Contact Form 7 and Revolution Slider. After you activate the theme, you will get a notice informing about it:

After clicking the "Begin installing plugins" button you will be moved to the "Install Plugins" menu where you can easily install each required plugin:

NOTE 1: North Core is a dedicated plugin created for the North WordPress theme (to meet the new ThemeForest requirements) and is required for the theme to work properly.

NOTE 2: Since WordPress 5.0, Gutenberg is now a default page/post content editor. If you would like to bring back the old editor, please install the "Classic Editor" plugin.

12.1. WPBakery Page Builder

WPBakery Page Builder (former Visual Composer) plugin can be installed via the Appearance / Install Plugins menu. You may also install it manually by uploading the js_composer.zip file from the /North/framework/plugins/lib/ folder.

After you install and activate the plugin, please visit the "WPBakery Page Builder / Role Manager" menu and select the "portfolio" post type to enable the Page Builder for portfolio posts:

Plugin documentation can be found in the "Plugins" folder of this theme package.

12.2. Revolution Slider

Revolution Slider can be installed via the Appearance / Install Plugins menu. You may also install it manually by uploading the .zip file from the /North/framework/plugins/lib/ folder.

To import sample sliders, open the Revolution Slider panel and click on the green "Import Slider" button. Choose the /demo-content/sliders/revolution-slider.zip file and click the blue "Import Slider" button. That's all!

Plugin documentation can be found in the "Plugins" folder of this theme package.

12.3. Layer Slider

Revolution Slider can be installed via the Plugins / Add New menu. You may find the plugin's .zip file in the /Plugins/Layer Slider/ folder inside the theme's downloadable package.

To import sample sliders, open the Layer Slider panel, click on "Choose File" button (in the Import/Export window) and select the /demo-content/sliders/layer-slider.zip file and click the "Import" button. That's all!

Plugin documentation can be found in the "Plugins" folder of this theme package.

13.4. Contact Form 7

Contact Form 7 is a free plugin and also can be installed via the Appearance / Install Plugins menu.

Plugin documentation can be found Here.

13.5. Classic Editor

Since WordPress 5.0, Gutenberg is now a default page/post content editor. If you would like to bring back the old editor, please install the "Classic Editor" plugin.

13.6. WPML

WPML is the WordPress Multilingual Plugin that makes it easy to build multilingual sites and run them.

You can download the plugin from the official website:

Plugin documentation can be found Here.

14. Theme Hooks

For a full list of available theme hooks, please visit the article on our Support Site: Link.

15. Theme Updates

We constantly release theme updates with new features or bug fixes. With North, you don't need to worry about having to redownload all theme files from ThemeForest again and then uploading them manully to your server over and over again. The theme fully supports the marketplace's official Envato Market plugin that let's you easily upgrade your theme without leaving the Dashboard!

All you need to do is install the plugin (it is located in the /Plugins/Envato Market/ folder or you can download the latest version here) and follow the instructions located in the "Help" tab of the plugin page (Envato Market tab in your WordPress Dashboard).

16. Sources and Credits