“Music Pro” - Wordpress Theme Documentation by Brutal Design v2.0


logo


Created: 11/05/2012
By: Brutal Design
Contact: help@wolfthemes.com

Thank you for purchasing my theme!
If you have any questions that are beyond the scope of this help file, please feel free to sign up to the support forum. Thanks!


Table of Content

  1. Installation
  2. The Blog
  3. The Discography
  4. The Store
  5. The Galleries
  6. The Video Gallery
  7. The Homepage
  8. Sidebars
  9. Contact Page
  10. Theme Options
  11. Lightbox
  12. Shortcodes
  13. Structure
  14. Tips
  15. Credits

1. Installation - top

First of all, install or update to the latest version of wordpress on your server.

Install "Music Pro" theme

  1. Extract the archive pack downloaded on Themeforest
  2. Via your FTP client, put the "musicpro" folder in wp-content/themes/
  3. In your wordpress admin panel, go in Appareance -> Themes and activate Music Pro theme.

Install plugins

Wolf Plugins

A bunch of free and ready-to-use plugins are available on wolfthemes.com

  1. Download the plugins you need and extract the downloaded archives
  2. Upload the main plugin folders (wolf-plugin-name) in your wp-content/plugins folder
  3. Activate your Plugins in the Wordpress admin plugin page
Being free products, these plugins are distributed as-is without official support. However, bug reports are welcome.

The jPlayer plugin & the message bar plugin are already included in the theme. You don't need to download and install them.

In the demo, I used Wolf Shortcodes, WolfSocials, Wolf Social Network & WolfGram

Set up your menus

This theme supports 3 menus: the main menu, the menu for mobile devices and the top menu

The main menu support infinite drop down levels.

When no menu is created, this theme has a fallback function that lists all pages as main menu.

Note: Don't use sub-level menu item in the mobile menu.

Create your menus

To set up your menu, go in Appareance -> menus and create the 3 menus.
Then assign each menu to its location.

Dropdown Menu

To set a drop down menu (for the main menu only), just drag and drop your menu item in the menu admin panel, and shift it a little bit on the right under the item you want to be as parent.

Set a permalinks structure

A permalink structure is a wordpress feature that allow you to make your URL's look more friendly.
By default, wordpress doesn't set a permalink structure.

To set up your permalink structure, go in Settings -> permalinks

The recommended custom permalink structure is the following:

%postname%-%post_id%

Basic Settings

Your Logo

To set up your own logo, go in the theme options panel and go in the "General" tab.
You will be able to upload your logo.

Favicons

To change your favicon, replace the file favicon.ico at the root of the theme folder: wp-content/themes/musicpro

As Music Pro is responsive, you also have 3 favicons in png format that will be used for tablet and mobile. You can replace those files in
wp-content/themes/musicpro/images/favicon/

Please respect the format (png) and the dimensions for each:

  1. 57px x 57px
  2. 72px x 72px
  3. 114px x 114px
Basic Wordpress feature: Set a featured image.

If you are a new wordpress user, you may want to know about the featured image.

A post featured image is basically an image that you can upload to represent your post and that will not be included in the post itself.

Set a featured image is very simple: In your text editor, click on "set a featured image" (usually the box at the bottom right), upload an image and click on "use as featured image" instead of "insert into post". The size of the image will be automaticaly resized.

Did you know? You can crop/rotate any image directly in wordpress, by clicking on "Edit image".


2. The Blog / News - top

By default, the main pages are created automatically on the theme installation. However, I will explain in this documentation how to create each page.

To create your blog/news page, first create a new empty page titled Blog or News with the default template.

Then go in settings -> reading and configure your settings as the screenshot below.

Note : Additionally, you can choose which static page to display as Home page in the Front page select box. We will see that later in the Home Page section

The post formats

This theme support 8 different post formats (standard, image, audio, video, aside, quote, link, gallery). You can use it to display each post differently.

To do so, simply click on the post format tabs. The visual editor will be displayed differently depending on which tab you have clicked.

Post Formats

Standard

This is the usual post: it will create a thumbnail of your featured image, if you uploaded one, and display the post as usual.

Image

The Image post format allow you to feature an image for your post. The difference with the standard post format is that the preview image, on click, will open the full size image in a lightbox (fancybox 2.0.6).

Link

You can feature a link with the link post format. The title of the post will be linked to the url you set up in your post.

Video

The video post format allow you to feature a video in your post.

