How to Build a Website with WordPress Tutorial

How to Build a Website with WordPress

Have you ever wanted to learn how to build a website with WordPress?

I’ve been doing it for over 5 years, and I’m glad I was an early adopter because I’ve witnessed first-hand how it has grown to power a huge portion of the internet.

How much you ask? Ponder this statistic:

Over 20% of the top 10 million websites on the entire web use WordPress.

If we are just looking at content management systems, WordPress is closer to 50% which dwarfs the runner-up (Drupal) at under 15%.

Bottom line, unless you are doing some type of uber-custom website, stick with WordPress and its massive community for the best long-term experience.

There is a learning curve to master it, but it’s really easy to get started. So let’s get to it.

(Watch the video version of this tutorial from the YouTube playlist below – it starts with installing WordPress):

Step #1 – Domain Registration

godaddy-banner

The first step to every website is registering the domain.

You can use any number of domain registrars, but I’ve been using GoDaddy for years and they have worked well for me.

From their homepage, you can type in your desired domain name and see if it is available.

My advice is go with .COM when possible. It’s what everyone automatically assumes the extension will be, so it’s the easiest to remember.

If you are stuck on a domain name but the .COM isn’t available, the next best option is .NET.

But it goes without saying that your domain name will never make or break you.

In the early days of Google, you could rank pretty easily for a keyword or phrase if it was an exact match to your domain name, but those days are long over.

Today, content and authority win out over these simple tricks, so pick something you like and go with it.

GoDaddy will try to upsell you everything when you register a domain, so I recommend avoiding almost every upsell.

The only one to consider is “Private Registration”. By default, your contact information (name and address) are publicly available in a database when you register any domain.

To avoid this, you need to add-on the Private Registration which is usually about $10-20 extra per year.

It might be a no-brainer add-on at that cost. But if your website is hyper-local and most people using it aren’t computer savvy, it’s really not necessary.

For web hosting, it’s best to use another company instead of GoDaddy.

Not only because their web hosting isn’t as easy to use, but mainly because it’s best practice to separate your domain and hosting.

If you get them together, some companies will lock your domain and make it a pain-in-the-ass if you attempt to switch web hosts down the road.

So don’t get yourself into that problem, instead separate your website domains and website hosting.

Step #2 – Website Hosting

HostGator Website Hosting Banner

Next up, you need to get a web hosting package. If you are just starting out and only want one website for now, shared hosting will do the trick.

If you want to start a web design business, the better option is reseller hosting. A reseller plan gives you a chunk of disk space and bandwidth, and allows you to create an unlimited amount of websites. You just choose how much space each websites needs, and you can always change this if it’s not enough once you add to the site.

My website host of choice for your first batch of websites is HostGator.

I went through 2-3 smaller website hosting companies (one that shut down without notice) and eventually settled on HostGator. It’s been smooth sailing for the last 7-8 years with them.

If your site ends up getting a high volume of traffic, you may need to upgrade to private hosting or switch to another provider, but that’s a discussion for a different day.

Once you create a HostGator account, you will be given a cPanel account login and URL. This is where you control everything with your web hosting.

The login URL is usually:

http://yourdomain.com/cpanel

Step #3 – Installing WordPress

WordPress Logo Banner

So now that we have the nuts and bolts settled, let’s dig into the real stuff – I want to talk about WordPress.

Right now, as you can see by the screenshot, when you setup your hosting account on your domain, you will have a blank page.

Blank Website

But by the end of this post, we’re going to have a beautiful website in place that looks like this…

Final WordPress website

Please hang with me as we do this step-by-step!

Login to your cPanel account. We want to find the “Software/Services” section and then click QuickInstall.

cPanel QuickInstall

From the QuickInstall page, look under the “Blog Software” category and click WordPress.

QuickInstall for WordPress

Check the “Enable Auto Upgrades” because it’s safest if you have the newest version of WordPress at all times. If there are any loopholes in the code which hackers can exploit, updates will help to protect against these types of attacks.

The web is a vast space, so making sure you take as many steps to lockdown your website is HIGHLY recommended.

But back to the tutorial – leave the “Application URL” blank to install on the root domain, or if you want to install WordPress in a subfolder, you can add the subfolder name here.

