Evie Documentation – v1.3.1

This guide provides instructions for installation, help on getting started and extensive documentation of features.

Getting Started

To install this theme you must have a working version of WordPress already installed.

If you need help installing WordPress, below are all the useful links for WordPress information.

Theme Requirements

You should check that your hosting environment meets our minimum requirements below:

For more details, please visit WordPress System Requirements.

Installation

Download the theme from the Downloads tab on ThemeForest. There are two options to download:

  1. All files & documentation
  2. Installable WordPress file only

We suggest you to choose the Installable WordPress file only option. You will get the theme zip file that you can upload to your website under the Appearance → Themes in your WordPress admin area.

Download Theme Only

If you select All files & documentation, then you will need to unzip the main package zip file first. And then you will find the theme zip file in the folder “WordPress Theme”, see Package Contents.

Download All Files

Package Contents

The main zip package contains the following files and folders:

  1. WordPress Theme (Installable Theme Files)
    • WordPress Theme

      WordPress Theme\evie.zip

    • Child Theme

      WordPress Theme\evie-child.zip

  2. Plugins
    • Flextension

      Plugins\flextension.zip

    • Evie XT

      Plugins\evie-xt.zip

  3. Documentation
    • Documentation\index.html
  4. Demo Content

Theme Installation

You can install the theme in 3 ways as follows:

Install via WordPress

  1. Go to Appearance → Themes.

  2. Click Add New button.

    Add New Theme

    And then click Upload Theme button.

    Upload Theme

  3. Click on Choose File and select the theme zip file on your computer.

    Browse Theme

  4. Click Install Now button. The theme will be uploaded and installed.
  5. And then activate it.

Install via cPanel or Web File Manager

  1. In a File Manager on your web hosting, navigate to your theme folder “/wp-content/themes/”. If your WordPress is installed in the document root folder of your web hosting you would navigate to “public_html/wp-content/themes/”.
  2. Click on Upload button to upload the theme zip file.
  3. Once the file is uploaded, select that zip file. Then click on Extract button to extract it.
  4. Go to Appearance → Themes in your WordPress admin area to activate it.

Install via FTP

  1. Extract the “evie.zip” file then you should have a folder named “evie”.
  2. Using an FTP client to access your host web server and navigate to “/wp-content/themes/” directory.
  3. Upload the “evie” theme folder to this directory on your host server.
  4. Go to Appearance → Themes in your WordPress admin area to activate it.

Plugin Installation

We recommend installing the following plugins to get all the theme features:

  1. Evie XT
  2. Flextension

Install Recommended Plugins

  1. Go to Appearance → Install Plugins to see the recommended plugins list.
  2. Install all the recommended plugins in the list and then activate them.

Note: If the installation couldn’t be completed, it might be because your host web server doesn’t allow downloading a file from external sources. You may need to install them manually, see the instructions below.

Manual Plugin Installation

The recommended plugins are also included in the main package zip file. You will find them in the folder “Plugins”, see Package Contents.

To install recommended plugins manually:
  1. Go to Plugins → Add New.

  2. Click the Upload Plugin button, and then choose the plugin zip file from the folder “Plugins”.

    Upload Plugin

    Upload Plugin

  3. Click the Install Now button to install the plugin.
  4. Then activate the plugin.

Demo Content

Importing demo content is optional. You will need to enable the Demo Content module to access this feature.

To enable the Demo Content module:
  1. Go to Flextension in your WordPress admin area.
  2. Enable the Demo Content module.

  3. This module requires the One Click Demo Import plugin. If you do not have this plugin installed, you will be prompted to install it.

    Demo Content Module

    Click on the Install Required Plugins link present below the module name.

  4. Install and then activate it.

The Demo Content module comes with two options:

  1. Full Demo

    Contains all demo content including theme settings.

  2. Theme Presets

    Contains only theme settings.

Import Demo Content

This is recommended to do on a fresh WordPress install (without content). If you have existing content, you may need to use the WP Reset plugin to remove all existing content and reset your database to the default installation values. Or you can choose to import only Theme Presets and use predefined templates (Patterns) instead.

To import the demo content:
  1. Go to Appearance → Demo Content.

  2. Click on the Full Demo tab.

    Import Demo Content

  3. Click the Import Demo button on a demo which you would like to import.
  4. Some demos may need additional plugins like Contact Form 7, Co-Authors Plus, etc. You may be prompted to install them.
  5. It can take several minutes, please be patient and wait for it to complete.

After the import you can deactivate the Demo Content module under the Flextension settings and deactivate the One Click Demo Import plugin on the Plugins page.

