Detailed WordPress Tutorial: Building a Website from Scratch

A Word Before We Begin:

This article is quite lengthy and may require 5-10 minutes of your time to read thoroughly. I’ve dedicated several days to writing and optimizing it. I hope this article proves helpful to you. At the end, I’ve summarized several WordPress website building tips that might save you some money.

Introduction to WordPress

WordPress is an open-source CMS (Content Management System). I first encountered it in 2008, initially for blogging. Over time, it has improved significantly and is now widely used for various types of websites, including business websites, online stores, and personal blogs. Maintained by a large developer community, it provides a flexible platform that allows users to create and manage websites without programming skills.

WordPress Popularity

As of August 2024, WordPress powers over 43% of all websites globally. This data comes from W3Techs, a website that provides statistics on web technology usage. Here are some notable and authoritative websites built with WordPress: The White House, BBC America, The New Yorker, Microsoft News. These websites span various sectors, from government agencies to large corporations, news organizations, and academic institutions.

Of course, there are newer website building technologies available. Such as Wix or Shopify. However, WordPress remains in the top position, even after all these years.

Advantages of WordPress

1. Installing or uninstalling themes and plugins feels like building with blocks, and there’s a vast number of them.
2. No professional programming skills are required. You can set up a simple blog website in just a few minutes. For a simple business website, choose a theme and replace the content. Of course, creating complex functions and custom styles will take more effort.
3. Compatible with search engine optimization, mainly targeting Google.
4. Ownership. The purchased domain, hosting, and all data on the website belong to you or your company. You will need to renew them yourself.

Disadvantages of WordPress

1. As the saying goes, “A tall tree catches much wind.” Due to its popularity, WordPress is subject to more external attacks.
2. The sheer number of themes and plugins can be overwhelming.
3. Using multiple plugins with the same functionality can slow down the website. Similar to how your Windows computer slows down over time.

Although WordPress has its pros and cons, it’s largely dependent on the type of website you want to build. For example, you can use WordPress to build a foreign trade display website (B2B website) or a small personal e-commerce website with payment capabilities. WordPress excels at modular, lightweight website building needs. For complex, advanced websites, it’s recommended to have technical experts with in-depth WordPress knowledge on your team.

What’s the Difference Between WordPress.com and WordPress.org?

WordPress.com is the official hosted SaaS platform offered by WordPress, with relatively high service prices. The platform includes various service packages; you can explore them yourself if interested.

WordPress.org provides free WordPress source code, themes, and plugin code. “.org” is for tutorials, knowledge bases, and community resources.

Content to Prepare Before Building a Website

Whether you’re learning to build a website yourself, hiring a website development company, or working with a freelancer, you should first consider the following questions to avoid detours:

• Determine the type of website: Personal blog/self-media website, content/news website, e-commerce website, or business website for foreign trade.
• Organize the website’s structure: Find reference websites, define the overall style, functional modules, categories, content, and product classifications.
• Prepare materials: Website content and product information (text, images, and videos), and primary keywords. Prepare high-quality, original content. One article that ranks on the homepage is worth hundreds of low-quality articles.
• Cost estimation: Domain, server, and premium versions of themes and plugins require payment. These are fixed costs. If you hire someone to build the website, additional development costs will be incurred based on the complexity of the project.
• White Hat SEO: White hat SEO techniques take a long time to show results, typically 3-6 months (provided you continuously update and maintain your website during this period). Keyword strategy development and website SEO optimization need to be done concurrently. This also tests your patience. Whether you build the website yourself or hire someone, SEO optimization is essential, requiring time and effort to operate and optimize.
• SEM Promotion: SEM keywords and ad placement involve significant investment. Once you stop investing, traffic will decline. The best approach is to run it concurrently with white hat SEO. Once SEO starts to take effect, reduce the SEM budget.
• Website Optimization: Optimize website loading speed (optimize image, video, plugin sizes, and page file sizes), continuously output new content, update old content, and promote the website on high-authority external platforms.

Website Function Structure Diagram

Benefits of Creating a Website Structure Diagram: It visually displays the overall structure and relationships between pages. Whether you build the website yourself or hire someone, it helps clarify the project’s functional requirements and is useful in all stages of the project. For example, during testing, you can compare whether it meets the initial goals.

WordPress Website Building Process

As shown, website creation is mainly divided into the above four steps. This article mainly introduces the basics of website building: How to Build a WordPress Website.

Introduction to Domains

Domain: A unique address used to identify and locate a website on the Internet. It consists of letters, numbers, and symbols, usually ending with suffixes like “.com” or “.net”. A domain is like a website’s “house number.” It allows users to easily find the website without remembering complex numerical IP addresses.

Meaning of Domain Suffixes

Domain Registration Considerations

• It is recommended to choose a common domain with a .com suffix
• Easy to remember, industry-related words
• The domain does not contain numbers
• Buying a domain from a foreign platform does not require filing

