RockOn The Rocking Wordpress Theme - 20script

# RockOn The Rocking Wordpress Theme

## Set Yourself Free

Version - 1.2

- created: 11/07/2014
- latest update: 11/10/2014
- by: kamleshyadav
- email: admin@himanshusofttech.com

### Intro

Proudly presenting the one of its kind, the musical wordpress theme - RockOn which set all your senses free to swing with the music of your desires as RockOn say's Set Youself Free powered by the most popular Redux theme options framework and the well known Visual composer editor. RockOn is a multi-purpose wordpress theme specially designed for the energetic people who love parties. Although multi-purpose RockOn Theme is feasible enough to be suited for other wordpress website designs too.

So, lets get started with the theme installation & configuration with your wordpress.

Well Done! If you like my work, please rate it. http://themeforest.net/downloads If you’re about to rate it with less than 5 stars, please let me know the reason first and I will do my best to improve the theme

### Getting Started

Theme Installation

To use RockOn wordpress theme, you need a working wordpress software on your domain minimum recommended version of wordpress is 3.8 & higher.

For more information in regard to installing the WordPress platform, please see the WordPress Codex

http://codex.wordpress.org/Installing_WordPress

When you are ready to install this theme, you must first upload the theme files and then activate the theme. The theme files can be uploaded in two easy ways:

1) Installation via Wordpress.

2) Installing via FTP client.

1) Installation via Wordpress.

Navigate to Appearance > Themes > Add New > Upload Theme. Go to browse, and select the zipped theme folder. Hit Install Now and the theme will be uploaded and installed. Once the theme is uploaded, you need to activate it.

Go to Appearance Themes and activate your chosen theme.

Note: The download zip will contain a folder called "upload", inside which you will see a zip file called rockon.zip that is the main theme file.

(confirm folder structure)

2) Installing via FTP client.

Using any FTP client you prefer, upoad the un-zipped theme folder to the wordpress theme directory /wpcontent/themes/ .

### Theme Setup

After successful activation of RockOn theme you need to do the following configurations too.

1) Theme demo xml data upload

2) Theme option's data upload.

3) Activation of the default plugins provided by the theme.

4) Revolution Slider Data.

1) Theme demo xml data upload :

- After successful installation and activation of theme you need to upload the demo xml file provided with in the purchased theme folder. After activation of theme navigate to Tools > Import > Wordpress install the wordpress importer plugin after successful installation of the plugin you can see the Import Wordpress.

After installation you can see the message as demonstrated in the image below. Now, you can select the xml file by clicking on the choose file button. Select the xml file & click on "Upload file and import".

2) Theme option's data upload.

- With purchased theme you will get the theme options data in redux_options_rockon_data_backup_10-11-2014.json the file extension will be .json. To use this you need to navigate to the theme options. Just navigate to Appearance> Rockon Options after that navigate to Import / Export as shown in the image below. After selecting Import / Export click on "Import from file".

As shown on image above after clicking on the "Import from file" an empty Area to import the theme options will open, as shown in the image below, where you have to paste the content of the json file provided in the purchased theme folder.

3) Activation of the default plugins provided by the theme.

- You need to install and activate the default plugins provided by theme,Just after theme installation and activation you will get the notification message on the top of all pages, posts and plugin installation page. You need to install and activate those plugins.

4) Revolution Slider Data.

- Revolution slider demo data is found in "Dummy Content" folder with this theme. Just import the rockon-revslider.zip in the revolution slider setting.

### Theme Defaults

Just after the successful theme installation The RockOn theme provides you the default pages and post types by its own. To see the page created navigate to your wordpress dashboard "Pages"

The following are the pages & posts created by theme.

*This is the short description, brief description can be found below in this document.

Pages :

01) About - Your site's about us page.

02) Audio Gallery - All the audio posts visible on this page.

03) Blog Full Width - Blog page with full width layout.

04) Blog Left Sidebar - Blog page with sidebar to the left.

05) Blog Right Sidebar - Blog page with sidebar to the right.