Enter your preferred e-mail address, the title of your website, a username and your first name. It’s not essential to fill out the last name field, so click “Install Now”.

This account information will be e-mailed to you, and you can always update it after you login.

One Click Install for WordPress

That is all there is to installing WordPress!

Step #4 – Logging into WordPress

Let’s login for the first time.

Go to the WordPress admin login page, which uses the URL structure below, and fill in your username and password:

http://yourdomain.com/wp-admin

WordPress Admin Login

Now, here’s a little tip, especially if you are managing websites for several people. If you use a password manager like LastPass, you can autosave the login credentials immediately after logging in, as shown in the screenshot below.

Next time you login, it will automatically fill so you don’t need to remember it – and so you can ALWAYS use strong and unique passwords for every account.

Please DO NOT use the same password across multiple accounts!

Save Password with LastPass

After you login to WordPress, you will arrive at the Dashboard. This is a general overview of the content and activity on your website.

WordPress Dashboard

For brevity, I am not going to discuss all the bells and whistles of WordPress (of which there are many).

Instead, I’m going to show you my exact process to setup a WordPress website from scratch. I think this is the best way to learn, by peeking into a real life example.

Step #5 – Delete Pre-Installed Plugins

The first thing that we want to do is deactivate then delete all the pre-installed plugins. Not everyone will recommend this, but I like starting off with a clean slate and only adding what I believe is necessary.

Delete Pre-Installed Plug-ins

I will say that there are two which can be very useful – Akismet and WP Super Cache. Akismet is a spam comment blocker and WP Super Cache helps to speed up your website.

But while building, I want to start from scratch.

Now that we have a bare bones WordPress installation, let’s take a look at the website with the pre-installed theme.

View Pre-Installed WP Theme

Pretty basic, right?

Step #6 – Disable Toolbar When Viewing Site

One feature that I don’t like is the black toolbar being displayed at the top of the page when logged-in to WordPress. Visitors don’t see it when they go to your website, and I don’t want to either when building it.

So in order to deactivate the toolbar, go back to the WordPress admin area and navigate to “Users > Your Profile”

From there, uncheck the box “Show Toolbar when viewing site” and save.

This is also where you can update your name, contact info and password.

Disable Toolbar when Viewing Website

Step #7 – Install New Theme

Next up, we want install a better looking (and free) WordPress theme.

If you don’t know about themes, they are templates that give your website a brand new design in minutes. To test a new design or layout, try installing a few WP themes and see which one you like.

Today, we are going to use CyberChimps Responsive Themeclick here to download.

I choose this for two main reasons – 1) it’s one of the most downloaded with over 1.5 million users and 2) it’s fully responsive (as the name suggests) which means it’ll look great on a computer, tablet or phone.

CyberChimps Responsive WP Theme Website

Once you download the ZIP file, navigate to “Appearance > Themes” and click the “Add New” button to upload.

Install New WordPress Theme

When the theme is installed successfully, make sure to click the Activate button so your website uses this theme.

Activate New WP Theme

With the new theme installed, let’s see how dramatically the theme changes the look and feel of your website.

View the New Theme Layout and Design

Needless to say, this free theme provides a much better look for your personal or business website. This includes a custom homepage layout and a call-to-action button.

And as I mentioned before, this theme is fully responsive.  So take a look at how it will appear in an iPhone or mobile sized browser window.

See Responsive Width for Web Design

Cool stuff, right?

Step #8 – Edit Permalinks

The next setting that we want to change are the permalinks.

The permalink is simply the URL structure that is used for new pages and blog posts on WordPress.

To do this, navigate to “Settings > Permalinks”

By default, this is set to include the year, month and day within the URL, but I don’t like this method. Instead, I choose the option “Post name” which provides a more clean and simple URL. Make sure to save the settings.

WordPress Permalinks

Step #9 – Add First Page(s)

With that taken care of, we can go ahead and add our first page!

Navigate to “Pages > Add New” to create the page. In my case, I’m adding a standard “About” page.

Add New About Page

As you will see, editing content within WordPress is a lot like editing a Microsoft Word or Apple Pages document – with a couple tweaks here and there.

The first thing you want to do is add your page title. From this page title, a permalink is generated. If you want to manually edit this permalink, you can simply do so and select the OK button as displayed in the screenshot below.

