Musico

Musico allows you to create events to make sure your followers know where you are performing and when.. Your events show up in event lists and on single event pages. Let’s take a look at how to add and manage events.

Where events are shown

Events can be seen in two places.

• Event Lists
• Event Pages

Event lists can be seen by going to yourdomain.com/event/ They can also be created on arbitrary pages by using the List Page Template.

When clicking on an event in the list you will be taken to the event’s dedicated page. A large featured image or Google Map can be added, user’s have the option to share the event on social sites, add it to their calendar, and so on.

Creating an Event

To create an event you will need to click on the “Add New” link in the events section in the WordPress backend. Fill out the title and the description. Remember that you can use any Shortcodes in the content to make it look great.

If you want to add additional info you should fill out the options provided in the Musico options area. Here is a list of the options you have:

• Event Structure
  • Featured Image Position: You can choose to show the image outside of the content or inside it. If “Above the event, full width” is  chosen, the image will span all the way across the top of the page, right to the edge of the site, above the content. If “In the event contents” is chosen it will be constrained to the left side of the event, above the content.
  • Show Map: If an address to the venue is specified a full width map is shown above the content, stretching all the way across the screen. You have the option to switch this off. If you would like a map inside the post content instead you can use our Map Shortcode.
• Event Details
  • Date & Time: Use the date selector to choose the date and time of the event.
  • Date Placeholder: In some cases you might not know the exact date of the event. You can add it anyway, just leave the Date & Time field blank. In this case the date placeholder will be used instead of the date.
  • City and Country: Usually people are most interested in the where and when of an event. Due to this we recommend adding the city and country (or city and US State) separately. Something like London, UK or Nashville, TN looks much nicer than having the full address in large type.
  • Venue: Enter the name of the venue you are playing at
  • Venue Address: Enter the full address of the venue. This will be used to generate the Google Map
  • Buy Tickets URL: Enter the URL of the website where users can buy tickets. We recommend using the “closest” link possible. If you are performing at Red Rocks, don’t just add the main site of the Red Rocks Ampitheater, find the specific page where you can buy tickets for your show. This will enable users to buy tickets a lot more easily.
  • Buy Tickets Button Text: Customize the text of the buy button
• Event Participants
  • Orchestra: Mostly for classical musicians. If you are playing with an orchestra or as a member of an orchestra, enter their name here.
  • Conductor: Mostly for classical musicians. If there is a conductor on stage, enter his or her name here.
  • Specific People: This section allows you to specifically name people who you share the stage with. You can add any name-instrument pair you’d like, they will all be listed in the event’s page.

Musico allows you to create albums to showcase your music to viewers. Your albums show up in album lists, on single album pages and the full screen music player. Let’s take a look at how to add and manage albums.

Where are albums shown

Albums can be seen in three places.

• Album Lists
• Album Pages
• The Album Player

Album lists can be seen by going to yourdomain.com/album/ They can also be created on arbitrary pages by using the List Page Template.

When clicking on the album in the list you will be taken to the album’s dedicated page. Here you’ll see more information about the album, and the audio player.

The Album Player can be accessed (if enabled and you have added albums) by clicking on the link on top of every page. This will show all your albums and allow users to listen to them.

Creating an Album

To create an album you will need to click on the “Add New” link in the albums section in the WordPress backend. Fill out the title and the description. Remember that you can use any Shortcodes in the content to make it look great.

To attach the album art you will need to upload it in the Add Media section. Choose your album art and make it the featured image for the post. If you’re not sure how to do this, refer to our article on Uploading and Using Media.

If you would like users to be able to listen to your album you will need to upload the mp3 files for the songs. You can do this in the same way as you upload media. Once you have uploaded your music files you will need to edit their details. This is easily done in the Add Media window.

You can fill out the track length, buy link url, artist and track number. The buy link will be shown next to the song on the album’s page.

A sample showing an mp3 file and its details

The list page template allows you to create a blog-like list of the items you want to show. When you upload your theme and start adding items the default behaviour is to have the latest items show up on the front page. In this case albums, events and posts will all be shown. However, you might want to show only upcoming events on the front page and use a dedicated page for albums and blog posts. If this is what you’re looking for, the list page template is what you need.

