“Music Pro” - Wordpress Theme Documentation by Brutal Design v2.0
Created: 11/05/2012
By: Brutal Design
Contact: help@wpwolf.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!
First of all, install or update to the latest version of wordpress on your server.
wp-content/themes/
A bunch of free and ready-to-use plugins are available on WpWolf.com
wp-content/plugins
folderThe 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
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.
To set up your menu, go in Appareance -> menus and create the 3 menus.
Then assign each menu to its location.
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.
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%
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.
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:
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".
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.
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.
This is the usual post: it will create a thumbnail of your featured image, if you uploaded one, and display the post as usual.
ImageThe 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).
LinkYou 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.
VideoThe 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
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="http://path/to/your/file.mp3" ogg="http://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.
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]
You can use the quote post format to feature a quote in your post.
AsideIf 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:
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.
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.
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.
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
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.
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.
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 :
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
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.
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.
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... .
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.
Then go to advanced link settings and add the following classes to your link:
zoom fancybox
You can also add a hover effect to any image by adding the class "hover" to any image or link that contains an image.
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.
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
4 CSS files are used in this theme:
7 JS scripts are included in this theme
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.
Below, you can find a few links that may be helpful.
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
Demo of the theme: http://demo.brutaldesign.com/musicpro-reloaded
Support Forum:
http://help.wpwolf.com