Thank You!

Thanks a lot for purchasing Oglin theme.

If you have any questions that are beyond the scope of this help file,
please browse our knowledge base.

Version: 1.0.0
Released: February 1st, 2020
By: WolfThemes

WordPress Installation

A working and up-to-date version of WordPress must be installed before you can install Oglin. If you need help installing WordPress, follow the WordPress Codex, or check our knowledge base.

Server Requirements

Consideration

Most of the issues users may experience are related to Server Requirements not respected.

Issues you may encounter, such as demo content importing fails, menu partially not saving, page not rendered correctly and other oddity are related to excessively low PHP configuration limit settings of the server.

Many hosts will try to keep the limits low to save their resources. These values are typically lower if you choose a low budget host.

System Status

Before starting, right after installing the theme, check your System Status.

The most important values you need to be compliant are:

  • WP Memory Limit: the WP Memory Limit is the maximum amount of memory (RAM) that your site can use at one time. When you reach your Memory Limit, you’ll encounter a fatal error. (read more)
  • Max Input Vars: the PHP Max Input Vars is the maximum number of variables your server can use. Lower values can create issues such lost data in your Theme Options, Widgets disappear etc. (read more)

Installation

WordPress Installation

  1. Extract the archive package downloaded on ThemeForest.
  2. In your WordPress admin panel, go to "Appearance" > "Themes".
  3. Select the "Install Theme" tab at the top panel.
  4. Choose the "Upload" option and upload the oglin.zip file.
  5. Once you activate Oglin, you will be redirected to the "Welcome" page that features a System Status table.
    There you will see a button to install and activate the required & recommended plugins. If you see any red message about the Server Requirements not fulfilled please fix.
  6. You must install all the required plugins if you want to import the demo data.
  7. If you want to import the demo data, it is recommended to decline all plugin page installations to avoid duplicate content.

FTP Installation

  1. Extract the archive package downloaded on Themeforest.
  2. Via your FTP client, put the "oglin" folder in wp-content/themes/.
  3. Once the upload is complete you can activate Oglin theme.
  4. Follow the instructions from the paragraph above starting at point 5.

Save some time and use our custom installation services.

Get Installation Services

One-Click Demo Import

Oglin includes a 3rd party plugin (One-Click Demo Importer), to allow you to import the demo content easily. It is the most used plugin for this purpose.

IMPORTANT: Before attempting to import the demo content, as mentionned in the "Before Getting Started" section, be sure that your server fulfills the minimum Server Requirements.

Successfully importing the data into WordPress is not something we can guaranty at 100% for all users. There are a lot of variables that come into play, over which we have no control. Most of the time, the main issues are bad shared hosting servers.

After installing and activating the theme, you will have a "blank" version of the theme with the defaults options and mods.

Importing the demo data is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch. In Oglin, you can install the whole demo content through the "Import Demo Data" panel.

First of all, you must install all the required plugins after theme activation. You may be invited to install default plugin pages. You must decline all plugin page installations to avoid duplicated content. Once all your plugins are installed, go to the "Appearance" > "Import Demo Data" panel, choose your chosen demo and click the "Import" button and wait, it can take a few minutes.

Note that, as the demo content is in English, the Site Language must be set to "English (United States)" in the "Settings" > "General" panel . You will be able to chage it afterwards.

If you any issue importing the demo content using the "One-Click demo Import" plugin, please check the plugin troubleshooting documentation.

Import Demo Content Manually

First download the demo data files here.

Upload the zip folder and extract it using an archiver (winrar, winzip etc..). You will find 3 files and a folder in the archive.

  1. content.xml - The file containing all pages, medias etc...
  2. customizer.dat - The customizer settings
  3. widgets.wie - The widgets settings

Import the content

  1. In your admin panel, go to "Tools" > "Import"
  2. Choose the WordPress option (last one)
  3. Select the content.xml file
  4. Hit the "upload file and import" button and follow the instructions
install WP Importer
Install WordPress Importer
install WP Importer
Upload content.xml file