To create a list page first go to the Page section and add a new page. On the right, select “List Page” from the template selector. You should see that specific options for this page type are loaded. Once done, you can add a title, some content, and choose your options. List pages allow you to modify the following settings:

• Structure
  • Layout: Determines the type of layout you would like for this specific page
  • Page Title: Allows you to show or hide the page title
  • Featured Image Location: Allows you to use the featured image as the header image
  • Sidebar: Allows you ro show a specific sidebar for this page
• List Page Options
  • Posts Per Page: Determines the number of items shown on one page
  • Post Types: Select the types of items you would like to show on this list
  • Order Posts By: Allows you to set the ordering scheme
  • Post Categories To Show: Allows you to narrow your posts to categories. Note that this is only applied to the ‘post’ post type. Events and albums do not have categories.

Don’t forget that help is available inline inside the options box. You can read the text of this article there, as well as reading inline help for each specific option next to the option itself. Simply hover over the help link.

Postlists enable you to add a list of posts from different post types into a page. By adding some parameters you can control exactly what is shown. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The postlist shortcode has a number of parameters:

post_type
Determines the type of post to show. Muscio allows you to add the following post types: post, album, event. If omitted, post will be used.

post_status
By default only published posts are shown. However, if you want to show upcoming posts you can do so here. This parameter supports the following values: publish, future, draft.

count
Define how many posts you would like to show. By default 3 will be used. You can use -1 to retrieve all posts but beware, if you have a lot of posts it will take a long time to load!

layout
This parameter is only available when listing events. It allows you to specify "simple" as a layout which will show only the even title, image and date/location box.

Examples

[postlist count='2' post_type='event']

An element from the postlist generated by the shortcode

A slideshow enables you to show off a number of images in style. Users will be able to flick through the slideshow and navigate it via the navigation dots on the bottom. Slideshows have just one parameter which allows you to add the images you need. If you omit this parameter, all images beloning to the post in question will be used. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes.

ids
Add a comma separated list of image ids. The easiest way to add the images you need is to actually create a WordPress gallery first. If you don’t know how to do this, refer to our article about Uploading and Using Media. Once you’ve created the gallery just rename the shortcode from gallery to slideshow

Examples

[slideshow id='12,231,521,82,212']

A few images added to a slideshow

The message shortcode is another helpful tool for making some content stick out. It is great for putting up notices, warnings and other relevant information that you want to draw the user’s attention to. Using attributes you can change some properties of the display. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

background

The background color of the message. See the note about colors in the How To Use Shortcodes section for the values you can add here.

color

The text color of the message. See the note about colors in the How To Use Shortcodes section for the values you can add here.

radius

If you would like a rounded message you can set the radius here. By default it is set to ’0px’. If you would like a subtle rounded corner use a small value like ’3px’. if you want heavily rounded corners use something like ’12px’. Don’t  forget to add the ‘px’ part!

Examples

[message]We are closed next week for technical reasons![/message]

The default message uses your primary color

[message background='#79cddc' color='#ffffff']
<h1>Oh No!</h1>
We are closed next week for technical reasons!
[/message]

A customized message with custom content

The highlight shortcode allows you to highlight bits of your text in the post content. This is useful for making something stand out, or separating some content from the rest for some other reason. You can modify the color of the highlight using attributes. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

background

The background color of the highlight. See the note about colors in the How To Use Shortcodes section for the values you can add here.

color

The text color of the highlight. See the note about colors in the How To Use Shortcodes section for the values you can add here.

Examples

[highlight]we will not be open on the 25th of December[/highlight]

The default highlight shortcode will always use your primary color

[highlight background='#fafafa' color='#666666']we will not be open on the 25th of December[/highlight]

A customized, more subtle highlight

Creating nicely formatted buttons is extremely easy with the button shortcode. Just wrap it around any text to make it look like a button. You can specify a URL to actually make it work as a button and you can adjust various style settings. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

url

The URL the user is taken to when the button is clicked

background

The background color of the button. See the note about colors in the How To Use Shortcodes section for the values you can add here.

color

The text color of the button. See the note about colors in the How To Use Shortcodes section for the values you can add here.

gradient

