Jam Session - Responsive WordPress Music Band Theme

# Jam Session

## Responsive WordPress Music Band Theme

- Created: 04/04/2014
- Latest update: 04/14/2014
- By: SmartWpress
- Email: support@smartwpress.com

For technical related questions, don't hesitate to send us an email to support@smartwpress.com.

The complete video and written documentation can be found at the following URL: http://smartwpress.com/jamsession/jamsession-theme-documentation/
The documentation will guide you, step by step, through the setup process.

### WELCOME

Please follow this documentation carefully to get started with JamSession theme. Check this URL for video documentation.

### FEATURES

- 100% Responsive
- Theme Settings
- Theme Customiser With Live Preview
- Custom Colors
- Different Layouts for Header
- Custom Post Types for Discography, Photos, Videos and Events
- Full Screen Slider With Custom Link And Message
- Responsive Masonry Layout
- Built in Pages for Contact, Archieves, Discography, Photos, Videos and Events
- Mp3 Player
- Widget Ready
- Translation Ready
- Child Theme Compatible

### INSTALLATION

The instalation is really easy, please follow the following instructions.

There are two ways to install a WordPress theme.

1. Directly upload the zipped theme file via WordPress admin panel.
2. Upload the unzipped theme folder, directly on your server using a FTP client.

### 1. Install JamSession Theme Using WordPress Theme Installer

1.1 Log in to Wordpress admin dashboard and navigate to Appearance -> Themes

1.2 Click on the 2nd tab, Install Themes and choose Upload option.

1.3 For upload, choose the file jamsession.zip, which can be found inside the archive downloaded from ThemeForest.

1.4 Once the upload has finished, click Activate.

1.5 You will see the following message: This theme requires the following plugin: JamSession Post Types. Please choose Begin Installing Plugin option.

1.6 Now click on Install link.

That is all with instalation!

Please keep in mind that instalation of JamSession Post Types plugin is mandatory. It is comming with the jamsession theme, and it is required for the theme to work corrrectly. Having the custom post types features in a separate plugin, allows you to keep the data, even if you change the theme.

### 2. Install JamSession Theme Using a FTP Client.

2.1 Log In to your site using your FTP client, and enter to your WordPress theme folder, wp-content/themes.

2.2 Unzip jamsession.zip file and upload jamsession folder to wp-content/themes location.

2.3 Log into your WordPress admin dashboard and navigate to Appearance -> Themes and activate the teme.

Continue instalation according to step 1.5 and 1.6 descibed above.

### THEME CONFIGURATION

The configuration of JamSession theme is simple and intuitive. Below, we'll describe how to define configure it according to your needs by defining the menu, using theme customizer, theme settings, adding slides, image posts, video custom posts and events.

### MAIN MENU

Go to Appearance -> Menus and click on create a new menu option.Give it a name, Main Menu for instance and click on Create Menu. A new tab tab option, Manage Locations should appear now. Edit your Menu by adding elements from the left side of the page.

When you are done, click on the 2nd tab, Manage Locations, select the menu you just defined and click Save Changes.

The menu should now be visible on the front page.

### MAIN SLIDER

In order to have the main slider as homepage of your website, you just need to create a empty page and use Main Slider Page as template for that page.

Go to Pages -> Add New

1. Add a title for the new created page - Main Slider Page
2. Select the template to be used for that page - Main Slider Page
3. Click on Publish and the page is now created.

Now go to Appearance -> Customize

1. Select Static Front Page option on the bottom left of the page
2. Select the page you've just created - Main Slider Page for static front page
3. Click on Save and you have a slider on homepage.

Each slide, can be defined from WordPress admin menu.

This functionality is provided by JamSession Post Types plugin, that we've just activated.

After activating the plugin, new menu options should be available on the WordPress admin menu.

At the first point of instalation, JamSession theme comes with a default slide. It will be visible as long as no other slide is defined.

Go to Slides -> Add New Slide. The following fields need to be filled:

1. Post Ttitle - this is the message that appears on the bottom right part of the slider.
2. Hide Title & Message - Allows you to hide the title and link message from the slider.
3. Message - Link Message that appears on the bottom right of the page.
4. URL - URL of the page that will be loaded when the visitor clicks on Message.
5. YouTube URL, Vimeo URL - If YouTube or Vimeo is present, the slider will show the play button, allowing the visitor to see the video in full screen. If both fields are filled, the slider will play YouTube.
6. Featured Image - This is the main slider image.

Featured image MUST be set, otherwise the slider will not appear on the front page.

See Example Configuration:

And the result:

### THEME CUSTOMIZER

JamSession implements WordPress theme customizer, that provide the ability to change the layout and preview the changes in real time. To access the Customizer, go to WordPress admin menu, and select Appearance -> Customize.

The following options are implemented in JamSession:

1. Header Layouts: It offers the ability to change the menu bar position, according to your needs
2. Menu Options: It is used to change the menu text color, menu background color and the width of menu bar (full width or variable width according to the number of menu items)
3. Logo Color Options: Set a separate color for logo text and logo background, or make the logo background invisible.
4. Secondary Color: Set the secondary color of the website used for anchor text, slider title, category box, etc.