06) Columns - Columns page is simple dummy page to show how you can divide the content layout on pages

07) Contact - This is your site's contact us page

08) Events - All the event posts are visible on this page

09) Gallery 2 Column - All the portfolio posts are visible on this page in two column layout, setting up the portfolio posts and its type is further explained briefly in this documentation.

10) Gallery 3 Column - All the portfolio posts are visible on this page in three columns layout, setting up the portfolio posts and its type is further explained briefly in this documentation.

11) Gallery 4 Column - All the portfolio posts are visible on this page in four columns layout, setting up the portfolio posts and its type is further explained briefly in this documentation.

12) Home Revolution Slider - Home page with revolution slider as default slider.

13) Home Simple Slider - Home page with default slider provided by theme.

14) Picture Gallery - Picture gallery page consists of all the portfolio posts within the "picture" category.

15) Sample Page - This is simply the default page provided by wordpress.

16) Services - On this page all the services posts are visible with the disc-jockey members too.

17) Short-codes - This page simply represents the short-codes provided by the theme and the visual composer.

18) Video Gallery - All the portfolio post related to the video category are visible here.

Posts :

For better modularity RockOn theme provides you the additional post type, which are specialized in their own way. Following are the posts added to your admin dashboard.

01) Services - All the services posts can be created and managed from here.

02) Portfolio - All the portfolio posts can be created and managed from here with the audio, video, picture category.

03) Audio track - All the audio posts can be created and managed from here in addition to the album art image and the mp3 file upload.

04) Disc Jockey - All the DJ members and their profile can be created and managed from here.

05) Rockon Event - All the events can be created and managed from here.

### Theme Options

Before proceeding to "Setting up pages" let's have a look on the theme options in rockon theme it is called as "Rockon Options". To access the settings provided by theme options you need to navigate to "Appearance > Rockon options". This is a very powerful options panel powered by redux framework.

The various options provided by rockon options are as follows :

01) General settings

02) Home Page Settings

03) Style Switcher Settings

04) Slider Settings

05) Flip Gallery

06) Contact Setting

07) Styling Options

08) Social Setting

09) Import/Export

10) Theme Information

01) General Settings - General settings consist of the settings related to the, preloader image, favicon, site audio player, website logo, sidebar position for the posts, footer copyright text, and google analytics code input section.

02) Home Page Settings - Home page settings consists of the settings for the default home page content. You can easily modify the home page content from here.

03) Style Switcher Settings - Style switching is additional feature you got with rockon theme you can choose any one colour layout from here and background option too. Also you can choose other color as per your choise and for that you need to keep both of the Color Option and Background Option none. You can enable and disable the colour style switcher for the admin and the user both from here.

NOTE: In this "style switcher settings" the "- Color Option" & "- Background Option" have two variants, which can be visible on choosing theme versions in the "Styling Options" if you choose any one version either "Dark version" or the "Light Version" then the "Color Option" & "Background Option" here will be according to the version choosen.

04) Slider Settings - This is the slider settings for both Home page simple slider & Home page revolution slider pages, from here you can enable disable the slider upload the simple slider logo and the slider description for the Home simple slider page and for the Home revolution slider page you can paste the revolution slider short-code over here.

05) Flip Gallery - Rockon theme comes with the beautiful flip gallery which is visible on the home page when used with home simple slider and by default in the footer on all pages.

The main thing to be kept in mind while using flip gallery is that minimum 2(two) images are required while using the flip gallery and maximum 33(Thirty Three) images for the perfect view of the flipping images unless less than 33 images will be repeated automatically. The recommended size of the images is 300x300 in width & height.

06) Contact Setting - Contact settings have the settings for the contact page, the contact form and the map location can be added from here. Setting up the contact page is further explained in "Setting up pages" of this documentation.

07) Styling Options - Styling option consists of the custom styling for the body background, body font, body heading, and implementation of custom style CSS codes.

08) Social Setting - Social settings consist of the linking your site to the social media, just add your social profile link and save.

09) Import/Export - Import export option provides the settings to backup by exporting the theme options settings & importing the old settings from the file.

