Musician Web Design 201

Musician-Web-Design-201

A Quick Note: This is Part II of a 3 part series

In the last post we talked about why you need a website and how by putting in a little work, you can make an awesome website all by yourself, and do it inexpensively. You have your domain and hosting all set up, and WordPress is ready to go. In this post we’re going to add the individual pages of your site as well as the most important stuff: your content.

The Awesome Thing About WordPress

The awesome thing about WordPress is that it’s open source. This means that anyone can make themes and plugins and you can integrate them into your site. The bummer thing about WordPress is also that it’s open source. Because anyone can make their own themes, they usually all work a little bit differently. Some have entirely different frameworks that their built on, like Woothemes, Genesis, or Thesis. These add more functionality and are cool, but only work with the themes designed to work with them.

All of that to say, your theme may behave a little differently then what I’m using. Don’t let that throw you off. You’ll probably be able to figure it out, and if not, google it. Anther awesome thing about WordPress being open source is that tons of people post helpful information.

Pages vs. Posts

Now, you’ve got two main types of webpages. One is the “Page” and the other is a “Post”. Both are technically “webpages” but act a little differently within WordPress. Rather than play “who’s on first” for 15 minutes, we’re just going to not worry about posts. Only create new Pages. Remember this is a blogging platform that we’re adapting to work for our site. The first thing you’ll want to do is login to your site, go to “Posts” in the left side menu and delete the example post that says “Hello World.”

When a visitor comes to your site, right at the top is your main menu bar. This makes it easy to get around all the different sections of your site (the theme I’m using displays the main menu on the side, but it functions exactly the same). For each individual webpage that you want to show up in the menu bar at the top, you need to create a new “Page”.

Let’s Make Some Pages

First go to “Pages” in the left menu bar, delete the sample page, and create a new page for every element you’ll want. Contact, video, bio, etc. After you click “Add new”, enter your title, but don’t worry about the body of the page for now. Make sure and hit the blue “Publish” button after you create each “Page.” If you’d like a separate homepage, create one now. If you’d like to make your bio or something else your homepage, that’s fine too, we’ll do that in a minute.

Not Just Another WordPress Blog

Next go to Appearance>Customize. Change your tagline from “just another wordpress blog” to something about you. Since this is a blogging platform, you have the option of either showing your latest “Posts” on the homepage, or selecting a different “Page” of your choosing. Remember how we’re not using “Posts” at all? Click on where it says “static front page” and select it, choosing which “Page” (that you just created) you want your homepage to be. Since we aren’t doing posts, don’t list anything as your posts page. Click save and close out.

Now refresh your site in a different tab. Here’s how Nate’s site looks so far:

Screen Shot 2013-12-12 at 11.48.49 Dec12

It’s looking better, but we still have space for comments and a bunch of sidebar nonsense. Let’s get rid of that. There are multiple ways to do this, but the way I like is the extermination method. You are never going to want to have people commenting on your bio. What would they say anyway? I’ll tell you: “Your site looks great honey! Love Mom.” OR something completely horrible that I can’t post here. It is the internet after all.

Sidebar and Comments Extermination

This is going to seem scary and hard, but it’s not. I’ll walk you through it, you’ll be fine. Click on Appearance>Editor. We’re gonna edit some code!

Now you see a bunch of scary numbers and letters right? Don’t be intimidated. This isn’t The Matrix. Nobody is going to hack your mainframe. Click on the “Page Template” part on the right hand column.

Screen Shot 2013-12-13 at 1.18.54 Dec13

Screen Shot 2013-12-13 at 1.19.07 Dec13

See the line of code that says “<?php comments_template( ”, true ); ?>”

All I want you to do is add two // like this:

<?php// comments_template( ”, true ); ?>

Just add two // after the php.

Click the big ‘ol blue “Update File” button at the bottom. Now, remember that ugly sidebar? It’s great if you’re blogging, but let’s get rid of it. We’re gonna do the same exact thing to this line of code:

<?php get_sidebar(); ?>

Turn that into this:

<?php// get_sidebar(); ?>

Remember, just two //. That’s it.

Then click update file and refresh your site.

If you’re irrationally nervous about doing this like I was the first time, you can select all of the code and copy and paste it into a separate document. That way if you do screw something up, you can just paste in the original code.

BOOM! Comments and the sidebar are gone. Nicely done, that wasn’t too bad was it? You only hacked like what, 2 mainframes?

Here’s how Nate’s site is looking:

Screen Shot 2013-12-13 at 1.51.12 Dec13

 

Note: for this particular theme, I’m also getting rid of the footer at the bottom, using the same method shown above. You may or may not want a footer though. That’s up to you. 

Menu Please

Alright so now you’ve made your pages, and you’ve gotten rid of all the extra blog fluff. Looking good. Now let’s make it so the pages you’ve created show up in the menu. In this particular theme, the menu is going to display on the side, but if you follow these same steps, your menu will work the same.

Click on Appearance>Menus.

From here, select the pages you want under “Pages” on the left, then click “Add to Menu” below. If you want to remove one later, just click on it under “Menu Structure” and click “Remove.”

Screen Shot 2013-12-13 at 1.54.07 Dec13

I accidentally had 2 “Home”  tabs, so I clicked one and then clicked remove.

Click the big blue “create menu” button at the top.

Now check the box at the bottom that says “Automatically add new top level pages to this menu” and “Primary Menu.”

Screen Shot 2013-12-13 at 1.58.39 Dec13

 

Now checkout what our site is looking like:

Screen Shot 2013-12-13 at 2.01.45 Dec13

We have menus!

If you go back to your menus settings page, you can drag and drop the menu elements to be in whatever order you’d like them to show up in the navigation.

