Lesson 3 (Website Building Class)

lesson 3 introduction



Welcome to lesson three, which is long overdue. This lesson is going to be a little different from the previous two. We will be working with a full, self hosted version of WordPress from now on. Because of the limitations with WordPress.com’s hosting, this is (in my opinion) the best way to do these now. This lesson will be tackling some features that are either not in the WordPress.com version, or are limited in that version.

This will mainly cover new features you have available to you, and theme options. Previously you’ve been limited to your theme choices, but not anymore. You’ll be able to see the potential of some themes that are a lot more customizable. You’ll also be able to see a few different plugins and what they can add to your site.

lesson 3 web hosting



Now, because we’re going to be using the WordPress self hosted version, you’ll need a web host. There are a ton of options in this, some are a lot better than others. Let’s talk about hosting options really quick so you can better understand this.

Web hosts are companies that provide space on their servers that house your website. When creating websites, both for yourself and for clients, you’ll encounter three different types of hosting for the most part.

  • Shared
  • Virtual Dedicated (or Virtual Private Server)
  • Dedicated


Shared hosting is usually the cheapest type of hosting there is. In a nutshell, this is multiple websites being hosted on the same server. All the different sites share the servers resources such as memory or CPU power.

Virtual Dedicated hosting is somewhat like shared hosting. There are still multiple sites that are hosted on the same server. The difference is that with this type, the server resources for your site are (commonly) allocated. Instead of sharing your server resources and not having a specific amount, this type usually has set resources for each site (or domain) that it hosts.

Dedicated hosting is usually the most expensive of the three, and for good reason. This is your own server, you don’t share it with anyone else.

For more detailed information on all of this, you should check out Wikipedia’s Web hosting page.

There are also different types and forms of shared hosting. This differs from company to company. Some companies have different levels of shared hosting, such as economy and business class. The differences between the levels depend on the hosting company you’re using, and you’ll have to look at them to see. Also, in regards to WordPress, there are companies that offer hosting optimized for WordPress. These are usually servers configured specifically to host a WordPress site, and don’t host anything besides these. There are different opinions out there on the actual benefits to this type of hosting. Personally, I like them for my WordPress sites and can see the difference. Exoffenders is hosted on this type of hosting.

So for now, shared hosting is what is most commonly going to be what you are using. The hosting company you choose is up to you. Exoffenders is hosted by Godaddy’s managed WordPress hosting and we haven’t had any issues with it. It’s also great for those just started out with WordPress because they take care of the installation for you.

If you can’t afford your own hosting platform, that’s ok! There are a lot of different free hosting options out there as well. If this is the route you would like to go for now, click here to read how. I wrote a short tutorial on how to do it using one of the free hosting services I’ve used in the past. This lesson won’t really cover the free hosting platform, but it shouldn’t make that big of a difference aside from the domain name.

lesson 3 setting up site



Getting set up for this is pretty easy. You’ll need a web host and a domain name. A domain name is your website address, such as Exoffenders.net. The price on this differs between companies, but you can usually register your domain for around $10 per year. After that, you’ll have to get your hosting set up. This usually is pretty quick and easy, and is usually self explanatory. This process, once again, is different for each company, but there is usually documentation that will walk you through it. If you’re still stuck, contacting their customer support will probably get you up and running.

After that is taken care of, it’s time to start working on our new self-hosted WordPress site.

lesson 3 new features



I’ll be using a fresh install of the WordPress optimized hosting for this, so my dashboard may look a tiny bit different from yours. There are some differences you may notice between your old WordPress.com hosted dashboard and the new one. I have underlined these in the picture to the right.

wordpress changes

Updates is a new section you will need to be familiar with. New versions of themes, plugins, even WordPress itself are released every so often. Sometimes the update may fix some bugs, add new functions, or fix some compatibility issues. Usually these updates have a document, sometimes called a changelog, that lists what is different from the previous version. You’ll want to keep your site and everything the site uses updated to their most current versions.

Jetpack is something that you have already used some features on, they just were under different section. If you ever used the site stats on the free hosted version, that’s a part of Jetpack. There are a lot of different functions that Jetpack offers, and are all explained by clicking the learn more icon for each one. It’s a very useful set of features.

Plugins are, in my opinion, the biggest difference between the two versions. These add additional features and functionality to your WordPress site. Want your site to have a forum where visitors can discuss things? There are plugins for that. How about a way to show your most recent Tweets on Twitter, or your posts from Facebook? There are plugins for that as well. There are plugins for more things than you would ever need. The next lesson is going to be almost entirely on plugins.