10) Theme Information - This is simply the information about the theme, and the developers of this theme, the current version of rockon theme 1.1

### Setting Up Posts

Rockon theme provides you the specific post types which helps you to manage various elements for the pages. You can easily navigate to these post types in the wordpress admin section. The post types which is used by the rockon the are :

01) Posts - This is the default wordpress posts

02) Services - Services posts related to your site.

03) Portfolio - Portfolio posts related to your site.

04) Audio Track - Audio posts for your site.

05) Disc Jockey - Disc Jockey the DJ members.

06) Rockon Event - All the events realted to your site.

01) Posts - This is the default wordpress posts, visible on your blog pages

02) Services - All the services posts on your site can be added and managed from here, services post have the additional feature to add SVG code to create the services icons in the front-end of your site as shown below, or you can choose feature image in place of SVG code only one at a time. To maintain elegance of theme services post have limited number of character content shown on the front end of your site

a) Services post edit

b) Services View on your site

03) Portfolio - A Portfolio posts can be used in three ways "Audio", "Picture" and "Video". If portfolio setting meta-box is used by mp3 audio file then the portfolio post will be capable of playing the audio file added to that post then it will be audio portfolio, if used by youtube video url then it will be video portfolio, if simply used by featured image then it will be picture portfolio. Although you can select featured image, See the image below.

04) Audio Track - Audio portfolio is the post type specialized only for the Audio files and audio played on your site on your site. Rockon comes with the the built in audio player with next track play button and the mute button too, all the music tracks on the site will be played from the audio posts you have created here. You can enable & disable the audio player on the site from the Rockon theme options in the "General settings".

05) Disc Jockey - All the DJ in the house can be added and managed from here.

06) Rockon Event - Event posts are the events related to your event or occasions related to, here you can add event promo image, date of event, starting and ending time of event, location of event, google longitude & latitude coordinates which will set the location icon to click and show the location on the google map.

### Setting Up Pages

RockOn theme comes with the default pages with the variants of their own, the basic structure according to the theme menu is as follows.

To use and apply default theme menu navigate to Appearance > Menus click on "Manage Locations" tab on the top, select "Rockon Primary Menu" as "Rockon Menu" and click "Save Changes". This will set the default menu.

NOTE: As per your convenience, later-on you can configure the page layouts using the built-in Visual composer.

1) Home : This is your theme's main home page having two variants

- Home Simple Slider - Home page with default theme slider
- Home Revolution Slider - Home page with revolution slider

2) Just Blogging : This is your theme's blog page having three variants

- Blog Left Sidebar - Blog page with side bar to the left
- Blog Right Sidebar - Blog page with side bar to the right
- Blog Full width - Blog page with full width page and no sidebar

3) Gallery : This is the gallery of your site, ro you can say the portfolio for your site having six different variations.

- Gallery 2 Column - All the gallery items arranged in two columns.
- Gallery 3 Column - All the gallery items arranged in three column layout.
- Gallery 4 Column - All the gallery items arranged in four column layout.
- Video Gallery - All the video posts of your site will be visible here.
- Audio Gallery - All the audio posts of your site will be available here and can be played
- Picture Gallery - All the picture or images related posts will be visible here.

4) Pages : There are following pages in the theme you can simply choose them and easily implement their default layout . The pages are :

- Events - All the events post are visible here which can be viewed in two different layouts one is "Simple" and another is "Slider". (How to configure the layout is explained in - Events Page Setup of this document)
- Services - All the services posts are visible here in addition to this, the DJ that is disc jockey team is also visible on this page.
- Short-codes - Here you can see the preview of various elements provided by Rockon theme from the admin section you can choose its short-code and implement on any page.
- Columns - The columns page represents the feature of modularity in which you can divide a page column wise and set page content.
- 404 Page - This page is the default 404 error page.

5) About : This is the about us page for your site, can be modified as per convenience.

6) Contact : This is the contact us page of your site, with google map and contact form included, can be modified as per convenience

#### Home Page Setup