Note that some of our demo data files are huge and you may encounter issues if your server settings are too low, especially max_execution_time, post_max_size,  and upload_max_filesize settings (read more).

Import the customizer settings

On theme activation, all Customizer Mods are automatically set just like the demo. Still, you can reset them or upload a different set of Customizer Mods using Customizer Export/Import plugin.

  1. In your admin panel, go to "Appearance" > "Customize" or click on the "Customize" link in your frontend admin bar
  2. Navigate to the "Export/Import" tab
  3. Click the "browse" button and select the customizer.dat file
  4. Hit the "Import" button
install WP Importer
Import customizer.dat file

Import the widgets

To import the widget settings you need Widget Importer & Exporter plugin.

  1. In your admin panel, go to "Tools" > "Widget Export & Import"
  2. Select the widgets.wie file
  3. Hit the "Import" button
install WP Importer
Import widgets.wie file

Import Revolution Sliders

First download the demo data files here.

You will find the demo sliders in the "revslider" folder.

To import a slider, navigate to your admin Slider Revolution panel, click on the "Import Slider" icon and select your chosen slider zip file from the "revslider" folder.

import slider

Theme Update

To update Oglin automatically, you can install Envato Market plugin.

You will be invited to install and activate this plugin on theme activation, so it is recommended to install it if you want to update the theme automatically.

Once the plugin is installed, simply go in the Envato Market admin panel and follow the instructions to connect your Envato account.

You will get notified in your admin dashboard every time a new version of Oglin is available. Simply follow the link in the notification message and update the theme is a single click in the Envato maket plugin page.

install WP Importer
Update the theme

Important note

Envato Market plugin is a 3rd party plugin developed by the Envato team and we have no control over its development.

Users have reported issues we this plugin recently. In waiting for this to be resolved, you can update the theme manually.

  • Go to your ThemeForest download section and re-upload the theme as you did when you purchased it.
  • Navigate to your admin "Appearance" > "Themes" panel
  • Desinstall the theme
  • Re-install the new theme version

You won't lose any of your content or settings by updating the theme this way.

Home

To set a page as "Front page", go in the "WordPress Settings" > "Reading" panel and set the desired page as "Front page".

Create a Custom Home Page Header

Oglin offers the possibility to hide the default page header on certain pages using the header Options below your editor. This way, you can set your own custom page header using WPBakery Page Builder or even use Content Blocks to create a custom header for your page.

Full Screen Section

To create a full screen header section for your home page, insert a WPBakery Page Builder "Row" in your page and set the "Full height" option in the section setttings.

Set the background you want for your section and insert any element you want in the row.

Home Page Slider

If you prefer a slider as home page header you can use our "Advanced Slider" WPBakery Page Builder element or the "Revolution Slider".

In this case, no need to set your first section to "Full Height". You will be able to set the slider height in the "Advanced Slider" or "Revolution Slider" settings.

If you want your slider to take the full space in your section, select the "Full Width" option for your row.

We will see more page builder tricks in the WPBakery Page Builder section.

Blog

By default, when no pages are set in the WordPress "Settings" > "Reading" panel, your last posts will be displayed on your front page.

But here, we want to set a specific page for our blog.

To do so, create a page with no content and assign it as "Posts page" in the "reading" settings.

This particular page will used to display the blog archives, categories, tags etc...

Post formats

The Oglin blog supports all WordPress post formats. Post Formats allow you to display your posts differently depending on your content. In you post editor page, you can select which post format you want to use in the "Format" box, usually, at the right of your text editor.

Standard

It is the typical WordPress post. It will display the title, the featured image (if set) and the content below.

Image

A single image. The featured image will be used, and, on click, will open its full size version in a lightbox.

Gallery

The theme will look for the first gallery in your post content and use it as featured gallery.

Any gallery or slider will be considered as gallery.

Video

The first video URL will be considered the video.

You can use our Wolf Video Thumbnail Generator plugin to generate a thumbnail from any Vimeo or YouTube video automatically and use it as featured image. The script will look for the first YouTube or Vimeo URL in your post and generate a thumbnail. You should find the “Video Thumbnail” metabox above the “Featured Image” box.