Introduction to Foreign Domain Service Providers

1. GoDaddy: A company with a long history, the world’s largest domain registration company.
2. Hover: Prices are clearly marked, with no hidden renewal or additional service fees.
3. NameCheap: All domains automatically enable privacy features to protect registrant information from misuse.
4. NameSilo: Adheres to the industry’s lowest daily domain prices, with no hidden fees, and transparent registration and renewal prices.
5. Hostinger: Transparent domain registration and renewal prices, with no hidden fees and frequent discounts.

Introduction to Foreign Trade Hosting

Server (Host): A technology company that provides cloud space and technical support. It allows users to store website files on its servers, enabling the website to be accessed on the Internet. You can also think of it as a remote computer for storing project files.

Types of Foreign Trade Hosting

1. Shared Hosting & WordPress Hosting: Shared hosting and WordPress hosting are similar in terms of performance. The difference is that WordPress hosting is specifically optimized for the WordPress system. So, WordPress hosting is the preferred choice for building websites with WordPress.
2. Dedicated Hosting & VPS Hosting: Dedicated hosting, Cloud hosting, and VPS hosting, although called differently, have similar performance. Dedicated hosting is mainly used for e-commerce websites with payment functions. If you have a sufficient budget, personal blogs and business websites can also choose dedicated hosting.

Difference Between Shared Hosting and Dedicated Hosting

1. Form: Shared hosting is like renting a room, while dedicated hosting is like owning the entire house.
2. Performance: CPU usage varies greatly, which will affect the website loading speed. Shared hosting CPU performance can only achieve up to 1/3 of its potential.
3. Security: The quality of other “tenants” can affect you. Website rankings may be affected.

Server Purchase Considerations

• Most hosting providers offer free domain usage rights when you purchase shared hosting.
• Do not buy the lowest-tier configuration for shared hosting, as low-configuration hosting is slow.
• Choose WordPress hosting for personal blog websites.
• Choose WordPress hosting for small display websites.
• It is recommended to choose dedicated hosting for cross-border e-commerce websites.
• Understand the renewal price for the following year before purchasing hosting.

Configuration Recommendations: CPU 2-4 cores, Memory 4-8 GB, Hard disk space 100GB-300GB. If you want to learn more about hosting purchase and usage tutorials, you can read “Introduction to Hostinger Servers.”

Introduction to Hostinger

Hostinger: A globally renowned web hosting service provider known for its affordable prices. Since its establishment in 2004, Hostinger has provided website building solutions, including domain registration, shared hosting, and cloud servers, for individual developers and startups.

Most foreign hosting service providers offer WordPress hosting with a built-in backend management panel. Follow the instructions on the welcome page: fill in the basic website information, website administrator account and password, and click the “Submit” button to easily install the WordPress system.

After creation, you can also manage the site. For example, set up a free SSL security certificate, domain name resolution, etc. Even without programming or server management skills, you can easily create a WordPress website, truly achieving website building from 0 to 1. It is strongly recommended that beginners “purchase shared hosting to build a WordPress website.”

Below, we will use two popular WordPress website building hosts, Hostinger and SiteGround, to install WordPress. You can compare them and see which method is more suitable for you.

Hostinger WordPress Website Building Process

First, create your first WordPress website. Click the “Add Website” button and select WordPress.

Important: It is strongly recommended to set a complex, strong password for the website to ensure that the password is not easily cracked when the website is attacked.

Expert Advice: If you already have some knowledge of WordPress themes, you can consider installing a blank website directly. Then, customize and add themes in the WordPress backend.

Hostinger will also prepare commonly used function plugins for our website. Like themes, it is not recommended to install them here. When the website needs this function, install it in the WordPress backend.

To learn more about using Hostinger hosting, click here to view.

WordPress Astra Theme Installation Process

For beginners who are using the WordPress theme for the first time, it is recommended to learn about Astra or Blocksy. These two themes are simple and easy to use. To learn more about Astra and Blocksy‘s free themes. Click Astra theme introduction, Blocksy theme introduction

After installing the Astra theme, you need to install the Spectra plugin, which can help us import the basic data provided by the Astra theme template.

After the installation is successful, click the “view your website” button, and you will find that a brand new website has been created.

WordPress Install Plugins

Click the plugin on the left sidebar to see the history of installed plugin information. Click Install New Plugin to view all plugins officially provided by WordPress. Good plugins are paid for.

What is Elementor?

Elementor is the most intuitive and easy-to-use page builder we have ever used: with just a few drag-and-drop steps, you can instantly create beautiful layouts. It is powerful and covers every detail from header to footer, and has a rich third-party extension ecosystem, which can meet almost all website needs. If you are choosing a website building plugin, Elementor is undoubtedly the most efficient and flexible choice.

Elementor Basic Usage Tutorial