If set to ‘yes’ a subtle gradient will be generated based on the background color. The default value is ‘no’.

radius

If you would like a rounded button you can set the radius here. By default it is set to ’0px’. If you would like a subtle rounded corner use a small value like ’3px’. if you want heavily rounded corners use something like ’12px’. Don’t  forget to add the ‘px’ part!

arrow

If set to ‘yes’, an arrow will be generated on the right of the button. The color of this arrow will be the same as the given text color. By default it is set to ‘no’

Examples

[button url='http://redfactory.nl']Red Factory[/button]

The default button is always colored with your primary color

[button background='#343434' gradient='yes' radius='5px' color='#fafafa' url='http://bonsaished.com']Bonsai Shed[/button]

A customized button

An accordion is very similar to a tab shortcode, but has a vertical orientation. It is similarly useful for displaying more content in smaller spaces. To create an accordion you will need to use the [accordion] shortcode and the [section] shortcode. The setup is exactly the same as before, but the accordion shortcode does not have any parameters. The section shortcode has a title parameter which you must fill out. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

title
The title of the section which will be used in the accordion

Examples

[accordion]
[section title='My First Accordion Section']
This is the content of this section
[/section]
[section title='My Second Accordion Section']
This is the content of the second section
[/section]
[/accordion]

A basic accordion showing two sections

[accordion] 
[section title='My First Accordion Section']
[row]
[column width='four']
<img alt="An image" class="alignright size-tile wp-image-1552" height="255" src="http://mysite.com/image.png" width="400">
[/column]
[column width='eight']
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
[/column]
[/row]
[/section]
[section title='My Accordion Section']
This is the content of the second section
[/section]
[/accordion]

Another accordion with some columned content inside

Using the tabs shortcode you can create an area with tabbed navigation. This is great if you want to show more content in smaller area. The [tabs] shortcode is always used with the [section] shortcode, similarly to how columns are created. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

The [tabs] shorcode has two attributes:

contained
This attribute can be set to ‘yes’ or ‘no’. By default it is set to yes, which means that the contents of the tabs will be contained in a box. If set to no, the box will be removed.

pill
This attribute allows you to use pill-style navigation instead of regular tabs. Set to yes if you would like pills, the default value is no.

The [section] shortcode has just one attribute:

title
The title of the section which will be used in the tab.

Examples

[tabs]
[section title='My First Tab']
This is the content of this tab
[/section]
[section title='My Second Tab']
This is the content of the second tab
[/section]
[/tabs]

A default tab layout with the second tab active

[tabs][section title='My First Tab']
[row]
[column width='four']
<img alt="An image" class="alignright size-tile wp-image-1552" height="255" src="http://mysite.com/image.png" width="400">
[/column]
[column width='eight']
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
[/column]
[/row]
[/section]
[section title='My Second Tab']
This is the content of the second tab
[/section]
[/tabs]

A pill-style tab with a column shortcode used inside to structure content

The map shortcode lets you put a customizable Google map centered on a location you specify anywhere in a post. It comes with a variety of attributes you can use to customize the map. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

location
Adding this is necessary for the map to show up. It should be an address in plain text, something you would type into the search field in Google Maps.

type
The type of map to show. The value can be HYBRID, SATELLITE, ROADMAP, TERRAIN. The default value is ROADMAP.

zoom
Set the initial zoom level for a map. If you’re adding a street level map somewhere around 14 (the default) is best. The zoom can range from 1 and up where 1 is the most zoomed out.

marker
If set to yes, a marker will be placed at the center of the map, indicating the location you specified

height
The height of the map can be set specifically if you need it. By default it is set to 400px. Don’t forget to add the ‘px’ suffix to the amount!

Examples

[map location='New York, 6th Avenue' height='120px']

An example of a map centered on Broadway in New York

[map location='New York, Broadway' type='SATELLITE']

An example of a map centered on New York using Satellite imagery

Columns enable you to easily sort your content into a column based layout. Creating columns requires the use of two separate shortcodes, the [row] and the [column] shortcode. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes.

There is only one attribute involved which needs to be added to the column shortcode to tell it how wide it should be.

width
Sets the width of a column in units. Should be given as one to twelve.