Import Theme Presets

If you have existing content and wouldn’t like to import any dummy data. You can import the theme preset to get only theme settings and make your site look like the demo.

A theme preset contains only theme settings so you can switch to different demos anytime without losing your existing content.

To import the Theme Presets, follow these steps:

  1. Click on the Theme Presets tab.

    Import Theme Presets

  2. Click the Import Demo button on a demo which you would like to import.

Troubleshooting

It can take several minutes to import the full demo content. However, if it keeps getting stuck for too long or the import does not complete successfully for any reason, it can be related to the low PHP configuration limits.

Try checking the PHP configuration limits under Tools → Site Health, select the Info tab then scroll down to the Server section and make sure it has the minimum PHP settings as follows:

PHP time limit 180 PHP memory limit 256M Upload max filesize 64M PHP post max size 64M Max input time 60 PHP max input variables 3000

However, this also depends on your host web server performance and resource usage limits on your web hosting plan. If you are using a basic plan, you may need to upgrade to the higher plans or consider choosing to import the Theme Presets and use predefined templates (Patterns) instead.

Manual Import

By default, the demo import feature automatically download the demo content from our web server and install them on your site.

However, if your web host server doesn’t allow downloading a large file from external servers or it is blocking the request to our web server. You may need to import demo content manually, please follow these steps:

  1. All demo content files are also included in the main zip package when you download All files & documentation, See Package Contents.
  2. Unzip the main zip package, you will find the demo content files in the folder Demo Content.
  3. Go to Appearance → Demo Content.
  4. Click the Switch to Manual Import on the right hand side of the screen.
  5. Click the Import Content, then choose the file “content.xml” from the demo content folder.
  6. It can take several minutes, please be patient and wait for it to complete.
  7. Select the Import Widgets and choose the file widgets.json” to import the widgets.
  8. And then click the Import Customizer and choose the file “settings.json” to import the theme settings.

How to Remove Duplicate Demo Content After Import?

There are two ways to get rid of duplicate content.

  1. WP Reset plugin – This is the fastest way to get rid of content. It will remove all content from your database and leave the default theme activated. Only do this if you are able to start over.
  2. Manual Removal – This method will take longer and simply involves manual removing of duplicate items. For example, go to Pages and Posts to delete the duplicated items.

Customizer

All theme configuration options are included in the Customizer, you can easily control the appearance and behavior of the whole website using the Live Customizer.

How to Use the Customizer

  1. Navigate to the page you would like to customize then click on a Customize button in the admin menu bar at the top of the page.

    Customize Menu

  2. Click on any of the blue pencil icons on the live preview to open the settings for that particular item.

    Theme Customizer

The following steps will help you configure your site easier.

  1. Upload your site logo, add your site description and set the Favicon under Site Identity.
  2. Configure your site Colors.
  3. Configure your Navigation and Menus.
  4. Set up your site Header.
  5. Set up your site Background.
  6. Set up your site Loader.
  7. Set up your site Cursor.
  8. Set up your site Footer.
  9. Set up your Widgets.
  10. Configure your Homepage.

Site Identity

Logo

Click on Select logo button in the Logo section to add a logo to your website.

The sizes of logo are flexible, you can adjust the size of the logo when choosing the logo image, but you can’t adjust it larger than the maximum dimensions as follows: Maximum width: 170px, maximum height: 75px.

Serving unscaled image in its original size will ensure fast loading times of your website. If your logo is bigger than the maximum dimensions, we recommend resizing it using a graphic app (e.g. Photoshop) before uploading it to your WordPress site.

Logo (Retina version)

To make your logo look crisp on Retina devices, set a retina logo for your website.

Retina logo should be exactly twice as wide and twice as high as the regular logo.

For example, if your logo image is 100 × 50 pixels in size, the retina logo image must be 200 × 100 pixels in size.

Site Title

The Site Title is displayed in the title bar of a web browser. You may use the site title instead of a logo. If you remove the logo image, it will automatically fallback to your site title.

Tagline

Tagline is a short description or catchy phrase to describe what your site is about. It appears as the website slogan under the Site Title.

Site Icon

A Site Icon (Favicon) is what you see in browser tab, and as a bookmark or home screen app icon when saved to a browser or phone.

Site Icons should be square and at least 512 × 512 pixels.

Colors

Navigation

Menus

If you already have menus, you can easily click on Edit Menu to edit menu items.

Edit Primary Menu

Creating a New Menu

If you would like to set up and create a new menu, select the Menus panel then click on the Create New Menu button.

Create New Menu