After completing all the theme and theme options data setup as mentioned earlier, all the default pages & posts will be created automatically. Now, you just need to set your default home page.

RockOn theme provides two home page styles first one is with theme default slider and the other is home page with revolution slider. To set the default home page you just need to navigate to the Settings > Reading on the right you can see "Front page displays" as a option to be selected from there choose "A static page" after that you will see a option asking for "Front page" from there just select the home page type either you want to have home page with default theme slider or with revolution slider, and then just click on save changes.

Home page with different slider type works on the basis of template selected and the theme options for home page in the "Rockon Options". By default both the pages have their template already selected, to check this you can go to the edit section of the page, for this just navigate to the "Pages" in your wordpress admin dashboard choose "Home Simple Slider" or "Home Revolution Slider" any one of these you want to edit.

a) Editing "Home Simple Slider" page : As mentioned above you need to navigate to the edit section of the page after that, on the right in the "Page Attributes" box choose template as "Home Page" and click on "Update". This will publish the Home page with simple slider.

For further addition of the page content on the page you can use the built in visual composer.

b) Editing "Home Revolution Slider" page : As mentioned above you need to navigate to the edit section of the page after that, on the right in the "Page Attributes" box choose template as "Home Revolution Page" and click on "Update". This will publish the Home page with revolution slider.

For further addition of the page content on the page you can use the built in visual composer.

The default home page content for both "Home Simple Slider" page & "Home Revolution Slider" is managed by the theme options called as "Rockon Options". To access these options panel you need to navigate to the "Appearance > Rockon Options"

All the content settings for the home page can be managed from here.

#### Blog Page Setup

Wordpress comes with the default blogging system. To setup your blog page you need to select the blog template from the edit section of the page. So, Blog page consists of all the posts related to your blog, can be designed in three layout styles, of full width , right side bar, & left side bar.

- Full width uses full width of the screen to show your blog posts
- Right side bar have the sidebar widgets to the right.
- Left side bar have the sidebar widgets to the left

01) Blog full width : Blog page with full width layout

02) Blog Right Sidebar : Blog page with the sidebar widgets aligned to the right.

03) Blog Left Sidebar : Blog page with the sidebar widgets aligned to the left.

#### Gallery Page Setup

Gallery page basically consists of the portfolio posts, which can be categorized in default three types Audio, Video & Picture posts, which can be added using the short-code from the visual composer editor. Which can be designed in following layout styles

- Gallery 2 Column - All the gallery items arranged in two columns.
- Gallery 3 Column - All the gallery items arranged in three column layout.
- Gallery 4 Column - All the gallery items arranged in four column layout.
- Video Gallery - All the video posts of your site will be visible here.
- Audio Gallery - All the audio posts of your site will be available here and can be played
- Picture Gallery - All the picture or images related posts will be visible here.
- Filter Gallery - All the gallery post will be filter throught the category.

To create the gallery page just create a page named as gallery. After creating the page you need to click on - Add element in the visual composer editor.

After clicking on the "Add element" It will provide you the various options as shown in the image below, among those Click on "Rockon Show Post As Gallery".

On clicking "Rockon Show Post As Gallery" it wil open a window to choose the portfolio post types, as shown in image below

You can modify the layout as per convenience, you can choose any one of the posts type from the post type selection box, or you can choose default portfolio category which will deselct the post type selection. Means you can either select the post type or the portfolio posts category one at a time to be shown in the gallery style layout.

For Filter gallery first you need to create category.

#### Events Page Setup

Events page consists of all the events posts related to your site, which can be represented in two ways first is simple view & another is slider view, to setup events page create a page named as events. After creating the page click on Add element in the visual composer editor.

After clicking on the "Add element" It will provide you the various options as shown in the image below, among those Click on "Rockon Event".

On clicking "Rockon Event" it wil open a window to choose the events post types, as shown in image below

Provide the desired title number of posts to be shown on the page and the post type as "Simple Style" or the "Slider Style" type.

Now you can add gallery images for each event.

Navigate Rockon Event -> Add New

#### Services Page Setup

