Svea Documentation


Theme Installation

Welcome to Northeme Theme Documentation!

This documentation covers installing and setup your theme and how to use theme features. Assuming that you already have a domain name (E.g. example.com) and web hosting service that WordPress has been installed on it.

If you’ve already installed WordPress, sign in to northeme.com and head to My Account page in order to download your theme.

My Account page lists the themes you’ve purchased. Click Download button to access theme related files and documentation.

Click Download Theme File to download the theme as a zip file. Theme License / Product Key should be entered to Northeme > Theme Update section in order to receive auto-updates.

Option 1 : WordPress Theme Installer

The most convenient and easiest way to install your theme is to use WordPress Theme Installer.

  1. Sign in to your WordPress’ admin area and go to Appearance > Themes. You’ll find the list of themes that have already been installed to your WordPress. Click to Add New button which is located right beside the Themes title.
  2. Next page will be listing the free themes that are being provided by WordPress along with Upload button that allows to upload custom themes. Click to upload button and select the theme zip file that you’ve downloaded from My Account page.
  3. Once the installed, you’re supposed to activate it to start using. Go back to Appearance > Themes and you should be able to see your theme in the installed themes list now. Simply click on Activate button to finalize installation.

Option 2 : Installing via FTP

This is less convenient yet another easy way to install your theme.

Some web hosting companies may keep file upload limit as low as 2MB and therefore you may not be able to install theme file via WordPress Theme Installer (You may ask your hosting provider to increase upload limit).

But there is nothing worry, you can still install the theme via FTP.

  1. First thing you need is your web hosting’s FTP credentials to connect FTP. You can ask this to your web hosting provider if you don’t know it yet.
  2. Afterwards, you’re supposed to use a FTP client to access and browse your website’s FTP content. We recommend to install Filezilla which is multiOS supported and free FTP client :
    https://filezilla-project.org/
  3. Connect to your website’s FTP through Filezilla and go to “wp-content/themes” folder. Upload the unzipped theme folder (unzip the downloaded theme zip file) into themes folder.
  4. Once the entire theme folder is uploaded, you’re supposed to activate it. Go back to Appearance > Themes on your WP dashboard. You should be able to see your theme in the installed themes list now. Simply click on Activate button to finalize installation.

Important : Installation via FTP may require to set file permissions to 755 (read / write). Check WordPress Help for more information.

Theme Updates

Your theme comes with auto-updater features. You’ll receive a notification on your WordPress Dashboard whenever a new theme update is available. New updates can be installed at Northeme > Theme Update section.

In case of having problems with auto-update due to theme requirements failure or other reasons, you can also update the theme and plugins manually.

In order to update manually, you’re supposed to download the latest version of your theme and bundle plugins (if necessary) from My Account page on northeme.com.

Before installing the latest version, you must remove the theme from Appearance > Themes on your dashboard. Removing theme will NOT cause any data loss since the website content is being stored in MySQL database. Afterwards follow the same steps of theme installation to update your theme.

Recommended Plugins

Certain plugins help to have a better experience with your theme. Make sure that you checked out Recommend Plugins section of this documentation and install the plugins according to your needs before getting started.

Installing Live Demo

Installing live demo allows to install theme live demo content on to your WordPress.

Theme live demo has been provided as XML file. You can download it from My Account page on northeme.com by clicking on Download button and select the Live Demo XML.

In order to install XML file, select Tools > Import from your WP dashboard and select WordPress. Install WordPress Importer plugin if WordPress asks you to install and it hasn’t been installed yet. Upload XML file and import everything.

Leave “Download and import file attachments” option unselected if your hosting doesn’t allow you to download large files.

Registering Theme

Theme registration is important to get automatic theme updates.

Head to Northeme > Theme Updates section and enter your Northeme account e-mail and product key. Once it’s set, you’ll be notified whenever a new update released and you’ll be able to update your theme by single click.

If you need any further information about installing themes please see the following article :
http://codex.wordpress.org/Installing_WordPress

Theme Options

Northeme Options panel is located at Northeme menu on your dashboard. You can manage basic and advanced theme settings such as branding, website layout, sharing etc.

Creating a Page

Pages can be created / managed at Pages menu on your dashboard. Pages is one of the primary sections that allows to build your website content.

Page Templates

Click Add New page to create a new page. Some of our themes may offer exclusive page templates other than Default Page.

  • Default Page is a full width page versatile template and it’s the template that you’re supposed to use in most cases.
  • Blog template is blog posts listing page. Select this template if you want to create a page that displays all blog posts.
  • Works is also similar to Blog template and allows to create a page that lists all Portfolio posts.
  • About / Contact (NEW) allows to build a contact, about or team members page. You can use all content together or build individual pages.