Audio

An audio file. You can use the audio shortcode provided by WordPress using the media library ("Add media" button). You can also embed a soundloud song using WordPress embed feature by pasting your song soundcloud URL.

Link

A link to another site. The first URL in your post will be used and your post title will be linked to this URL.

Quote

The first quote of your post will be considered as the featured quote.

Status

Typically styled without a title. Similar to a Facebook note update. You can use this post pormat to display an embed tweet.

Aside

Same as status format

Chat

A chat transcript, like so:

John: foo
Mary: bar
John: foo 2

There isn't any specific style for the chat post format in Oglin.

Split your post

Firs, note that the more tag won't be used if you choose the "Auto excerpt" option in the customizer "Blog" tab or with certain blog layout.

You can split your post to add a "Continue reading →" link on the post index page.

To do so, use the WordPress more tag.

You can find the More Tag button in the first row of the visual editor

You can further customize the message that displays in the link to the full post content.
You will need to do this in the HTML view of your editor. Once you have changed to the HTML editor, look for this code: To customize the message, simply add a space after and turn it into something like this…

Single Post Options

You can choose how you want to display your post single view in the Post Options, just below your text editor.

Note that the "Featured" options will be used for the metro layout, to display a bigger post thumbnail for your post.

Theme Settings

Theme settings are the backbone of the theme. They give you full control over your website and allow you to customize the design without modifying a single line of code. There is three type of options you can set in Oglin: the Customizer Mods, the Single Page Options and the other Admin "Appeareance" sub-menus available depending on the plugins installed.

Customizer Mods

The Customizer Mods are responsible for the global appearance of the entire website, unless otherwise specified in Page Options. They are accessible in the “Appearance” > “Customizer” from your admin panel, or directly by clicking on “Customize” in the frontend admin bar.

Page Options

The Page Options are located inside every page, post, product (or other post type). You can override particular Customizer Mods for single page diversification.

Most of these settings will be available for all post types.

Additionaly, specific options will be available depending on the post type.

Other Options

In addition to the Customizer mods and Page Options, you will find other custom options in the "Appearance" sub menus.

For example the Font Loader.

Google Fonts

With Oglin, you can load any Google font you like and use it for your menu, headings, text etc...

To load Google Fonts:

  1. Go to the Google Fonts website and select the fonts you like.
  2. Open the "Families Selected" frame at bottom right of your screen.
  3. Copy the fonts list from the last part of the URL right after "?family="

  4. Go to the "Appearance" > "Font Loader" panel and paste your fonts list.

Now, you will be able to select your Google fonts anywhere in the theme where a “fonts” option is available.

Typekit Fonts

You can also add any Typekit fonts to Oglin using Typypekit Fonts for WordPress plugin.

  1. Install and activate Typypekit Fonts for WordPress plugin.
  2. Go to "Settings" > "Typekit Fonts" and follow the instructions to import your font kit into your website.
  3. Go to "Appearance" > "Font Loader" tab add your fonts separated by a "|" (i.e "Adobe Caslon Pro|Acumin Pro").

Now, you will be able to select your Typekit fonts anywhere in the theme where a “font” option is available.

Basics

Set a featured image

A post featured image is an image that you can upload to represent your post, page or other post type.

Set a featured image is very simple: In your text editor, click on "set a featured image" (usually the box at the bottom right), upload an image and click on "use as featured image" instead of "insert into post".

Create a gallery

Note that for a theme that uses WPBakery Page Builder, it is even simpler to insert an image gallery WPBakery Page Builder element.

To create a gallery in your post or page, first click on the "Add media" button at the top of your text editor.

When you open the Media Manager, you will be shown the files in your Media Library. If you’d like to create a gallery from those files, then you’re already where you need to be. Just click on "Create a gallery" on the left menu and select the files you’d like to include in your gallery. You can re-order you image as you wish, upload new files, add captions to your images etc...

WordPress embed

