Learn How To Make A Website, No Skills Required. CLICK HERE

How to Make a Music Website

Whether you’re a singer, a band member or a DJ, you will eventually want to set up a website to promote yourself (or your band) online.

There are plenty of places online where you can promote your music free of charge. Many artists use YouTube, or music sites such as Mixcloud and SoundCloud. All of these are sensible ways to promote music, and we recommend that you use some or all of them. However, you will also want a website of your own where you can pull everything together and include other information like details of gigs or merchandise.

In this article, we are going to show you, step-by-step, how to build a music website using WordPress.

WordPress logo

Why WordPress?

WordPress is our favourite Web Content Management System (CMS) here at Make a Website. Here are a few reasons why it’s ideal for your music site:

Thousands of themes:  Making a website once meant tweaking HTML code until everything looked right. WordPress uses Themes to determine the basic design of sites. There are quite literally thousands of themes available, and plenty are tailored specifically towards the music industry. Some themes are free, but even premium themes cost very little.

Little or no coding: You can get to the code behind a WordPress site, but it’s unlikely you’ll have to do anything more complicated than pasting in some HTML if you want to embed a YouTube clip or a music sample from a third-party site.

The support community is huge: With over six million WordPress sites out there, it’s extremely unlikely that you’ll find a problem that someone else hasn’t faced before. You will find endless WordPress support forums to help you, and thousands of developers and experts if you ever need any specialist help or customisation.

How we will help you

At Make A Website we have created hundreds of websites between us, and we know exactly how to help you create a music website with minimal hassle and effort.

Our aim is to get you quickly up and running with WordPress and also give you some guidance in attracting people to your site.

What You’ll Need

Don’t worry if you don’t have these things yet – we’re going to take you through everything step-by-step. Here are the basics:

  • A Web hosting account with your own domain
  • A Web browser of your choice (we prefer Google Chrome or Firefox)
  • Some photographs of you or your band
  • A little spare time and a modicum of patience
  • Some existing online samples of your music that you can link to (such as YouTube clips or SoundCloud mixes).

Choosing a Theme

For the purposes of this tutorial, we are going to use quite a basic WordPress theme called “Singl.” It is free of charge and includes enough functionality to get you started. It’s also fully responsive, meaning that your site will look good on mobile devices.

Once you become more competent with WordPress, we suspect you will want to upgrade to a more sophisticated premium theme, but Singl is ideal for this simple tutorial guide.

Here are a couple of music-focussed themes we would particularly recommend, from theme specialists ThemeForest:

Music ClubA really attractive band theme that looks great on mobile devices.

MClub

EPROMA bold and striking theme, ideally suited to DJs and producers.

EPROM

It’s up to you whether you want to choose a premium theme now, or switch to one at a later date. Either way you should have little difficulty following this tutorial.

Getting a domain and hosting

Before you can do anything, you need an address for your website (a domain), and a place to host your website (Web hosting service). We recommend HostGator as your Web host.

We have produced a very detailed step by step guide to registering your domain and setting up your hosting. You should visit the page now via this link. (The link will open in a new window or tab, so you can easily return to this guide at any time – see you shortly!)

HostGator - Home

Installing WordPress

The next thing you need to do is install WordPress on your new domain. Luckily, we have another step by step guide telling you exactly how to do that.

Once again, click the link to move forward to the guide. The guide will open in a new window, so you can return to here when you are done.

Sample site

 

Getting the basics done

Now that WordPress has been installed onto your Web space, we can get down to business. Before proceeding to the next steps you should be sure of the following:

1. That you can get to your WordPress dashboard (www.yourdomainname.xx/wp-admin) and log on using your username and password.

2. That you can see your site when you type the domain name into your Web browser.

If your basic site isn’t yet live, you may need to wait a little longer for your domain information to propagate. Refer back to Step 7 in the step by step WordPress Guide for more info.

Wordpress - Dashboard

The WordPress dashboard is where you control all the content and functionality within your website. First of all, we are going to change the fundamental appearance of the site by installing our theme.

Installing the theme

As discussed, we are going to use a free theme called “Singl” for the purposes of this tutorial. HOWEVER if you’ve already chosen a different theme, you can go ahead and install that instead.

You can access the Singl theme via this link here. It will download as an archived .ZIP file. Keep the file safe on your computer as you will need it in a second.

1. On the left of the dashboard, hover over “appearance” and click the “Themes” option:

Theme options

2. You will now see a screen showing all the themes available to you, complete with previews:

Themes

3. We want to upload the Singl theme we downloaded previously, so click the large “Add New Theme” button.”

4. Click the “Upload” link, then click “Choose File” and browse to where you saved the Singl theme on your computer. When you’re done, click “Install Now.”

5. Once the theme has finished uploading, click the “Activate” button.

Activate

 6. Now, click the name of your website in the top-left corner of the dashboard and click “Visit Site.” Your new site will be loaded, complete with demo content, as shown below.

Visit site

Adding Some Content

The time has now come to add the first content to your site. Before you do, here are a couple of WordPress concepts you will need to learn:

Pages are individual areas of your site, usually accessed through the top or side menu bars.

Posts are individual blog posts, that usually appear in reverse date order as visitors scroll down the page.

The Singl theme doesn’t turn on a pages menu by default. If you wish to use one, you must take the following steps:

1. From the Dashboard, go to “Appearance,” then “Menus.”

2. Click “Create a new menu” and choose a name (we went for “Top Menu.”)