When creating a new page or article, select the Use Elementor button to edit with the Elementor plugin.

This is the free version of the editing area display. You can drag the layout on the left and the modules in the basic area to the page area on the right. First put the container of the layout, and then put the basic title, picture, text editor, etc. The lower left corner is the tool area: layout display, historical modification version, preview, and release.

The red block on the left can be clicked and dragged to the display area in the middle. It is recommended to turn on the layout navigation of the tool, so that you can see the structure of the current page more clearly.

If the editing is completed, you can click the small eye to preview. Publish the arrow on the right: save as draft, save as.

Elementor VS Elmentor PRO Difference

More Commonly Used WordPress Plugin Recommendations

• Elementor: The best tool for page/article editing.
• Elementor Pro: PRO version of the best tool for page/article editing.
• Rank Math SEO: An SEO tool that rivals Yoast and is essential for Google SEO promotion.
• Spider Analyser: A crawler monitoring tool developed by a domestic company.
• WP Mail SMTP: A must-have tool for paid emails. You need to set up the SMTP communication protocol to send emails.
• WPForms: The form on the Contact Us page can be used to set the field content according to your needs.
• WP Rocket: Website performance optimization tool, compress CSS, JS, Html, page cache, and speed up website access.
• EWWW Image Optimizer: Image optimization tool, a must-have for lazy people.
• WPCode: Add plugins for your Baidu, Google and other detection codes.

Friendly reminder: Only one type of plugin of the same type needs to be installed, otherwise compatibility errors will occur, and too many plugins will slow down your website.

Introduction to Rank Math Plugin

A must-have plugin for foreign trade websites. The main function is to allow your website to be indexed by Google and get rankings.

Spider Analyser Crawler Plugin

It starts immediately after installation and will monitor the crawling status of spiders in real time. Monitor which crawlers are coming to your website and 404 error pages on the website.

WP Mail SMTP Mail Protocol Plugin

The free version of the WP Mail SMTP plugin basically meets functional requirements and there is no need to purchase the advanced version.

WPForms Plugin

The inquiry form is a must-have plugin for foreign trade websites. It can collect the content of users’ messages on the website and send emails to the administrator’s mailbox in real time.

WP Rocket Website Speed Optimization Plugin

Website speed is slow? WP Rocket helps you solve it. It can speed up your website a lot.

EWWW Image Optimizer Image Optimization Plugin

Ewww is a lazy image compression plugin tool.

Key Takeaways

1. How long does it take to learn website building on your own?

With programming experience: For example, PHP, MySQL, server knowledge, front-end page production. The learning speed will be from 0 to familiar in one month. 3 to proficient, 1-3 years to master. Of course, the premise is that there are constant projects to do.

No programming experience: 3 months to become familiar, 1-3 years to become proficient.

2. How many plugins should be installed?

Only install 1 type of plugin of the same type. If the function plugins have the same function, compatibility problems may occur, affecting server performance.

The total number of plugins should not exceed 20. Too many installations will consume server performance.

3. How long does it generally take to make a website?

Simple display websites take about 5 – 10 days; medium-sized websites such as foreign trade websites and e-commerce websites usually take 2 – 4 weeks; if customized functions are involved, it will take longer.

4. How much does it cost to make a website?

The cost depends on the type of website. It costs less to build a website with templates (hundreds to thousands of dollars), while custom development by a professional company may cost thousands to tens of thousands of dollars.

5. Can I update the content myself after the website is made?

Yes, website building systems such as WordPress provide a visual backend that supports code-free modification of pages, publishing articles, uploading pictures, etc.

6. What should I pay attention to before the website goes live?

You need to ensure that the content is complete and free of typos, the website loads quickly, is adapted to mobile devices, the page layout is beautiful, the basic SEO settings are in place, and there are no errors such as 404 links.

7. Does the website need to be maintained after it goes live?

Need. Including regular backups, security updates, content optimization, plugin upgrades, monitoring access, etc. to ensure the long-term stable operation of the website.

8. Is it better to choose WordPress or custom development website?

If you are looking for fast launch, rich functions, and strong scalability, it is recommended to use WordPress; if you have complex functional requirements and unique designs, you may need custom development.

Finally, to learn more about WordPress website building knowledge, you can visit our WordPress website building tutorial website.

FAQ

Q: How long does it take to learn WordPress?

A: With basic web development knowledge, you can get familiar with WordPress in a week. Without prior experience, expect a few weeks to become comfortable.

Q: Is WordPress free?

A: The WordPress software itself is free. However, you’ll need to pay for a domain name and hosting.

Q: Do I need to know coding to use WordPress?

A: No, WordPress is designed to be user-friendly for non-coders. However, coding knowledge can be helpful for advanced customization.

Q: Can I use WordPress for an e-commerce store?

A: Yes, WordPress can be used to create an e-commerce store using plugins like WooCommerce.

Q: How do I choose a