Edit the Permalink

In lieu of writing out my About page, I simply copy/paste filler text known as “Lorem Ipsum”. Click this link to generate text for your website.

After you have some wording to work with, this is the time to play around with the content editing features.

Some of them include: bold, italics, strikethrough, lists, quotes, alignment, headings, etc. Again, very much like a word processing program.

In the screenshot below, I’m adding a heading to a line of text.

Use Content Editor Text Styles

To include a link, simply select the text you want to hyperlink and click on the chain-link button. From there you can specify the URL and whether it should open in a new window, which is a good practice for external links.

Insert link into post or page

One more important note about the editor – you will see there are two tabs entitled “Visual” and “Text”.

If you choose the Text tab, you will be viewing and editing the HTML code directly. This is a great place to begin to understand HTML and how it is generated based on the styles you select within the Visual tab.

However, we aren’t going to mess around with anything in there just yet.

Text editor for WordPress and HTML

Step #10 – Add First Image

What page would be complete without at least one picture? It’s been proven by numerous case studies that adding a great looking photo will boost the engagement of your pages.

To do this, click the “Add Media” button to upload your photo.

Upload an image using add media button

From the “Insert Media” pop-up, you can either upload your image or select an image that has already been added to your Media Library.

On the right, you will see the “Attachment Details”. I personally like to fill in the “Alt Text” field with something that describes the picture, because that is what will help your website get found by image search.

The Title, Caption and Description will be left as is right now.

Next up, there are “Attachment Display Settings” where you control the Alignment, Image Link and the Image Size.

WordPress will automatically generate a Medium and Thumbnail sized image, so it’s up to you if you want to use those or the original full-sized image.

When you finish filling out the details, click “Insert into Page” button.

I’m going with a full-sized image, center alignment and no link.

Update the image settings

And we will Preview the page to see how it looks…

Preview the website with updates

Step #11 – Publish the Page to Live Website

Everything looks good to me, so I’m going to Publish the page which will make it go live on your website.

Publish the about page

Step #12 – Delete the Sample Page

Now that we’ve created our first page, you will want to delete the “Sample Page” that WordPress automatically includes when it is first installed.

You can either do this by clicking on the checkbox and applying the action, or the easy way by hovering over the page within the “Pages > All Pages” section, and clicking the Trash button.

Don’t worry if you do this by accident, you will have the opportunity to either restore the page or delete permanently once trashed.

Delete the sample page

I went ahead and created a bare bones “Contact” page, too. This doesn’t include a form, only a few lines of text and my e-mail address, but the process is the same as creating the “About” page.

Step #13 – WordPress Customize Theme Settings

Once you take care of all the pages you need to get your website up and running, we can then begin to customize the theme.

Navigate to the “Appearance > Customize”.

WordPress customize options

This is a customize screen that is built into WordPress, and it allows you to change a handful of text and styles on your website.

They include: Site Title & Tagline, Background Color, Header Image, and Background Image

You can also add/edit widgets here, but I like to do that from another area of WordPress… we’ll get into that a bit later.

Same goes for the “Static Front Page” setting – this is actually overwritten by the CyberChimps Responsive theme, so you can ignore it right now.

Changing the background color

Step #14 – CyberChimps Responsive Theme Options

In addition to this WordPress customize panel, most themes have their own options.

This is part of what makes WordPress so powerful, and yet confusing to some people. Every independent theme developer or designer can pick different settings that they allow you to edit.

Because of this, if you go from theme-to-theme instead of sticking with one, you’ll have to relearn a new options/settings page every time you build a website.

That is why I recommend learning with a nice free theme like CyberChimps Responsive, then once you get the hang of WordPress, upgrade to a premium theme. Make sure you choose a theme company that has been around for a couple years, and learn their theme(s) inside-and-out.

Some of the most powerful WordPress themes are actually layout generators which give you a higher degree of freedom to create sophisticated websites without much coding (if any).

But before I digress too much, let’s get back to CyberChimps Responsive.

Navigate to “Appearance > Theme Options”

Theme options for CyberChimps Responsive

Go through this page and take a look at all the things you can customize.

