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.
Postlist
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.
offset
Allows you to set an offset for the items shown. If 2 is specified the first 2 items are skipped.
Examples
[postlist count='2' post_type='event']
An element from the postlist generated by the shortcode
Slideshow
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
Message
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
Highlight
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
Accordion
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
Tabs
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
Map
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
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
Line
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
Content can be embedded into Musico from many different sources. For a number of popular sites you don't need to do anything special, just paste a link - on its own line - into the post content. Just some of the sites supported:
- Youtube
- Twitter
- Vimeo
- Soundcloud
- Instagram
- Phtobucket
- Smugmug
For a full list of all the supported sites see the WordPress Codex on Embeds.
If you found content you like on Soundcloud for example (like this playlist), all you need to do is add a link to it inside the post content, on a separate line:
https://soundcloud.com/officialbenzel/if-you-love-me-xaphoon-jones/
You can also use the [embed] shortcode. The result will be the same but you don't need to put the link on a separate line and you can specify a maximum (but not fixed) height and width
[embed height='300px' width='500px']https://soundcloud.com/officialbenzel/if-you-love-me-xaphoon-jones/[/embed]
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:
- Create a
layouts
directory
- Create a
layout-album-list.php
file in the new directory
- Copy paste the code from the original file into the new file
- 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.