Last week you bought a domain name and hosting plan, linked them together and uploaded a simple website through File Manager on CPanel.  Today we’ll be getting a lot more familiar with CPanel and File Manager. By the end of this lesson you’ll have your own WordPress website.

Lesson Outcomes:

  • Understand how your domain, web hosting, CPanel, and File Manager work together
  • Learn about WordPress
  • Manually install WordPress

Lesson Preparation

We will be installing WordPress, a free and open source content management system, on our web server. For this lesson, you will need:

– Your login credentials to CPanel

Review

Before we move on to installing WordPress, we need to make sure we understand the tools and services we set up last lesson. This will only serve as a refresher, so if you need more help, refer back to the Domains and Web Hosting lesson.

Understanding the difference between your domain name, web hosting, CPanel, and File Manager.

Domain Name and Web Server

We are going to be working a lot with CPanel and File Manager for the remainder of this lab. We need to make sure we understand the basics and differences of these tools before we move forward.

In the Domains and Web Hosting lesson, we purchased two items: A domain name and web hosting.

Domain names (the web address you purchased) are unique web addresses that tell your browser where to find your website (which is on your web server).With only a domain name, you won’t be able to put your website online. You need a space (in this case, a web server) to host your website files at.

Web hosting (your web server ) is the space where you host/store your website files to get them online. Think of it as a special external hard drive that is connected to the internet.

We then connected these two services by updating our nameservers for our domain name. After this, your domain name is able to locate and direct people to your web server, where your website files are stored.

Here is another way to think about this:

Last week, you bought the web address you can find your domain at. So you have the address, yourdomain.me, but that’s it. When you initially navigate to that web address, nada. But once you got your hosting plan with your web host, it’s like you purchased a plot of land in the WorldWideWeb. When you updated the nameserver, it was like giving directions to whoever enters your address, to go to that plot of land. With that space and an address to it, you’ve got all the freedom to upload a cool lil website anyone with Internet access can see.

Now, let’s move onto CPanel and File Manager.

CPanel and File Manager

CPanel is a web-based control panel that lets us manage our web server. CPanel is different from your account panel for Lithium Hosting (that houses password recovery and billing, etc.). CPanel is a service that your web host provides you so that we can manage your web server.

CPanel includes many tools for us to manage our web servers, such as email addresses, databases, and a file manager.

Another way to think about CPanel is:

CPanel is a web-based control panel that helps you manage your website and hosting plan. Think of it as the system manager of all the properties that make your site function. With CPanel, you can navigate through all your files, create databases, new sub-domains and much more. It gives you complete control over administrative tools designed to make the process of hosting a website a lot easier.

Remember: CPanel is a service that your web host provides you. It is a feature included in the purchase you made for a web server. 

You can reach CPanel on your web server by visiting: yourdomainname/cpanel.

File Manager is one of the tools that CPanel provides us. In the Domains and Web Hosting lesson, this is the tool we used to upload our HTML and CSS files. File Manager lets us manage the files on our web server. It gives us access to the “virtual” harddrive on our server.

With all of this, we are ready to move onto building websites using WordPress.

WordPress

What is it?

WordPress is a free, open source website application. It originated as a blogging platform and has turned into a powerful website management system. WordPress is what we call a Content Management System (manages your content). We will see this in action in later lessons as we begin to work in WordPress.

One way to begin thinking about WordPress is:

Just how you download apps onto your phone, you can download apps for your website onto your CPanel; and WordPress is one of them.

This is not entirely true as we don’t download apps onto CPanel, but it is a way to begin thinking about how WordPress works.

I could explain many of the reasons on why the EverettProgram chose to teach WordPress or the advantages to building a website with WordPress, but where you are at now, they will not fully make sense. You will begin to figure out and see for yourself these advantages in upcoming lessons and I will point out some of them along the way.

Sneak peak into some cool attributes of WordPress:

With WordPress, you can tailor your site to your liking. It has a lot of design freedom and simplifies the processes of design, but that’s why we focused on having a good basis of how a website is built through our understandings of HTML and CSS. Essentially, all the snazzy stuff we’re about to do with WordPress in the upcoming weeks are code that we’ve written before – just fancier.

