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!

Online documentation

Installation

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:

  1. FTP Upload

    Unzip the downloaded package and upload the theme directory /glorio/ into your WordPress themes directory /wp-content/themes/.

  2. 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

Audio Players

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):

                      [aw_player type="home"]
                      
  •  
  • ...
[/aw_player]

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

Header Menu

Go in admin left menu: Appearance -> Menus -> choose TonyTheme Header Menu (TonyTheme Header Navigation) and edit it following the standard WordPress procedure.

Home Page

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:

						
						
Slider Content
...
...

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:

                      [aw_player type="home"]
                      
  •  
  •  
  •  
[/aw_player]

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"]

Pages Options

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 Title

Block Content
....

Block Title

Block Content

Each page can be modified using a special css classes:

Modificator Description
.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--full fullwidth block
.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:
  • Archives

  • 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:

    [glorio_categories show_count="1"]
  • 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):

    [glorio_tagcloud taxonomy="post_tag"]
  • 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:

    [glorio_featured_posts qty="2"]
- Sidebar Blog Default is used for all pages except Blog Home Page

Contact Page

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"]

Woocommerce

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

HTML Structure

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-offset-4moves.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

Translation

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.

WORDPRESS plugins:

Jquery libraries:


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.

Kind Regards,
themetony