There are twelve units in each row. This means that whenever you create a row you will need to distribute 12 units throughout them. In other words you can create one ‘twelve’ width column in a row or two ‘six’ width columns, or three ‘four’ width columns. The idea is that the width of all columns in a row should add up to twelve.

You don’t have to use the same widths in a row though. You could create a ‘six’ width column and two ‘three’ width columns. Let’s look at some examples.

Examples

[row]
[column width='six']
This column occupies half of this row.
[/column]
[column width='six']
This column also occupies half of this row
[/column]
[/row]

A simple two column layout

[row] 
[column width='four'] 
This column occupies a third of this row. 
[/column] 
[column width='four'] 
This column also occupies a third of this row 
[/column]
[column width='four'] 
All three columns occupy a third of this row 
[/column]
[/row]

A simple three columned layout

[row] 
[column width='six'] 
This column occupies half of this row. 
[/column] 
[column width='four'] 
This column occupies a third of this row 
[/column]
[column width='two'] 
This is tiny!
[/column]
[/row]

A three column layout with uneven column widths

The line shortcode allows you to add a separator line between two bits of content. Optionally you can add a little link inline with the line. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

color
By specifying a color you are controling the color of the line. See the note about colors in the How To Use Shortcodes section for the values you can add here.

url
If you would like to add a link next to the line (to take the user to the top of the page for example) you can do so by adding the url parameter. If given, a link will be generated for you. If you want the link to take users to the top of the page use ‘#’ as the value for this parameter.

text
The link will have the text given here. The default text is ‘link’ which you will probably want to change to something more meaningful.

position
You can define a position for the link. The position can be left or right (left is the default).

Examples

[line]

An example of a simple line

[line url='#' text='top' color='primary']

An example showing a colored line shortcode with a link

The Twitter widget allows you to add a Twitter feed to your website. Setting this up will require you to create a Twitter application. As of March 2013 this is unavoidable when using the Twitter API. Luckily it isn’t too difficult and we have a tutorial on Creating a Twitter App.

• Title: The title of the widget
• Tweets to show: Set the number of tweets to show in the widget
• Twitter username: The Twitter user to display tweets from.

Getting a Twitter API Key

To get this widget to work you will need to create a Twitter app on the Twitter website. Once done, enter the consumer key, consumer secret, the access token and access token secret into the theme customizer. If you don’t know how to create a Twitter app take a look at our Creating a Twitter App tutorial. It should only take a couple of minutes!

A Twitter widget showing three tweets from Bonsai Shed.

The contact widget allows you to add a nicely formatted contact section to the sidebar. You can customize it extensively, here are all your options:

• Title: The title of the widget
• Text: If you would like to add some text to this widget you can do so here. It will be shown below the contact info and social icons
• Twitter username: If you enter your twitter username, a twitter icon linking to your profile will be generated.
• Facebook link: If entered, a Facebook icon linking to the given URL will be shown
• Linkedin link: If entered, a Linkedin icon linking to the given URL will be shown
• Flickr link: If entered, a Flickr icon linking to the given URL will be shown
• Pinterest link: If entered, a Pinterest icon linking to the given URL will be shown
• RSS link: If checked, an RSS icon linking to the site’s RSS feed will be shown
• Phone Number: If entered, the phone number will be shown next to a phone icon
• Email: If entered, the email address will be shown next to an email icon
• Location: If entered, the location will be shown next to a map-pin icon

Modifying Icons

If you don’t like the icons we used you can use your own set easily. In the child theme you created to modify the theme simply add different files for icons in the images/contactWidget folder. If you don’t know how to modify your theme with a child theme please read our Creating a Child Theme tutorial.

A contact widget showing contact details and social icons

The latest posts allows you to showcase a list of items you have created. It allows you to select the following parameters:

• Title: The title of the widget
• Post type: The type of items to show. You can choose to show posts, events or albums.
• Order items: Enables you to select how the items are ordered. You can choose between post date, comment count, random and custom order. If you would like to use a custom order, you will need to fill out the ‘Post IDs for custom order’ field as well
• Post IDs for custom order: If you would like to showcase a specific set of posts you can do so by selecting the custom order in the ‘Order items’ field and adding the post IDs into this field. Use a comma separated list to show multiple posts. If you need help finding post IDs read our article about Post IDs.
• Number of posts to show: Allows you to control how many posts are shown at once
• Only show posts with featured images: If selected only posts with featured images will be shown. This is a good option if you want to make the list very visual
• Show featured images: Control weather or not the featured image is shown
• Show excerpt: Control weather or not the excerpt is shown
• Excerpt length: Modify the length of the excerpt. The length given should be a number which determines the number of words shown