Services page consists the services post types with default layout style, to setup services page create a page named as services. After creating the page click on Add element in the visual composer editor.

After clicking on the "Add element" It will provie you the various options as shown in the image below, among those Click on "Custom Services Post".

On clicking "Custom Services Post" it wil open a window to choose the services post settings, as shown in image below

Select the number of services posts you want to show.

Within the services section you can add the Dj team for this you just need to click the "Add Element" again and choose the "Rockon Team" as shown in the image below.

After clicking on the "Rockon Team" you got a feature to add "Disc Jockey" posts on the page as shown in the image below.

#### About Page Setup

About us page can be modified as per requirements, rockon theme is modular enough that you can redesign any pages according to your convenience.

Although rockon theme have a specific short-code section for the about us content, to access this short-code and implement on the page you need to create a page named as about us and after that click on "Add element" of the visual composer editor, as shown in the image below

After clicking on the "Add element" It will provie you the various options as shown in the image below, among those Click on "Rockon About Post".

After clicking on "Rockon About Post" you get an option to add the contents for the about us page, as shown in the image below.

#### Contact Page Setup

Contact page consist of the contact form and the contact location you provide in the theme option that is Rockon options, to navigate to the "Rockon Option " you need to navigate to the "Appearance > Rockon Option" as shown in the image below.

After adding the details in the rockon option you need to add contact short-code to the contact page you created. To add contact short-code create a contact page, after that click on "Add element" which will provide you various options among them click on "Rockon Contact" as shown in image below.

After clicking on "Rockon Contact" theme will provide you the default shortcode of the contact page, which will easily added to the page, as shown image below.

### Woocommerce Setup

RockOn comes with full featured eCommerce platform integrated in it.

You just need to install & activate the woocommerce plugin .

In the recommended plugins section RockOn theme will ask you to install the woocommerce plugin.

1) Just install the plugin.

2) After Installation activate the woocommerce plugin.

3) WooCommerce plugin will prompt you to create its default pages. Its hardly recommended to create those pages for better functionality.

After successful installation and activation of Plugin you need to upload the demo xml file provided with in the purchased theme folder.

Navigate to Tools > Import > Now, you can select the xml file by clicking on the choose file button. Select the xml file & click on "Upload file and import".

### Shop Page Setup

Since, this page is generated by woocommerce so it is recommended that you should not edit / delete its content, for any further modification consult/hire any developer.

Now create the Menu of Shop

Then Navigate to Product > Add Product > Or edit the product present in the theme

### Soundcloud Setup

Now you can easily integrate your soundcloud profile with the Rockon Theme.

- 1. First you need to make your profile on soundcloud. Sound Link
- 2. Activate the soundcloud plugin.
- 3. Set the Soundcloud player style. Click on Soundcloud is Gold
- 4. Now where you add the sound player need to click on Add media Button after creating a page.
- 5. Now where you add the sound player need to click on Add media Button after creating a page.
- 6. Click on Insert Soundcloud Player Button and Update it.

### Single Post Share

Now you can easily share your single post on the social media Facebook,Google+ and Twitter.

### Footer Widgets

Rockon theme comes with three widgets

01) Rockon Address Location - Address location to be shown on the site footer.

02) Rockon Recent Posts - Posts on the footer with auto scrolling feature

03) Rockon Twitter Feed - Fully customized twitter feeds, just need to add some tweaks.

### Credits

I've used the following images, fonts or other files as listed:

- Google Webfonts
- IStock Photo
- Photodune

I've used the following scripts:

- jQuery
- Bootstrap
- Owl Coursel
- jquery easing
- jquery fancybox
- Jquery BX Slider
- MediaElement.js

I've used the following framework:

- Redux Framework

### Outro

Once again, thank you so much for purchasing this Theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this Theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Kamlesh Yadav.
www.kamleshyadav.com

Support Email: support@himanshusofttech.com

Visit: www.himanshusofttech.com

if you want to use any images used in the demo on your live website then do purchase theme from there respective authors, theme does not provide you rights to use this images.