Welcome to RockoX - The multifunction One Page Parallax and Responsive Wordpress Theme! RockoX is a perfect theme for web studio and creative agencies as well as for business ventures, freelancers and individuals to realize all your wonderful ideas and turn them into prosperity. With multiple dark and light colourful layouts, lots of CSS and JQuery animations, quality codes and supportive services, RockoX will never disappointed you!
Before getting started, please check through this document first as we have listed out all necessary information related to RockoX's installation and using guides.
If there is any further problem that our documentation could not cover, please search from our Knowledgebase, check our Tutorial Videos, and perform a Forum Search. Probably your question or issue have already been brought up and the answer is waiting to be found. You can also create a new topic with all the details related to your problem (Remember to include your site's URL as well). We will try as best as possible to help you solve the problem. Thank you.
With all our sincerities, we wish you an wonderful experience with RockoX!
To get this theme you must have WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex or you can watch the Instruction Video created by Woo Themes. Below are some useful links on WordPress information:
WordPress Codex – general information about WordPress and how to install it on your server
When purchasing RockoX theme from Themeforest, you will be able to download RockoX files with your Themeforest account. There will be two packages for you to choose: The Main Files contains all files, or the Installable WordPress Theme files with just necessary installable WordPress theme files.
If you choose Main Files, there will be an RockoX Theme Folder included:
RockoX Theme Folder – contains the rockox.zip and rockox-childtheme.zip. The child theme is particularly for users who want to make code changes.
Licensing Folder - contains the licensing files. (This is not your purchase code that you need to download from Themeforest).
The Installalable WordPress Theme includes only the rockox.zip file
rockox.zip - this is the parent wordpress theme. We recommend you install it via WordPress panel. If you install it via FTP, you have to unzip it and use the extracted folder.
1.3. Free Forum Support
All of our products come with free support via our dedicated Support Forum . Support is available in every questions regarding theme’s features or problems with the theme. (We will not work with your code customizations or third-party plugins. If you need help in these problems, please contact with a developer to solve them).
We presented the guides below assumed that you have WordPress already installed. (If you haven't,
go there for WordPress installation guide).
The RockoX theme can be installed by two methods: through WordPress, or via FTP. Check the Installation Via WordPress and Installation via FTP sections for each method. Our Tutorial Videos will also give a clearer instruction for you on these two.
2.1. Installation via WordPress
Follow the steps below to install RockoX via WordPress.
Step 1 - Unzip the downloaded package from Themeforest. Find the folder theme and inside it find the file rockox.zip
Step 2 - Login to your WordPress dashboard, go to Appearance > Themes click Install Themes tab and select Upload
Step 3 - Click the Browse button and find the file "rockox.zip" on your computer.Click "Install"
Step 4 - Wait the theme being uploaded and installed.
Step 5 - Activate the theme: Go to Appearance > Themes and Activate.
Common Install Error: Are You Sure You Want To Do This?
The “Are You Sure You Want To Do This” message may occur, means that you are limited in upload file size. Consider install the theme via FTP if this happens, or call your hosting company and ask them to increase the limited size.
2.2. Installation via FTP
Follow the steps below to install RockoX via FTP.
Step 1 – Log into your hosting space via an FTP software
Step 2 – Unzip the rockox.zip file and ONLY use the extracted rockox theme folder
Step 3 – Upload the extracted RockoX theme folder into wp-content > themes folder
Step 4 – Activate the theme: Go to Appearance > Themes and Activate.
Step 5 – You will get a notification to activate the required plugins. See below.
You should transfer text files like PHP files via ASCII transfer type, and for other types of files such as images, you should use binary transfer type. Otherwise you can get errors.
2.3 How to update the theme
You can update your theme via FTP or via WordPress admin panel. However, make sure that you have already downloaded the new updated theme files from Themeforest first.
Important Update Infomation
Each update version comes with new amazing features and we will try our best to brings them immediately to you. Below are some things you need to prepare before update.
- Backup Your Current Theme – It’s always a good idea to keep a backup of your current theme. Log on to your server or cpanel and make a copy of your current "RockoX" theme folder to your computer. If needed, you can reload the previous version. Its also a good idea to backup your theme options. There is a “Backup” tab in theme options to export your settings. And always be sure to make a copy of your custom CSS field and tracking code.
- Do Not Keep Older Copies of The Theme In WP Theme Folder – You should completely remove all previous RockoX theme folders before adding the new updated theme folder, or you could end up with WP path issues, etc.
- Do Not Rename The Theme Folder – If you rename your theme folder when you update, the path will no longer be valid. WordPress stores menus, widget settings and some other settings by folder path. You need to rename your theme folder back to the original state as while it first be downloaded, and your settings, menus, widgets will be restored. If you need to keep your previous theme folder, then simply make a copy of it some elsewhere before you upload the new theme
- Reset Browser Cache - It is always recommended to reset your browser, plugins, server cache when you update. Visual issues may happen, and cache needs emptied. Each browser allows you to remove cookies, history and other data.
- New Visual Composer - When update versions comes with new version of Visual Composer, you should delete old-version and re-install it again.
3. Demo Content
Import All Demo Content – Now users can quickly and easily import our demo content with only one click to the button. This is the preferred method because it's the fastest and easiest way to get our demo content. It will import all our pages and posts, several sample sliders of each slider type, widgets, theme options setting, etc.. If you wish to use our One Click Demo Content Importer, please see the guide below
Some Important Items About The Demo Content Images – Our demo images are not included because those are licensed stock photos which are not allowed to be shared. Instead we will replace by other images
4. Themes Options
Theme Options panel is a powerful tool for you to control the theme settings in the easiest and fastest way. No need to touch on the code, you can adjust the background, color, logo,... and many other settings there.
Find Theme Options in the directory: Appearance » Theme Options. It included General settings, Logo Settings, Styling settings, Menu settings, Blog settings and Shop settings.
4.1 General Settings
- Footer Page Enable you to choose a custom page to be theme's footer.
***To create Header or Footer page: In Dashboard, go to Pages > Add New , then create your Header/Footer page. See more at section 6.4. Footer Page below.
- Google Analytics Tracking Code, Space before, Space After For developers who want to custom more
- Seo Settings Enable/Disable SEO settings. Included SEO Keyword, SEO Title and SEO Description
4.2. Logo settings
Logo: Upload your brand's logo.
Logo Retina Upload the logo to be showed on Ipad or Macbook. Enter the tail "@2x" after the logo's name to ensure logo load good on retina devices it.
Custom Favicon: Upload favicon logo which be showed on site tab, next to tab title.
Apple Touch Icon: Upload the logo to be showed on mobile
4.3 Styling Settings
FullWidth / Boxed Choose style to display Homepage: Fullwidth or Boxed
Right to left Support sites to use Right to Left language such as Arabic,...
Dark and Light Choose RockoX Dark version or Light version
4.4 Menu Settings
Show Search Box Turn ON to activate search function in menu
Show Breadcrumb Turn ON to activate Breacrumb function in menu
5. Widgets and Sidebar
To create sidebar with widgets, follow the steps below:
Step 1 : Navigate to "Appearance > Widgets"
Step 2 : In left side is the provided available widgets, and in right side are your sidebars. Simply drag and drop your selected widgets
from the left side into the right side in the sidebar you want.
Pages are probably the most important content in a site. You can create as many pages as you want, in different templates and styles, such as homepage, normal page (default), footer page, blog page,... Visual Composer is also a power tool in building multifunction sections in your pages.
6.1 How to create Home page
Homepage may included various sections: Banner, Menu, Section about, services, team, work, pricing, contact, map...
Here are the series of tutorial videos on set up Homepage sections
6.2 Visual Composer
Visual Composer for WordPress is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.
6.3. Footer page
To create Footer page:
Step 1: Navigate to Pages > Add new
Step 2: Use Element of VisualComposer to build Footer content
Step 3: navigate to Appearance > ThemeOptions > General Settings> Footer page, then choose the page you created to set Footer
6.4 How to setup Contact-form
Step 1: Make sure you have installed the Contact Form 7 plugin (which should be done in the installation of the theme).
Step 2: Navigate to the "Contact" option on the main dashboard menu, click "All" then Edit one contact form, or select "Add New"
Step 3: Edit the form fields, your contact email, and customize any of your auto messages. Save the form and then use the shortcode provided in the brown bar at the top to insert your contact form wherever you want it. Remember to enter your email replaced the email@example.com so you can receive the messages.
7.1 Create post
RockoX offers several blog post types: Standard, Video, Gallery, Audio, Image. With these features, you can emphasize your post as texts, images, slider, audio, link or video conveniently. Your posts can also easily classified into group/topic with the Categories function. The News will be organized in a very smart and creative way. To create blog posts, see our instructions below.
Steps to Create A Blog Post:
Step 1 – In your Dashboard, go to Posts, Add New
Step 2 – Enter the post's title and content in the editing field.
Step 3 – Choose Post Format in right corner.
Step 4 – Depends on each particular format to customize each specific field in Blog Information. Please see section Post Format below the video
Step 5 – Add Categories and Tags to the post.
Step 6 – Choose Featured image: click “Set Featured Image” then choose a image for your post.
Step 7 – When you have finished, click Publish to save and publish the post.
You may check our tutorial video here for more detail settings:
- Standard - This is the default style. The post displayed only main text, featured image just displayed on the blog homepage.
- Image - The post shows text with an image.
- Gallery - The added images showed in slider (gallery) on top of the post. Use Gallery field to add images.
- Video - The post shows a video on top. Paste the video URL in
- Audio - The post shows text with audio. Paste the audio URL in
7.2 Blog Settings
Sidebar Choose location for sidebar
Sidebar select Choose sidebar for Blog here
Fullwidth/Boxed Choose to show Blog in Boxed or Fullwidth
Title List Blog Enter your Blog's title here
Title List Blog Choose a background image for Blog's title
8.1 Create post
RockoX also offers 3 portfolio post formats: Standard, Video and Image. Your portfolios can also easily classified into group/topic with the Categories function. The portfolios will be organized in a very smart and creative way in your homepage. To create portfolio posts, see our instructions below.
Steps to Create A Portfolio Post:
Step 1 – In your Dashboard, go to Portfolios, Add New Portfolio
Step 2 – Enter the port's title and content in the editing field.
Step 3 – Choose Portfolio Format in right corner.
Step 4 – If it is a video portfolio, enter video link in Link Media field.
Step 5 – Add Categories and Tags to the post.
Step 6 – Choose Featured image: click “Set Featured Image” then choose a image for your post. It very important as this picture is what will be shown out in Portfolio Section in homepage.
Step 7 – When you have finished, click Publish to save and publish the portfolio.
You may check our tutorial video here for more detail settings:
- Standard - This is the default style.
- Image - Choose to show your image portfolio.
- Video - Choose to show your video portfolio
8.2 Create Portfolio Section
It can be create with element named "ST Portfolio" in Visaul Composer. Just pick and choose number of portfolios be displayed, how they're ordered.
Check more on section in creating Homepage.
Video creating portfolio:
9.1 Shop Settings
You can find Shop Settings in Appearance » ThemeOptions > Shop Setting.
Menu mini cart Enable you to set a custom menu for Mini cart page
Sidebar position Choose to show sidebar or not, and in what position
Product Position Choose to show product or not, and in what position
9.2. How to create Product
RockoX is compatible with WooCommerce and includes full design integration as well as custom shortcodes. To start creating your online shop, your site need to be installed WooCommerce Plugin. The WooCommerce's documentation is the very basic information for you to get started. You can also take a look at some vital links below to get additional information about using WooCommerce.
Step 1 – In Dashboard, click Products, “Add Product”. Enter a name for your product.
Step 3 – Enter the product description into the content field.
Step 4 – The “Product Data” box is where you enter product details (price, SKU, shipping, and more).
Step 5 – The “Product Short Description” is a short text showed next to your main images.
Step 6 – Set main “Featured Image” to represent the product.
Step 7 – Insert more images in the “Product Gallery” box.
Step 8 – Classify the product with “Product Categories” and “Product Tags”.
Step 9 – Click “Publish” and the item will now show on your main shop page.
Rockox theme is compatibility with our theme is good, you can visit this to integrated WPML to your site
After that the WPML wizard will guide you to properly configure the multilingual site.
For reference: the widgets and theme options can be only translated using the String Translation.
12.2. Manual translation
All our WordPress themes are translation ready which means that you can easily translate them to any language you need. Here are some instructions:
First, change your entire language of WP installation to your language. This can be done in file wp-config.php in the root of your WP installation.
WordPress doesn't include the WPLANG constant in wp-config.php file since WP 4.0. Anyway, just to switch the language you can add it manually.
Find a line define('WP_DEBUG', false); and add this line right below it: define('WPLANG', '<your locale code here>');
Second, navigate to the folder of the theme (wp-content/themes/<rockox>/) and in the folder languages/ (of the theme) you will find file <name of the theme>.pot. Load this file (as the catalog) in the PoEdit and start translating. When done, save the .po file in the folder translations (there are en_EN.po and en_EN.mo files already there as an example) and name it the same as the defined WPLANG constant in the file wp-config.php. .mo file will be automatically created next to the .po file.
This is example of translating:
If is you feel this method too complex, you can always use CODESTYLING LOCALIZATION PLUGIN, which helps you with a quick and smooth translation. This plugin is completely free and very easy to use it.
13.1. Demo Images
All the images shown in the demo page of Shinetheme are copyrighted and come blurry with the theme (demo content).
13.2. Make your site run faster
Get a good hostingYou may not think that this is important, but if you want your site to display really fast you need to get a good hosting. This is the first step in having a fast site, which also translates into more views, which also translates into a better SEO, which finally translates into more sales.
Always optimize/compress your jpeg images before uploading them to the server. Large images should be compressed at around 90% image quality and you should also try to limit the use of lossless image files (uncompressed pngs)
Use a caching plugin
We can’t recommend enough the necessitiy go good caching. If you use a managed hosting such as WPEngine you don’t need this. But if you are using ASO or MT or any other hosting you need to cache your content. For this purpose, we recommend W3 Total Cache! It’s a great and easy to use plugin, and with only a bit of work you can double your site’s speed.