An example of a latest posts widget showing 3 items from the posts.

The featured item widget allows you to add some custom content to the sidebar in a nice format. This can be one of your events or posts but it doesn’t have to be. You can upload a custom image and add some custom text and a link to it. Due to this, you could also use it to put some advertisements on your website. It allows you to specify the following:

• Title: The title of the widget
• Featured item title: The title of the actual item you want to showcase
• Featured item image: Allows you to select an image to be shown. If you are having trouble using the image uploader, take a look at our tutorial on Uploading and Using Media
• Featured item text: Allows you to add text to be displayed under the image and title
• Featured item link URL: If specified, a read more link will be displayed under the content. You can make this link to something on your site, but it can also be an external link.
• Featured item link text: Specify the text on the read more link

A featured item with all options specified

The upcoming events widget allows you to list upcoming events you have created. It allows you to select the following parameters:

• Title: The title of the widget
• Number of events to show: The number of events to list in the sidebar
• Show featured images: Allows you to select weather or not the featured image for each event is displayed
• Show title: Allows you to select weather or not the title for each event is displayed
• Show excerpt: Allows you to select weather or not the excerpt for each event is displayed
• Show read more links: Allows you to select weather or not the read more link for each event is displayed

The information on the widget will only show up if is actually set in the event itself. For example, if you do not set a “Buy Tickets URL” it will not show up on the widget.

The default display for the upcoming events widget

The audiplayer wdget allows you to add a music player to any sidebar. It enables you to specify an album, or specific songs to play. The options for this widget are:

• Title: The title of the widget
• Buy Text: The text of the buy link in the player – if given.
• Album To Play: Select an album which will be shown in the audio player
• Custom Album Cover: Select a custom image for the album cover. Useful if you are adding custom tracks instead of a single album
• Custom Track IDs: If you want to add tracks from various sources you can add a list of track IDs (separated by commas). To find the track ID’s go to the “Media” section and search for the track. Click on it and take a look at the URL. There should be something like “?post=55″ where 55 is the track ID. Add these ids, separated by commas into this field.

An example of a custom audio player widget

Musico allows you to customize numerous settings in your theme. This allows you to tailor it to your style and makes sure that modification of the theme is rarely necessary.

If you are looking to do more in-depth modifications please refer to our guide on Creating Child Themes. If you are looking for a list of options to modify in the theme so you can customize it to your heart’s content, read on!

Theme Customizer

To add options to the theme we use the WordPress Theme Customizer. This is a great utility built into WordPress which allows you to preview the changes live. While this is not possible to accomplish with all the settings ( Facebook App ID changes, font changes, etc. ), for most options where it is beneficial (color changes) we have made live previews available.

To check this out go to the <code>Theme Customizer</code> under <code>Appearance</code>. Once there, open up the <code>General Options</code> section and play around with any of the colors. You should see  the relevan sections change color. This is <strong>not</strong> reflected on the site until you save the settings.

Theme Customization in Musico