Give a name to your menu so you can easily manage it later. Select the menu location where this menu will appear.

New Menu

And then click on Next to add menu items.

Add Menu Items

Mega Menu

The Mega Menu setting is included in the menu item settings in both Menus panel in the Customizer (Customizing → Menus) and Menus settings in your WordPress admin area (Appearance → Menus).

Mega Menu

The Mega Menu setting is only available for the top level menu item with three options:

  1. Disable: Displays submenu items as a regular dropdown menu (the Mega Menu is disabled).
  2. Menu items: Displays submenu items in a full-width menu, the Columns setting will appear when you select this option. It acceps all menu item types, you can add any menu items into the submenu.
  3. Recent posts: Displays recent posts from specific categories in the submenu items.

    After choosing this option, you will need to add a Category menu item type from the right side into the submenu. It accepts Categories, Tags, Formats and all custom taxonomies (e.g. Project Categories and Project Tags).

    Mega Menu Recent Posts

Menu Locations

The menu locations section allows you to select which menu appears in each location.

Menu Location

Header

These are global settings for your site header. You may also set specific settings on per-page basis on the page editing screen. See more details on Page Settings.

Customize Header

This panel allows you to set the background color, image and overlay for the main header.

Background

Choose the background color and background image for your site.

Loader

Select a loading animation (spinner) to display while loading the content.

Cursor

Displays an animated cursor.

Widgets

The Widgets panel allows you to add and manage the widgets on your site.

This theme comes with 7 widget areas:

When you click on any one of them, you will see the widgets that you have previously added to that location.

To add a new widget, you need to click on the Add a Widget button. This will open a new panel where you will see a list of all available widgets.

Blog

The Blog panel will appear when you customize your posts page, any blog archive pages (e.g. category’s archive page) or a single post.

You can set up the Posts Page in the Homepage Settings panel.

There are 4 sections included in the Blog panel.

  1. Posts Page
  2. Archive Pages
  3. Single Post
  4. Password Protected Post

To customize your blog, navigate to your posts page or any blog archive pages and click on the Customize button in the admin menu bar. The Blog settings panel will appear in the Customizer. It will show the settings based on the type of page you are currently customizing.

You can also click on any of the blue pencil icons on the live preview to open the settings for that particular item.

Portfolio

The Portfolio panel will appear when you customize your portfolio page, any portfolio archive pages (e.g. project category’s archive page) or a single project.

You can set up the Portfolio Page in Settings → Portfolio in your WordPress admin area.

There are 5 sections included in the Portfolio panel.

  1. Portfolio Page
  2. Archive Pages
  3. Single Project
  4. Portfolio Quick View
  5. Password Protected Project

To customize your portfolio, navigate to your portfolio page or any project archive pages and click on the Customize button in the admin menu bar. The Portfolio settings panel will appear in the Customizer. It will show the settings based on the type of page you are currently customizing.

You can also click on any of the blue pencil icons on the live preview to open the settings for that particular item.

Typography

There are typography controls with responsive options in this panel, so that you may select different font settings for different screen sizes.

Homepage Settings

By default, WordPress displays the latest blog posts on your homepage. To use a custom home page, you need to select A static page option.

Homepage Settings

This will open up two new dropdown menus that you can use to select a page for your homepage and another for displaying your blog posts.

In case you don’t have the pages on your site, you can create a new one by clicking on the + Add New Page link present below the dropdown menu.

WooCommerce

This panel only appears when you have the WooCommerce plugin installed on your site. You will find more details in the WooCommerce Documentation

Additional CSS

This is a beginner friendly option that will allow you to make changes to your site and see them live on the preview area. If you are an advanced user, you may add your custom CSS into the Child theme instead, see more details in the Modification section

Additional CSS

When you start writing some CSS code, WordPress will automatically suggest attributes to you based on the letters you type. It will also display error messages if you have not written a proper CSS statement.

Pages

Creating a Page

  1. Go to Pages in your WordPress admin area, click on Add New.
  2. Set the page title and build the page content using the Content Editor
  3. You can change the Page Settings on the right side of the Editor screen.
  4. Click on the Publish button.

Page Settings

The page settings are in the Page Settings Sidebar located on the right side of the Editor screen. There will be additional options that allow you to customize the layout of each individual page. These options will override any corresponding global options set in the Customizer.

Learn more about Content Editor.

Blog

By default, WordPress displays your blog posts on the homepage. However, it allows you to easily configure your website to have a custom home page and choose any other page on your website to be used as your blog page.