You’ll also find the following options in Page Attributes :

  • Enable Sidebar option allows to activate the sidebar for a Default page or Blog page. Sidebar widgets can be managed at Appearance > Widgets.
  • Page titles are disabled by default. Display Title option allows to display the page title on header.

Bottom Editor

Bottom Editor is available yet optional for Blog and Works templates in order to display content beneath the posts list.

Excerpt

Page Excerpt field can be used for displaying content on the page header. If you cannot see excerpt field, activate it by clicking Screen Options button on the top right and opt-in for excerpt.

We recommend to use a rich text excerpt plugin such as :
https://wordpress.org/plugins/rich-text-excerpts/

Custom CSS

Add Custom CSS rules that will be applied to this specific page only.

About / Contact Template

In order to use this template, select About / Contact from Page template. Once it’s selected, Team and Contact panels will appear.

Team panel allows to add single or multiple elements and reorder them. Each element allows to enter name, job title and description. You can use a single element for building an about page or use multiple elements to create a team members page. Also multiple columns option is available to change layout type.

Contact panel allows to add Google Map, contact form and address info. It’ll appear bottom part of the page if activated.

Each section is optional and can be used altogether to build a common page for about / contact info as well as build individual pages.

Blog

Blog posts can be managed under Posts section at dashboard.

Blog requires a posts listing page. If you haven’t created a blog posts listing page yet, go to Pages and create a page with Blog Template.

Creating a new post is pretty straight-forward process by setting title and content.

Excerpt and More Tag

Excerpt field and More tag give you more control over the content for posts listing page by allow you to alter post content. You can either use Excerpt field to display a summary of main content or use More tag (See Recommended Plugins section) to limit the main content.

Featured Image / Video

Three options provided : Thumbnail, Animated Gif and Embed Video / Slider

Thumbnail is default option and also provides optional hover image field. If hover image uploaded, it will show up on hover action.

As for Animated GIF, it’s provided separately in order to display unprocessed original image.

Video supports Youtube, Vimeo URL or embed code directly. You can also use built-in slider shortcodes on this field to display slider as featured image.

Blog View Options

Blog View Options can be managed at Northeme > Post Layout. You can manage posts listing page settings such as post limit, layout, pagination type etc.

Works

Works post types comes with your theme to build a portfolio.

In order to list Works posts, you’re supposed to create a posts listing page. If you haven’t created yet, add a new page with Works template at Pages.

Works located right below Posts on your dashboard.

Use Add New Project button to create a new project. Categories are dedicated taxonomy of Portfolio.

Re-Order menu allows to re-organize category and posts ordering by drag&drop interface.

Add New Project

In order to create a new project, go to Add New Project and set a title for your project. Excerpt can be used to define for a sub title and also posts listing page.

 

Composition

Add / Edit Project page offers an exclusive meta box called Composition (Media).

You can use visual editor to build content yet Composition section aims to make easier adding, re-ordering and arranging project assets through a series of options :

  • Insert : This is a dropdown menu includes Image, Video, Text and Slider to add media into the composition. Multiple image upload is allowed.
  • Lightbox : Switching on this option activates lightbox for each image in the composition

Also each element in the composition has individual options panel :

  • Column : By default images will be displayed in maximum width. If you want to display more than one object in a row, this option allows to display the element in Default, 1/2, 1/3, 1/4, 2/3 measures.
  • Image Caption (Image) : Display caption below the image
  • URL (Image) : Assign an URL to image
  • Single row : You may prefer to use smaller column type than default such as 1/2 or 2/3. If this option is activated, this particular will clear other elements coming before and after regardless their column type.

Featured Image / Video

Three options provided : Thumbnail, Animated Gif and Embed Video / Slider

Thumbnail is default option and also provides optional hover image field. If hover image uploaded, it will show up on hover action.

As for Animated GIF, it’s provided separately in order to display unprocessed original image.

Video supports Youtube, Vimeo URL or embed code directly. You can also use built-in slider shortcodes on this field to display slider as featured image.

Works View Options

Works View Options can be managed at Northeme > Posts Layout. You can manage posts listing page settings such as post limit, layout, pagination type etc.

Shop / Woocommerce

Your theme supports WooCommerce Free E-Commerce Plugin. You can have the benefits of WooCommerce Plugin by installing it :
https://wordpress.org/plugins/woocommerce/ 