• General Options
  • Body Text Color: Allows you to choose the general color of the text
  • Heading Text Color: Enables the modification of heading colors
  • Background Color: The color o the background can be modified here. If a background image is chosen it usually covers the background color. If you would like to background color to be visible make sure to remove the background image.
  • Background Image: An image to use as the background. We recommend finding a big image for the background to make the site as vibrant as possible.
  • Tile Background: You can choose to upload a smaller image as well. In this case you will probably want to tile it, set this to yes to tile images.
  • Content Area Background: This setting is applied to the main content box.
  • Primary Color: Various elements throughout the site use your primary color. The header ribbon, event date displays, buttons and so on all use this color. Changing it will greatly affect the look and feel of your site.
  • Primary Text Color: This is the color used whenever an element has a background set by the primary color.
  • Secondary Color: This color is not used too much throughout Musico but buy ticket buttons use this as their background color for example.
  • Secondary Text Color: This is the color used whenever an element has a background set by the primary color.
  • Body Font: Select the font to be used by the body text. We use Google Web Fonts which means that you can choose from over 500 fonts. The easiest method is to go to the Google Web Fonts site and select a font from there. Just remember its name and select it from the dropdown. This setting can not be previewed live at the moment.
  • Heading Font: Select the font to be used by headings. We use Google Web Fonts which means that you can choose from over 500 fonts. The easiest method is to go to the Google Web Fonts site and select a font from there. Just remember its name and select it from the dropdown. This setting can not be previewed live at the moment.
  • Default Layout: Select the default structure for your site. You can select a different structure on a post by post basis if you would like. The option to do this can be found in each post’s/page’s  respective edit page.
  • Default Sidebar: Initially your theme will have one sidebar named “Sidebar”. Using the Sidebars setting you can create multiple sidebars. The Default Sidebar setting allows you to select one of your sidebars to be the default one. You can select a different sidebar on a post by post basis if you would like. The option to do this can be found in each post’s/page’s  respective edit page.
  • Sidebars: If you need multiple sidebars you can create them here. Add a comma separated list of sidebar names you would like to use. This setting can not be live previewed, you will need to save <strong>and</strong> reload the page.
  • Read More Link Text: There are numerous ‘read more’ links across the website. To customize this text modify the value here. This setting can not be previewed live.
  • Analytics: If your website uses any analytics code you can paste it here. You’ll need to paste the whole thing, with javascript tags and all. If you use more than one solution you can paste all of them in here. This setting can not be previewed live.
• Album Player Options
  • Show Album Player: The album player is the full screen music player which you can open using the tab on top of the page. Even if set to yes, the album player will not show up if you don’t have any albums.
  • Launch Button Text: Customize the text of the launch player button
  • Close Button Text: Customize the close text (seen when the player is open)
  • Album Player Custom Link: If you would like to link the album player to an external link instead of the Musico Album Player just add a link here. Instead of opening the player, the user will be taken to the given link.
• Sidebar Options:
  • Sidebar Background Color: This setting allows you to modify the background color of the sidebar separately
  • Sidebar Heading Color: This setting allows you to control the color of the site sidebar's headings
  • Sidebar Body Text Color: Change the color of the body text in the sidebar with this setting
  • Sidebar Link Color: Modify the link color used in the sidebar
• Site Title & Tagline
  • Site Title: The site title is used in the page metadata and in the header as the logo as well
  • Site Tagline: While not visible on the site, this text is used in the site meta data so it should be relevant to the website.
• Header Options
  • Header Image: The header image is a prominent part of the header so should be a nice vibrant images which reflets you.
  • Logo Image: Select an image to use instead of the logo text. The header bar is 58ox high, an image with this height will fit exactly in the ribbon. You can ad higher image as well, in this case it will be placed over the header image.
  • Logo Offset Left: Depending on your image, you may want to position it differently than it is by default. Set the  left offset with this setting (it may be negative)
  • Logo Offset Top: Depending on your image, you may want to position it differently than it is by default. Set the  top offset with this setting (it may be negative)
  • Logo Font: Select the font to be used by the logo. We use Google Web Fonts which means that you can choose from over 500 fonts. The easiest method is to go to the Google Web Fonts site and select a font from there. Just remember its name and select it from the dropdown. This setting can not be previewed live at the moment.
  • Logo Font Size: Allows you to adjust the size of the font in the logo. 
  • Menu Font: Select the font to be used in the menu. We use Google Web Fonts which means that you can choose from over 500 fonts. The easiest method is to go to the Google Web Fonts site and select a font from there. Just remember its name and select it from the dropdown. This setting can not be previewed live at the moment.
  • Header Callout Text: Add any text or HTML to the header to be shown in the bottom right portion of the header image. Leave it blank to remove the header callout altogether
  • Header Callout Link: If you would like the header callout to link to a specific page, add the link here.