Creating a Posts Page

  1. Go to Pages in your WordPress admin area, click on Add New.
  2. You don’t need to add any content, WordPress automatically displays your latest posts when visiting this page.
  3. You may change the Page Settings on the right side of the Editor screen.
  4. Once you have created it, you can head over to the Settings → Reading in WordPress admin area to set this page as your Posts page. This setting is also included in the Homepage Settings panel in the Customizer.

Creating a Post

  1. Go to Posts in your WordPress admin area, click on Add New.
  2. Set the post title and build the post content using the Content Editor
  3. You can change the Post Settings on the right side of the Editor screen.
  4. Click on the Publish button.

Post Settings

All post settings are in the Post Settings Sidebar located on the right side of the Editor screen. This theme also includes additional options that allow you to customize the layout of each individual post.

Please check out the Post Settings Sidebar for more details.

Portfolio

The Portfolio is a custom post type, it gives you an easy way to manage and showcase projects on your site.

The Portfolio module is included in the Evie XT plugin and is enabled by default after installing that plugin. You can turn on or off the Portfolio module in the Flextension settings page in your WordPress admin area.

Creating a Portfolio Page

  1. Go to Pages in your WordPress admin area, click on Add New.
  2. You don’t need to add any content, WordPress automatically displays your latest projects when visiting this page.
  3. Once you have created it, you can head over to the Settings → Portfolio in WordPress admin area to set this page as your Portfolio page.

Portfolio Settings

Go to Settings → Portfolio in your WordPress admin area.

Creating a Project

  1. Go to Projects in your WordPress admin area, click on Add New.
  2. Set the project title and build the content using the Content Editor
  3. You can change the Project Settings on the right side of the Editor screen.
  4. Click on the Publish button.

Project Settings

All project settings are located in the right sidebar of the Editor screen.

Permalink settings for the Project can be found at Settings → Permalinks in your WordPress admin area. From here you can configure the URL structure for your portfolio and project pages.

There are three default settings at the Optional section that control the base of your project categories, project attributes and project tags:

Project Permalinks

There are four settings under the Project Permalinks section to select from as your permalink base for the projects:

Note: The permalink must be unique. The project Custom base setting should NOT conflict with the Taxonomy Permalinks and other post type permalinks.

Content Editor

This theme is fully compatible with WordPress Block Editor, a block-based content builder. It also comes with additional blocks and essential components that allow you to easily build a responsive content for your pages and posts so they will look beautiful on any device.

You need to install the Evie XT and Flextension plugins to have the following blocks and components.

This video playlist contains 6 videos as follows:

Please visit the WordPress Block Editor for more details and the instructions on how to use it.

The Editor also supports Dark Mode that will be turned on automatically when you’re using a dark scheme for your site. You can also switch between Dark and Light mode to preview your content by clicking on the Dark Mode Switcher button at the top-right corner of the screen.

Block Editor Light Mode

Block Editor Dark Moder

Blocks

You will find the following additional blocks in the Flextension group in the Blocks library.

See all the blocks and how to use them in the List of blocks.

Block Settings

You will find additional block settings below in the Block Settings sidebar at the right hand side of the editor.

Block Patterns

Evie comes with predefined block layouts that you can insert into pages and posts and then customize with your own content.

To insert a block pattern, follow these steps:

  1. In the editor, click the + icon to add a new block.

  2. Click on the Patterns tab.

    Block Patterns

  3. Select a pattern category. You may filter by type of the patterns.
  4. Click on any pattern once and it will be added to your page at the location of your cursor.

Also, you can combine different patterns to produce a new layout and design that fits your needs. Learn more about Block Patterns.

Formatting Options

Dark Mode

One of the accessibility features of the Evie theme is support for the visitor’s color scheme preferences in their operating system or browser’s settings.

If you have Dark Mode Support enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system’s preferences or browser’s settings. They may choose to switch color schemes using the dark mode toggle button on the navigation menu.

Enabling Dark Mode Support

You will find the Color Scheme setting under the Customize → Colors. Then select the Auto option to enable the Dark Mode Support feature. You can also enable the Allow users to switch color schemes setting to allow users to choose their preferred color scheme.

Media

Responsive Images

This theme supports native responsive image feature that was added to WordPress core in version 4.4. Please visit Responsive Images for more details.

The minimum recommended image width is 1920px.

If you install this theme on the existing site with existing images we strongly recommend that you should regenerate your images using the Regenerate Thumbnails plugin after installing this theme.

Lazy Load

The Lazy Load defers the loading of images on the page as long as they are not needed. Images outside of viewport will not be loaded before user scrolls to them. This can speed up your site and save user’s bandwidth.

