How to Design A Website Using WordPress (with screenshots)

Posted by





Knowing How to Design A Website Using WordPress is very crucial because WordPress powers over 30% of all the websites in the world.

Many people would like to develop or design beautiful and amazing websites using WordPress.

Maybe you come across a website and it motivates you to learn web development, and you want to learn how you can create amazing websites with WordPress.

Download Now


Knowing how to design a website is very important because you can design anything you want. And you can as well earn decent money from this.

In this article I will be teaching on how to build or design a website using WordPress. It’s not a must that will learn all the web developing languages before you can create a WordPress website.


If you follow all the steps in this article, you will successfully launch your own WordPress website without the help of a web developer.

Tools Required:

  1. Your computer
  2. Data connection (internet access)
  3. Money (the money you will pay to buy domain & to host your website)

If you have provided the above required tools, let’s start!

With your computer, go to wampserver.com or you can Google search it with the keyword  “wampserver” and download the version of  “wamp”  that suits your system OS.

If you try downloading from their official website and you encountered any issue, you can download the  “wamp software”  from third party websites by Google searching  “WAMPSERVER for PC”  on your keyword.


For example I’m running windows 10 64bit, so I will download  “wamp server 3.2 64bit”. This is the latest version as of early 2020.

After your download, install the software via normal process of installing other Windows software.

Getting started on how to design WordPress website

Go to WordPress.org and download the latest WordPress. With this guide, you’ll learn how to design WordPress website.

Click on “Get WordPress” as shown in the above image to download the WordPress. The downloaded WordPress file is normally in a zip file, so you need to extract it before you can use it.

“If you don’t have any software that can be used to extract files that are zipped, search for one and download. For example Google search “winrar software”, download and install it in your computer system. Once you are done with this, you can continue with the steps below”

Now extract the WordPress file to c:\\wamp64\www. After that rename the folder to “step”, for this tutorial/article we are designing a website for “step”. So to yourself, you can rename the folder to “mysitename” in order for the folder to bear you website name.

Also read:   Successful Freelancer - Complete Guide That Will Make You A Successful Freelancer ?

Start the “wamp server”  (I mean open the wamp server software) and go to your browser and type http://localhost 

how to design wordpress website - WAMPSERVER homepage
WAMPSERVER homepage

At the bottom left corner select “ADD VIRTUAL HOST”

how to design wordpress website - add a virtual host

See the details as I filled it out in the above image.

After you have filled the necessary information in the  “add a virtual host”, go back to Homepage and select  “phpmyadmin”  at the bottom left corner – you can see it under  “TOOLS”.

Now It’s Time to Select a Database

how to design wordpress website - select database

From the top menu, Select “Database”

how to design wordpress website - fill database

In the above image, I used  “step”  as the name of my database.

Now type on your browser http://step.local/

how to design wordpress website - wp-admin

This should show up if you follow all the instructions correctly. Proceed by clicking on “Let’s go!”

how to design wordpress website - wp-admin; fill form

Add the database name as  “step”  and username as  “root”, leave password empty for now.

how to design wordpress website - website information

You can use any username and password of your choice and always add a working email for password recovery.

how to design wordpress website - wordpress success

If you did everything well and got to this page, then congratulations. You are done with the setup.

Now go to your browser and type http://step.local/wp-admin and login using your username and password you used during the WordPress setup.

how to design wordpress website - wordpress dashboard

This is WordPress dashboard and it is what you should see once you login.

Customizing Your Theme

There are already designed templates by professionals, you can get them from https://themeforest.net/ or you can as well search for WordPress free themes online.

For this article I will be using one I already bought called “Salient”

how to design wordpress website - wordpress themes

Click on “appearance” and select “Themes”

how to design wordpress website - wordpress upload theme

Upload the theme of your choice here and activate it.

how to design wordpress website - required plugins

Now go to appearance > Install Plugins, install and activate all the plugins with required and recommended.

how to design wordpress website - demo importer