You’ll notice this is where you update your homepage content, so that’s what I want to do. As I mentioned previously about the theme overriding the “Static Front Page” option, you can see this is controlled by the checkbox under the “Home Page” section.

Once you are completed, make sure you save the options.

Edit the homepage content

And now that we have our homepage content in place, let’s take a peek at the website… starting to come together!

View the homepage

Step #15 – Change Button Color with HTML/CSS “Hack”

The one thing that I notice now is the button doesn’t stand out anymore because it’s the same color as the background.

I want to change this, but here’s where things get interesting.

In the “Theme Options” area, you can edit the button text and link, but it doesn’t provide an easy way to change the color.

This is where we need some reverse-engineering skills, and for that, I want to use the Google Chrome Inspector, which is built into the browser.

All you need to do is right-click the button and choose “Inspect Element”

Google chrome browser inspector

You can see that in the screenshot above, I’m hovering over the HTML code for the button, which highlights the button on the left side of the screen.

That’s how I know it’s the HTML that I need.

You’ll notice that there is a div element with a class “call-to-action” which is our desired code… so all we do is right-click and copy.

With the code copied, we need to go back to “Appearance > Theme Options” and expand the “Home Page” section.

Because we are dealing with HTML code, we need to select the Text tab instead of the Visual tab.

Paste in the code under the homepage text, where the button appears on the website.

Here’s a little secret to this theme – they have CSS classes built-in for many colors. You can see that in the code we copied/pasted, there is a class named blue.

<div class="call-to-action">
<a class="blue button" href="http://yourdomain.com/">Get Started Today!</a>
</div>

In order to change the color, we only need to change one word – and I’m going with red.

<div class="call-to-action">
<a class="red button" href="http://yourdomain.com/">Get Started Today!</a>
</div>

Once you swap out blue for red, make sure to save your theme options.

HTML and CSS button hack

If you are perceptive (or you refresh the page), you’ll see that we have 2 buttons now!

To remove the original button, we simply need to expand the “Theme Elements” section under the “Theme Options” page, and check the box, “Disable Call to Action Button”.

Now if you go back to the homepage and refresh, we are left with our new red button only.

So there is your first taste of an HTML/CSS customization and “hack”!

Add new button with HTML

Step #16 – Update Home Widgets

Next on the to-do list, update those “Home Widgets”.

To make them stand out, I’m going to add an icon, a heading and a small blurb for each.

Because we are dealing with a widget and not a page, we want to upload the images separately in one shot.

To do this, navigate to “Media > Library” and click the “Add New” button.

Upload images to media library

I simply uploaded all 3 images at the same time. And we just need the image URL to add to the home widgets.

So highlight and copy the URL for one of the images within the “Attachment Details” pop-up.

You should take note that the upload URL structure looks as follows:

http://yourwebsite.com/wp-content/uploads/year/month/filename.jpg

Copy the image URL

All you need to edit within the URL from image to image is the filename – the rest of the URL can stay the same.

With the URL copied, navigate to “Appearance > Widgets”

On this page, you’ll see the three areas we want to edit on the right – “Home Widget 1”, “Home Widget 2”, and “Home Widget 3”.

Expand “Home Widget 1” and drag over the Text widget from the left as shown in the screenshot below.

Drag and drop text widget

We are going to leave the Title blank, and go right to the content area.

Here’s another quick HTML lesson.

I like to write empty HTML tags and then fill in the information. So first we want to add the image, so the empty HTML for an image is as follows:

<img src="" alt="" />

The SRC is the actual image link, so paste in the image URL that we copied from the last step in between the quotation marks.

The aforementioned ALT attribute is required for images and it’s simply descriptive text for the image in the event it doesn’t load properly. It also helps with SEO.

Next I want to add a heading with the following empty HTML code:

<h3></h3>

And lastly I want to add my blurb which doesn’t require any HTML code.

Click save and our first widget is complete.

Text widget editor

To finish the last two Home Widgets, all we need to do is repeat the process of dragging the Text widget.

Then copy/paste everything from the content area from one widget to another, and replace the wording and image filename.

I hope that I’m proving to you HTML isn’t rocket science, and you don’t need much of it to get started with WordPress!

Visit the homepage for updates

Step #17 – Custom CSS Styles