To enable the Lazy Load on your site:

  1. Go to Flextension settings page.
  2. Activate the Lazy Load module.
  3. You may click on the Settings link present below the module name to visit the module settings screen.

Low quality image placeholders

A low quality image placeholder is a tiny image that will be displayed while the actual image is loading. As it is required to create the image placeholders, you will need to regenerate your thumbnails after you turn on this option with the Regenerate Thumbnails plugin.

Retina Images

Serves larger images on Retina screens to make your images look sharp and beautiful on any device. This will improve viewing experience and increase user satisfaction.

To enable the Retina Images:

  1. Simply activate the Retina Images module in the Flextension settings page.
  2. You will need to click on the Settings link present below the module name to visit the Retina Images settings screen.
  3. Select the image sizes that you would like to create the Retina version for, then click on the Save Changes button.
  4. You will need to regenerate your thumbnails after saving, using the Regenerate Thumbnails plugin.

Social Integrations

This module displays a list of links to your social accounts in the page footer and widget areas. It also allows you to add social links for post authors with additional user setting fields.

Configure the Social Links

  1. Go to Settings → Social Links.
  2. Enable the social networking sites that you would like to display in the list of social links.
  3. You can drag and drop the items into a different order, then save changes.
  4. A new tab, Links will apear then you can set up your social links there.
  5. The settings vary depending on the social networking site. You may need to check the Link present below the setting fields to see if it works.

After setting up the social links, you can add a Social Links widget under the Customizing → Widgets into any widget areas on your site to display the social links.

Add social links for the post author

  1. Go to your Profile page in WordPress admin area. Or click on your Gravatar in the upper-right corner in the frontend to visit your profile page.
  2. You will find the Social Links settings on your Profile page.

Share Buttons

This module displays share buttons for posts and projects.

Configure the Share Buttons

  1. Go to Settings → Share Buttons.
  2. Enable the share buttons you would like to display in the post sharing options.
  3. You can drag and drop the items into a different order, then save changes.

Followers & Following

This feature allows you to follow authors and see their posts in your feed. This feature is included in the Advanced Author module.

Enable the Advanced Author module

  1. Go to Flextension settings page.
  2. Activate the Advanced Author module.
  3. You may click on the Settings link present below the module name to visit the module settings screen.

Configure the Followers & Following

  1. Go to Settings → Advanced Author.
  2. Enable the Follow Button option to display the “Follow” button and allow people to follow authors.
  3. Enable the Followers and Following option to display number of followers and following.

Instagram Feed

This module displays the Instagram media feed in your sidebars with a widget or post content via a block.

Configure the Instagram Feed

  1. Go to Settings → Instagram.
  2. Click on the Connect button to connect your Instagram account.

Once you’ve connected your Instagram account you can display the media feed by using an Instagram Feed widget in the Customizing → Widgets or an Instagram Feed block in the Content Editor.

Other Social Modules

You will also find the following modules that come with social features and widgets:

Simply enable these modules then add widgets to your sidebars.

Fonts

You can use other font families and custom fonts on your website when you enable the following modules.

To enable these modules:

  1. Go to Flextension settings page.
  2. Activate any font module you would like to enable.
  3. You can click on the Settings link present below the module name to visit the module settings screen.

Google Fonts

By default, the Google Fonts module includes a predefined fonts list so you can use them without using the API Key.

How to use Google Fonts

  1. Click the Add New button and choose a font from the fonts list.

  2. You can add more fonts by clicking the Add New button again.

    Select Google Fonts

  3. Click the Save Changes button.

  4. Your selected fonts will be shown in the Typography settings under Appearance → Customize → Typography.

    Google Fonts

However, if the font family you’re looking for is not included in the fonts list, you will need to enable automatic updates for Google Fonts to update the fonts list.

Enable automatic updates for Google Fonts

In order to enable automatic updates for Google Fonts in the list, you will need to set up the Google Fonts API Key. And here are the instructions:

  1. Visit Developer API page.
  2. Click the Get a Key button under the Acquiring and using an API key section. You may be prompted to log in to your Google account.
  3. From the projects list, select a project or create a new one.
  4. Click the Show Key and then copy the API Key.
  5. Paste it into the API Key box on the Google Fonts settings screen in your WordPress admin area.
  6. Click the Save Changes button.
  7. Now you will have the latest version and see all available Google Fonts in the list.

Adobe Fonts

You need to set up the API Token to use the Adobe Fonts on your website.

