Create a New WordPress Website with Softaculous (cPanel)

This slideshow provides step-by-step instructions for creating a new WordPress website. We will be creating a website called, “Gaming with Grandma“, a blogging website that has articles about video games young people can play with the seniors in their life. The material is provided so that you can focus on learning WordPress. All of the website will be provided for you, including the website images and articles. 

First we’ll use Softaculous, a cPanel product, to create the WordPress website. Then, we will add a theme and plugins to the new website. Last but not least we will add the five blog posts for the website. 

At the end of this exercise you will have a WordPress blogging website in future lessons we will learn how to design the website and add a contact form.

This lesson assumes that you have already worked through Lesson 4: How to Add Content with the Block Editor.

Note: If you don’t have access to cPanel and Softaculous, then you can set up a new website with Local by Flywheel. Some of the screenshots are specific to a Softaculous installation of WordPress, but most other details are the same.

About “Gaming with Grandma”

For the past several of lessons, you have logged into an existing WordPress website. If you were in one of my courses, the website you worked in was webdevportfolios.com. 

This week you will create your own WordPress website. The website is a blog called, “Gaming with Grandma“. The blog posts are about how to enjoy gaming with the seniors in your life. 

In this website your goal is to set up a blogging platform for an author who writes posts about how to play video games with a senior adult. The author has already written five posts, and your goal is to create a website with those posts.

The content is provided: Gaming with Grandma Content

The content was written by me, and you have my permission to use the content on your own learning website. The photos are either from Pixabay.com, a source for royalty-free photos, or my screenshots, which you have my permission to use and publish.

We will work on this website for three lessons. In the next lesson (Lesson 9) we will learn how to use Customize to design the website. In Lesson 10 we will learn how to design the home page and create a Contact page.

Here is the logo for the website.

Installing WordPress with Softaculous (on cPanel)

cPanel is a popular tool that comes with many hosting plans. It comes with several features that are helpful to website hosting. One of those features is the ability to spin up a WordPress website with a few clicks.

To run a WordPress website you need not only a host of website files, but also a MySql database. So without Cpanel, you would need to create the MySql database and then link it to the website files. It isn’t terribly difficult, but Softaculous makes it much easier. 

Step 1. Log in to your cPanel, eg. mywebsite.com/cpanel. Your cPanel uses the same login that you use to FTP. 

Step 2. Scroll down to Software, and look for the WordPress Manager by Softaculous.

Step 3. Click “Install Now”. 

Choose Directory/Folder

DO NOT install WordPress to the root. Be sure to install it to a directory/folder. Since this is just a practice website, you don’t want it to be at the root of your website domain. Since  you are creating a WordPress website for the Gaming with Grandma blog, install the website into a folder name that matches the project. 

The usual rules apply in creating a folder name: lowercase, no spaces, and a dash between words.

Add the word “gaming” into the field.

Choose a strong password, and be sure to use YOUR email address so that if you lose the password you can use the password reset. This is not a drill. We are working on a live website. 

I have had students lose all of their work because they used a weak password. 

You can skip the other options and go ahead and install your WordPress website. Scroll to the bottom of the page and click “Install”.

When you click install, Softaculous creates a database and files for your WordPress website and links them together.  

Use phpMyAdmin to View the Database Tables 

Since you have cPanel, you can use the PHPmyAdmin to view and and even edit the table rows. 

phpMyAdmin is a tool that makes it easier to view and work on databases tables.  

Navigate to phpMyAdmin in your cpanel to see your WordPress tables. 

As you can see, there are a lot of tables!

Navigate to your File Manager in cpanel to view your WordPress files. 

WordPress also uses folders and files. These files contain HTML, CSS, JavaScript, and PHP. 

The PHP language is used to grab the website content out of the MySQL tables. 

Initial Setup of a WordPress Website

Now that we have a WordPress website installed, there are some initial steps to take to get it ready for use. These include:

