Glorio Recording Studio
Premium WordPress Theme
- Created: Novemeber 2017
- By: themetony - Envato author Profile
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our support forum. Thank you very much!
Before beginning the installation and configuring of your new theme, you must first have WordPress already installed on a server.
If you are struggling, here is a very detailed guide at Wordpress Codex that will walk you through every step.
Installing The Theme
Once you have setup a copy of WordPress, there are two ways you can go about installing the theme:
Unzip the downloaded package and upload the theme directory /glorio/ into your WordPress themes directory /wp-content/themes/.
WordPress Automatic Installation
This is definitely the easier route for most. Simply navigate to Appearance > Themes > Add New > Upload Theme. Click the 'browse' button and locate the still zipped theme folder. The theme will be uploaded and installed in a matter of seconds.
Then you need to activate installed theme.
Click Activate or go in admin left menu: Appearance -> Themes and activate Glorio Recording Studio
Installing plugins required
Once you have installed and activated our theme you will be prompted to install required and recommended plugins. Just click the link Begin installing plugins.
Next, check boxes to select all the plugins you want to install, select the bulk action of install from the dropdown box and then click the button to apply.
Finally, you will got a confirmation notice that your plugins were installed.
In the same manner activate plugins.
After all done you will see full site with demo data imported.
Set "Revolution Sllider" in Home Page
Go in left menu: Appearence -> Customise -> Homepage settings. Choose Revolution Slider in Homepage field
Our Theme includes 3 pre-built Audio players based on Audio Waveform Player (extended lisense). It is responsive and fully customizable HTML5 audio plugin. It creates waveform from audio track automatically and displays it as a seekbar. It support self hosted audio mp3 files and some other external music services like Soundcloud, Podcasts, Google Drive Storage etc…
You can modify the playlist items (add/remove own tracks) in the shortcode:
[aw_player type="(home/popup/projects)"](html code for each track with li tags)[/aw_player]in the admin page: Pages -> Revolution Slider. If you want to add more options for the player, you can find the Audio Waveform Player related Documentation in the folder documentation/awp-player.
Type of player in shortcode:
home type of the player view is set on home page
popup type of the player view is set if clicked by grid located tracks in the Home page, block Our Projects or in the page Projects, can be find in the admin pages: Pages -> Our Projects, Pages -> Projects
projects type of the player view is set on Projects page, can be find in the admin page: Pages -> Projects
Audio playlist example for Home Page player (under Revolution Slider):
You can edit it in Pages -> Revolution Slider
Blocks in Header
Header HTML structure:
Header Logo, Site Icon
Go in admin left menu: Appearance -> Customise -> Site Edentity -> Logo / Site Icon
Go in admin left menu: Appearance -> Menus -> choose TonyTheme Header Menu (TonyTheme Header Navigation) and edit it following the standard WordPress procedure.
1 Revolution Slider
Go in admin left menu: Pages -> Revolution Slider
Check that VC Composer is switched before any page content editing. It makes blocks editing in more visual way.
Press Backend Editor button if it is not switched on.
Revolution Slider in our theme consists of 2 slides which are placed in VC Composer as 2 blocks.
Each block contains 2 text blocks: 1 - for image content, 2 - for text content
To edit html content of each block hover mouse and press edit button
To edit/change image in the Revolution Slider
Analogically change text block
Main Slider HTML structure:
Each sliders item has individual style of the animation: the transition style (data-animation) and the animation delay (data-animation-delay).
You can use any the animation transition type from the site https://daneden.github.io/animate.css/.
2 Music Player on Home Page
About it you can read in our chapter Audio Player. It has shortcode:
You can edit it in Pages -> Revolution Slider
3 Blocks on Home Page
Go in admin left menu: Appearance -> Customise -> Theme Options. Here you can remove / add / change blocks for each of 11 Front PageSections
4 Booking Form
Popup Booking form you can see in block Booking on Home Page: go in Pages -> Booking
Go in left admin menu: Contact -> Contact Forms, press button Add New
Enter title of the form: Book Your Session
To have a booking form the same as on the demo, please, enter such code in the field Form
[text* your-name class:input-custom class:input-full placeholder "First name*"][text your-lastname class:input-custom class:input-full placeholder "Last name"][email* your-email class:input-custom class:input-full placeholder "Email*"][tel my-tel class:input-custom class:classinput-full placeholder "Phone number"][text your-address class:input-custom class:input-full placeholder "Address"][select my-select-country class:input-custom "Alabama" "Alaska" "Arizona" "Illinois" "Indiana" "Kentucky" "Louisiana" "New Jersey" "New Mexico" "New York" "Ohio" "Oklahoma"]Studio Service:[select my-select-service class:input-custom "Recording" "Production" "Mixing" "Engineering"]Time:[select my-select-service class:input-custom "1 Hour" "2 Hour" "4 Hour" "6 Hour"]Date:[date my-date class:form-control class:input-custom class:datetimepicker][submit class:btn class:btn--lg class:rs-input-submit "Book session now"]
There are some options for each Page in admin, field Page Format Options:
Outer CSS class for block
Not display title from admin field "Title"
Outer CSS class for title block
CSS class for title tag h2
Icon near title
Page Promo Content (used mostly in Sections on the Home Page)
Page Additional Content (used mostly in Sections on the Home Page)
HTML structure of pages and pages on Home Page:
Block TitleBlock Content
Block TitleBlock Content
Each page can be modified using a special css classes:
|.bottom-null||set margin-bottom as 0|
|.inset-65, .inset-85, inset-110, inset-125||set inset padding 20px...85px|
|.offset-20, .offset-30, offset-60||set offset top margin 20px...60px|
|.block--fullbg||fullwidth background of the block, but the block is boxed
|.block--title||headings block (under header)|
|.block--darkbg||set light color scheme fo dark background|
Posts in Blog
1 Type of Blog Home Page (default or grid)
Go in admin: Appearance -> Glorio Settings -> Type of Blog Posts Page, write "grid" word to see Blog Posts as masonry blocks.
2 Post options
There are some options for each Post in admin, field Post Format Options:
Post Additional Content
Featured this post (used to display post in the widget Recent Posts on Blog Home Page and on Blog Single Post)
Disable Featured Image in Blog Posts Page
Disable Featured Image in Single Post
Disable Post Additional Content in Blog Pages
To display posts additional content on Front End uncheck option Disable Post Additional Content in Blog Pages
3 Sidebar Widgets and Structure of Blog Home Page
Central column contains all posts which are added in admin left column: Posts
There is 2 sidebars for Blog pages:- Sidebar Blog Home is used for Blog Home Page. It contains widgets:
Categories. Go in admin: Appearance -> Widgets -> Sidebar Blog Home -> Custom HTML: Categories. To change quantity of posts go in admin: Appearance -> Widgets -> Sidebar Blog Home -> Custom HTML: Featured Posts. Make changes in shortcode:
Popular Tags. Go in admin: Appearance -> Widgets -> Sidebar Blog Home -> Custom HTML: Popular tags. Here in shortcode you can change taxonomy type to other. You can choose between default taxonomies (post_tag,category,link_category):
Featured - featured posts. To set some post as Featured choose in post editing page Featured this post. To change quantity of posts go in admin: Appearance -> Widgets -> Sidebar Blog Home -> Custom HTML: Featured Posts. Make changes in shortcode:
1 Google Map on Contact Page
You can edit html content for this page in admin: Pages -> Contact
2 Contact Us form
Go in left admin menu: Contact -> Contact Forms, edit existing Contact form 1
To see Contact form as on our demo enter in the tab Form following code
[text* your-name class:input-custom class:input-full placeholder "First name*"][text* your-lastname class:input-custom class:input-full placeholder "Last name*"][email* your-email class:input-custom class:input-full placeholder "Email*"][textarea* your-message class:textarea-custom class:input-full placeholder "Message*"][submit class:btn class:btn--border class:rs-input-submit "Send Message"]
Any information about default functionality of Woocommerce you can read on the plugin official page woocommerce
Specific Woocommerce pages are located in admin: Pages
- Shop — Shop Page
- Checkout — Checkout Page
- My account — My Account Page
Sidebar panel for Shop page: Appearence -> Widgets -> Glorio Sidebar Shop
Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html> <html lang="en"> ... </html>
The default Bootstrap grid system utilizes 12 columns.
For a simple two column layout, create a
.rowand add the appropriate number of
.col-lg-*columns. As this is a 12-column grid, each
.col-lg-*spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
<div class="row"> <div class="col-lg-4">...</div> <div class="col-lg-8">...</div> </div>
Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.
Move columns to the right using
.col-lg-offset-*classes. Each class increases the left margin of a column by a whole column. For example,
.col-lg-4over four columns.
<div class="row"> <div class="col-lg-4">...</div> <div class="col-lg-4 col-lg-offset-2">...</div> </div>
If you need more information, please visit this site: http://getbootstrap.com/css/#grid
Tell WordPress which language file to use.
If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation.
You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation.
Just add the line below to your wp-config.php or change it if it already exists:
define ('WPLANG', 'fr_FR');
First Method: Using Codestyling Plugin
The easiest way to translate your theme locally is by using the Codestyling Localization plugin. After you have installed and activated the plugin, simply go to Tools > Localization (shown in your language) and translate the theme from your WordPress backend following the plugin instructions
Second Mothod: Using Poedit
Poedit is a common program which you can use to translate the theme. It’s available for free on poedit.net. After you have installed Poedit, you can open it and select File > New Catalog from POT file. Then select the .pot file from the theme you wish to translate which you can find in the /languages/ folder of theme. Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example es_ES.po). Normally Poedit automatically creates the .mo file and saves it, too. The last step you have to do is to upload your created language files to the language folder of your theme using FTP.
Sources and Credits
We have used the following files and plugins as listed.
- WPBakery Visual Composer - https://vc.wpbakery.com/
- TGM-Plugin-Activation - https://github.com/thomasgriffin/TGM-Plugin-Activation
- Bootstrap - Bootstrap by Twitter
- Slick - jQuery carousel plugin
- Fiterizr - jQuery plugin filter & sort plugin
- Images Loaded - jQuery plugin for detect when images are loaded
- jQuery Validation Plugin
- jQuery Form Plugin
- Magnific Popup - jQuery popup plugin
- CSS Animation Library
- jQuery TweenMax
- jQuery Scroll Ease
- jQuery Bootstrap Datetimepicker
- Audio Waveform Player with Playlist (Extended License)
Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
If you are satisfied with Glorio Recording Studio WordPress Template please go to your downloads section on ThemeForest.net and rate Glorio Recording Studio WordPress Template with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)
Hope that you will enjoy in Glorio Recording Studio WordPress Template as much as I've enjoyed designing this template.