Here are some sample layouts that can be obtained using Theme Customizer.

### THEME SETTINGS

Theme Settings helps you easily take control over different settings of your website, by allowing you to choose between text or image logo, upload your logo or a custom favicon. It also allow to set the url to the profile page of your band, over different social networks. You can also set the copyright text that will be displayed at the bottom of your page, and add the analytics code.

To access JamSession Theme Settings, go to Appearance -> Jam Session Settings.

The settings page has three tabs, each one related to a separate section of your website.

The first tab, General Options allows you to decinde whether to use the name of your website or a custom image as a logo. By default, the website name is used as logo. It also allows you to add a custom favicon image.

The second tab, Social Options sets the url to the profile pages of your band over several social networks. Every field that is set will generate a link to your social profile at the bottom of the website and at contact page.

The third tab, Footer Options allows you to add copyright text, URL to copyright text and analytics code without changing the source files.

### CUSTOM POST TYPES

JamSession theme allows you to add custom post types for photo gallery, videos, discography and events.

##### ADDING A VIDEO

Select Videos -> Add New Video from WordPress admin panel. Add the title, text content, featured image and provide the YouTube or Vimeo URL to the video. Add a video category or select a video category you allready defined. Click Publish and you're done.

And the result:

##### ADDING A PHOTO ALBUM

Select Photo Albums -> Add New Photo Album from WordPress admin panel. Add the title, text content, featured image and drag or upload images to upload area. Add a Photo Album category or select a existing one. Click Publish and you're done.

##### ADDING AN EVENT

Select Events -> Add New Event from WordPress admin panel. Add the title, text content, featured image and fill specific event data fields.

Add a Event Category or select existing event category.

Click Publish and you're done.

##### ADDING AN ALBUM

Select Albums-> Add New Album from WordPress admin panel. Add the title, text content, album cover as featured image and fill specific album data fields.

Upload desired mp3 media to upload area and drag items according to desired song order.

Click Publish and your new album is published.

### CUSTOM PAGE TEMPLATES

JamSession theme comes with several custom page templates, for archives, contact, discography archive, photo albums archive, events archive, videos archive and Full Width Page Template.

Adding a custom page to your website, is really simple and can be done from WordPress admin menu.

##### ADDING ARCHIVES PAGE

Go to Pages -> Add New. Add the page title and from the Page Attributes module, set Template to Archives. Click Publish and your Archives page is ready.

All the custom pages can be added to website in a similar way.

##### ADDING CONTACT PAGE

Go to Pages -> Add New. Add the page title and from the Page Attributes module, set Template to Contact Page. Click Publish and your contact tpage is ready.

##### ADDING DISCOGRAPHY ARCHIVE

Go to Pages -> Add New. Add the page title and from the Page Attributes module, set Template to Discography. Click publish and your discography archive page is ready.

##### ADDING PHOTO ALBUMS ARCHIVE

Go to Pages -> Add New. Add the page title and from the Page Attributes module, set Template to Photo Gallery. Click Publish and your photos archive page is ready.

##### ADDING EVENTS ARCHIVE

Go to Pages -> Add New. Add the page title and from the Page Attributes module, set Template to Events. Click Publish and your events archive page is ready.

##### ADDING VIDEOS ARCHIVE

Go to Pages -> Add New. Add the page title and from the Page Attributes module, set Template to Video Gallery. Click Publish and your videos archive page is ready.

##### ADDING A FULL WIDTH PAGE

When creating a new page, the default page template has a right sidebar. JamSession theme comes with a full width page template. To use the full width page template, go to Pages -> Add New. Add the page title and desired page content and set Template to Full Width Template. Click Publish.

#####

### RECAPTCHA VALIDATION

By default, recaptcha validation is disabled. To enable it, you must enter recaptcha public and private key to JamSession settings. Please follow the next steps:

1. Go to Appearance -> JamSession Settings
2. Select the General Options tab
3. At the bottom, insert recaptcha public key and recaptcha private key. You can sign up for recaptcha keys by following this link.

### FILE STRUCTURE

## CSS

    wp-content/themes/jamsession/

- style.css - main theme stylesheet file

    wp-content/themes/jamsession/css/

- jquery-ui.css - stylesheet for jQuery UI library
- lightbox.css - stylesheet for Lightbox script

    wp-content/themes/jamsession/supersized/css

- supersized.css - stylesheet used by full screen slideshow
- supersized.shutter.css - stylesheet used by full screen slideshow

## JAVASCRIPT

    wp-content/themes/jamsession/js/

- audio_player.js - used for audio player
- jamsession-settings-upload.js - used by the theme settings functionality
- responsive_menu.js - used to render responsive menu
- start_ms.js - used to start masonry functionality
- theme_customizer.js - used by the theme customizer

    wp-content/themes/jamsession/supersized/

- jquery.easing.min.js - easing jQuery plugin
- supersized.3.2.7.js - used by the full screen slideshow
- supersized.shutter.js - used by the full screen slideshow

### SOURCES & CREDITS

- Supersized
- jQuery UI
- jQuery Easing
- Lightbox
- Masonry
- Fontello
- Google Fonts