1. Choosing and Installing a Theme
2. Installing Plugins (and deleting the extra plugins Softaculous installed)
3. Changing WordPress Settings
4. Uploading the Images to the Media Library and adding the posts with the Block Editor.

1. Choosing and Installing a Theme

Login to your Website

You will probably see the link to your website in Softaculous. If not, this is the url you need to access:

https://your-website.com/gaming/wp-admin

1. Change “your-website.com” to your domain. 
2. Be sure to add “gaming” behind it, because that is where you installed WordPress. 
3. You can access most WordPress websites by typing “/wp-admin” after the url.

After you login, you will be in the WordPress dashboard.

What is a WordPress theme?

For WordPress, the theme is one of the first choices you will make for your website. The theme holds:

• Header design and logo
• Navigation 
• Footer
• Sidebar
• Design choices, like colors and fonts

Premium themes have additional features that allow you to design a home page. (And more.)

Each theme has its own learning curve. While you are learning, it is good to try different themes. But in the long run, you’ll want to find one flexible theme and use it over and over, since each theme has its own learning curve. 

For this tutorial, use the Astra theme so that your experience closely follows the screenshots. Even so, there are many theme choices, ad described in this article on Choosing a WordPress Theme.

Free Themes and Premium Themes

You can make a fully functional website with a free WordPress themes. Most premium themes have a free version with limited functionality that you can try. 

Astra is the most popular theme today, and has a free version. This is the theme we’ll use. 

Each year, WordPress releases a new free theme. These themes generally aren’t the best choice. They are created to teach new concepts. The themes are named after the year, like Twenty-Twenty, and Twenty-Twentyone.

Installing Themes

You can add the theme from the dashboard of the website. Themes are in the dropdown menu under “Appearance”. Click on WordPress.org Themes to see all of the free themes.

Install Astra Theme

For this first lab, let’s use the free version of the Astra theme. Astra is the most popular WordPress theme. 

1. Go to Appearances -> Themes in the gray sidebar at the left. 
2. Click the “WordPress.org Themes button”
3. Search for the Astra theme. 
4. Install and Activate the theme.

2. Installing Plugins

Plugins Extend Functionality

The reason why WordPress is so successful is because it is easy to add new features with plugins. There are thousands of free plugins you can add to a WordPress website. When a client asks for a new feature, in most cases you can find a free plugin that will allow you to fulfill their request. 

Plugins on WebDevStudents.com

To give you an idea of what you can do with plugins, I placed a screenshot of the plugins on WebDevStudents.com below. 

Advanced Custom Fields is a plugin I used to make the custom fields for the Modules. 

Beaver Builder Plugin Pro and Beaver Themer are page builder plugins I have an agency license for. These are the only paid plugins on the website. 

Google Analytics Dashboard allows me to see traffic on the website.

Ninja forms is my go-to plugin to create forms. 

Page Scroll to id is a plugin that adds an animated scroll for internal page links. I use the animated scroll on the long Module articles for CSCI1450.

reSmush.it optimizes images. (Like Images 1-2-3)

Siteground Optimizer makes the website faster. 

Siteground Security makes the website more secure. 

I used WordPress importer to move some posts to this website from a different website.

Yoast SEO is a plugin for SEO. 

Deleting Extra Plugins: Caveat Emptor* on Softaculous

In the previous slides, the instructions were to use Softaculous to install WordPress. The Softaculous installation is much easier than installing WordPress by hand, but there is a bit of a cost. In this case, the cost comes with unwanted plugins. These extra plugins are adding a lot of extra alerts on your websites. 

WordPress is open source and is free, so the developers who work on WordPress have a variety of ways to push their paid plugins so they have a way to make a living. You’ll see this throughout WordPress. As a student, your job is to tune out all of those alerts. When you are making money as a web developer, it will be important to help support these plugin developers by purchasing the plugins when needed.

We’ll delete those extra plugins next. 

* Caveat Emptor: Let the buyer beware

Delete Plugins from Softaculous

In the Dashboard, click on plugins. 