How

WordPress works off of PHP and MySQL. PHP is a popular programming language and MySQL is a database language. WordPress stores all of your website’s content in a MySQL database linked to it. You can think of a database as an Excel spreadsheet, with rows and columns. When a user visits a page on your website, WordPress uses PHP to retrieve the content for that specific webpage from the MySQL database and serves up a finished webpage to the users browser.

Do not worry about memorizing this process, it is just to introduce you to how WordPress works and how it is managing your website’s content.

My main point is that we need the WordPress files and a database to be able run WordPress on our web server.

Manually Installing WordPress – Step by Step

We are going to be installing WordPress on our web servers multiple times throughout the remaining lessons. Wait, we can install the same application multiple times? Yes we can, and you will see why shortly.

WordPress is not the same as applications we install on our computers or phones. We do not run one file/executable to install WordPress. WordPress is a collection of folders and files (PHP and others) that we upload onto our web server’s virtual harddrive.

There are three main parts to installing WordPress onto our web servers:

– Upload the WordPress files onto our web server

– Create a database for WordPress to store our content

– Run the installation script

We will be using the 5-minute WordPress install method. Let’s get started. Make sure to look through each toggle.

Upload WordPress files to your web server via File Manager

We need to download the WordPress files before we can upload them. We download them from the official WordPress website. If you search for WordPress in your web browser, make sure to visit the .org website. Do not go to the wordpress.com website, wordpress.com serves a different purpose.

-Click the Download WordPress button.

install_wp_1

-Click the Download WordPress 4.1 button (at the time of writing, the version was 4.1).

install_wp_2

-Make sure you download the .zip folder, the .tar.gz folder will not work in this process.

Now that we have the WordPress files, we need to upload them to our web server via File Manager.

-Login to CPanel, visit yourdomainname/cpanel

-Navigate to File Manager.

install_wp_3

– Select the Home Directory option and hit Go.

install_wp_4

– Once in File Manager, navigate inside of the public_html folder

install_wp_5

– Upload the the WordPress .zip folder using the Upload tool at the top. After, the WordPress .zip folder should appear (like the one next to the green arrow).

install_wp_6

– Once the WordPress .zip folder is uploaded, we need to extract the WordPress files. Click the folder to highlight it and click the Extract tool at the top.

install_wp_7

– In the popup, make sure to extract the files inside of public html (not inside another folder). The top file path should be public_html/wordpress-4.1.zip (or whatever version is the latest). It should not be publichtml/somefolder/wordpress-4.1.zip or something else. Once you verify it is correct, hit the Extract File(s) button.

install_wp_8

– It should have shown a new popup window listing a bunch of files, hit “Close”.

– If you did this correctly, you should see a folder called wordpress inside of your public_html folder.

install_wp_9

What you just did was upload the WordPress files inside a subdirectory on your web server. A subdirectory is a folder inside a folder. In this case, the public_html folder is the parent folder and the wordpress folder inside of it is the sub folder.

  • If you navigate inside of the wordpress folder, you will see a bunch of folders and files. Nice job!install_wp_10
  • If you go back to the public_html folder, you can rename your wordpress folder to whatever you would like. Just double click the name of the wordpress folder, type in the new name, and hit enter (on your keyboard). Rename the folder now before you move on to creating a MySQL database! Otherwise it will mess up the installation
    install_wp_11

Nice work! You just uploaded the WordPress files onto your web server. You can now move to the second step.

Create a MySQL database

WordPress stores all of your website’s content in a database, specifically a MySQL database. We need to create a database on our web server for WordPress to use.

Note: Creating a database is not the same as linking/giving WordPress access to the database. We will do that in the next step.

Let’s get started.

-Go to CPanel

-Navigate to the tool MySQL Database Wizard.

make_db_1

– To begin creating a database we first need to give it a name. You can name it whatever you would like, but there is a limit to how many characters you can use. Make sure to save this name (the whole name) somewhere for future use. My database name would be esayrvow_lesson5. After, hit “Next Step”.