• API Keys
  • Facebook API Key: To be able to use the Facebook share functionality of the website you will need to create a Facebook app and enter its app ID here. If you don’t know how, follow our tutorial on Creating a Facebook App. If you do not add your own key sharing will still work but it will be unreliable. We have provided our own API key for you if you don’t add yours but if many people use the same key it might get rate limited.
  • Google Maps API Key: To be able to use Google Map maps on the website you will need to register an app and use its API key here. If you don’t know how, follow our tutorial on Creating a Google App. If you do not add your own key sharing will still work but it will be unreliable. We have provided our own API key for you if you don’t add yours but if many people use the same key it might get rate limited.
  • Twitter Details: The next four items (Twitter Consumer Key, Twitter Consumer Secret, Twitter Access Token and Twitter Access Secret) are required if you want to use the Twitter Widget. You’ll need to create a Twitter app and add its details to these fields. If you don’t know how, follow our tutorial on Creating a Twitter App.
• Error Display Options
  • 404 Error Title: The title shown on the 404 error page
  • 404 Error Message: The message shown under the title on 404 error pages
  • 404 Error Color: The text color of the 404 message
  • 404 Error Background: The background color of the 404 error message
  • 404 Error Background Opacity: A value between 0 and 1 which determines the opacity of the background for 404 errors.
  • No Content Title: In some cases a page exists but there is no content in it. You can control the title of this page with this setting.
  • No Content Message: In some cases a page exists but there is no content in it. You can control the message under the title of this page with this setting.
  • No Search Results Title: When a user searches and receives no results this title will be displayed
  • No Search Results Message: When a user searches and receives no results this message will be shown under the title.
• Audio Player Options
  • Buy Link Text: Change the buy link text in the audio player on single album pages.
  • Audio Player Background: Change the background color of the audio player on single album pages.
• Navigation
  • Header Menu: Select a navigation menu to use in the header menu spot. If you don’t have any menus set up you’ll need to go to the Menus page in the Appearance section.
  • Footer Menu: Select a navigation menu to use in the footer menu spot. If you don’t have any menus set up you’ll need to go to the Menus page in the Appearance section.
• Static Front Page
  • Front Page Displays: Select the page you would like to use as the front page, or show your latest posts.

Due to the nature of code it is very difficult to support a product if you modify its core code. Luckily WordPress has a feature which allows you to modify a theme without actually modifying its files. This method is called a child theme and here is how they work.

Child themes are essentially separate themes which are based on another theme. The most basic child theme is 100% based on its parent theme, meaning it looks and functions the same way. When creating a child theme you always use all the files of the parent theme, except where specified otherwise. Let’s make this clear with an example.

Let’s say you’ve bought our Musico theme and you want to display albums lists in it differently. The file which handles this is layouts/layout-album-item.php. You could just go into this file and modify it. It would work fine. However, when you update your theme you will loose all your changes.

Instead of doing that, you should create a new theme called My Musico for example. This theme will have no files in it, except for the ones which you change, in our case the album layout file.

When you update the Musico theme your child theme – My Musico – will use the new versions of all the files but it will continue using your version of the album list.

Step By Step

To create a child theme first create a new folder named my_musico in the themes directory. Create a style.css file and add the following as the content.

/*
Theme Name:     My Musico
Theme URI:      http://mymusico.com/
Description:    My child theme based on Musico 
Author:         Mr. Awesome
Author URI:     http://yourdomain.com/aboutme/
Template:       musico
Version:        1.0
*/

@import url("../musico/style.css");

There are two key pieces of data in there. The most important one is the Template: musico. This tells WordPress which theme you want the parent to be. This should be the directory name of the theme you chose.

The other important line (although not actually required) is the @import. This loads all the styles from the parent theme.

That is it, you now have a child theme which is a copy of its parent.

Customizing Child Themes

Once you’ve created a child theme you will want to customize either functionality or design. If you just want some CSS changes you can do that in the style.less file after the import.

If you need to change how the theme works you will need to create a copy of the files and modify them. Going back to our album list example, the easiest way to modify it is to do the following:

1. Create a layouts directory
2. Create a layout-album-list.php file in the new directory
3. Copy paste the code from the original file into the new file
4. Modify the new file

Further Reading

That’s most of what you need to know, but if you need some more help, or you would like to learn more about the topic, the WordPress Codex has a great Child Themes article.