Introduction

vocal theme

You have a night club, you are DJ or just having interesting of music events, and you would like to show your entire event offer and introduce them to everyone. You need a WordPress Themes to make your website become more attractive and impressive. The new theme developed by themeum.com is beautiful, feature-rich, easy-to-use, and adaptive.
If you are looking for a fully responsive & mobile ready WP theme to fit your needs then Vocal is the best choice for you. It has many interesting events features (e.g. which allow you to play mp3 music files), and comes with 6 pre-defined color presets. Vocal WP theme can display your upcoming events in a really nice style, also with location map and the tickets price. It also allows you to have many photo albums and include any kind of videos from YouTube or Vimeo resource. Nice blog pages and fullscreen background slider is one of the main feature of this template.

Getting Started

Wordpress Installation

This Theme has been developed only for Wordpress 3.9 or higher version. So, you need to install WP before you can use this theme. Please see the CMS installation process. Here you can find the documentation : Wordpress Codex - Installing Wordpress

Wordpress Theme Installation

WordPress theme is simply a group of files, called template, bundled together that, when activated in CMS, determine the look and basic function of your site. By using professional themeum theme, you can have your site up and running with a new design - pretty fast. Theme installation is very easy process. Especially when you've chosen the theme you want to use, you'll need to install it into your WordPress website. You'll have the following two choices, as you did when adding new plugins:

  • You can add the theme directly from within the WP Admin, using "Upload Theme" option. From Admin Panel go the following path Appearance -> Themes -> Add New -> Upload Theme and select the zip theme, then click Install Now.
  • If your server is not set up properly or you have any problems, you'll have to extract and then upload the theme by hand. Using your favorite FTP client tool upload theme folder into the folder path /wp-content/themes/ on your server and active it from admin panel.

Note: On your WordPress site, the wp-content/themes folder holds all your themes. Each theme you install gets its own subfolder. All of a theme's style sheets and template files reside inside the theme's folder.

Vocal Theme Typical Installation Process

Follow These Steps in Order to Install a New WP Theme

Fig: Install Vocal theme Step by Step


Step 1: In Dashboard click on Dasboard => Appearance Menu

Step 2: Then click on Dasboard => Appearance => Theme Menu

Step 3: Then click on Install Themes tab.

Step 4: Then click on Upload Theme link.

Step 5: Then click on Choose file and select vocal.zip file from your computer directory.

Step 6: Now click on Install Now button and wait for the installation complete. After successful installation of theme click on active theme click and enjoy theme theme feature. After activating, this theme will be used for whole site instead of Twenty Thirteen, the default WordPress theme.

vocal theme

Vocal Essential Plugins and Installation

For using all Features you have to install and active all required plugins. All Essential plugins are included in the Vocal theme.

  • Contact Form 7
  • MailChimp for WordPress Lite
  • Themeum Tweet
  • Vocal Event
  • WPBakery Visual Composer

Install above essential plugins by easy 2 step.

Fig: Essential plugins installation

Step 1: In Dashboard, click on Dasboard => Appearance Menu => Install Plugins Menu

Step 2: Then click on Install link under plugin title and enjoy the plugins.

Make sure to configure permalink. By default WordPress uses web URLs which have question marks and lots of numbers in them; however, WordPress offers you the ability to create a custom URL structure for your permalinks and archives. This can improve the aesthetics, usability, and forward-compatibility of your links. From WP admin panel go to the following path Settings-> Permalik then select (Post name).

Demo Import

Import Sample Data: Import Sample Data: If you want to use demo data for your website then you need to install sample data. From menu choose Tools -> Import -> Wordpress. Click Wordpress then you will see the "Import Wordpress" option which allows you to upload .xml file from /Demo Content folder. If this tool not be installed you have to install "Wordpress Importer" plugin manually.

Note: We don't include in our Wordpress Quickstart photos/pictures from Theme Demo Page. Instead we have included placeholder images (dummy "JoomShaper Logo") for each instance. We assume that our customers have their own photos, which better fit to their project goals. Why? Because presented images are not licensed to be distributed as a part of WP Theme.

Widgets Setting Import

Import Widget Setting Data: If you want to use Demo site widget setting for your website. we recommends to install and activate the following plugin "Widget Settings Import Export". Which gives you the ability to import the demo widget settings, saved as a .json file type. The import will not overwrite any data currently within the sidebars, but instead will increment the widgets and add a new instance of the widget instead. Please choose Tools->Widgets Setting Import then select widget_data.json file from Demo Widget Settings folder directly from QuickStart package folder. Then Click on Show Widget Settings Button. Selected all or those widgets which you really need and use "Import Widget Settings" button. All widgets with registered sidebars will be imported.