Here’s my new order after clicking save:

Screen Shot 2013-12-13 at 2.23.51 Dec13

And here’s how it looks on the site:

Screen Shot 2013-12-13 at 2.24.27 Dec13

Remember how every theme is a little different? There’s some stuff you’ll have to figure out on your own. For example, this theme has a “theme options” tab where you can customize elements specific to this theme. This is where I changed the background picture and the social links to Nate’s.

Your main site structure is now done! Let’s add your content, and then we’ll tweak it.

Adding Your Content

Now it’s time to add the most important part of your website: the content.

Text Pages

For pages that are just simple text (like a bio),  just go to that Page (left side menu) and type in whatever you want. Don’t forget to hit the blue update button after you make changes.

Here’s a look at Nate’s “Credits” page:

Screen Shot 2013-12-13 at 2.36.06 Dec13

You can use the built in tools like bold and italics as well as bullet points to make this however you want.

Adding Video

For this example we’re going to grab a YouTube video, but most other online video services work the same. All you need to do is copy the embed code below the video you want to feature. To do this, go to the YouTube video, then click on “share” just below the video, then click on “embed” just below that. Copy that code.

Screen Shot 2013-12-13 at 2.46.00 Dec13

Then paste it in on the page text area (just like you did to create a text-only page).  The difference here is to make sure you click the “text” tab, not the “visual” tab. If you want multiple videos on one page, you can paste in that code as well.

Screen Shot 2013-12-13 at 2.39.57 Dec13

 

 If you decide you want to change the size of this video, that’s easy to do. When you grab the embed code on YouTube, there is a drop down menu with multiple video size options. If none of those sizes suit you, you can use an aspect ratio calculator  to figure out what your height and width should be in relation to each other. Then go back to the code you just pasted in (scary I know) and change “height=” and “width=” to the numbers you decide. 

Now click “Update” and refresh your site. You’ve got videos!

Screen Shot 2013-12-13 at 2.47.35 Dec13

 

Audio

Let’s add audio. Go to the Page you want your audio in. In this case, it’s under “Studio.” Click the “Add Media” button between the title and the text area.

Screen Shot 2013-12-13 at 2.59.34 Dec13Drag and drop your files into that window directly, then select the song you want and click “Insert Into Page”. It will paste in some fancy code. Do this for as many songs as you’d like.

Note that before you insert this into your page, you can change the title that displays, and whether it will embed an audio player or have an external link. I chose to embed. 

 

Screen Shot 2013-12-13 at 3.03.41 Dec13

Now that your audio is linked into your page, type in the text field any addition text you’d like, like title, artist, or any other relevant information.

Here’s what I typed in:

Screen Shot 2013-12-13 at 3.08.12 Dec13

Click update and BOOM! You’re making sound.

Screen Shot 2013-12-13 at 3.09.07 Dec13

 

Adding Photos

For this particular site, Nate didn’t want to add a bunch of photos, but rather have one main photo be the background. That’s why we picked this particular theme. But photo uploading and inserting works the same way as audio uploading. Remember the awesome thing about WordPress? Well there’s a bunch of free photo gallery plugins. There’s several of different types, so if you want a photo gallery, feel free to try them out.

Can I Get Your Number?

No Internet, you can’t.

So, best case scenario, someone comes to your site and says, “Wow this guy is really awesome at whatever his thing is that he does, also this website is pretty great. I want to call him for gigs.” That’s what your contact page is for. I highly recommend not listing your phone number or email directly online. This will lead to lots of spam. Instead, we’re going to make a contact form. This way your email address stays hidden until you decide to email them back.

Using Jetpack To Create a Contact Form

WordPress comes with a cool plugin called Jetpack already installed. This plugin is actually like 30 different plugins, but right now we’re just going to use the contact form. In order to use Jetpack, you need to connect your WordPress.com account. Do you remember the difference between the .com and .org versions of WordPress from the last post? Well, if you don’t already have a WordPress.com account, go get one. It’s free. Go do it right now. I’ll wait.

Why didn’t you do it? Come on.

Well, after you finally do go signup, go back to your left menu bar and click Jetpack and then sign in with your new account.

Screen Shot 2013-12-13 at 3.14.49 Dec13

 

Screen Shot 2013-12-13 at 3.16.01 Dec13

Now that that’s activated, go to your Contact page and click the “Add Contact Form” button above the text field.

 

 

You can add additional fields if you’d like, or leave it basic. If you click on the “email notifications tab” you can specify where the contact email should be sent to. Otherwise it will be sent to the default address associated with your website.

Screen Shot 2013-12-13 at 3.17.56 Dec13

 

Click “Add this form to my post” and then click Update and you’re done.

You may want to also link to your social media accounts, but that’s up to you. There’s plenty of plugins that will allow you to do this. They’re all a little different (awesome WordPress, remember?) so try a few out and see what you like.

I decided that the built in social media links in this theme weren’t consistent with the rest of the theme, so I made a separate page for these and added links individually.

Wrap Up

Your site is looking pretty great so far. Now that your content is up, the most important part of your site is done. Great job! In the next post, we’ll talk about how to make your site look cool. If you have any questions or have found this helpful at all, please let me know in the comments.

Ready to move on to Part III? Click here.

 


________________________________________________________________

In the interest of being upfront and honest: this post has an affiliate link to Bluehost, and at no cost to you, I will earn a commission if you decide to purchase. Please understand that I’m recommending Bluehost based on my great experience with them. Please don’t spend any money unless you’re really going to build a website. If you do build a website and wanted to go through my link, that would be awesome, thank you. 

Photo credit: Robert S. Donovan