In today exercise, you will be pair programming with a person sitting next to you. We will also have milestones to complete just like lab exercises.
We’ll try to accomplish these goals tonight:
- Set up local WordPress
- Personalize local WordPress
- Set up Remote Server
- Migrate WordPress online
The WordPress.org website has detailed instructions on how to install WordPress and run it locally. However, the guide is too long and has information that you do really need to know.
I will provide a quick and easy way to get WordPress running locally on your computer. Below are the steps:
- Install WordPress
- Install MAMP
- Set up WordPress in local server (MAMP)
- Head over to https://wordpress.org/download/ and dowload the lastest stable version of WordPress (v 4.9.8)
- Unzip the WordPress package in a desire position. The directory contains the unzip file is a WordPress software for your website. Your WordPress directory should have the following files:
Each website requires a separate WordPress software i.e. if you want to make 3 different websites then you will have to install 3 separate WordPress software locally.
Now, you will need a local server (environment) for the WordPress to run on. WordPress.org has a list of recommended servers. I will use MAMP since it’s easy and will help you understand the science “behind the scene”. There is a new tool called Flywheel that’s gaining a lot of traction lately. I actually like this tool more than MAMP because of its intuitive UI and user-friendly. However, I’ll recommend you to use one other tool first before getting started on Flywheel.
- Go to https://www.mamp.info/en/ and download the MAMP free version. MAMP comes with PHP, Apache server, and MySQL server.
- Open MAMP and click on ‘Start Server’
- When the Apache server and MySQL server are all set up (green light), click on ‘Open WebStart page’ to start the local server. It will open a new tab on your web browser. The URL is either
http://localhost:8888/MAMP/?language=English(on Mac) or
- This is a Start page, where you interact with your local server. Click on phpInfo to be taken to the information page of PHP and Apache. Click on Tools > phpMyAdmin to be taken to the MySQL databases that contain all data of your websites.
- We will need a database for your new website (if there are 3 websites, there will be 3 different databases). Go to phpMyAdmin and click on
Newin the left panel. On the right panel, type “my-first-wp-site” in the database name. Collation is a set of rules that determine how data is sorted and compared. Pick “utf8_general_ci” as it is the most common collation. Then click
Create. You will be taken to the Structure tab of your database. The database is empty because there is no table.
When WordPress is set up with this database, there will be additional 12 tables added by WordPress. You can also create an additional custom table for your custom plugins but we won’t go into that now.
- Remember the unzip
wordpresspackage that we did in step 2? Change the folder name from
my-first-wp-site(same name as database name).
- Manually move (copy-paste or drag-drop) the
my-first-wp-sitefolder to inside the
htdocsfolder is where all your wordpresses (websites) live.
- Now, go back to your MAMP
Startpage by click on the “Open WebStart page” on MAMP. Then, click on the
My Websitetab. You will be taken to
http://localhost/depends on your Operation System
- You should see something like this:
Index of /
Click on the
my-first-wp-sitehyperlink to start the WordPress set up.
- Going through the instructions and click on
Let's go!button to be taken to the database connection details page.
- Make changes to your database connection details so it looks like below:
- Database Name: my-first-wp-site
- Username: root
- Password: root
- Database Host: localhost:8888 (or localhost for Windows)
- Table Prefix: wp_
- Awesome! WordPress is all set up for the local server. Now, we can start the installation on the server. Click on
Run the installationto be taken to the installation page.
- Fill the information as below (use your email address):
rootfor default username and password. You can change it later when you are more familiar with WordPress. Click on
Install WordPresswhen you are done.
- Success! WordPress has been installed. Now you can log in to your local WordPress Dashboard using the default username and password.
../my-first-wp-site/wp-admin/. This is a dashboard for you (the administrator) to manage your WordPress website. Now we will add some content to your site such as Posts, Pages, and Main Menu.
- One post with an image, a youtube video, and some ipsum text (categorize and tag your post)
- One post with a featured image and some ipsum text (categorize and tag your post)
You can also just grab some random posts from the internet for your content (try this http://catsinternational.org/articles/). Right now, we only focus on the technical aspect of WordPress.
- About Me page: content about yourself
- Contact page: how online people can reach you (e.g. Address: 12 Tôn Đản, Bến Nghé, Quận 4, Hồ Chí Minh 700000; Phone: 0122 474 2431; etc.)
- Go to Appearance and give the Menu Name:
- Add Contact, About Me, and Sample Page inside the Menu Structure. The Sample Page is a sub item of the About Me page.
- Tick ‘Top Menu’ in the Display location and then click
Your WordPress Home page now should look similar to this:
All the content that you have created so far (pages and posts) are stored in the backend MySQL database. Now, let us take a look at these data
- Open the MAMP WebStart page again and go to phpMyAdmin
- Click on the
my-first-wp-sitedatabase on the left panel. Notice that WordPress has created 12 tables with prefix “wp_” after the WordPress installation in
- Locate the
wp_poststable and click on
Browses. Now, you can see all your posts’ and pages’ content are in the
Equivalently, you can also just run this sql script in the
SQLtab to get the same result:
SELECT * FROM `wp_posts`
- Now, let’s do a bit of SQL while we are here. Sometimes, you need to check some data in the database to troubleshoot issues.The list that we saw above contains all the Posts and Pages in your website. However, you only want to view only the Pages. To do that, run this SQL script:
SELECT * FROM `wp_posts` WHERE `post_type` = "page"
You have written your first SQL script, and the results return only the Pages. If you want the results to return only Posts, change the
- Go to https://colorlib.com/wp/themes/ for free themes.
- Pick activello and download the zip file (you can pick a different one later). You can upload the Theme by going to
Dashboard > Appearance > Themes > Add New > Upload Themeand just upload the theme zip file there. However, I want to add the theme manually.
- Unzip the zip file into a folder. The folder should be named
- Drop the folder into
../MAMP/htdocs/my-first-wp-site/wp-content/themes/. There are already 3 other theme folders inside the
themesfolder: twentyfifteen, twentyseventeen, and twentysixteen. Your default theme is twentyseventeen.
- Go back to your admin Dashboard and you should see the new Activello theme appears in the
Themespage. Activate the theme to use it.
This is similar to how you installed a theme in
milestone 2.5. You just need to download the zip file, unzip it and drop the plugin folder into
../MAMP/htdocs/my-first-wp-site/wp-content/plugins/ folder. Then, activate the plugin in the
See how every post has a comment section that anyone can just make a comment on. Now, let’s disable all the comments by using a plugin.
- Task: Download
Disable Commentsplugin: https://wordpress.org/plugins/disable-comments/ to disable comments on all Posts.
- Result: The comment section is no longer there at the bottom of any Post
Your WordPress website has only run locally on your computer so far. Now, we will push the website into the web. To do that we will need a domain and a hosting server. Have I told you that you can do all of the hostings for free of charge? 🙂
There are many websites that give out free domains and freenom is one of them.
- Go to http://www.freenom.com/ and type in your desired domain name in the Check Availability box. I use
my-diy-wordpress-sitebut you should pick a different name since the same name is probably already taken by me.
- Do not use
.tkdomains. Many host servers have stopped working with
.tkdomains because these domains are abused by spammers and hackers. The other domains (
.gq) should be okay. Pick at least 2 domains in case one domain stops working. Here, I’ll pick
.ga, and click
- Change the Period to
12 Months @ FREE, and click on
- Enter your email address at the ‘Review & Checkout’ page. You can also use a temp email instead. Then verify your email address.
- After the email verification, you are required to fill in the ‘Your Details’ information. Fill in all the blank fields, tick the ‘Terms & Conditions’ checkbox and click on
- Now, you are all set. Click on the button
Click here to go to your Client Area.
- Sign in with your email and password, and go to Services > My Domains
I can see now that my two domains are active and ready to be used.
You have gotten yourself a domain name, the next step is to get a remote server to host your WordPress website. There are also a lot of websites that provide free hosting. In this lab, we will use InfinityFree
- Go to https://infinityfree.net/ and sign up for a new account (don’t close the freenom tab yet, we’ll go back to it later). If you use a temp email, you can re-use the same email that you signed up with freenom.
- When the registration is all done and you are logged in. Click on
+ NEW ACCOUNTto start a new server. You are allowed to have up to 3 servers per registered account.
- We don’t want to use their subdomains so let’s ignore the first option. We want to use our own domain. The domain that we have set up in
Milestone 3.1need to point to these nameservers: ns1.byet.org, ns2.byet.org, ns3.byet.org, ns4.byet.org, ns5.byet.org. Otherwise, it won’t work.
- Go back to your domains in the freenom website
- Pick one domain and click on
- Click on the drop-down
Management Toolsand choose
- Choose custom nameservers and fill in like below:
Change Nameservers. Now, the changes have been saved successfully!
- Go to your remote server in the InfinityFree website. Enter your domain name and click on
You should receive a congratulation notice saying that your domain is available. Otherwise, check the nameservers in from your domain again.
- Now, you will need to provide a Label and Password for your account. Make sure to keep these credentials somewhere safe because you will need them later. I’ll change my account Label to “My First DIY WordPress” and keep the Password the same.
- Click on
- The server is being set up. The
epiz_22******is your Username. Click on
VIEW IN CLIENT AREA.
- Wait for a few minutes and then go to your website (mine is
- If you see the below for your website, congrats! Your remote server is now live!
Now, we have an online remote server all set up, and a WordPress website running locally. The last thing we need to do is to migrate our local WordPress online.
Note: All remote servers nowadays provide One-click install WordPress. However, doing this won’t help you understand what happens behind the scene. This practice force you to do things manually which is tiresome but will provide you more insights on how WordPress works specifically, and all the web applications as a whole.
Inside your InfinityFree account, go to the Control Panel (cPanel) by click on the button
GO TO CONTROL PANEL. The cPanel is a user interface for all the technical stuff that let remote server owners manage their websites easier.
Now, to push our local stuff online correctly, we will have to do 2 main things:
- Upload MySQL database online using sql script
- Upload all WP files online using an FTP tool
- In your cPanel, click on ‘MySQL Databases’ to access all your remote databases. There is currently no database because you just set up the server.
- Enter a name for your new database and click on ‘Create Database’. My remote database name is:
epiz_22047555_my_first_wp_site. This is an empty database (you can check the database by using the online phpMyAdmin).
- Now, we need to export our local database and import to the online database. Access your local phpMyAdmin through MAMP, choose
my-first-wp-sitedatabase and click on the
- Leave the default options: Quick export in SQL format and click
Go. The tool provides you a sql script that generates all the tables and contents of the
my-first-wp-sitedatabase. Copy the script.
- Open a new file in your text editor and paste the script here. Save the file as
my-first-wp-site.sqlin your local machine. A copy of your database now sits in this script.
- Go to your remote phpMyAdmin in cPanel to access your remote database.
- Click on the
Importtab. In the File to Import section, upload your
- Leave default settings for the others. Click on
Goto start the database migration. It probably takes just a few seconds.
- Click on the
Structuretab to make sure that all the tables have been imported correctly.
- You can run similar sql scripts as in
Milestone 2.4or examine individual tables to make sure that the contents are correct.
- We need to do one last configuration with our remote database: the site url needs to be changed. Browse the
- We need to change the
home. Start with the option_name
siteurl, click on Edit and update from something similar to
http://localhost:8888/my-first-wp-siteto your registered free domain e.g.
http://my-diy-wordpress-site.ml/. Click on
- Do the same thing for option_name
home.Your remote database is now all set!
Fix the wp-config.php file
- Remember your WordPress folder
my-first-wp-sitethat lives in
/MAMP/htdocsfolder? Make a copy of that outside MAMP and rename it to
my-first-wp-site-prod. I don’t want to use the same folder in MAMP because that one is configured for running locally only (dev version). To run on a remote server, it needs to be configured with the remote server details (prod version).
- Use your text editor to open the wp-config.php file in the
my-first-wp-site-prodfolder to make some changes. We need to change the values of DB_NAME, DB_USER, DB_PASSWORD, and DB_HOST.
- DB_NAME: change
my-first-wp-siteto the remote MySQL Database Name (e.g.
- DB_USER: change
rootto the remote MySQL User Name (e.g.
- DB_PASSWORD: change
rootto the remote MySQL Password (your cPanel Password)
- DB_HOST: change
rootto the remote MySQL hostname (e.g.
- DB_NAME: change
- Save the wp-config.php file.
- Now, we need to use a FTP tool to upload all the files inside the
my-first-wp-site-prodfolder to the remote server. We will use a popular free FTP software called FileZilla
Use FileZilla to upload WordPress files
- Download FileZilla here https://filezilla-project.org/download.php
- Open FileZilla and clicks on File > Site Manager
- Name the site
infinityfreeand fill in your remote server’s Host, User, and Password information. Host and User are FTP hostname and FTP username; this info can be accessed easily in the cPanel right bottom panel. Password is your cPanel/server Password.
Connectand provide your cPanel Password
- You know you are connected successfully to the remote server through FTP when you receive these messages:
Status: TLS connection established. Status: Logged in Status: Retrieving directory listing... Status: Directory listing of "/" successful
- In the remote site, go to
htdocsdirectory. In your local site, go to
my-first-wp-site-proddirectory. It should look like this:
- Now, we will start the file transferring:
- Select all files in
my-first-wp-site-prodfolder by pressing
- Move all files from
/my-first-wp-site-prodin local to
/htdocsin remote to start the uploading process (I have 1760 files total to upload)
- When there is a ‘Target file exists’ notice, choose ‘Overwrite if different size’ and tick ‘Apply to current queue only’
This process will take 1 to 2 hours so make sure you have a good internet connection when you are doing this.
- Select all files in
- When the transfer is done, first go to the wp-admin portal (e.g.
- Username and Password should still be
root, then log in
- Go to Setting > General, make sure that all the URLs are now pointing to your domain name rather than your local, then click
- Go to Setting > Permalinks, make sure that all the URLs here are also pointing to your domain name rather than your local, click
Now, go to your website (e.g.
http://my-diy-wordpress-site.ml/) and it should be a functioning WordPress web application!