Manual
Manual
enovathemes.com
Enovathemes
Contents
Permalinks ......................................................................................................... 4
CSS ..................................................................................................................... 6
Import/Export .................................................................................................... 6
Footer .................................................................................................................. 12
Pages ................................................................................................................... 14
Woocommerce .................................................................................................... 14
Widgets................................................................................................................ 14
Tips ...................................................................................................................... 16
Troubleshooting ................................................................................................... 22
Categories are not assigned to posts/custom post types after import ............. 22
Theme requirements
Your purchased zip file contains several files and folders that needs explanation
Demo folder contains all the files for the theme demo. These files are
generated for each demo of the theme
Propharm folder is the theme itself
Propharm-child is the empty child theme that you can use to extend the
main parent theme
Changelog.txt file contains all the changes/bug fixing that were registered
during theme lifetime
Propharm.zip is the zip file of them theme itself. Use this file you need to
upload it from WordPress admin
manual.pdf – this is your help file and your starting point.
snippets – useful code snippets
Theme installation
In your download pack find Propharm.zip file. That is the file that needs to be
installed. You can install theme with WordPress admin panel or you can use FTP.
For FTP you need to unzip the zip file and upload to wp-content > themes.
Permalinks
To install demo data with one click you need to follow these steps:
During installation process you need to install required plugins “One Click
Demo Import” and “Regenerate thumbnails”. Just follow the installation
process.
Once installed “One Click Demo Import” plugin you will see a new menu
item in Appearance >> Import Demo Data
From Appearance >> Import Demo Data admin area choose the demo you
want and click the import button
All the demo files are also included in your download pack, so if you need a
custom data import you can use these files.
All the images will be imported with original sizes without cropping. This
way your import process will be quicker and your server will have less work
to do. After the import completed go to the WordPress >> Tools and use
the Regenerate thumbnails plugin to crop images to theme supported sizes.
!!! Important, regenerate only Featured images
Also you need to clear the WooCommerce cache: go to WooCommerce >>
Status >> Tools and clear the WooCommerce transients and regenerate
product lookup tables
Also do not forget to set the shop page from the WooCommerce >>
Products settings, make sure it is the one that comes with the theme
If for some reason you need manual data import, follow these steps:
From Tools >> Export >> WordPress choose the xml file you want (all.xml)
and choose
To import widgets you will need Widget Importer & Exporter plugin.
Download it from the link and from Tools >> Widgets import/Export import
the widgets.wie file of the targeted demo
Next go to Appearance >> Theme options >> Import/Export and Import the
options.json file. Open the json file using the notepage or any plain text
editor and copy the content, go to Theme options >> Import/Export click
the import button, paste the code and click import.
Go to Revolution slider WordPress menu and from there choose import
slider, the slider demo file is a zip archive file
Also you need to assign imported menu to theme locations. Go to
Appearance >> Menus from there go to “Manage Locations” and assign
appropriate menu to appropriate location.
Theme options
Here we will highlight the most important option that need explanation. All other
options are self-descriptive, so there is no need for extra explanation.
Disable Gutenberg
By default WordPress 5.0 comes with new block editor "Gutenberg". If you want
classic editor or Visual Composer, make sure this option is active. And make sure
you check all the post types you want to disable the Gutenberg editor for.
By default all theme scripts are enqueued separately. This is done to make
possible scripts dequeuing if the user needs so. If this option is active theme loads
the combined version of scripts, where all the scripts of the theme are combined
in one file called controller-combined.js. With this option active user can no
longer dequeue scripts, but combined scripts show better performance and
higher level of speed.
API settings
CSS
Theme has very detailed control over custom css. Here you can target different
device types. It helps you to take more control over the site responsive look. But if
you want to modify theme styles or add new use the WordPress customizer
additional styles option or child theme.
Import/Export
Whether you need to import manually the options.json file or you need to back up your
theme options, you can use import/export tool.
Header is a custom post type. If you click add new header you will see that it has
similar interface as regular post or page. You have the editor and additional
options under it.
First, let us look at the additional header options. You have header type
Desktop
Mobile
Sidebar
So, first you must choose what type of header you want to create. After that, if
your header type is Desktop or Mobile you can set additional options like
transparent header, sticky header, header shadow and adjust responsive visibility.
By default Desktop header type can be visible from screens 1280px wide. Mobile
header type is only visible for 3 screen sizes:
So you must adjust your desktop and mobile header types according to each
other. Make sure your desktop and mobile header types are not visible on the
same screen size. The same is true for the Sidebar header type and mobile header
type. Sidebar header type has limited responsive visibility options – it is only
visible on desktop, so you should always add the mobile header type if you use
the sidebar for your desktop navigation.
Once you have configures your header options it is time to build it. And here you
have 2 options:
If you are familiar with Visual Composer Page builder plugin you know how it
works, if not, please take a moment and watch a couple of videos to understand
the basic principles of Visual Compose Page builder plugin.
Header builder is created using the same logic as Visual Composer, but with extra
modifications to make it easier to create any header styles you want using the
drag and drop functionality of Visual Composer. The same logic is true for footer
builder, page title sections and megamenu.
Although the drag and drop Frontend builder is quite simple and very intuitive a
couple of highlights need to be done to make it more clear for you to understand
how the header builder works.
First of all the Row element – as it is the main container of header it needs some
additional options to work with the header builder. And we just added these new
options. BTW all the default Row options are working at 100% for header builder.
Please click on the Row edit options and navigate to “Header builder” tab.
Height
this is the header height. Make sure the value you enter is integer and does
not contain any string
Z index
if for some reason you will need to adjust the priority of row for header
builder you can control it with the Z-index. Value should be between 1 and
1000. The higher is the value the more priority it has. For example, if you
have two rows one under another and if you want first row to have more
priority than the second one, add the Z-index for two of these rows. For
first add 5, for the second one add 2.
if your header is also sticky and you want to change the header height for
sticky version enter the integer value here.
and if for some reason you need to hide the row in sticky header version,
just check this checkbox.
And if the row is the main header container, the column if the header is the main
wrapper. It does not have any additional Header builder specific option. And of
course all the columns settings work for header builder too. The only thing that is
important here is that all of the header builder elements should be added to the
column.
If you click the small plus yellow button to add elements to column. The Visual
Composer elements popup will open. When working with Header builder you
should add only those elements that are grouped under header builder tabs.
Depending on your header type you have 2 options
Desktop header
Mobile header
Each element has many options for typography, styling, positioning etc. Most of
these options are self-descriptive, but some highlights are required.
The header navigation menu element – this element adds your menu to your
header. The most important option of it is the “Menu name”. If your website does
not have menus created this filed will be empty. So first you should create a menu
from the Appearance >> Menus.
Don’t assign the menu to any of theme’s locations. As these locations are for the
default theme built-in header. So just create your menu, save it and get back to
your header builder. Now, when you visit your header navigation menu again you
will see your menu in the list. If you have multiple menus create you will see the
list and be able to choose one of it.
Also the One page layout navigation option needs some explanation: if you want
to use your menu as one page navigation (to activate one page layout visit your
targeted page and find the page options under the main page editor, make sure
the One page layout checkbox is active) make sure this checkbox is checked. And
once you check it an additional filed will appear with the One page navigation
offset – this option is useful if your header is sticky. So when scrolling to the
target on your one page layout the sticky header will overlap your target. So to fix
this you just need to add an offset value that is equal to your sticky header height.
And a little bit about alignment. Each header element has align option (left by
default, center and right). Left/Right aligned elements have floating. So be careful
– remember the last right align element that you see in your header layout is the
first element added to it. To demonstrate that take a look at the frontend version
and backend version of the same header:
As you can see, the header navigation element is the last in the list, although in
the frontend it is the first after the logo. That is because the header navigation,
search toggle and cart toggle elements are all right aligned. So remember:
Quick note: the last right align element that you see in your header layout is the
first element added to it.
To assign your header globally go to the Appearance >> Theme options >>
General and select the header from the list. If you want to have different header
for your pages navigate to the targeted page edit screen and under the main page
editor find the page options. From there you can assign any header you want to
the targeted page. So, your entire website will have one header, and your
targeted page will have different header.
Megamenu
Theme comes with built-in megamenu builder. To access it go to the WordPress
admin menu >> Megamenu
Megamenu width
Megamenu stretch
Custom form styling
Custom widget styling
With megamenu width option you can adjust the megamenu width. And if your
megamenu width is 100% you can choose to stretch megamenu to fit the
available screen width OR keep it 100% but aligned with the main theme
container.
If you want to make a 100% stretched megamenu make sure the header that
contains your megamenu has the main Row stretch option is set to “Stretch Row
and content”.
With megamenu you have no content limitations – you can use any element from
Visual Composer elements menu. If you want to add navigation menu to your
megamenu open the Visual Composer elements menu, navigate to Desktop
header tab and choose the megamenu element. One important note:
Quick note: when choosing megamenu menu, make sure it is not the same menu
name as the megamenu parent menu.
You can create megamenu both in frontend editor and in the backend editor.
Once you finish your megamenu it is time to assign it to your main menu item. To
do that go to your man menu open any menu item you want set the Megamenu
option to true and from dropdown choose the megamenu you created. Save the
menu and go to your main menu header – and your megamenu will appear as
your selected menu item submenu.
Footer
To access footer go to admin menu >> Footers. Footer is a custom post type. It
has similar interface as regular posts or pages. Click add new and you will see it
has default editor and additional options under the main editor. For additional
options you have:
Sticky footer
Custom form styling
Custom widget styling
If you want to make your footer sticky, simple check the checkbox. If your footer
contains form elements or widgets you can adjust widgets/forms styling
individually for each footer. Simple activate the Custom form styling Custom
widget styling and adjust styling options according to your design.
With footer you have no content limitations – you can use any element from
Visual Composer elements menu. If you want to add navigation menu to your
footer open the Visual Composer elements menu, and find the Navigation menu
element under Enovathemes tab.
You can create footer both in frontend editor and in the backend editor. Once you
finish your footer it is time to assign it to your site. To assign your footer globally
go to the Appearance >> Theme options >> General and select the footer from
the list. If you want to have different footer for your pages navigate to the
targeted page edit screen and under the main page editor find the page options.
From there you can assign any footer you want to the targeted page. So, your
entire website will have one footer, and your targeted page will have different
footer.
To access page title section go to admin menu >> Title section. Title section is a
custom post type. It has similar interface as regular posts or pages. Click add new
and you will see it has default editor. Page title section is not specific page title
section – this of it like a template for page title section. Here you can create the
structure and styling using regular Visual Composer elements with drag and drop
builder both in frontend and backend. And after that assign the page title section
to any page you want and the styling and structure will be loaded with the page
title section attributes. Specific page title section elements you can find in the
Visual Composer menu elements under the Title section tab.
You can create as many title sections you want and assign it globally or
individually for any page/blog/projects/shop. To assign the page title section to
blog/projects/shop go to the Appearance >> Theme options >>
Blog/Projects/Shop and choose the page title section from the list. To assign a
page title section to any page go to the page edit screen, and under the main
editor find the page options. From there choose the title section you want for
your targeted page.
Posts
There are no special highlights for posts. Only, if you don’t want the Gutenberg
editor for your posts you can deactivate it from the theme Appearance >> Theme
options >> General >> Disable Gutenberg. Make sure this option is active and
make sure you check the post post type to disable the Gutenberg editor for it.
Posts have 9 formats support and additional options for formats are found under
the main editor. Here you have regular posts, gallery, video, audio, chat, quote,
status, link, and aside.
Pages
Pages do not have special modifications, only extended options, that you can find
under the main page editor in the page edit screen. All these options are self-
descriptive, so no extra explanation is required. Additional information is the page
template – if you want to create the page with the Visual Composer, make sure
you page template (from main editor see the right part – under the publish box) is
set to Visual composer.
All other projects options you can find just there in the theme options.
Woocommerce
Theme has 100% Woocommerce compatability, so any external plugin addon for
woocommerce will work with it if it was developed with woocommerce
standards. Theme also includes the woocommerce elements in the Visual
Composer and has the corresponding styling for all of the woocommerce default
elements.
Widgets
Theme supports all the WordPress and Woocommerce default widgets. And also
we included custom widgets. For some of the custom widgets you will need to
adjust the API keys, more about that you can find in the theme options >>
general. And all the instructions are also present from the api part links. The only
thing here is to highlight is the Facebook like box. You should paste the app ID
from your Facebook account applications.
When Visual Composer is included in the theme and you don’t have separate
license for it you need to wait on us to update Visual Composer on our side and
push it to you.
To update Visual Composer, you don’t need any license, as we already bought
developer license. Each VC update is tested with our development team and
included into the theme update.
Go to your Themeforest dashboard >> downloads. From there you can find new
version of theme. Download it. Also in download pack you will find
js_composer.XX.zip (XX version number) file that is the latest version of VC, please
remove old VC from your site and install new version.
Go to your Themeforest dashboard >> downloads. From there you can find new
version of theme. Download it. Use FTP to update the theme. For FTP you need to
unzip the zip file and upload to wp-content > themes. You will not lose any data
during update, however it is recommended to export theme options (WordPress
admin >> Appearance >> Theme Settings >> Import/Export “choose export the
file).
Where can I find demo data?
When you downloaded purchased theme zip file there you should see several
folders and files. If you downloaded files from ThemeForest you will get a zip
file like this: themeforest-10581527-mobilz-responsive-multipurpose-theme.zip;
Open that file and there you will see a list of files and folders, go to demos folder
and there you will find demos folders with files included.
By default WordPress index (front) page shows blog latest posts. But if you want
you can set separate pages for blog page and front page. To do this you need to
create two pages.
Go to pages
Add new
Name it Homepage/Home/Whatever
Save it
Add new page
Name it Blog/Whatever
Save it
Go to settings > reading
Choose “Front page displays” a static page and from dropdown menu
bellow (Front page) select your created homepage
Right after that in second dropdown menu (Posts page) select your second
created page “Blog”
Sometime you need to extend the theme you bought with custom functionality or
styles, but you can’t include you changes directly into the theme files, as each
time you update the theme you will lose your custom code. To be able to write
custom code and update theme without your custom data lose you need to
switch to child theme. Child theme overwrites parent theme.
If you want to add custom styles switch to child theme and edit style.css of child
theme. If you need custom functionality to include, again switch to child theme
and add your functions to functions.php of a child theme. If you need to overwrite
parent theme file, copy that file and put inside child theme folder (if file is nested
inside folders, also create parent theme folders in child theme). Now edit copied
file and you will not lose data when updating parent theme, and you will keep
your custom data.
All major browsers come bundled with developer tools, which allow us, among
many other things, to locate how a style is applied to a particular element, this is
very helpful if we are looking to modify said style.
Web developer tools can be accessed by pressing the F12 key, or right clicking in
the page and selecting Inspect Element (in most browsers)
The layout of the developer tools differs a little between browsers, but the basics
we need to use here, are pretty similar in all of them. We recommend to
use Google Developer Tools.
When you need to inspect for several parts of your page to find styles, that are
responsible for that part, find out the structure, inspect class names or find ID of
particular element on page. How does it work? Simple: just put the mouse cursor
on the element you want to inspect and make a right click >> choose inspect
element, and google developer console will open with styles and structures
located on that part you inspected.
When you buy a theme, there is no need to be a programmer to use it, however
some small skills are required to complete small custom tasks. Sometime you
need to do some small modifications – apply small custom styles to elements. But
how can you do it with our theme? Simple, we created options for you to make it
easy.
First thing you need is the starting point – you need to know what element needs
to be modified with your custom style, so you can target it. Use google developer
tools to target specific elements in your page layout.
Sometimes you need to find post id. But how can you do that? Go to your admin
page and go to your posts (also custom posts/ pages) page, where you can find all
your posts/pages listed. Enter the desired post/page and inspect the url of that
post/page, you will find something like this: http://yoursite/wp-
admin/post.php?post=448&action=edit. See the number 448 – that it the post ID.
Your number may differ.
Most custom fonts have 3-4 formats included in its pack. They
are: eot, woff, truetype, svg. Upload that files using custom font upload button
(you can also upload custom font files as you upload images from WordPress
media library). Only, make sure your server allows these files formats to be
uploaded via WordPress.
Once you uploaded custom font you need to write font-family style, to be able to
use custom font family in content.
Please see the custom_font.txt file in the snippets folder of your download pack
You need to change the path of each uploaded file to match your font family files
and also give a name to your custom font family. Remember, if you want to have
your custom font available in all major browsers, you need to have 4 types of
custom font file: oet, woff, ttf, svg. All the patterns are included in code above,
just make sure the path is correct.
After you uploaded and wrote a style for custom font family it is time to APPLY
that font family to elements you want. If you want to assign custom font family to
hole website as main font family go to theme options >> styling and add styles.
If you need to create one page layout, you need to customize some options,
found in theme options >> general, and also create page itself. First thing you
need to do is create a page, with sections (row) that have unique id given to it
(row id option). Try to name it as unique as possible. Use prefixed, like this: et-
about, et-team, et-contact
After you created your page you need to tell WordPress, that you are going to use
this page as a one page layout. Under page editor find an option “one page”, turn
it on, now WordPress understands, that this page is going to be used as one page
layout.
Next you need to assign your sections to menu. And here you have 2 options: if
you want your one page navigation to be your header menu, you need to add
sections to header menu. If you want your one page layout to have aside
navigation with bullets, add menu items with your sections to bullets. (Create a
menu from WordPress menus, don’t assign it to anywhere, go to your one page
layout page, and add to it the elmenet from Visual Composer elements menu
under the Enovathemes tab “Bulleted navigation”. Choose the menu you created
for bulleted navigation and adjust the styling). First of course, you need to create
a menu, go to Appearance >> Menus and create a menu. And here is the
important thing: if you need top level navigation as your one page layout
navigation assign your menu to Header Menu, if you want aside bullets as your
navigation assign your menu to Bullets.
To add sections of one page to menu you need absolute path of your url + #id
(example – http://mysite.com#et-about). Only in this way your one page menu
will work properly.
Now it is time to see theme options of one page layout. Go to theme settings >>
general
Here you can adjust speed of scroll. If you want to show id in your browser url
field when navigating from section to section turn on layout hash.
Again one more important option – One page menu filter. If for some reason you
need a top level menu, that has both internal links of one page layout and also
external links, that are not part of your one page layout, here you need to enter
comma separated ids if menu items, that you don’t need to include. How to find
menu ids? Use google chrome developer tool to inspect a menu item and find out
id.
By default, the Text widget only support text and HTML. With the code
below, shortcodes would be supported. Add this code to functions.php if your
theme/child theme.
To find your license key/purchase code you need to log into your ThemeForest account
and go to your “Downloads” page. Locate some of the our themes you purchased in
your “Downloads” list and click on the Download and next on the License
Certificate&purchase code link in drop-down menu.
After you have downloaded the certificate you can open it in a text editor such as
Notepad and copy the Item Purchase Code.
A common issue that can occur with users new to installing WordPress themes is
a “Broken theme and/or stylesheets missing• error message being displayed
when trying to upload or activate the theme. This error message does not mean
that the theme you have purchased is broken, it simply means it has been
uploaded incorrectly. Luckily, there is a very easy fix.
This is known issue of the WordPress import, to fix it, find the wp-import-fix.php
file in the snippets folder and upload it in the site root, after that navigate in the
browser window to the www.yoursite.com/ wp-import-fix.php the script will fix
the empty category bug, after that don’t forget to remove the file from the site
root.
All these video formats are no supported among all devices and browsers. That is
why, to make html5 video cross-browser and cross-device compatible you need to
follow these steps
Please see the html5_video.txt file in the snippets folder of your download pack
After you import the menu megamenu breaks
If your theme supports megamenu, it may have problems with WordPress import
tool. When imported xml file, by default WordPress does not understand extra
megamenu fields, so it just ignores theme. You need to customize megamenu by
hand. So set megamenu option of first level menu item to true, choose
columns number, add background image and your megamenu is ready!
At the time of writing there are 38,000 plugins in the WordPress repository, more
than 3,500 on Themeforest and quite a few scouring the internet unchecked.
Themes for WordPress are just too many to even mention. It stands to reason
that not all combinations will work, in this article we’ll see how we can check for
plugin conflicts and single the odd one out.
Start by disabling all plugins, if you have caching plugins active, first empty
the cache and then disable the plugin entirely, emptying your browser’s
cache as well is a good idea.
Refresh your permalinks
Go back to your site and check, the issue should be gone.
Start enabling plugins one-by-one and check if the problem appears after
each plugin activation.
When the problem reappears, the last activated plugin is either the one
causing the problem, or its combination with the other plugins, or the
theme is not working.
Disable and/or remove the problematic plugin and continue on problem
free. If the plugin provided a function you absolutely need, you might want
to look for an alternative in the WordPress plugin repository, and chances
are there’s more than one plugin doing the same thing.
To remove any code from search results you need to give some short description
of pages. Go to each page edit screen, from screen options check excerpt and
scroll down you will see a text area with Excerpt. Write some small description of
the page, and that description will be available in search results without code.
When you got issues with demo data import with “One click demo install”, you
should check your php.ini configurations at your server/hosting. We recommend
to change these options in your php.ini file (if you don’t have access to your
php.ini file, ask your hosting/server provider, they should configure it for you):
If your header links are not clickable, you probably activated one page layout with
header top navigation on pages. First check if links does not work on each page.
Probably they are not working on several pages, but not all. Go to that pages edit
screen, and under editor find option one-page layout, uncheck that option, save
the page and now on that page links should work fine. Do the same for other
pages.
Make sure you removed the width and height attributes from the svg icon
After import post images are full size
Not to overload demo data import process we included only original images, you
should use regenerate thumbnails plugin to regenerate all the featured image
sizes.