You just have to paste your video embed code in the embed code field.

You can also use the video post format to display a soundlcoud player, a jPlayer Playlist and put any html, embed code or shortcode.

You can generate a video thumbnail automatically by clicking on "Generate" in the "Video Thumbnail" box.
This video thumbnail will be use as featured image once your post is published.

The Video thumbnail feature supports Youtube, Vimeo, and Dailymotion

Audio

The audio post format allow you to feature a song in your post. Simply enter the mp3 and the ogg file url of your song to display a nice one-song player.

Upload your files manually through FTP in a dedicated folder that you can create (e.g : wp-content/uploads/audio), and be sure to fill the right path to your audio files.

You can also display an audio player anywhere by using the followng shortcode: [bd_jplayer mp3="https://path/to/your/file.mp3" ogg="https://path/to/your/file.ogg"]

This theme use the jPlayer jQuery plugin.

Note : In order to make the jplayer work on firefox, you must enter the url of an ogg file.
You will easily find a free mp3 to ogg file converter on the internet.

Gallery

To use the gallery post format, simply upload pictures in your post through the upload panel and the images will be displayed as a slider in your post.

Once uploaded, you can reorder them or delete them by clicking on manage images -> "gallery" tab. Click on "Save all changes" when it's done.

You can display a post gallery as slider anywhere by using the followng shortcode: [bd_post_slider]

Quote

You can use the quote post format to feature a quote in your post.

Aside

If you create an aside post using post format, you will not see the title in the blog page. This post format is similar as a facebook or a twitter status.

By the way you can use this status to post embed tweet using the Wordpress native function.
Simply paste the URL of the tweet you want to display, and it will be dislpayed nicely in your post. Be sure that the URL of your tweet is not linked. See the screenshot below:


3. The Store - top

To create your store page, create a new empty page using the template "Store".

Then , start by adding your first item by clicking on Store -> add new

Use the "Details" box to set the item name and price and chack the "Sold out" check box if your item is out of stock.

You can add a direct link or a paypal link where the CD can be purchased.

But if you leave the "Buy URL" and "Buy text" empty, you can choose to use the paypal inbuit feature to generate a paypal button automatically by filling the "Paypal Button" box fields.

You can use the "Paypal Checkout" widget to display a paypal checkout button on your store sidebar.

4. Discography - top

To create your discography page, create a new empty page using the template "Discography".

Then , simply add your first release by clicking on Discography -> add new

For each release you can set different details in the "Details" box below the main text editor.

The description field will be displayed on the "Discrography" index page and the content of the page itself will be shown in the release single page.

The "purchase" links

In the "Details" box, you can fill links to itunes and amazon where visitors can purchase your release in digital version.

You can also add a direct link or a paypal link where the CD can be purchased.

But if you leave the "Buy URL" and "Buy CD text" empty, you can choose to use the paypal inbuit feature to generate a paypal button automatically by filling the "Paypal Button" box fields (item name, price etc..).

The paypal options set in the BdPaypal panel will be used so as the Store.

5. The Galleries - top

Single Gallery

In you Wordpress admin sidebar click on Galleries -> add new.

Create a gallery is very simple. You have to use the new Wordpress 3.5 gallery feature

  1. In your gallery editor page, click on "Add media"
  2. Then click "Create a new gallery"
  3. Select your image from your media library or upload new ones
  4. Select "Link to media file" in the gallery settings in the right
  5. Click on the "Create gallery" button at the bottom right of the media manager

Albums template

Once you have created one or several galleries, you can create a page to display all your galleries as albums. When the visitor will click each album it will be redirected to the gallery.

To do so, simply create a new empty page (name it "albums" or anything else) and choose the "Albums" template.

You have to set a feature image for each gallery. It will be used as album cover in your album index page.

6. The Video Gallery

To create a video gallery, create a new empty page and use the "Video Gallery" template.

In you Wordpress admin sidebar click on Videos -> add new.

The principle is similar to the blog video post format. Simply fill the "video embed code" field, and once your video post is saved you can generate a video thumbnail. This thumbnail will be use in the video gallery, and when the visitor click on it, the video will be opened in a lightbox.

7. The Home Page - top

Features

To manage your homepage, go to the "Home Page" tab of the theme options

You can choose what you want to display at the top of your homepage: a slider, any html code, shortcodes with the embed header, a static image or ...nothing