WooCommerce related pages should automatically be created by the plugin. Plugin settings can be managed at WooCommerce menu on your WP dashboard.

For WooCommerce instructions and support please visit the URL below :
https://support.woothemes.com/hc/en-us

Navigation Menus

To create a navigation menu, go to Appearance > Menus and click Create a New Menu link.

You’ll find accordion menu that contains pages, posts, categories, links (custom URL) helper menus to add items to your menu.

Once a menu is created, it must be activated from Display Location. Opt-in for Northeme Main Menu in order to activate it.

Your theme offers Classic Menu option that can be setup at Northeme > Layout. Please note that Classic Menu does NOT offer multi-level menus.

As for multilevel menus, parent menu cannot have an URL. Clicking a parent menu shows sub menu items. Therefore, you may prefer to add a clickable sub item menu. Simply use pound sign (#) as Custom Link’s URL in order to use it as parent menu.

Example :

Portfolio
– All
– Graphic Design
– Illustration

All sub menu item should be added since Portfolio is not linkable item

Wordpress offers extensive options to add new items to your menu. To expand these options, click on Screen Options button that is located at top right of the screen and opt-in for the sections.

For more information about custom menus, check out the following link :
http://codex.wordpress.org/Appearance_Menus_SubPanel

Widgets / Sidebars

Sidebars are tools to add widgets to your pages.

Your theme offers specific widgets areas and they can be managed at Appearance > Widgets on dashboard.

Sidebar Widgets

Default page, Blog and Portfolio sidebars are available at Appearance > Widgets section. Widgets can be added by drag&drop to build sidebar content.
In order to activate a sidebar for a page, you must activate Enable Sidebar option for that specific page. This option can be found on Add / Edit page at Pages.

 

Footer Widgets

Northeme > Theme Options > Website Layout > Footer Widgets section provides an option, Footer Widget Columns, that allows to set number of widget columns. You may change it to divide footer equally. For example 2 columns will divide footer two columns, and Footer 1 & Footer 2 location widgets will be used only.

Setting up Front Page

Visit Settings > Reading page on your dashboard, switch to A static page at Front Page Displays. Select a page from Front Page select box and click Save Changes to set it as home page / front page. Leave Posts Page option unset.

Please note that in order to set a page as home page it must be present at Pages. That being said automatically generated pages such as archive, category or single posts cannot be set as homepage.

Sliders & Galleries

 Built-in Sliders

Built-in Sliders is lightweight solution to build simple sliders.

Slider / Gallery Manager is located at Sliders menu on your dashboard. You can create unlimited sliders and use them via shortcodes.

Create a New Slider / Manage a Slider

Click Add New Slider button or Edit link of a present slider to build a slider.

Slider editing page offers Image and Video buttons to add media to the slider. Embed videos allowed from 3rd party video providers such as YouTube, Vimeo etc. along with WordPress video player for self-hosted videos.

Slider images will be displayed in a lightbox if an image is clicked. Disable Lightbox option allows to disable this action.

Once a slider created, you can add it to any post or page’s visual editor via shortcode. Corresponding shortcodes can be seen on listing page and slider editing page. E.g.

Slider Settings

Slider settings can be managed at Northeme > Plugin & General Options section. Animation speed, icon speed and various settings can be adjusted.

Post & Category Re-ordering

Portfolio and Blog posts can be reordered at Re-Order page which is located under the corresponding post type menu (E.g. Portfolio > Re-order).

Post re-ordering is not being provided for blog posts and they will be re-ordered by date descending as in default.

Categories and taxonomies can also be re-ordered in this section.

Drag&Drop Ordering

Drag&drop your posts and categories to re-order them. Custom Ordering must be selected to apply custom ordering settings. Otherwise select Order by Title, Order by Date (descending) or Order by Date (ascending).

Blog posts cannot be re-ordered.

Translation / Multi-Language

Your theme is ready to translate. Default language files are located in languages folder inside the theme folder. We highly recommend using a child theme and copy languages folder into child theme directory. Using a child theme is required to maintain your changes after theme updates. See Child Theme & Customizations section of this documentation.

In order to activate the new language, rename language files with WordPress Locale code (E.g fr_FR.po and fr_FR.mo). Then, change Settings > General > Site Language to your language and WP_LANG code to wp-config.php file :

define ('WPLANG', 'fr_FR');

 

To translate default language files, you’re supposed to use a 3rd party editor. POEdit is most popular and free option to edit po / mo files:
http://www.poedit.net

As a on-site solution, Loco Translate WordPress Plugin is a great solution to translate the theme from your dashboard instead of working with language files :
https://wordpress.org/plugins/loco-translate/

 

Multilingual Plugins

Our themes are fully compatible with WPML multilingual plugin.

WPML

WPML is one of most popular WP multi-language plugins can be downloaded from WPML website :
http://wpml.org

By default, all post and pages are available to translate and no action required. As for custom post types and particular fields :

  • Custom Post Types : Portfolio and other post types created from Northeme > Appearance > Custom Post Types must be activated first. Go to WPML > Translation Options and select “Translate” for the post types and taxonomies under Custom Posts and Custom Taxonomies sections.
  • If you wish to translate fields such as Tagline, Footer text that are located under Northeme menu at your WP dashboard, you’re supposed to use shortcodes. Your theme offers WPML translation shortcodes – [wpml_translate] – to add multiple translation into those fields.For example :
    [nor_translate lang=’en’]English Footer Text[/nor_translate][nor_translate lang=’es’]Spanish Footer Text[/nor_translate]

 

 

Child Theme & Customization

IMPORTANT :

  • Never modify theme files directly. Always use a child theme to make modifications on theme files to maintain the changes after theme updates.
  • Unfortunately we cannot offer support for customizations. Theme issues caused due to customizations are out of the scope for theme support.

Northeme Framework offers a section for adding custom CSS and Scripts at Northeme > Theme Options > Custom CSS & Scripts.

You can add custom styling rules into Custom CSS to override default theme stylings. Although we offer extensive modifications features at Northeme > Theme Options, it may help for further modifications. You can use Google Chrome’s Inspect Element feature to find out specific classes.

Also, you can install and use CSS modification plugin, SiteOrigin CSS :
https://wordpress.org/plugins/so-css/

Custom Scripts field is offered in order to add scripts into <head> tag. That allows to include any 3rd party or your own scripts to the page :

/* Typekit import */
<script src="//use.typekit.net/XXXX.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

/* Including your custom JS or CSS files without using a child theme */
<link rel="stylesheet" href="/path/to/my_css_file.css" type="text/css" media="all" />
<script type="text/javascript" src="/path/to/my_js_file.js"></script>

 

Using a Child Theme

Download blank child theme template from My Account section on northeme.com and upload it into wp-content/themes folder. Before activating it, make sure that you’ve made the following changes :

  • Child themes cannot work without a parent theme. For example, if you want to install a child theme for Workality Plus, Workality Plus theme must be located in wp-content/themes folder.
  • Since child themes are dependent to a parent theme, you’re supposed to declare the parent theme folder name in child theme’s style.css file.

 

Check out following example :

Default child theme style.css file content should be looking as follows.
Make sure that Template value points to parent theme folder name (E.g. workality-plus-master or reframe-plus-master etc.)  :

/*

Theme Name: Workality Child Theme
Theme URI: http://northeme.com/
Description: Child Theme for Workality Theme
Author: Northeme.com
Template: workality-plus-master
Version: 0.1.0
*/

Shortcodes

Shortcodes are helpers to add rich content to text editor. Your theme comes with several useful shortcodes and can be added through Shortcodes button which is located on text editor panel :

 

Shifted Content

Shifted content wrapper allows to shift its content to the left, outside of the main container.

Simply add shifted shortcode tags before and after the part of content. No additional settings / values needed.

[shifted]

My Content / image / video etc. here.

[/shifted]

 

 

Column Shortcodes

Your theme is built with 12 column grid system and Column Type option allows to choose how many columns will be displayed on a row. Half, Two Third, One Third options provided along with standard column count.

Google ChromeScreenSnapz040

 

Backup & Transfer

Backup

There are dozens of free backup plugins for WordPress out there yet we recommend UpdraftPlus which is one of the most popular backup plugin for scheduled backups :

https://wordpress.org/plugins/updraftplus/

 

Transfer

As for transferring / cloning your entire website, there are several WordPress backup / transfer plugins to make it. Duplicator is a free and easy-to-use option :
http://wordpress.org/plugins/duplicator/

Once the plugin is activated, go to plugin’s page at your dashboard and create a backup & installer. Afterwards upload installer file (install.php) and backup zip file to the root of your new web hosting and browse install.php with your favorite browser. Simply follow the instructions to complete cloning process. More information can be found at Duplicator’s website.

Please note that Duplicator may fail if you have large files to transfer. Although we suggest using Duplicator since it might be successful in most cases, we cannot offer support for transfer issues.