Its an important part of Voval theme Installation process. Select your menu for menu location. Go to Dashboard-> Appearance-> Menu  then click on Manage Location and select menu for 2 locations. menu for "Primary Menu" location is mandatory. You can follow below screenshot.

Set Home Page (Required)

Set Static Home Page(Required): WordPress shows blog posts by default as the front page. If you want to look like demo Vocal then you need to set Home Page. See the way how to set Static Home Page Settings-> Reading . From here select static page then for Front page select Home.

Home Page BG Settings

If you want this same background slideshow effect as you saw on DEMO but with your own images (photos) please go to: Theme Options --> Site Background.

bg

Manage Mega Menu

You can manage mega menu easily. Goto Dashboard->Appearence->Menus then click on any parent Menu of Mega Menu level, then click on "ON" checkbox for active Megamenu Settings then select coloumn of megamneu. Take a look Image, it will give a clear direction.

Here is a better view image added. [ http://goo.gl/TI7cdw ]

WooCommerce Settings

For WooCommerece in Vocal theme you need to set own woo-commerece settings site design like demo. Goto Dashboard->WooCommerce->Settings then click on Products change below image settings using below image value.

Here is a better view image added. [ http://goo.gl/zgyIZt ]

Vocal Plugins Settings

please go to: Dashboard --> Theme Options --> Site Background.

Post Type Event Performers

events performers

Example Event Performers

performers

To create a new similar to above Performers (team member) list you have to use Performers Post Type: Dashboard --> New Performer, then enter title, short description, fill info fields and upload or choose image using "Featured image" option. 

Post Type Prices

pricing-table

This option allows you to create different prices for events tickets and they can be presented as a info box, check above example screen shot. You can add your own description and of course links to "Buy Now" buttons. To create a new similar to above Price table you have to use Price Post Type: Dashboard --> New price, then enter title, short description, fill link field and  choose right category, if you created. You can also check "Featured" option, if you want to distinguish chosen price.

PT
Available list of prices added in demo content.

Price Table

Post Type Events

events

Example Events Post Type

events

To create a new similar to above Events list you have to use Events Post Type: Dashboard --> New Event, then enter title, short description and upload or choose image using "Featured image" option.

events

Remember to fill some info field (start and end event date, address or standard price). Using this same method you can create many different events not only music. Events can be assigned to categories. 

Post Type Albums

albums

Example Albums Post Type

To create a new similar to above Album you have to use Gallery Post Type: Dashboard --> New Album, then enter title, short description and upload or choose image using "Featured image" option. Using this same method you can create many different music albums. Album support also Tags and can be assigned to Album category. 

albums2

Post Type Gallery

gallery example
Example of Gallery Post Type

To create a new similar to above gallery you have to use Gallery Post Type: Dashboard --> New Galley, then enter title and upload images. Using this same method you can create many different galleries. 

gallery
NOTE: Now if you want to assign selected type of post (Blog, Albums, Events or Gallery) to Top Menu you have to use default WP Menu Manager: Appearance --> Menu  --> Pages [Box] --> Select Page Type --> Add to Menu --> Change Name  --> Save Menu (button on the bottom).
page type 2 menu

Shortcode Documentation

Wordpress uses shortcodes which are simple set of functions which allows you do nifty things with lightweight markup used to format content in post. By using a shortcode, for example, a button, the user doesn't have to remember the complicated markup that needs to be input to create the button, tabs, embed a YouTube video or other objects that would normally require large amounts of code.

But we went a step further, The Themeum Shortcode System is based on modern Visual Composer  with drag and drop interface, so you don't have to touch a single line of code. Visual Composer comes with 46 built in content elements which should be enough to build almost any layout you can think of.

Visual Composer
All used elements have minimalist design and not overloaded with graphics. Responsive and CSS3 powered elements will make your content pretty awesome. In addition, you can customize any elements with custom CSS.

Examples

Example "Audio Player" element from Visual Composer - this provide the facility of list of mp3 music files with player feature.

audio player

Translation Edit

Sportline is traslation ready and also included 5 language translation file. Its also suppport multilingual with WPML. Including tralation file is Danish(Denmark), Spanish(Spain), portuguese(Portugal), portuguese(Brazil), French(France) and English(US). You edit this .po file easily using poedit software, most popular software for .po file edit ( free version is enough for edit ). If you need any other language file just ask us in Our Forum. Download poedit from here.

Where You get .po file

Vocal ( Theme ): wp-content/themes/vocal/languages directory path

Vocal Event ( Plugins ): wp-content/plugins/vocal-event/languages directory path