Thank you for choosing this theme! This documentation assumes that you are already familiar with WordPress basics. If not, please take your time and read some tutorials around here. If you believe that something is not working properly in this theme and you can't find any answer in this documentation, feel free to contact us via our user profile and ask for help. Support works Monday through Friday and we'll try to respond you within 24 hours.
There are two ways to install the theme:
A) Uploading via WordPress admin
On ThemeForest go to your downloads page, hit the Download button and select Installable WordPress file only option. After downloading the ZIP file
log in to your WordPress admin and go to Appearance - Themes and click on Add New. Upload the ZIP file you downloaded. Once it's up, go to
Appearance - Themes and click on Activate link below the theme to make it live.
POST Content-Length Error when uploading theme
If you meet this error when uploading the theme, it means that your webhosting doesn't allow to upload large files. You need to increase the limits manually in your hosting admin panel or contact your server admin
if you don't know how to do that. If you're an advanced user or developer then all you need to do is increase upload_max_filesize, post_max_size, max_execution_time and max_execution_time variables in
your php.ini and restart your server.
Alternatively you can choose option B), to upload it via FTP.
After Theme Activation
In your WP admin you'll see a notice on the top that warns you to install the required plugins. Install and activate these if you need them.
If you already have content on your site then most likely you'll have to regenerate all image thumbnails, since this theme has its own custom image sizes. You can easily achieve that by installing this plugin:
http://wordpress.org/plugins/regenerate-thumbnails/ and after activation go to your Media Library,
select your post images and regenerate them with the new option. If you don't have any content you don't need to worry, image sizes will be generated automatically as you upload them.
Updating Theme
Download the installable WordPress theme ZIP file from ThemeForest again when you see a new version on our website and upload it via WP admin - Appearance - Themes - Add New
or alternatively upload the folder from the ZIP file to your server via FTP in yoursite.com/wp-content/themes/ folder (overwrite existing theme folder).
In case you made any modifications in the theme files, hopefully you did that using the child theme, so your changes won't be lost.
The fastest way to set up your theme like the demo is to import sample content. You can do this with a single click in Theme Options - Sample Content menu.
Warning! The importing process will remove your existing posts, pages and media library! It's recommended to use a fresh, clean WordPress install!
Note: due to licenses all images and videos will be blurred!
Important: If you change permalinks settings after import then probably you'll have to update all image paths in posts and pages!
Ajax content loading means that your site will not load the whole page again when you click on a menu, instead it will load the requested content only. It looks fancy and it's useful if
you want to provide seamless music for your visitors for example. The current AJAX engine uses the new
HTML5 history API to manipulate the URL bar instead
of the #hashtag way. This method is already supported by all major browsers and search engine crawlers can read it easily.
Limitations and workarounds
This option is not recommended if you're using many 3rd party plugins due to technology limitations. Why? After AJAX content request is done we should apply the javascripts on the loaded content.
It's easy if we exactly know all the required javascripts from the requested page. But it's not possible since users can install any plugins. Loading and executing all JS from the requested
page would be a solution but it's not bulletproof and it's heavy for some browser. However if you're familiar with javascript there is a workaround. In AJAX mode the theme calls
../empire/js/ajax-load.js file once the AJAX request is complete. This file contains all the javascript functions that we wanted to execute once a new content is loaded.
Just place your plugin's starting function in the file and it should work.
This theme is ready for translation, .po and .mo files are included in your theme's languages folder. In case you're not familiar with WordPress theme translation, you can find a great description here: http://codex.wordpress.org/Translating_WordPress
If you want to create more languages for your website, many people would recommend WPML plugin.
However it's not always a bullet-proof method. I think the easiest way to do achieve a multilingual website if you install a WordPress setup for each language
(into separate subfolders) and link the country flags to these installs.
E.g.:
English - yourdomain.com
German - yourdomain.com/de
French - yourdomain.com/fr
etc.
Creating a menu is often a sensitive point, so it's better to start with this before the rest.
In WordPress admin go to Appereance -> Menus. To create a menu, enter a title for your menu in Menu Name field and click Save Menu.
Now you can start adding your pages, categories or custom links to this menu. Don't forget to select your menu as Primary Navigation
in Manage Locations tab!
Check image above to see how your menu should look.
Tip: Don't add too much menu because it would ruin the layout. On smaller resolutions menu list could go out of the view. If you feel you need more menu just use [navi] shortcode
to place subnavigation on a page.
After activating the theme some new custom theme options will appear in your WP admin where you can fine tune many many great things!
General Settings
This is the page where you can set up the basics: turn AJAX engine on or off, upload your logo, favicon, insert tracking or other codes.
Also this is the place where you can enable/disable responsivity for mobile devices and retina ready display support.
Background Slider
Upload your images and create sliders for each post and page! Alternatively you can also set one common slide for all posts and/or page.
Layout & Animation
Here you can change your site's alignment, fine tune the opening animation and set the texture of sidebar.
Typography
Take full control of typography! You can add any font from Google Web Fonts directory just by typing
its exact name! In advanced settings apply different fonts, colors and sizes on different text parts.
Mp3 Player
Here you can set up an MP3 player on the sidebar. The player will not appear if AJAX is disabled, because music would stop on every page change.
Due to general user experience the player is disabled if the screen size is smaller than 1240px width or 690px height!
Footer Widget Areas
Here you can set the default footer widget areas for posts and pages. You can override these settings for each posts and pages in their editor page.
Sample Content
Import demo content with a single click and your site will look like the live preview in a few moments.
This theme includes 5 different page templates. When creating a page, you can select them in Page Attributes box on the right sidebar.
Default Page
Just a simple default page, nothing fancy extra.
Blog Posts - Classic
Display posts in a classic layout.
Blog Posts - Full Width
Display posts with full width images.
Blog Posts - Masonry
Display posts in a masonry layout.
Portfolio
Use this page to display your posts in a portfolio style with a category selector.
You can select which post categories to display below the Page Attributes box on the right sidebar.
Creating a blog page is simple:
In Post editor -> Post Settings box you can customize each post page: show/hide tags, social sharing icons and author info below post content.
This theme supports the following post formats:
Link Post Format
In post editor after selecting this post format, just paste your link URL into the newly appeared field and the post title will take visitors to your link.
Image Post Format
If you select this format your featured post image will appear first above the post content
Gallery Post Format
Select this format to mark post as a gallery. Some images of the attached gallery will also appear in masonry blog layout.
Quote Post Format
Select quote post format and insert your quote into the post editor. You don't have to put them into a blockquote, it'll be handled automatically.
Audio Post Format
After selecting audio post format, just paste your audio embed code or URL. Alternatively you can upload your own MP3 file.
In this case a custom audio player will appear.
Video Post Format
Paste a YouTube or Vimeo embed code here.
Creating a portfolio
This theme includes Revolution Slider plugin by default. It helps you to create stunning
slideshows. This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options
to create your own effects.
You can install/activate it in Appearance -> Install Plugins menu.
This theme also includes a sample content for revolution slider. To make it work, follow these steps:
A more detailed documentation about this slider is available here.
This theme includes Contact Form 7 plugin. With its help you are able to manage multiple contact forms,
plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.
You can install/activate it in Appearance -> Install Plugins menu.
If you're not familiar with this plugin, find more info about it here: http://contactform7.com/docs/
In Theme Options -> Footer Widget Areas settings you can set the default footer widget areas for all posts and pages. Alternatively you're also able to create new widget areas. You can override these settings for each posts/pages in their editor.
Many custom widgets are attached to this theme. They are marked with a * star before their titles. You can find them in Appearance - Widgets menu.
A shortcode allows you to add content or function to your post/page easily. For example if you type [hr] into the editor, the theme will process that and a horizontal ruler will appear.
Generally a shortcode looks like this: [shortcode parameter="value"] Your content... [/shortcode].
To make your life easier, there is a built-in shortcode editor in every post/page editor where you can select the shortcodes from a list,
set their available parameters and paste them into editor area.
Shortcode List
Here is a list below of all shortcodes available in this theme. Attributes with italic fonts are optional parameters.
Audio Player
A custom audio player to play MP3 files.
[audio url="http://yoursite.com/uploads/music.mp3"]
Buttons
Predesigned buttons
[button link="http://yoursite.com" color="#000000" align="right"]Button Text[/button]
Call to Action
Places texts and a button into columns.
[two_third]Your call to action text goes here![/two_third]
[one_third last="yes"][button link="#" align="right"]CALL TO ACTION BUTTON![/button][/one_third]
Columns
Divide your page layout with columns. Last parameter must be used for the last column in a row. Available columns: one_half, one_third, two_third, one_fourth, three_fourth.
[one_half last="yes"]Your content goes here.[/one_half]
Google Fonts
Display any font from Google font directory. Just type the font's exact name. Optionally you can set the font size and add CSS stylings too.
[font name="Open Sans" size="16" style="color: blue;"]Your text goes here...[/font]
Google Map
Display a location on Google Map.
[map address="Paris, France" style="width: 100%; height: 300px;" zoom="10" infowindow="Hello World" hidecontrols="yes" marker="yes" markerimage="http://yoursite.com/images/marker.jpg"]
Headings
Display a nice heading. There are two styles available.
[title title="HELLO" subtitle="WORLD" style="2"]
Icons
Display social icons, FontAwesome icons or your custom icons.
[icon type="facebook" link="http://yoursite.com" target="_blank"]
[icon type="fa fa-icon-name" color="#123456"]
[icon image="http://yoursite.com/images/your_icon.png" link="http://yoursite.com"]
LiteUp
All columns inside this shortcode has a low opacity and they fade in one by one.
[liteup repeat="forever"]
[one_third]Column one[/one_third]
[one_third]Column two[/one_third]
[one_third last="yes"]Column three[/one_third]
[/liteup]
Navigation Line
If the sidebar menu is not enough, place a menu inside the page.
[navi]<ul>
<li><a href="http://yoursite.com/page">PAGE ONE</a></li>
<li><a href="http://yoursite.com/page">PAGE TWO</a></li>
</ul>[/navi]
News
Display posts in plain news style without image.
[news showauthor="yes" showcomments="yes" showcategory="yes" showexcerpt="yes" limit="3" category="news"]
Posts in Carousel
Show posts in a carousel. The first column is the information column where a title, description and carousel arrow navigation will appear.
[posts category="travel" columns="3" limit="5" title="Post Carousel" description="Lorem ipsum..." showexcerpt="yes" showdate="yes" showcategory="yes"]
Posts
Show posts in 2,3 or 4 columns. You can use it to display posts as portfolio items.
[portfolio category="slug" columns="3" limit="6" showtitle="yes" showexcerpt="yes" showcategory="yes" align="center"]
Pricing Table
Show your product or service plans in a nice table with style.
[plan price="$49" per="PER YEAR" title="STANDARD" button="Sign Up Now" link="http://yoursite.com" bold="yes"]<ul>
<li>Feature list</li>
<li>Feature list</li>
<li>Feature list</li>
<li>...</li>
</ul>[/plan]
Responsive Appearance
Show your content on specific devices only. Available device values: desktop, tablet, mobile.
[respo device="tablet"] Your content goes here... [/respo]
Rulers
Divide your content areas with horizontal rulers.
[hr]
[hr2]
[hr3]
Tables
Create styled tables quickly.
<table class="style2">
<thead>
<tr>
<th>COLUMN 1</th>
<th>COLUMN 2</th>
<th>COLUMN 3</th>
<th style="text-align: right;">COLUMN 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product #1</td>
<td>Description</td>
<td>Another Field</td>
<td style="text-align: right;">€1.00</td>
</tr>
</tbody>
</table>
Tabs
Display content in horizontal tabs.
[tabs titles="TAB ONE, TAB TWO, TAB THREE"]
[tab]Tab One Content[/tab]
[tab]Tab Two Content[/tab]
[tab]Tab Three Content[/tab]
[/tabs]
Testemonial
Show reviews from your clients nicely.
[testemonial author="John Smith" company="Cool Company Ltd."]Client quote text...[/testemonial]
Testemonials
Show testemonials in a carousel.
[testemonials]
[testemonial author="Client #1" company="Company #1"]Quote text #1[/testemonial]
[testemonial author="Client #2" company="Company #2"]Quote text #2[/testemonial]
[/testemonials]
Toggles
Show/hide informations in toggles. Alternatively you can use your custom icon.
[toggle title="A question?" image="http://yoursite.com/images/icon.png"] Your content... [/toggle]
Typography - Circled Letter
Show a letter or number in a circle.
[circle]L[/circle]
Typography - Cutted Number
Large cutted number.
[num]03[/num]
Typography - Dropcap
Enlarge first letter of a sentence.
[dropcap]A[/dropcap]
Typography - Lists
Create styled lists quickly.
Typography - PullQuote
Display a quote within a text.
[pullquote type="modern" align="right"]Your quote...[/pullquote]
Vertical Space
Apply a vertical space between your contents.
[vspace size="100px"]
In case you need to modify the theme source, you should use the included Child Theme. A WordPress child theme is a theme that inherits
the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. That way, when the parent theme is updated, your modifications are preserved.
On ThemeForest go to your downloads, hit the Download button and select All files & documentation option. Extract the downloaded ZIP file and you'll find the child theme folder (empireii-child).
ZIP this folder only and upload it via your WordPress admin in Appereance - Themes or alternatively upload the folder via FTP into yoursite.com/wp-content/themes/empireii/.
You can find more information about using Child Themes here and here.
Please note that support covers getting setup, trouble using any features, and bug fixes. Regretfully we cannot provide support for modifications or 3rd party plugins. In these cases you'll probably need to hire a coder.
Nowadays customizing a theme's styling is easy with the help of your browser's development tools (mostly in FireFox or Chrome). Just hover your mouse over the element you want to style,
right click with your mouse and select Inspect Element in the floating menu. A new window will appear, where you'll see the HTML source code in the left panel and the selected element's stylings
in the right panel. Your selected element will be higlighted in the code and the browser.
In the right panel you're able to add, remove or modify CSS values and you can see these changes in real time. Important: these changes you made will NOT overwrite the CSS file! You have to do
that manually. Once you have the styling you wanted find the CSS file in the theme's folder, edit these changes and save it.
Always use a text editor for editing theme files, e.g.: NotePad++. Don't use word processors like Microsoft Word or Office!
Troubleshooting
There might be cases when it seems like everything have stopped working. Sometimes a small JavaScript problem or a plugin can stop all the functions. I created a general checklist to help you track the issue in case you don't want to wait for support.
1) Open browser's error console to check if it's a JavaScript issue. Select Tools -> Web Development -> Browser Console in your browser. The console will show an error description and the file where the problem is.
Make sure that it's an error, not just a warning or a log.
2) Disable all WordPress plugin and check your site again. If it works now, start enabling plugins one-by-one to figure out which one caused problem.
3) Switch back to default theme, enable your WordPress plugins again and check your site. If it works then probably it's an issue with the theme.
- Theme Prince -