This WordPress feature allows you to display a media by simply paste its URL in your post.

For exemple, simply paste a youtube video URL into your post. WordPress will automatically turn that into a YouTube embed.

Learn more infos on the WordPress Codex page.

Page templates

If you use WPBakery Page Builder plugin to create your pages, you will have a lot options to set your page layout and you won't have to care about your the page templates.

But in case you want to create a page in the old fashion way, with the WordPress editor, you can choose between a few available page templates.

  • Default Template

    The default template, with no specific style. The content is centered and takes 750px width for the best readability.

  • Page Full Width

    A template where the content take a larger width that the default one : 1140px.

  • Page with a Left Sidebar
  • Page with a Right Sidebar

WPBakery Page Builder

Oglin comes with a tailored version of WPBakery Page Builder powered by the Wolf WPBakery Page Builder Extension .

This WPBakery Page Builder extension, only available with Oglin, adds many additional elements and comes with a custom admin design.

Additionaly, Oglin also adds WPBakery Page Builder modules, so you can use WPBakery Page Builder to display your posts integrated in the theme design. We will see that later in this section.

To use WPBakery Page Builder for your page or post, be sure to click on the "Backend Editor" button at the top left of your WordPress text editor to switch to Page Builder mode.

Create a Row

The "Row" is the main WPBakery Page Builder container structure.

Each rows can be displayed differently: you can choose a background, a main Skin Tone - Light: dark font for light background or Dark: light font for dark background -, and the column layout you want to use.

Depending on the settings you choose, the design of the theme (row padding, margin etc..) will adapt automatically.

Row settings example

But if you wan to polish the row design even more, you can use the "Custom" tab to add your own padding and margin settings and even add your own custom CSS.

Note: Margin and padding adjustment are widely used in the demo.

Row custom settings example

Column settings

Columns are the second level container of the row. This is where you will insert your different elements. Just like rows, columns come with many settings to create advanced layout. For each column you can set a different background, color tone etc...

You can check a few examples of what it's possible to do with the Row & Columns system on this demo page.

Elements

The WPBakery Page Builder elements are the actual content that you can insert in your page. It includes, text blocks, icon box, custom headings, medias etc...

To insert an element in your column, click on the "+" icon in your column to open the WPBakery Page Builder elements window.

Use WPBakery Page Builder to Display Posts.

In the WPBakery Page Builder backend editor, click on "Add Element" and choose the "Posts", "Works", "Products" elements or any other available post type.

You will be able to choose the layout and styling options for your post module.

Create a "Maintenance" or "Coming Soon" page

To create a page to use as "Maintenance" or "Coming Soon" page, create a page using WPBakery Page Builder with the elements you want to display (count down, newsletter subscribe form etc...) and use the Page Options below your text editor to hide the in-built header, footer and menu.

Once you're done, switch your website to maintenance mode.

Content Blocks

The "Content blocks" feature is an amazing system to create content that you can use as page fragments, or custom header and footer.

Simply create a content block ("Content Block" > "Add New") using WPBakery Page Builder just like a regular page and use it anywhere you want in different pages.

Create a content block

To add a Content Block in your page, find the "Content Block" element , in the WPBakery Page Builder elements window and insert it in your page.

Find the content block element
Insert the content block element
The content block element in the page

Post-Header & Pre-Footer

With Oglin you can set content blocks as post-header and/or pre-footer area. It will display your choosen Content Block, just below the header, and/or just before the footer.

You can set you header and footer blocks to be displayed on all pages via the "Customizer" > "General tab".

If you want to use a content block to replace the header, be sure to disable the default header in the Customizer > Header tab (set the layout to "No Header").

Content block customizer Options

Or you can set your custom header and footer blocks only on certain pages using the page options below your text editor.

Content block page Options

Note that the content block option includes an inheritance system. For example, if you set a particular header block on your blog page (the page set as page for posts in the WordPress reading settings), all blog pages will inherit this setting.

Of course, you can use this feature to replace the in-built header or footer, by hiding the footer or header using the page options. This way you can, for example, create a custom footer for several pages and use the in-built footer on every other pages.