Deactivate and Delete all of the plugins from Softaculous. Note that you must deactivate a plugin before you can delete it. 

We’ll add back some different plugins. 

Plugin Conflicts

WordPress is a hodgepodge of code coming from:

• WordPress Core
• WordPress Theme
• WordPress Plugins

Most of the time, the code works together seamlessly. But every now and again there is a “plugin conflict”. What this means is that the website is either down or not working correctly due to a problem with the code. As web developers, it is our job to work through code problems on the website. 

Avoiding: The best way to avoid plugin conflicts is to use well-known plugins. Before you install a plugin, make sure it has a lot of downloads and good reviews.  Before you add a plugin, think through whether you really need it.

Resolving: To resolve a plugin conflict, deactivate all plugins and reactivate them, one-by-one. If that doesn’t resolve the problem, then test the website with a different website theme.

If you sell websites to clients and the websites are critical to their businesses, then you need to have website hosting with daily backups. That way, when there are problems, you can restore the website to a backup. That buys you time to work on the problem at your convenience. The free hosting I provide for class does NOT include daily backups. 

In choosing plugins for this lesson, I have chosen plugins that:

• Have a generous free level
• Have a lot of usage

Now we are going to install some of them.

Add Ninja Forms Plugin

Click on Add Plugins, and then search for the “ninja forms” plugin. 

In my experience, this is the forms plugin with the best free level. This plugin will make it easy to add a Contact form to the website. 

Install and Activate. 

Add Image Optimization Plugin

Search for “resmush-it”. The one with re in the logo is the right one. 

This plugin does image optimization (Images 1-2-3). Install and Activate.

Add the Yoast Plugin

Search for the Yoast SEO plugin. 

This is the plugin that we use for SEO. Install and Activate.

When you install this plugin, a wizard may pop up. Do your best to answer the questions. Start by clicking the “Start first-time configuration” box. 

Don’t worry too much about the questions in the wizard. If this was a real client website, how you answer the wizard questions could be very important. 

3. WordPress Settings

There are a lot of settings that you can change in WordPress. However, the default settings will probably be ok. 

Navigate to Settings->General. 

Check the Administrative Email Address. If you forgot to add your email address in Softaculous, change it here. It is critical to have your real email address here. 

Images Settings

Each time you add an image to WordPress, it automatically cuts several sizes for use on your website. You can change the sizes in the settings.

I think 150 is too small for the thumbnail, so I usually change it to 300. (150 is postage stamp size.) Then I change the medium size to 600. 

Navigate to Settings -> Media and change the thumbnail size to 300 x 300 and the medium size to 600 x 600.

4. Media and Posts

Now that the website setup is complete, we’ll add some content to the website. We’ll upload all the images at once, and we’ll add the five blog posts.

Download Images for Gaming with Grandma

Unzip the package, and upload them to the media library. 

You can either drag them in or navigate to them with Select Files.

What happens when you upload an image to WordPress?

• WordPress stores your original image
• WordPress crops out a square thumbnail to your specified size
• WordPress resizes your image to create a medium and a large image.  
• The Resmush.it plugin optimizes the images for you. (Like tiny.png)

WordPress, plus the Resmush.it plugin, handles the cropping, resizing and optimization for you.

When you add an image to a post, you can choose which size you would like. Smaller sizes load faster, so you want to choose the smallest size possible to fit into your space. 

Add the Five Posts

1. Download the website content to your computer:  Website Content 

2. Use New->Post to add the five blog posts to the website using the Block Editor. Be sure to select Posts instead of Pages. For each of the five posts:  

If you are working through these lessons out of order, go to Lesson 4 on Content Editing to learn how to use the WordPress Block Editor.

Now that you have some blog posts on your website, you may start to see it come to life. The default settings for most themes will place your blog posts, or a summary of them, on the home page. 

---

There is a lot more to learn about WordPress. In the next lesson, Lesson 9, we will learn how to use the WordPress Customizer. This is Lesson 8 in our WordPress learning program.