Having a website is crucial today for most businesses today, especially with how the Covid-19 pandemic swept through the world, forcing countries to enter into lockdowns and retail becoming . When COVID-19 disrupted the world’s economy, forcing countries to lock down, businesses were forced to boost their online presence or risk being eliminated. A strong company website quickly became one of the most important factors today for businesses, regardless of industry.
According to Datareportal, more than 80% of consumers searched for products and services online during the first half of 2020. This consumer behaviour is not expected to change significantly even after the pandemic.
In the past, creating a website was a tedious and complex process. The website developer would have to be familiar with different programming languages such as HTML, CSS, and JavaScript to create an engaging and effective website. .
However, as having an online presence became common among businesses, developers have made creating a website much easier and straightforward for non-programmers. With templates and drag-and-drop builders available, the barrier to entry has been lowered considerably. In this article, we will examine the fundamentals of website building and take a look at how websites work.
By the end of this step-by-step guide, you will be able to get started with creating your very own website with WordPress, without any coding knowledge.
3 Essential Elements to Building a WordPress Website
Here are 3 essential elements to be set up before a website is accessible on the internet:
- Domain Name (anchor text)
- Web Host (anchor text)
- Content Management System (e.g. WordPress) (anchor text)
1. Domain Name
The Domain Name (also known as a website address), is a unique set of characters that visitors input in the URL address bar of a browser to enter the website.
Sample of the domain name on a web browser
To understand how a Domain Name works, we will first need to understand what is an Internet Protocol Address (IP address).
Every website on the internet has a unique identifying number called the IP Address. The IP address consists of a string of numbers which look like this:
“172.104.40.181”
For a website to be displayed on a web browser, the browser has to locate the web hosting server via the IP address to retrieve the website contents.
This is where the domain name comes into the picture. The Domain Name is used as an alternative for the IP address. Instead of using the website’s IP address directly, visitors access the website by typing the domain name on the web browser. It functions as a shortcut for the IP address and most importantly, provides much more clarity to the visitors.
The Domain Name would end with an extension such as: .com, .net, .sg and etc. The annual subscription price of a domain usually starts from USD$8.88 and varies according to the name extension. However, there may be some cheaper deals during festive or promotion seasons.
Some of the most common registrars to purchase a domain name are: Namecheap, Vodien and GoDaddy.
Domain Prices from Namecheap
2. Web Hosting
A web hosting company provides all the necessary services for a website to be accessible on the internet.
In order for a website to be accessible on the internet, a specialised computer known as the server is needed to store the files and code in. The server is in charge of “serving” the website to visitors.
However, servers are often complicated to configure from scratch and require heavy infrastructure to perform reliably. Therefore, it is difficult for small business owners to build their own server. An alternative would be to subscribe to the services of a web hosting company.
The primary role of a web hosting company is to build and maintain these heavy infrastructure servers. They would then rent out the server to their customers. Depending on the storage capacity needed, a web hosting company offers a wide range of plans for its customers.
The entry level plan would be the shared server hosting plan. Under the shared server hosting plan, the server is rented out and shared among many domains. This makes the hosting plan more affordable for small websites that are expected to have low traffic. Depending on the expected traffic and storage capacity needed for the website, there are many different types of web hosting plans available in the market.
After subscribing to a web hosting plan, the web host will provide a nameserver value which looks something like this:
ns1.dns-parking.com
ns1.dns-parking.com
A Nameserver is like an address book that stores the website’s IP address, and its role is to connect the Domain Name and website’s IP address.
When a visitor inputs the domain name (e.g equinetacademy.com) in the browser’s address bar, the browser will request the IP address of the website from the Nameserver. The Nameserver will then process the request, replying to the browser with the particular website’s IP address (e.g 123.123.123.123). This allows the browser to access the website without requiring the user to memorise the IP address.
Some web hosting companies are: Siteground, Dreamhost and Vodien.
Sample of Web Hosting Price Plan from Siteground (Web Host)
3. Content Management System (CMS)
A Content Management System (CMS) is a web application for non-technical users to create and edit web content, manage, and customize a website with ease.
In the past, a website had to be created from scratch by coding (also known as programming). Coding refers to the use of programming languages to instruct the computer to function or behave in a specific way. It required someone with a suite of technical skills such as HTML, CSS or JavaScript to create a website.
Fortunately, with a CMS, it is much easier to get started with creating a website today. The CMS is coded and programmed properly by developers so that anyone without coding skills would be able to create a website with it. It expedites the process of website creation and minimises the chances of human error.
Open Source CMS vs. Proprietary CMS
Broadly speaking, a CMS can be Open Source or Proprietary. One of the biggest differences between these two is the accessibility to the source code. The source code is the code written by the developer that runs the software program. It is equivalent to the manual and instruction of how a software program functions.
As the name suggests, an Open Source CMS is made available to anyone for download and usage. The user would not be charged for installing the CMS. The source code is shared publicly and developers are free to modify and customise the source code according to their needs. As a result, any developer with an idea for a feature is able to freely develop it and release or sell to the public. This is why you do not need to learn coding today to get new website features.
Moreover, since the source code is open to the public, users will have full control and ownership of it. This would also mean that users are solely responsible for everything that is related to their website.
However, while the Open Source CMS is free to use, you may be required to purchase add-ons (called plugins) to provide the features you need. For instance, some WordPress themes (which will be covered shortly) would require the users to subscribe to them before they can install them on their website.
On the other hand, a Proprietary CMS is developed and maintained by a company. Unlike the Open Source CMS, the source code is owned solely by the company and would not be shared with the public. Users often have to purchase either a monthly or annual subscription to enjoy the product and services.
As the source code is not available to the public, some people feel that proprietary CMS provides a higher level of security. Proprietary CMSes are suitable for users that prefer to have the technical portion of the website outsourced. This is extremely useful for businesses that have limited resources.
Some proprietary CMSes are built for very specific purposes. For instance, Shopify is specifically built for e-commerce businesses. The features are simple and straightforward – for businesses to list and sell their products online.
However, users have to also understand the risk of using a Proprietary CMS. As the source code and customisation are maintained by the Proprietary CMS company, there is always a possibility of losing the access to the source code if the company ceases its operation.
Here are some of the main characteristics of using an Open Source CMS and a Proprietary CMS:
| Types of CMS | Open Source CMS | Proprietary CMS |
|---|---|---|
| Support | Easier to find solutions to problems due to large user base | Depends on how reliable and proactive the developers are |
| Customization | Less costly to customize unless advanced customization is required | Customisation limited by what the company (e.g Shopify) allows and is usually costly |
| Costs | Less expensive to maintain | More expensive to maintain due to licensing fees |
| Security | Relies on consistent security updates for core system and third-party plugins | More secure due to obscurity of code. Is also reliant on consistent security updates |
| Portability | Easier to transfer from one platform/web host to another | Tricky to export. May require expertise from original developer |
In most cases, we recommend building your website with an Open Source CMS as they are cost-effective and you will retain full ownership. Some popular Open Source CMSes includes:
- WordPress
- Magento
- Joomla
- Drupal
In this guide, we will be building a website with the most popular CMS, WordPress.
Why WordPress?
Apart from being an Open Source CMS, WordPress is also the top CMS that holds more than 60% (need to align with the course notes) of the CMS market share, and more than 30% of the websites on the internet were created using WordPress. Established brands such as TechCrunch, Sony Music and Microsoft News Center have websites built on WordPress. With the volumeof users worldwide, there are many online WordPress groups, communities and forums where you can seek advice and assistance from.
WordPress.org vs WordPress.com
If you have ever searched online for information about WordPress, you may have heard of the terms WordPress.org and WordPress.com. Even though both of them sound similar, they actually operate very differently.
WordPress.org is an open-source CMS. The domain name and hosting have to be purchased separately and the owner will be granted full ownership and responsibilities of the website.
On the other hand, WordPress.com is run by a company called Automattic. Other than providing website services, WordPress.com also provides the option to purchase domain names and web hosting services. For users that require less than 3GB storage space, they could even subscribe and enjoy WordPress.com’s limited services for free.
There are many other restrictions and differences between WordPress.org and WordPress.com which users should consider carefully before selecting one. Due to the larger popularity, demand and customisability of the open-source version, we will be covering how to build a website using WordPress.org.
How is it all connected?
Now that you are aware of the three essential elements in building a website, how do they connect and function together?
- A user inputs the Domain Name into the web browser’s address bar and the browser would send a request to retrieve the website’s IP address
- Once the IP address is retrieved, the browser will be “redirected” to the hosting server, where all the website files are located in
- Once the browser located the web hosting server, it will start downloading website files and the displayed the information on the user’s browser
After understanding how the Domain Name, Web Hosting and CMS work, it’s time to work on the practical portion.
Purchasing a Domain Name from Namecheap
Purchasing a Domain Name is easy with Namecheap. Here are the steps on getting the Domain Name:
- Go to https://www.namecheap.com/
- Enter the domain name in the search bar and hit the red magnifying glass button on the right to check for availability and price
3. Once the domain name is confirmed, click on the trolley icon button to add the domain name to cart.
4. Click on the “View Item” button at the bottom
5. Double check the item before clicking on “Checkout”
6. Select the registration period and decide whether the “auto-renewal” option is necessary.
7. Visit https://www.namecheap.com/promos/coupons/ to acquire promo codes (promo codes may require to register an account)
8. Click “Confirm Order”
9. FIll up the form to create an account
10. Click “Create Account and Continue”
11. Input the purchaser’s contact details for payment
12. Click “Continue”
13. Select the Payment Method
14. Click “Continue”
15. Final check on the order information
16. Once everything is satisfactory, proceed to click on the “Pay Now” button
17. After purchasing the Domain Name, navigate to the account dashboard to manage the domain
Purchase a Web Hosting Services
The next thing to do is to purchase a web hosting package from a web hosting service provider. We will purchase the web hosting from Siteground:
- Go to www.siteground.com
- Click the “Get started” button under the “Web Hosting” option
3. Select the hosting plan that best suits the business and click the orange “Get Plan” button
4. Select “I already have a Domain” and enter the domain in the box
5. Hit the blue “Proceed” button
6. Complete the form create a new account
7. Log in if you already have an account
8. Hit the ‘Pay now” button to complete the payment
After purchasing the web hosting package, an email with the Nameserver details may be sent to the account holder’s email. It is advisable not to delete the email for future references.
How to point/link domain name to website
Now that the Domain Name and Web Hosting services have been purchased, it’s time to configure the setting.
Login to the domain registrar (in this case, it would be Namecheap), navigate to the setting of the domain (Manage DNS Servers or Configure/transfer DNS servers) and input the Nameservers details.
- Navigate to the Namecheap Dashboard. Find the Domain Name you want to manage. Click “Manage”
2. Under “Nameserver”, click and select the “Custom” option
3. Enter the Nameservers here (taken from email received by hosting provider)
You’re done with the configuration, but do be mindful that it takes time for the various nameservers across the internet to update their records. While it usually takes less than an hour, in some cases it may take up to 48 hours for the servers to propagate. In the meantime, don’t be alarmed if you see an error message when you try to access your website.
Setting up WordPress in cPanel dashboard
Once the Nameserver has been configured, you can install WordPress using cPanel.
Congrats! The WordPress Website has been created but that’s only the beginning of the website creation journey. Log in to the website admin page, and you’ll be able to start designing your website and posting content.
- Log in the website admin page by adding “wp-admin” at the back of the domain name. Eg. type “domainname.com/wp-admin” in the address bar
- Enter the Username/Email address and the password
This is how the WordPress admin page looks like:
Introduction to WordPress Themes
WordPress theme is a set of files that modifies the display of the website when uploaded onto the WordPress admin panel. It consists of pre-designed templates developed by developers that simplify the process of creating and designing web pages. All users have to do is to install the theme and they would be able to select the various designs from a list of templates. Depending on the theme, some design customization could be as simple as the drag and drop method.
Users are recommended to do their own research on the various themes’ design and functionalities before investing in one. It is advisable not to switch themes after building the website as it would cause a disruption in the display layout of the web pages. If you have to switch to a different theme for any reason, you would have to go through a tedious process called the website theme migration, which transfers all the content from the previous to the new theme.
Free VS Premium Theme
There are thousands of free and premium WordPress themes available in the market that users may choose from. Free themes are open to all users while premium themes would require users to pay a subscription fee before using it.
So, why are developers sharing free WordPress themes?
Here are some of the most common reasons:
- Gather feedback and suggestions
- Testing specific functionality
- Testing the designs (eg. fonts, colours)
- Testing for security and privacy purposes
Users have to be mindful that WordPress themes take time to develop and maintain. Consequently, many free themes, being maintained by individual developers, are often poorly maintained as there is no source of monetisation. Sometimes, developers may also make the themes free in order to test out certain functions and gather feedback from users. Therefore, it is common that free themes have limited support and often do not receive as many regular updates as premium themes.
You’re now ready to upload your WordPress Theme.
Upload WordPress Theme
One of the major advantages of WordPress for non-programmers is the wide variety of themes and page builders. While a theme determines many of the site-wide elements such as the colour scheme and the headers on the website, a page builder allows you to build each individual page using a visual drag-and-drop interface without using any code.
Here are some of the most commonly used page builders:
- Divi Web Builder
- WPBakery Page Builder
- Beaver Builder
- Elementor
Every page builder has its unique design templates and some may share the same features. Therefore, it is important to understand and make a comparison between these page builders before investing in one.
For this example, we’ll be using the Divi Builder as it comes bundled with the Divi theme.
Building a Landing Page
Congratulations! You have successfully created your very own website and landing page. There are many other features and plugins you could include on your website to beautify and enhance it. This would lead to more conversions. To find out more about conversion rate optimisation, check out the articles here and here [internal link if applicable, otherwise delete].There are also plugins that secure and backup your website. For businesses that are selling their products on the website, WordPress also has its own version of ecommerce, called Woocommerce.
If you are interested in learning more about creating a website from scratch, you may enrol in our WSQ-approved NICF WordPress Website Creation course. This 2-day course takes you through the process of building a website from scratch, and also includes an introduction into e-commerce elements.
We also host a wide array of digital marketing courses here in Singapore, including a Certified Digital Marketing Strategist Programme.