make_db_2
– Next we need to create the database user. Give it a username (I chose the same name as the database, you can use something different). Fill in the password. Make sure to save this information for future use. Here my database username was esayrvow_lesson5 and the password is whatever I input there. After this, hit “Create User”.

make_db_3

– We need to give this database user privileges. For WordPress to be able to do what it needs to do, we need to give the user all privileges. Select the All Privileges checkbox (it will select all of them). After hit “Next Step”.

make_db_4

You should see that the user has been successfully created. You can go back to the main CPanel home page.

Make sure you have the database information, we will be using it in the next step. Make sure to have the database name, database username, and password.

We are done with CPanel now. You can logout of CPanel and move on to the next step.

Installation Script

We are at the final step. So far we have uploaded the WordPress files to our web server and created a database for WordPress to use. In this step we need to run the WordPress install script, where we will give WordPress access (the credentials) to use the database we created for it. After, you will give your WordPress website a title, create login credentials so that you can login to the WordPress administrative backend, and run the install script. Let’s get started.

If you need to rename the folder you are installing WordPress in, make sure to do it before this step!

To run the install script, we just need to visit the subdirectory on your web server that holds your WordPress files. In the previous step, I named my WordPress folder webdesignlab.

  • To access the subdirectory, in your web browser, visit yourdomainname/subdirectoryname. Just going to yourdomainname would only access public_html. I would visit: brendinnye.me/webdesignlabinstall_script_1
  • Choose your language of choice and hit “Continue”.install_script_2
  • Next, you should see the WordPress’s reminder screen. At this point, make sure you have the database name, database username, and password BEFORE you continue. When you are ready, hit “Let’s go”.install_script_3
  • Input the database name, database username, and password. Leave Database Host and Table Prefix as is. Hit “Submit”.install_script_4
  • If you got an error, recheck your database name, username, and password. Also, make sure you have created a database.
  • If you did this correctly, you should a screen that looks like this. Hit “Run the install”.install_script_5
  • Almost done. Give your website a title (it can be changed later). Next, create a username (whatever you would like), a password, provide an email, and select or deselect the privacy checkbox. My recommendation is to deselect it, keep it if you plan to use this WordPress website beyond this class. You can always install a new instance of WordPress on your web server to start fresh. Make sure to save the username and password you provided. This will be your login credentials to be able to login to the backend of your WordPress website..
  • Once you are ready, hit “Install WordPress”
    install_script_6install_script_7
  • If it all went smoothly, you should see a success screen. You have now successfully installed WordPress.
    install_script_8

WordPress is installed now. To see your WordPress website, just visit the web address of your WordPress website. For example, if you install WordPress inside of the public_html folder, you would just visit yourdomain. If you installed it within a subdirectory in public html, you would visit yourdomain/subdirectoryname. If you want to login to the backend of WordPress, visit the web address of your WordPress website/wp-admin (yourdomain/wp-admin). If you installed WordPress inside of a subdirectory, you would visit yourdomain/subdirectory/wp-admin.

Homework Assignment

Part 1

Install WordPress into a subdirectory named lesson5.

Part 2

Practice makes perfect. Install WordPress again into a subdirectory named repetition.

Part 3

After Part 1 and Part 2, you should have two independent installations of WordPress (called instances) on your web server.

Let’s get some practice logging into the WordPress backend.

Create a new post on your new WordPress website, yourdomain/lesson5.

Title the post: My First WP Post.

In the body text, use: Hi Brendin.

Use online resources (Google, WordPress Codex, YouTube tutorials, etc.), to figure out how to do this. Don’t worry, it is not too difficult. I’ve listed some resources you can use at the start of the lesson if you have trouble finding some tutorials.

Submission

Email wordpress@labs.everettprogram.org the following:

  • Email subject line in the following format: HW#5 Firstname Lastname.
  • Both of the web addresses for your new WordPress instances (Part 1 and Part 2) in the body of the email. For example, I would put brendinnye.me/lesson5 and brendinnye.me/repetition.