How to set up Adobe Fonts API Token

  1. Log in to your Adobe Fonts Account.

  2. Visit API Tokens to get your API Token, or create a new one.

    Adobe Fonts API Token

  3. Copy the token into the API Token box on the Adobe Fonts settings screen in your WordPress admin area.

    Adobe Fonts Settings

  4. Click the Save Changes button.
  5. Then you will find your web projects in the Projects dropdown list. Or create a new one by following the instuctions below.

Create a web project and choose fonts to use

  1. You can follow the instructions from the Choose Fonts to Use section in the Adobe Fonts User Guide to create a web project and choose fonts to use.
  2. Please select the Weight and Style for your fonts as below so they will render correctly when using the Evie theme. 
    							Light (300 normal)
							Light Italic (300 italic)
							Regular (400 normal)
							Italic (400 italic)
							Bold (700 normal)
							Bold Italic (700 italic)

How to use Adobe Fonts

  1. Select a project from the Projects dropdown list.

    Select Adobe Font Projects

  2. Click the Add New button and choose a font from the fonts list.
  3. You can add more fonts by clicking the Add New button again.
  4. Click the Save Changes button.

  5. Your selected fonts will be shown in the Typography settings under Appearance → Customize → Typography.

    Adobe Fonts

Custom Fonts

This theme allows you to upload custom fonts to your site. You can also use this feature to self-host Google Fonts locally on your server.

How to add custom fonts

  1. Prepare your webfont files in woff and woff2 formats. If you would like to self-host Google Fonts, you can download them at google-webfonts-helper.
  2. Go to Appearance → Fonts in your WordPress admin area, then select the Custom Fonts tab.
  3. Click the Add New Font Family button.
  4. Enter a font family name, select the font weight and style then choose your font files.
  5. You may click the Add font files button to add more font files with other weights and styles.
  6. Click the Save Changes button.
  7. Your custom fonts will be shown in the Typography settings under Appearance → Customize → Typography.

Utilities

This theme also comes with additional features and modules to improve user experience on your website.

Single Page

Interacts with the user by dynamically rewriting the current page rather than loading entire new page from a server. The content will show seamlessly and virtually instantly when the visitors click on the links and buttons that makes your website feel more like a native app.

If you have a third-party plugin and it couldn’t work correctly, you may need to exclude the page which isn’t working properly under the module settings or disable this module.

To enable the Single Page:

  1. Go to Flextension settings page.
  2. Activate the Single Page module.
  3. You may click on the Settings link present below the module name to visit the module settings screen.

Displays instant search results while typing a keyword. You can select specific post types and fields to display.

To enable the Live Search:

  1. Go to Flextension settings page.
  2. Activate the Live Search module.
  3. You may click on the Settings link present below the module name to visit the module settings screen.

Smooth Scroll

Replaces basic website scrolling effect with a nice smooth scrolling using mousewheel, touchpad or keyboard arrows.

To enable the Smooth Scroll:

  1. Go to Flextension settings page.
  2. Activate the Smooth Scroll module.
  3. You may click on the Settings link present below the module name to visit the module settings screen.

How To Update

By default, WordPress will NOT download any updates for premium WordPress themes from external sources like ThemeForest. Please follow the instructions below to update the theme.

Automatic Update

To enable automatic updates for the theme, you will need to activate the Auto Update module under the Flextension settings.

  1. Go to Flextension in your WordPress admin area.
  2. Activate the Auto Update module.

  3. This module requires the Envato Market plugin. If you do not have this plugin installed, you will be prompted to install it.

    Auto Update Module

    Click on the Install Required Plugins link present below the module name, then install and activate it.

  4. Once you have the Envato Market plugin installed, you can click on the Settings link present below the module name to setup the Envato API. You will find more details below.

Using Envato Market Plugin

The Envato Market plugin can install and update WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token.

Setting Up The Envato Market Plugin

  1. Go to the Envato Market settings in your WordPress admin area. You will find the instructions under the Settings tab.

    Envato plugin settings

  2. Click on the link to generate a token.

  3. Select the permissions as follows:

    Envato create token

  4. Click the Create Token button to generate your personal token.

  5. Copy that key, paste it into the Token field on the Envato Market settings page and then click Save Changes.

    Envato token

  6. A list of your purchased themes will appear in the Themes tab.

Update Your Themes

When there is an update available for the theme, you will see a notification with the link to update it in the Themes tab on the Envato Market settings page. Click on the link to install the update.

Alternately, you can update it under Appearance → Themes like any other WordPress themes.

Lastly, you may be prompted to update the recommended plugins after you update the theme. See Update Plugins.