After installing the template, you can see it showing, I circled it Yellow. Select and chose  “Import Demo data”  (Demo Importer)

Also read:   Traductor de ingles a español - Best online English-Spanish translator
how to design wordpress website - demo importer 2

You will see this depending on the template you are using, importing demo data, and demo data is an already pre-designed website from the template.

Apperance

Go to “Appearance” and select “Customize”

homepage settings

Set the homepage to a static page and chose the pre designed home page from the drop down.

site identity

Still on the  “customize tab”  select “site identity”

customize site identity

You can see the details as circled in the image above.

web preview

Now on your browser in your computer type http://step.local, the image above should display if you did everything very well.

At this stage the website is set up on your computer system. You can now do other setting like changing the images and the write ups of the website to your taste.

How to design WordPress website – Buying a hosting account

For foreign hosting company, I recommend using Bluehost (This hosting will Save 65% cost if you use them) or WPengine – Hosting company (This is one of the best WordPress hosting companies) but you can use anyone you like.

On your browser go to http://localhost
At the bottom left corner select “phpmyadmin”

phpmyadmin

Select the database “step”

Export

Click on “Export”

Go

Click on “Go”

Opening

Save file
Now go to  “www folder” in the  “wamp” , select the step folder.

Wamp folder

Right click and make it a zip file or compress it. Make sure that you have a software that can be used to compress files or to convert folders to zip file.

You can download the software that you can use to compress files to zip here if you don’t have one.


Next We Need to Upload This Zip File to the Hosting Account Online to Make the Website Live

For you to upload the website to an online hosting account to make it become live, you need to first of all buy a “domain name” and a “hosting account”. You can buy one here Bluehost (This hosting will Save 65% cost if you use them) or WPengine – Hosting company (This is one of the best WordPress hosting companies).

Once you’ve bought a domain name and have a hosting account, you can now follow the below steps.
Go to the hosting company that you registered with and login into the cpanel (Control Panel).

The login details will be sent to you in your email after you must have payed for hosting.

cpanel

When you login to the cpanel, select “File Manager”

Also read:   Increase Your WordPress Loading Speed With This 2 Plugins [Recommended]
file manager

Go to public_html

public_html

Upload your website folder

Click on the upload
This is the place where you upload the  “step”  zip file

mysql database

Go back to cpanel and select “mysql database”

create new database

Create a new database, see how it’s done.

fill database form

Now create a new user. I always use password generator for creating strong secure password. I will advise you to do so.

add to database

Add a new user to link up with the database you created earlier.

select all the privileges

After adding user, it will bring you here, select all the privileges.

select phpmyadmin

Then go back to cpanel and select phpmyadmin.

Select the database you created

Select the database you created few steps back.

import

Select the import function to import the sql file you exported few steps back

import the sql file

This is what the import looks like.

select the wp_option

If the import was successful, select the “wp_option”

the site url

See the changes you need to effect: the site url

the site url

For this article, I’m using a subdomain website noblecontracts.com so the site url is https://www.noblecontracts.com/step

public html

You can see that the file is done uploading, select it and chose “extract”

wp-config.php

After the extract, select the file “wp-config.php”  right click on it and choose edit.

Editing the wp-config.php

Editing the “wp-config.php”, you can see the changes that needs to effect.

Live website

Now type the URL on your browser. Congrats, the website is now live and visible to the whole world now.
This is the end of the basic training on how to design a website using WordPress.

Conclusion

This how you can successfully create a website using WordPress.

If you were successful in following these steps, please drop a comment with your website URL so I can check it out and give you a rating! (While you are here, also follow me @JonakyBlog!) 

Know that even if you’ve not mastered all the web developing languages, with this guide you can successfully create an amazing WordPress website.

Here are other posts you should read:

  1. 12 Effective Graphics Design Steps
  2. How to View the Source Code of Any Website [ultimate guide]
  3. How to Add Share Buttons to WordPress without Plugin 

Thanks for reading. Use the comment section below to ask questions if any.