Portfolio

To create a "Portfolio" page, you must have Wolf Portfolio plugin installed.

Set your Portfolio Archives Page

Once the plugin is installed and activated, you will see a notification in your dashboard inviting you to create a page for your portfolio.

Simply click on the "Create Page" button and a page will be automatically created and assigned for the "Portfolio" page.

You can change the page you want to use as "Portfolio" page at any time in the "Portfolio" > "Settings" panel.

Note that any content in this page will be ignored.

For more flexibility, you can also create another page and use WPBakery Page Builder to display your works.

Add a work to your "Portfolio" page

To add a work to your "Portfolio" page, go to "Portfolio" > "Add New" and fill the "Release Details" box below the text editor. Additionally, you can insert any content to display on your release page.

Work Options

On work post type, below your text editor, you will find several option for your current work single page.

One-Page Website

It is super simple to create a "One-Page" website with Oglin.

To create a one-page website there is 2 things you have to do for each WPBakery Page Builder row:

1. First set a unique section name in your WPBakery Page Builder row settings.

2. Set the "One-Page Navigation" option to "Yes" on the "Page Options" below your text editor.

one page menu

WooCommerce

Oglin comes with WooCommerce integration, which allows you to build your online shop.

If WooCommerce is activated you will find a "Shop" tab in the Oglin customizer options. You can set your number of products per page and your shop layout there.

You can also use WPBakery Page Builder to display your products wherever you want.

You can check the complete WooCommerce documentation here:

http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

Tips

AJAX is the technology used in the theme to navigate between page without reloading the entire site.

Slider Revolution + AJAX Navigation

To able able use a revslider that works with the AJAX navigation, you need to:

  1. Add a module ID that contains "rs-" + the id of the slider in the Defaults > Module ID setting. Eg. "rs-5"
  2. Enable the "Wait for API" setting in the General > Slideshow setting

Other recommendation related to AJAX Navigation

  1. Add the "internal-link" class to any link that wil load a page via AKAX.

Child Theme

All our theme packages include a child theme. A WordPress child theme allows you to apply custom code changes to your site. Using a child theme ensures your customizations will not be overwritten, even if you update the parent theme.

For most cases, you won’t need a child theme if you just want to add a couple of lines of CSS for a style adjustment. You can add custom CSS styles directly in the Customizer "Additional CSS" tab (since WordPress 4.7.2). But if you need more advanced customizations, like more CSS rules to overwrite the styles of the theme or even add your own PHP functions, it is strongly recommended to use a child theme.

How to set up your own Child Theme

Although child themes can be a great way to add custom changes to your theme, they are most often used to customize core code taken from the parent theme. Because of this, please be aware that customizations of this nature fall outside our scope of support, and we will be unable to assist you with any issues that may arise. To use the child theme, find the “themename-child” folder in your theme package and upload it to your wp-content/themes folder through FTP. As it is mainly made to be edited, we didn’t include it as a zip file, so you will have to install it manually. Once installed and activated, it will automatically inherit all parent theme features, functions, and styles.

Additional Ressources

WordPress Codex on Child Themes How To Create A WP Child Theme video by WPBeginner.com

Maintenance Mode

To switch your website in maintenance mode you can download Wolf Maintenance plugin. It is ultra light and ultra simple to use.

Once the plugins installed, while you're working on your website, go in the admin > Tools >"Maintenance" panel and choose the page where you want to redirect all your visitors. For example a coming soon page.

When your website is ready to go, simply set the options to "Disabled" to put your whole website back online.

Custom 404 Page

To set a custom 404 error page you must install and activate 404page – your smart custom 404 error page plugin.

First, create the page that you want to use as 404 page.

Then, simply navigate to "Appearance" > "404 Error Page" panel in your WordPress admin and set the page you just created as your "Page to be displayed as 404 page" in the plugin settings.

That's it! Simple as that. Now all error pages will display the content of this page.

Troubleshooting

Common issues with links to fix them:

More ressources:

FAQ | Knowledge Base