Manual Update

Download the latest version of the theme from the Downloads tab on ThemeForest. Find the theme you’ve purchased, click on the Download button and select the Installable WordPress file only.

Download Theme Only

Update via WordPress

  1. Go to Appearance → Themes.

  2. Click Add New button.

    Add New Theme

    And then click the Upload Theme button.

    Upload Theme

  3. Click on Choose File and select the theme zip file on your computer.

    Browse Theme

  4. Click Install Now button. You may be prompted to overwrite the theme, click the Replace current with uploaded button.

Update via cPanel or Web File Manager

  1. In a File Manager, navigate to “/wp-content/themes”. If your WordPress is installed in the document root folder of your web server you would navigate to “public_html/wp-content/themes”.
  2. Click on Upload button to upload the theme zip file.
  3. Once the zip file is uploaded, select that file, then click on Extract button to extract it to replace the old “evie” folder. You can delete the old “evie” folder before extracting the zip file if you would like.
  4. Lastly, go to your WordPress admin page to update the recommended plugins. See Update Plugins.

Update via FTP

  1. Unzip the theme zip file on your local computer.
  2. Go to “/wp-content/themes” location on your web server. Delete the “evie” theme folder, your current data will not be lost.
  3. Upload the extracted “evie” theme folder into “/wp-content/themes/”.
  4. Lastly, go to your WordPress admin page to update the recommended plugins. See Update Plugins.

Update Plugins

  1. After updating the theme, if there is an update available for the plugins included with the theme, you will see a notification message letting you know the plugins have a new version and need to be updated.

    plugin-update-notification

  2. If the notification message was dismissed, navigate to Appearance → Install Plugins to see the recommended plugins list.

  3. plugin-update

    Update all the plugins.

Child Theme

What is a Child Theme?

A child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files.

Using a child theme lets you upgrade the parent theme without affecting the customizations you have made to your site. See more details about Child Themes.

If you would like to modify the theme. The Child Theme is the recommended way of modifying an existing theme. This theme comes with a child theme called “Evie Child”. see Package Contents.

Install a Child Theme

  1. Navigate to Appearance → Themes.
  2. Click Add New button and hit the Upload Theme button.
  3. Click on Choose File and find the “evie-child.zip” file from your computer and click Install Now button.
  4. The theme will be uploaded and installed.
  5. And then activate it.
  6. Like any themes, you can also install a child theme via Web File Manager and FTP. See Theme Installation.

Translation

All static words in the theme are available in the POT file that’s ready for translation.

Here are two easy ways to translate the theme into another language.

  1. Using POEdit
  2. Using Loco Translate WordPress plugin

Translating The Theme

Translate the theme by using POEdit

  1. Please make sure you have a child theme installed and activated. See Child Theme.
  2. Extract the theme zip file, then you will find the POT file “evie/languages/evie.pot”
  3. Open POEdit, then select File → New from POT/PO files.
  4. Choose “evie.pot” from “evie/languages/evie.pot”.
  5. Find and translate strings.
  6. Save it into your current language code such as “de_DE.po”, then will also generate a file “de_DE.mo”.
  7. Upload both PO and MO files to your child theme folder “wp-content/themes/evie-child/languages/” on your host web server.

For more details, please visit Localization

Translate the theme by using Loco Translate plugin

You can translate the theme from your WordPress admin area by using the Loco Translate plugin.

  1. Navigate to Plugins → Add New to install new plugin.
  2. Find and install the Loco Translate plugin.
  3. Activate the plugin.

You can find more details on how to setup and use this plugin on the plugin’s Official Page.

GDPR Compliance

Disclaimer: This is not legal advice. The GDPR compliance process will vary based on the type of your website, what data you store, and how you process data on your site. We strongly recommend that you still get legal advice before proceeding with any legal action.

What is GDPR?

The General Data Protection Regulation (GDPR) is a regulation in EU law on data protection and privacy in the EU, to give EU citizens control over their personal data and change the data privacy approach of organizations across the world. The GDPR applies to all organizations globally that collect or process personal data from EU citizens.

What is required under GDPR?

The goal of GDPR is to protect the rights of people giving you their data and here are what you need to do:

  1. Tell the users who you are, why and how you collect the data, for how long and who receives it.
  2. Let users access and download their personal data.
  3. Give users the “Right to be Forgotten”. Erase their personal data if they ask.
  4. Get your users’ clear consent before collecting their personal data.
  5. Inform users of data breaches if there is a serious risk to them.

WordPress includes the following tools and features for you to take these steps:

Privacy Settings