3. Select the pages you want to appear on the menu in the left hand column, using the tickboxes, then click the “Add to menu” option.

4. Tick the “Primary Menu” tickbox (shown in the screenshot below,) and then click the blue “save menu” button.

Add menu

5. When you refresh the live website, you will now see a new drop down menu, as shown in the screenshot below.

DD Menu

Please note that these steps are unique to the Singl theme. Usually, WordPress themes have a default page menu active from the start.

Let’s proceed with adding some content:

Go back to the Dashboard. You will notice that both “Posts” and “Pages” have an “Add New” option when you hover over them. Try adding one page and one post. For now it doesn’t matter if they contain nonsense. The purpose of this is just to get used to adding WordPress content.

When you create content, you use an interface that looks much like a word processor. You can add bold type and italics, format your text, and even add images. If you’ve used a word processor, you’ll have no trouble using WordPress. The screenshot below shows the basic editor for both posts and pages. Once you’ve created your content, you just need to click the “Publish” button on the editing screen.

Page add

In the screenshot below, we have added one new page and one new post (“About the band” and “Our new single” respectively). We have then used the “visit site” option to demonstrate how our site has changed. We also had to revisit the menu options to add the “About the band” page the the theme’s drop-down menu.

Site demo

After creating a couple of pieces of content, it should become very clear how to start to build up your site.

You should try to create a reasonable amount of content prior to launching your site – there’s nothing worse than a site without anything to engage visitors.

So, try to create at least six to eight good pages and blog posts. These should be well-written and relevant, and include some images.

The content is down to you, but before you create more, let’s look at how to make things a little more engaging.

Embedding your music

As you are creating a music site to showcase your talents, you need to include some real life music clips.

This is really easy to do. As a demonstration we are going to use the demo post we created previously called “Our new single.”

1. From the dashboard, click on “Posts” then “All posts.” Choose the post from the list and click “Edit.”

Edit

2. You will find yourself on the editing screen. You’re probably quite familiar with it by now, having added some content, but you may not have noticed the “Visual” and “Text” editing options.

VT

“Visual” is probably the mode you will use most of all, as it gives you a WYSIWYG (What You See Is What You Get) view of your content. The “Text” view takes you to the HTML code behind your site. Don’t worry if you don’t understand HTML – you really don’t need to.

3. Go to YouTube and find the content you wish to embed on your page. As this is a demo and we don’t have a band here at Make a Website(!), we’ve just chosen a random music video.

4. Click the “Share” button under the YouTube video, then click the “Embed” link. Both are shown in the screenshot below.

Share

5. Choose a size for your video on the embed options screen. (The default size is ideal for most themes). Then copy the code (shown with the arrow) to your computer’s clipboard (the shortcut for this is CTRL+C on Windows or CMD+C on a Mac).

Video 6. Go back to your WordPress edit screen and paste the code back into the edit screen, making sure you are in the “Text” view first. Paste it wherever you want the video to appear in your post. (The shortcut for this is CTRL+V on Windows or CMD+V on a Mac)

With code

7. Click the blue “Update” button when done.

8. Go back to the live view of your site, refresh the page if necessary, and you should see your new content in place.

With content

You will find that embedding content from other sources works in much the same way: The site you are using will provide you with code, and you simply insert it into your content (always while in “Text” view).

NOTE: You can upload content directly to your site in MP3 and similar formats as well using the “Add Media” option on the edit screen, however, we recommend using embedded content where possible for faster site performance.

Preparing to Launch

Assuming you’ve created all the content you need, you are now almost ready to launch your site. However, there are a few things you will will to do first.

First you should get rid of the default WordPress demo content so:

1. Delete the “Hello World” post.

2. Delete the “Sample Page” page.

Then:

3. If you would rather have a static home page, rather than one containing your latest posts, then create a page, and then go to Settings > Reading, and set it as your home page.

4. Create a “Privacy Policy” page according to the laws of your country.

5. Integrate with social networks. Most music themes will include functionality to help you do this. In the Singl theme, you need to go to “Appearance” and then “Customize.” Under the “Theme Options” section, you can insert a wide range of links to various social sites, for which icons will then appear in the header for your site. If you are using a different theme, look in the documentation for suggestions regarding social network integration.

SN6. Make sure you also provide a way for fans to get in touch with you directly. You may choose to use a contact form plugin for this, and we recommend that you check out Contact Form 7.

7. From the dashboard, go to Settings > Permalinks, and change the Permalink setting to “Postname.” This makes it easier for the search engines to index your new posts.

8. Have a final think about the look and feel of the site. Many themes allow you to tweak the colour schemes and fonts. In the case of Singl, the options are found in “Appearance” then “Customize.”

In the image below, you can see how fundamentally we’ve changed the look of our demo site by simply tweaking the colours and swapping the default background image for a plain colour.

New site

 

Promoting your site

Giving out the URL for your site isn’t the end of your project. We recommend that you take note of the following recommended steps:

1. Maintain a steady presence on social networks, engage with fans and give them reasons to visit.

2. Constantly keep the website updated with new content – both so that fans return and so that the search engines have plenty of new content to index.

3. Make sure your website URL appears prominently on all of your promotional literature.

4. Give fans sneak previews of new materials via the website to give them a compelling reason to return.

Good luck with your musical ventures, and with your new website!

 

 

Previous post:

Next post:

Author Picture Written by Pete Zaborszky
Pete runs Make a website and wants to get detailed information to the readers. He is dedicated to being the best and providing the highest quality at anything he does. You can also find him on Twitter or Google+