lesson 3 import export



Before we start having fun with things our new features, let’s get everything from the old WordPress site onto the new one. This is an incredibly easy process and shouldn’t take long at all. First, on your old WordPress site’s dashboard, go to Tools and choose Export. You should see two options; Export and Guided Transfer. Use the Export option, and on the next page choose the All content option. Also, if you wanted to just export specific posts or pages, you could do that by selecting those options. After this, just click the Download Export File button. An XML file should download to your computer.

Now hop over to your new WordPress site, go to Tools and choose Import. Select the last option that says WordPress, which will open a window for the WordPress Importer Plugin. Click the bottom install button, and then select activate & run when the next page loads. You’ll choose the file to import, which is the XML file. Then just upload file and import, WordPress takes care of the rest. That’s all there is to it.

lesson 3 theme customization



Let’s start working with a more customizable theme. There are loads of different options to choose from. There are free themes which we will be using, and premium themes. Premium themes are themes that you have to pay the creator to use. There are some really nice premium themes out there, and you may find one that works better for you than a free theme. For this, we’ll be working with a free theme named Graphene. Graphene might have a little bit of a learning curve compared to what you used before, but it’s a lot more powerful.

generic graphene

Choosing a theme is pretty much the same as before, just go to Appearance and then Themes. Type “graphene” in the search bar, and the theme should show up. When you put your mouse cursor over it, you should see some buttons pop up. Click the install button, which will automatically download and install this theme to WordPress. Then just click activate and the new theme is being used. Once activated, your appearance section should have two new options; Graphene Options and Graphene FAQs. The FAQs isn’t really that important aside from the link to the support forums. The support forums have a lot of additional information on this theme, and themes besides Graphene sometimes have forums like this as well. It’s a good place to go if something isn’t working and you can’t figure out why.

Options is where you can totally customize the look and layout of your new site. There are a lot of different options to change and mess around with. Each set of features has a blue question mark next to it, which should take you to that functions wiki page where you can learn more about it. It would take far too long to go into detail for each feature, so you’ll have to mess around with them to learn about each one. I’m going to change the layout and look of the site I’m using as an example, and explain what I’m doing. This will cover some of the options and functions that you can use.

To start off, I really don’t like the top black bar, so I’m going to turn that off. I just click Top Bar Options in the General tab and select “Hide the top bar.” Once I save this, the top bar is gone. I also really don’t want to have a slider on this page, so I’m going to turn that off too in the Slider Options.

new graphene look

Next I’ll go into the Display tab and change a few things too. One thing that I always do is disable featured image replacing the header image. This is in the header display options. If this isn’t disabled, your header image will change to the featured image of the current page if it has one. I personally think it’s annoying, but there could be some uses for it. The column options is where you choose the layout of your site. There are a few different choices, and it comes down to personal preference. I’m going to use a sidebar on each side. Column width options is where you can change how large or small the columns are as well.

Last, I’m going to go to the Colors tab to change everything from the default blue. Graphene comes with some presets for colors, you can choose these in the dropdown menu above the top bar option. I like to choose my own colors though, and it’s pretty easy. So to do this, I’ll use the primary menu as an example. Each option in this section has a # symbol followed by a 6 character alphanumeric code. This is a hexadecimal color code, or hex code, and aren’t something you need to memorize. If you click in one of these boxes, a color wheel will appear where you can select the color you want. You can experiment with each option to get the look that you want. Also, you can use sites like Colorhexa.com or Color-Hex.com to see variations of a color. These sites can be pretty useful.

For now, I’m not going to do anything in the Advanced tab, and will cover things like that in a future lesson. After changing settings to my liking, I’ve gone from the stock look to my new look seen on the right. This doesn’t take much time to do at all once you’re familiar with it. I will accompany a video tutorial on customization in this theme within the next few days. If you would like to be notified when I post this, post a comment below or subscribe to the Youtube channel.

lesson 3 next lesson



So that’s going to wrap it up for lesson three. This lesson is setting up the foundation for lesson four, which is going to work with plugins, widgets, and some other things. It should be a lot of fun, and is where you can really see how powerful WordPress is.

This lesson may have seemed a little all over the place, and it kind of was. Some of the things that were mentioned weren’t entirely explained. This was done to keep the lesson from being extremely long. Don’t worry though, they will be explained in more detail in the next lesson or two when we start working with them.



Leave a Reply

Your email address will not be published. Required fields are marked *