To clean things up, I want to center and style the Home Widgets.

Here is your brief CSS lesson:

First, navigate to “Appearance > Theme Options” and expand the “CSS Styles” section. This is where you want to add any and all CSS customizations.

Our first course of action is defining a CSS comment, which is formatted as follows:

/* This is a comment */

As you can see, a comment is placed between an opening slash and asterisk, and it is closed by the ending asterisk and slash. In between, you can type anything you want.

Why am I explaining comments before actual CSS styles?

Because commenting allows you to organize your code and explain in plain English (or your preferred language) what is going on. That way if you don’t touch it for weeks or months, you don’t have to remember or uncover what is going on… you can get the gist by reading the comments.

The way that I like to organize my CSS is by adding a comment heading for these website sections: Header, Footer, Navigation, General Styles, and Individual Pages

Custom CSS styles

Now that you have a visual of how I organize the code, let me explain further what is happening with this CSS, and how it is affecting the website look.

/* Header */
.site-name { font-size: 2.5em; }
.site-description { font-size: 1.1em; color: #FFFFFF; }

Here, I’m making the font-size larger and changing the color of the website description from gray to white (Hex Code #FFFFFF) for better contrast against the blue background.

The dot character that starts each line of CSS code means that the following text is defined as a class within HTML. I simply found these two classes by using the Google Chrome Inspector as shown above in this tutorial.

To refresh your memory, all you need to do is right-click on the text you want to edit within the webpage, and click “Inspect Element”. This will show you the HTML code and any associated classes which can be used to target that element within your custom CSS.

/* Navigation */
.menu a { text-transform: uppercase; }

For the navigation bar, I wanted to make the text uppercase to break up the lowercase throughout the page. Nothing fancy here.

/* Home */
.home .textwidget { text-align: center; }
.home .textwidget img { margin: 0 auto; display: block; width: 100px; }

This code is specific to the homepage. It targets the “Home Widgets” by using the textwidget class to center align text.

Then I target images within the “Home Widgets” (i.e. the icons) to center them using a different method, and make them a bit smaller in size.

Not that bad, is it?

Click save, and let’s have a look at what we just accomplished with CSS.

View after CSS styles applied

Step #18 – Add New Font

The last step that we’re going to look at in this tutorial is adding a custom font.

My favorite method to add a font to your website is by using Google Fonts.

Go to their page to browse the 650+ font options that they offer. Once you pick one that you like, click the “Quick Use” button, which is the middle icon on the bottom right of each available font.

Add new font with Google fonts

All we need to do is select the thickness that you want to include and scroll down to the “Add this code to your website” section.

Click the “@import” tab and copy the line of code that appears.

Import font with CSS

Then go back to “Appearance > Theme Options” and paste into the top of the CSS Styles section. You can also add a CSS comment noting that this is where fonts are declared if you like.

Then to use the font, add the following line of code just below:

body { font-family: "Your Google Font", Arial, Helvetica, sans-serif; }

Yet again, this was copied and pasted using the Google Chrome Inspector, and I added one small bit of code to declare my Google font.

I specifically target the body HTML element, because this will apply the font style to every part of the website.

CSS fonts are loaded in a cascading fashion, meaning if the first font declared (i.e. “Your Google Font”) isn’t available on the computer viewing the website, it will try the next one (Arial). If that isn’t available it will continue until it picks a generic font that is available on all systems.

Don’t worry, 98% of the time, your 1st choice will be displayed.

To recap, below is the final code that appears in “Appearance > Theme Options > CSS Styles”:

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Lato:400,900);

/*General Styles */
body { font-family: Lato, Arial, Helvetica, sans-serif; }

/* Header */
.site-name { font-size: 2.5em; }
.site-description { font-size: 1.1em; color: #FFFFFF; }

/* Navigation */
.menu a { text-transform: uppercase; }

/* Home */
.home .textwidget { text-align: center; }
.home .textwidget img { margin: 0 auto; display: block; width: 100px; }

Whew, so there we have it.

It’s not going to win any awards. But if you made it this far, you should have learned how to build a website with WordPress, congratulations!

You even got a taste of using HTML/CSS. Next up is plugins, but we will save that for another day.

Did you like this tutorial? Have any problems along the way?

Leave a comment below…