You can use this feature to build a Privacy Policy page to tell the users who you are, why and how you collect the data (#1). It also includes a pre-made privacy policy template that contains a suggestion of sections you most likely will need.

To create a Privacy Policy page:

  1. Navigate to Settings → Privacy.
  2. Click the Create button to create a new one. Or select from an existing one and click the Use This Page button.
  3. You can check out the Privacy Policy Guide tab for recommendations on what content to include, along with policies suggested by the theme and your plugins.
  4. Edit your privacy policy content and add any information from the theme and plugins.
  5. Once you publish your policy page, remember to add it to your navigation menu. See Menus.

Export and Erase Personal Data Tool

You can use the Export Personal Data tool under Tools → Export Personal Data to export user data (#2). And the Erase Personal Data tool under Tools → Erase Personal Data to delete user personal data (#3).

To comply with #4, you are required to have your users’ active, clear, and unambiguous consent before collecting their personal data. You will have to review the third-party plugins and services you’re using on your site to see if they’re collecting any personal data that may require consent or a privacy page mention.

WordPress and a lot of plugins have already added GDPR enhancement features to help you comply with this requirement:

Comment Consent Checkbox

WordPress has added the comment consent checkbox. The user can leave a comment without saving their details in cookies.

Contact Forms

You should collect only necessary information when using a contact form. If you’re storing the form entries or using the data for marketing purposes, you’re required to have explicit consent from users.

Contact Form 7 plugin comes with the Acceptance Checkboxes that are dedicated to confirming the user’s consent for a specific condition.

WPForms plugin includes the GDPR Enhancements feature to make it easy for you to add a GDPR consent field, disable user cookies, disable user IP collection, and disable entries with a single click. You will find more details in the WPForms Documentation

Newsletter & Opt-in Forms

If you have any email marketing opt-in forms, then you need to make sure that you’re collecting explicit consent from users before adding them to your list. This can be done with either:

  1. Adding a checkbox that user has to click before opt-in
  2. Simply requiring double-optin to your email list

For a Newsletter Signup Form, you don’t need a checkbox as the form has the single intention of subscribing the user to a newsletter. Clicking the Subscribe button means the user has consented to receive an email newsletter.

If you are using MailChimp, you have to mention in your privacy policy page that you use MailChimp for your newsletter with a link to their official privacy policy.

WooCommerce

If you’re using WooCommerce, then we recommend you to check out the official WooCommerce GDPR Guide to make your online store GDPR compliant.

Google Fonts

Evie theme includes 4 default Google Fonts and they are saved to your site and served from your server, not Google.

If you’d like to use more or different Google Fonts. To make your site GDPR compliant, you may have to use Custom Fonts feature to self-host Google Fonts locally on your server instead of using a Google Fonts feature. See Custom Fonts.

Google Analytics

When using Google Analytics to get website stats, it means that you’re collecting or tracking personal data like IP addresses, user IDs, cookies and other data. You need to do one of the following:

Cookie Notices

You are required to mention in your Privacy Policy if your site uses cookies, and clearly explain what the cookies do and why. You must also get the user’s consent. Consent must be actively and clearly given.

Normally, there will be information about cookies that WordPress, plugins, and the theme use in the Policy Guide tab under Settings → Policy. Remember to include that information in your Privacy Policy, see Privacy Settings.

We recommend using the Cookie Notice plugin to display a cookie notice popup and get the user’s consent.

Lastly, for #5 you just have to notify your users about a personal data breach if there is a serious risk to them.

Modification

Note
  • The theme customization and modification are not included in the product support.
  • Please ensure that you have installed and activated the “Evie Child” theme.

To modify the functionality and styling of the theme.

  1. Navigate to Appearance → Editor.
  2. Select the Evie Child theme to edit.
  3. Add custom CSS into Stylesheet (style.css) to override the styling of the theme.
  4. Add custom functions and WordPress filters into Theme Functions (functions.php) to override the functionality of WordPress and the theme.

To modify the template files of the theme.

  1. Using an FTP client or a File Manager on your web hosting to access the WordPress theme directory on your host web server.
  2. Copy the template file which you would like to edit from the parent theme folder “wp-content/themes/evie/”.
  3. Paste it into the same path in your child theme folder “wp-content/themes/evie-child/”. For instance, if you copy the template file from “wp-content/themes/evie/template-parts/header/header.php”, then you have to paste it into “wp-content/themes/evie-child/template-parts/header/header.php”.
  4. Edit the template file in your child theme to fit your needs.

You can find more details on WordPress template files in Template Hierarchy.

Up