To manage your home page slider, first choose which slider you want to use in the theme optins -> homepage tab and go in your slider manager (Nivo Slider, Piecemaker Slider or Caroufredsel slider).
It is very simple to use. Just upload your images, re-order them by drag'n drop and edit the caption and link as you wish.

The sliders used in this theme are :


8. Sidebars - top

By default, this theme comes with a blog sidebar and a widget area for the footer.

However, you can create unlimited sidebars for your pages.

To create a new sidebar, go in the Sidebar Manager.
Fill the name of your new sidebar and an optional description and save it.

You can choose which sidebar you want to display on any page in the text editor.

You can choose the "widgetarea" type. Once you create a new widget area, get its shortcode at the left of its name in the sidebar manager, and copy and paste it anywhere in your content. The widget areas support 3 widgets. You can also use the widget area shortcode generator directly in the text editor (cog-wheel icon).

Note: In this theme, the Text widget supports shortcodes

Few words about the widgets

This theme comes with custom widgets. An important thing to notice about the "Recent post with thumbnails" and the "Custom tabs" widget is that they will display only the posts with a featured image. For example, if you want to display a post with the gallery post format, be sure to choose one image in the post attachements and to set it as featured image.


9. Contact Page - top

  1. To use the form, first enter the email address where you want to recieved your messages in the theme options panel.
  2. Create a new page with the "Contact" template , and that's it!

Additionally you can write a message in the page content to invite your visitors to send you a mail. The contact from will be automatically displayed below any content.


10. Theme Options - top

To set your theme options, go in Music Pro -> Theme Options in your Wordpress admin panel.

The theme options panel allow you to change the appareance of your website by uploading backgrounds, logos, default avatar, changing the color of the main elements with color pickers etc... .


11. Lightbox - top

You can open the full size image in a zoombox to any image inserted in a post.
Select the image, in edit image, link the full size image to your thumbnail.

image-link

Then go to advanced link settings and add the following classes to your link:
zoom fancybox

image-zoom

You can also add a hover effect to any image by adding the class "hover" to any image or link that contains an image.


12. Shortcodes - top

This theme comes with in-buit shortcodes, to display the last 4 last video items or albums, for exemple in your homepage.
Ther is also several typography shortcodes and a google map shortcodes.

You can find all of these in the "Shortcodes List" by clicking on the "Shortcodes List" tab in your wordpress admin sidebar.

Additionally, you can install the WolfShortcodes plugin to be able to generate buttons, columns, tabs, accordion, notifications and google maps to your theme.

The BdShortcodes plugin can be found in the "plugins" folder in your theme package.


13. Structure - top

HTML

The Header, the Content and the footer

The header contains:

The content

The content is the variable part of the pages. It will depends on which template you choose.

It can be display in full width or with a sidebar (at left or right).

The footer contains

CSS

4 CSS files are used in this theme:

  1. jquery.fancybox.css (for the lightbox)
  2. jplayer.css (used for one song player)
  3. style.css (stylesheet require by Wordpress)
  4. theme.css (the main stylesheet)

Javascript

7 JS scripts are included in this theme

  1. html5.js (cross browser HTML5, and media queries compatibility)
  2. flexslider.js (used for the header slider and the post sliders)
  3. jquery.fancybox.pack.js (for the lightbox)
  4. jquery.fancybox-media.js (fancybox helper for videos)
  5. jquery.fitvid.js (make videos responsive)
  6. jquery.isotope.min.js (used for the galleries, and video gallery mansonry and portfolio filter)
  7. jplayer.min.js (used for one song player)

PHP

This theme is built on the BrutalDesign Framework

The purpose of this framework is to set up the theme in the most clean and fast load way, respecting the Wordpress standards.
The structure of the theme is set in one single array in the functions.php file.

If you are a PHP jedi, feel free to digg the framework code, it is well commented.

If you are not familiar with PHP, DO NOT modify the content of the functions.php file and the content of the includes and framework folders.

If you want to add functions or filters to your theme, it is recommended to add them in the
includes/theme-functions.php file.
Be careful: adding code could result in errors.


14. Tips - top

Below, you can find a few links that may be helpful.


15. Credits - top


Thank you again for purchasing my theme! Have fun!

Feel free to check my website to find some Wordpress tips and free plugins.
Follow me on twitter @wp_wolf

Go To Table of Contents


Demo of the theme: https://demo.brutaldesign.com/musicpro-reloaded
Support Forum: https://help.wolfthemes.com