A Quick Note: This is the final installment of a 3 part series. If you haven’t already, you should read Parts 1 and 2.
In the past 2 posts, we’ve talked about the importance of a website, how to setup hosting, install wordpress, install your theme, upload your content, and lay out your menu. Your site is looking good and is almost complete. You know what it could use though? A few finishing touches. Here’s how to make your site look cool.
HTML, CSS & Other Confusing Letters
I know I promised to help you build a website and that it would be easy to do. It really is. However, this is for the advanced folks out there who want to go the extra mile to really make their site stand out. If you’re looking to just get your site done, skip down a couple paragraphs. In order to make more advanced tweaks to your site, you need to know about HTML and CSS. These are the things that make up websites. If a website were a person, HTML would be the bones, and CSS would be skin. This is how all websites are built (yes, even your Wordpress site that we’re almost done making).
Every page to every site has an HTML file that tells the browser how to lay out the website when you load it. This HTML file contains any text that you have written, links to any pictures or video that you want displayed, and general structure information.
Most every website these days has a CSS file that accompanies the HTML. Without it, your site would look like plain black text on a white background. Adding a separate CSS file allows you to specify which parts of your site you want to be what color, font, borders, and more. Remember, this is the skin of your site. If you want to add freckles to your site, that’s CSS. If you want to add a third arm, that’s going to be HTML (your skeleton).
I could keep talking about how CSS works, and interesting things you can do to your site, but instead, I want to get back to the WordPress stuff. We’re losing some folks, not everyone is as awesome as you. If you’re interested in learning CSS, I highly recommend checking out Code Academy. There you can take free interactive lessons to learn HTML, CSS, and more confusing sounding letters. This is where I learned most of my HTML/CSS knowledge. Another great resource is John Duckett’s HTML & CSS: Design and Build Websites. This is a great book that lays everything out visually and in a really simple way.
All of this to say, CSS is awesome, and in the site that I’m building for Nate, I added some to change the look of it. So don’t be thrown off.
Let’s Reduce The Clutter
In talking to Nate about how he wanted his site to look, he wanted to go very minimal with it. With this in mind, I used CSS (see above if you skimmed, you slacker) to remove the colors, borders, boxes, and everything else that was cluttering the site up. His photo isn’t plugged in yet, but once it is, it’ll be the center focus of the site. Here’s how the site is looking right now:
In an attempt to make it even more minimal looking, I took out the menu option for “Home”. You know how to do this already. Just go to Appearance>Menus and take out the “Home” option, just like we did in the last post. By doing this, the page that you made and named “Home” is still your homepage when someone lands on your site, but it doesn’t show up as an option to go back to. If you want to go back to the “Home” page, you can click on his name.
Notice that it still says “Home” at the top, even though we removed it from the menu. That’s because it’s the title of the Page. That’s not very minimal though so let’s remove it (also note that it says “edit” only because I’m logged in as I’m viewing it). If you want to do this, just rename the page nothing. As in take out the name. Leave it blank. An alternative option here would be to name it “Drummer” so that it displays as
“Nate Lotz Drummer”. Take your pick.
No Smiling Allowed
You may notice that you have a small smiley face at the bottom of your site. If you think that’s adorable, feel free to leave it in. If you think it’s dumb and want it gone like I did, just open up Jetpack. In the last post we activated Jetpack with our WordPress.com account. Click on “Jetpack” then see the panel that says “WordPress.com Stats?” Click “Configure.” There you can uncheck the option to display that little smiley bastard.
These are the things that let you add additional functionality to your site. Some of these plugins alter visual things, and others offer utility functions. Regardless, you can install plugins straight from your site. Just click on the Plugins tab. You can search for anything you’d like, read about it, and install it straight from there. There are also paid plugins, but we’re going to be dealing with strictly the free stuff.
Like themes, each plugin can work a little differently depending on how it’s designed because there’s a ton different ones made by different people (the awesome and bummer thing about WordPress, remember?)
Fonts give your site additional character (pun totally intended). They can add class and set the tone for your site. Normally installing fonts on your site is complicated. You have to upload the font file, then specify in the CSS file (see above, again, you slacker) which font you want where. Fortunately, there’s an easier solution. Let’s talk about Google Fonts.
Using Google Fonts allows you to install a plugin and choose on of the hundreds of fonts available on Google’s servers. So instead of uploading a font yourself, you can just borrow your font straight from Google. It makes life a lot easier.
After searching for and installing the WP Google Fonts Plugin, activate it. This plugin adds a new menu item under settings, so go to Settings>Google Fonts. In there you can pick from Google’s massive library of fonts and specify where you want them. “Heading” (1-6) are main titles on your site, and “body” is your text paragraphs. Feel free to experiment with different fonts to see what fits your site best. Here are a few nice body and heading font pairings to get your started.
The font I picked was “Raleway Light.” Check it out:
No, it’s not a convention.
A favicon is the little tiny icon in the top of your browser that accompanies your website. By default, it’s going to be whatever your webhost’s favicon is. In Nate’s case, since we’re using Bluehost, it looks like this:
Let’s make a cooler custom one. Go here to design your own for free. Yes, you could grab a picture off the internet, but who knows about the copyright, plus it has to be 16 pixels by 16 pixels, and we want this to match the look of your site.
The great thing about this site is that it shows you the individual pixels zoomed in, so you can draw every pixel where you want it to be. I drew a simple “NL” since we’re going for the minimal theme, but you can make whatever you’d like with various colors.
When you’re done, click the “Download Favicon” button in the lower left hand corner. It will download “favicon.ico” and you should not rename it anything differently.
Now we’re going to dig deep into the files of your website, but don’t be scared, it’s not that bad. Go to your Bluehost (or other hosting) account, go to your C Panel, and click on “File Manager.” From there, select your domain under “document root for” and click Go.
Don’t get freaked out by all the files. Here’s all you need to do. See the favicon.ico file right in front of you? Select that, and then click the big red X “Delete.” Confirm your delete as well.
Now see the upload folder icon? Yep, click that, select your freshly made favicon.ico file, confirm and you’re done.
You’re going to ask yourself, “did it finish?” Like I did. Yes it did. You’ll see this at the bottom right:
Now refresh your site, you have a brand spanking new favicon!
How To Add The Background Photo
For Nate’s site we’re featuring one main photo in the background. The theme you chose may or may not have this. If you’re using the Helix theme like I am, follow these steps:
First go to Media>Add New, and upload the photo you want to be your background. Remember that you need a very high resolution picture for this particular theme. Now go to Media>Library, and click on your new photo, and then copy and paste the url on the right.
Now go to Appearance>Edit CSS (just read the paragraph you skipped, man) and paste in this code:
background: url(‘PASTE YOUR PHOTO URL HERE’) no-repeat center center fixed;
Also paste in your photo URL where it says, obviously.
Hit “Save Stylesheet” and refresh your site. Man your site looks good.
If you’re thinking to yourself, “Is he’s facing the other way now?” You’re not crazy, I ended up changing the picture.
And there you have it. A beautiful website that you built yourself. Now whenever anyone asks for demos or information about you, you can refer them to your site. As you continue to build up a library of songs and videos you’ve played on, you can add them to your site just like we did in the last post.
If you’d like to check out Nate’s final site, go to www.natelotz.com. Note that there have been a few minor changes made since this writing.
I hope you’ve enjoyed working through this Web Design For Musicians series. If you have followed these posts and built a site, let me know in the comments, I would love to check it out.
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