Free Design learning guide

How to Build a WordPress Website from Scratch

Name: How to Build a WordPress Website from Scratch
Author: Tanmay Kalbande

How to Build a WordPress Website from Scratch — a free beginner-level guide covering how to build a wordpress website from scratch. Learn with clear...

106 min read11 chaptersbeginner

1. Introduction to WordPress and the Web

The Web Is Just a Conversation Imagine you are sitting in a coffee shop. You want to read the morning news. You pull out your phone, type in a website address, and within seconds, the latest headlines are glowing on your screen. To you, it feels like magic. But what actually happened in those two seconds was a rapid, highly organized conversation between your phone and a computer potentially thousands of miles away. Understanding how to build a website starts with understanding that conversation. You cannot build a house if you don't understand how the foundation and the delivery trucks work. In the same way, before we install WordPress, we need to look at the basic mechanics of the internet. How the Web Actually Works When you type a website address into your browser (like Chrome, Safari, or Edge), your device is acting as a client. A client is simply a device that is asking for information. The computer that holds the website you want to look at is called a server. A server is just a specialized computer stored somewhere safe, turned on 24 hours a day, waiting to deliver information when asked. Here is the step-by-step conversation that happens when you visit a website: 1. The Request: You type a website address into your browser. Your phone sends a message over the internet saying, "Please send me the files for this website." 2. The Lookup: Before the message can reach the server, a massive digital phonebook called the Domain Name System (DNS) translates the human-readable website address into a numeric address called an IP address. Every device on the internet has an IP address. 3. The Delivery: The server receives your request, gathers the necessary files, and sends them back to your phone. 4. The Display: Your browser receives the files, reads the code inside them, and assembles the text, images, and layout into the beautiful webpage you see on your screen. Every website on the internet is made up of files. In the early days of the web, if you wanted to build a website, you had to write these files entirely by hand using programming languages like HTML and CSS. Every time you wanted to add a new page, change a word, or upload a photo, you had to open the code, make the changes, and upload the new files to the server. It was tedious, slow, and required a lot of technical skill. Enter the CMS Eventually, developers realized there had to be a better way. Instead of writing code for every single page, they created software that could manage the files for them. This software is called a Content Management System (CMS). A CMS …

2. Setting Up Domains and Hosting

The Digital Real Estate Analogy Imagine you are opening a physical storefront. Before you can hang a sign, paint the walls, or arrange your products on shelves, you need two things: a piece of land to build on, and a street address so customers can find you. In the previous chapter, we explored how the web works. We looked at "The Lookup," where the Domain Name System (DNS) translates a human-friendly web address into a computer-friendly IP address. We also discussed the server, the powerful computer that stores your website files and sends them to a client (your visitor's browser) during "The Delivery." Now, it is time to acquire those two essential pieces for your WordPress website. Building a website requires claiming your digital street address (your domain) and renting the digital land where your website's files will live (your hosting). While you can buy these two elements separately, many beginners buy them together. By the end of this chapter, you will have secured both, connected them, and established the literal foundation of your website. Understanding Domains: Your Digital Address A domain name is the text that a user types into their browser to find your website—like mayasbakery.com. In our physical analogy, this is your street address. If you didn't have a domain name, people would have to memorize a long string of numbers (your IP address) to visit your site. The domain name gives your site a memorable, brandable identity. Anatomy of a Domain Name Let's break down a domain name using the example from our first chapter, mayasbakery.com: Top-Level Domain (TLD): This is the part at the very end, like .com, .org, or .net. The .com TLD is the most recognized and generally recommended for businesses, but there are hundreds of others, including .store, .bakery, or country-specific ones like .co.uk. Second-Level Domain (SLD): This is the main part of the name, directly to the left of the dot. In mayasbakery.com, the SLD is mayasbakery. This is the part you get to creatively choose and register. Choosing the Right Domain Name Your domain name is a major part of your brand identity. A good domain is easy to remember, simple to spell, and clearly connected to what you do. If you are starting a personal blog, you might use your own name. If you are starting a business, you will likely use the business name. Here are a few practical rules to follow when brainstorming: 1. Keep it short: Long domains are easily mistyped. Aim for 2-3 words at most. 2. Avoid numbers and hyphens: People often forget them or don't know where to put them. If you say "bake-five-bakery.com" out loud, people might type "bake5bakery.com" or "bake5-bakery.com". 3. …

3. Installing WordPress on Your Server

The Bridge Between Server and Software In Chapter 1, we compared your website to a physical bakery. In Chapter 2, you signed the lease on the land (your hosting plan) and registered the street address (your domain). Right now, you have a perfectly good plot of digital land, but it is completely empty. If a visitor types your domain into their browser, the server will respond, but it has nothing to deliver. To build your website, you need to install the actual software that will manage your content. This is your Content Management System (CMS). Because WordPress is open-source, the software itself is free. However, to make it work, the files need to be copied onto your hosting account’s server and connected to a database. In the early days of the web, installing a CMS required manually uploading thousands of files and writing configuration code. Today, the process is almost entirely automated. Let’s look at how this works by returning to a scenario from Chapter 1. Maya’s Bakery: Laying the Foundation Maya has successfully purchased her domain (mayasbakery.com) and set up her hosting account. Her goal is to start adding her menu and photos of her pastries. Before she can do any of that, she needs to install WordPress. She logs into her hosting account’s control panel. Because she chose a reputable host, she finds a tool designed specifically to install WordPress with just a few clicks. She clicks "Install," fills in a few basic details, and within a few minutes, the software is live on her server. She is now ready to log in and start building. Using a Hosting Auto-Installer A hosting auto-installer is a script provided by your hosting company that automates the process of setting up web applications like WordPress. Instead of you manually handling file transfers and database setups, the auto-installer does the heavy lifting in the background. Depending on your hosting provider, the auto-installer might go by a specific brand name. The most common is Softaculous, but others include WP Toolkit (used by cPanel hosts) or Mojo Marketplace. Regardless of the name, they all function in a very similar way. Step-by-Step: Installing WordPress While every hosting provider’s dashboard looks slightly different, the fundamental steps to install WordPress remain the same. If your host uses a customized interface (like SiteGround, Hostinger, or Bluehost), you will likely see a prominent button asking if you want to "Create a new site" or "Install WordPress." Here is the general process you will follow: 1. Log into your hosting account. This is the main dashboard you access right after logging into your host's website, not your WordPress site itself. 2. Locate the auto-installer. Look for a section labeled "Website," …

4. Navigating the WordPress Dashboard

Stepping Into the Control Room Imagine walking into the kitchen of a brand-new restaurant. The ovens are installed, the refrigerators are plugged in, and the counters are gleaming. But until you learn where the knives are stored, how to turn on the industrial range, and how to organize your pantry, you cannot cook a single meal. In the previous chapters, you secured your domain, set up your hosting account, and successfully installed WordPress on your server. You have built the kitchen. Now, it is time to learn how to use it. When you installed WordPress, it automatically generated a hidden, secure area on your server known as the Admin Area (also called the Admin Dashboard or WP Admin). While your live website is what the public sees when they type your domain into their browser, the Admin Area is strictly for you. It is the control room where you will write content, change your site's appearance, and manage how your website operates. To access this control room, you simply add /wp-admin to the end of your domain name (for example, www.yourdomain.com/wp-admin) and press Enter. After logging in with the credentials you created during the installation process, you will be greeted by the WordPress Dashboard. Touring the Admin Sidebar The first thing you will notice inside the Admin Area is a vertical menu running down the left side of your screen. This is the Admin Sidebar. It is your primary navigation tool, housing every feature you need to run your website. Because you are just starting out, we will focus on the sections that matter most to you right now, saving the more complex tools for later modules. The Dashboard Home Screen At the very top of the sidebar is the Dashboard tab. Clicking this takes you to the home screen of your Admin Area. This screen acts as a mission control center. It provides a quick overview of your site, tells you how many posts and pages you have, and displays recent activity. It also includes a "At a Glance" widget that shows you if search engines are discouraged from indexing your site—a crucial detail to check before you launch. Posts and Pages These two tabs are where the vast majority of your content creation will happen. Posts are used for dynamic content, most commonly blog articles. They are typically displayed in reverse chronological order on your website. Pages are used for static, timeless content. Think of your "About Us" page or your "Contact" page. (Note: We will dive deep into creating content with the Block Editor in Module 6. For now, just know these tabs exist). Appearance The Appearance tab is where you control the visual design of your …

5. Choosing and Customizing Themes

The Paint, Layout, and Furniture of Your Website When you installed WordPress on your server in Chapter 3, you built the foundation and framing of a house. The WordPress software is the underlying structure—the plumbing, the electrical wiring, and the load-bearing walls. But right now, your website probably looks like a bare, undecorated room. It has a roof, but no personality. A theme is a collection of files that dictates the visual design of your WordPress website. It controls the colors, the fonts, the layout, and the overall style. If WordPress is your Content Management System (CMS), the theme is the interior designer. It takes your raw content—your text and images—and presents it to the world in a specific, stylized way. The beauty of WordPress being open-source is that anyone can build a theme. This means there are thousands of options available, ranging from simple, minimalist blog layouts to complex, multi-page corporate designs. Before you start creating content, choosing a theme is the most impactful decision you will make regarding your site's appearance. Let’s look at how themes are categorized so you can make an informed choice. Free, Premium, and Custom Themes As you browse for themes, you will quickly notice they fall into three distinct categories. Understanding the differences will help you decide where to invest your time and money. Free Themes Free themes are exactly what they sound like: they cost nothing to download and use. The official WordPress Theme Directory is the safest and most reliable place to find free themes. Every theme listed there has been reviewed and approved by the WordPress community to ensure it meets basic coding standards and doesn't contain malicious software. Pros: They are completely free, easy to install, and often built by reputable developers who maintain them regularly. Cons: They usually offer fewer customization options. Because they are free, they might also be used by thousands of other websites, meaning your site might not look entirely unique. Best for: Beginners who are just learning the ropes, personal blogs, or simple portfolio sites. Premium Themes Premium themes are themes you pay for. They are usually sold by individual developers or theme shops (like StudioPress, Elegant Themes, or ThemeForest). Prices typically range from $30 to $100 for a one-time purchase, though some operate on a yearly subscription model. Pros: They often come with advanced customization options, built-in features (like page builders or custom sliders), dedicated customer support, and more unique designs. Cons: They cost money, and the quality can vary wildly depending on the developer. Some premium themes are packed with so many features that they can slow down your website. Best for: Small businesses, professional portfolios, and users who want a highly …

6. Creating Content with the Block Editor

Imagine walking into a restaurant where the menu is just a giant, undifferentiated wall of text. No headings, no sections, no pictures—just thousands of words describing the food. You’d likely turn around and walk out. A website is no different. If your visitors arrive to find unbroken walls of text, they will leave. To keep them engaged, your content needs structure: clear headings to guide the eye, images to provide context, and paragraphs spaced for readability. In previous chapters, we set up your hosting, installed WordPress, and chose a theme. Now, it is time to actually build your website. To do this, we will use the WordPress Block Editor, a tool designed to help you construct your pages and posts piece by piece—just like snapping together Lego bricks. Posts vs. Pages: Understanding the Difference Before we start assembling content, you need to know where that content is going to live. WordPress divides content into two primary types: Posts and Pages. Understanding the distinction between them is the foundation of organizing your website. What is a Post? A Post is dynamic, time-sensitive content. Think of posts as the articles, news updates, or journal entries on your website. They are displayed in reverse chronological order on your website (meaning the newest post appears at the top). They automatically appear on your blog page (if your theme has one). They are usually tagged with dates and categories to help visitors find related content. Example: If you run a bakery (like Maya's Bakery from our earlier scenario), you might write a post announcing a new seasonal pumpkin spice loaf. After a few months, this post becomes older and moves further down the page as you add new updates. What is a Page? A Page is static, timeless content. Pages form the permanent structural backbone of your website. They do not have publication dates, and they do not automatically appear in a feed. They are usually accessed via a navigation menu (which we will build in a later chapter). Example: Your "About Us" page, your "Contact" page, or your "Menu" page. These contain information that remains largely the same over time. The Rule of Thumb: If the content is an update, an article, or news, make it a Post. If the content is a permanent feature of your business or site, make it a Page. Introducing the Block Editor (Gutenberg) In earlier chapters, we discussed how WordPress is a Content Management System (CMS). To manage that content, WordPress uses an interface called the Block Editor, internally codenamed Gutenberg. In the past, WordPress used a single text box that behaved much like Microsoft Word. This made it difficult to create complex layouts. The Block Editor completely …

7. Managing Media and Images

Imagine visiting a website to buy a handmade leather wallet, but instead of seeing a clear, crisp photo of the product, you are staring at a block of broken text or a blurry, postage-stamp-sized image that takes thirty seconds to load. You would likely click the "back" button and find another store. Visual content is the heartbeat of web design. It breaks up walls of text, communicates your brand's identity, and guides your visitors' eyes. But images are also heavy files. If they aren't managed correctly, they can drag your website's performance down to a crawl, frustrating your visitors and hurting your search engine rankings. In previous chapters, we set up your domain and hosting, installed WordPress, chose a theme, and learned to build content using the Block Editor. Now, it is time to populate your website with visuals. The WordPress Media Library is your central hub for storing, editing, and organizing all the images and documents that make your website uniquely yours. The WordPress Media Library: Your Digital Filing Cabinet The Media Library is the built-in tool within your WordPress dashboard that stores every image, graphic, video, and document you upload to your website. Think of it as a digital filing cabinet. Whenever you insert an image into a post or page, WordPress pulls that image directly from this library. Even if you delete the page or post where an image was used, the image itself remains safely stored in the Media Library until you specifically delete it. This means you can reuse the same image across multiple pages without having to upload it again. Accessing the Media Library To view your Media Library, log in to your WordPress dashboard and click on the Media tab in the left-hand sidebar. This opens the main library view, displaying your files in a grid format. You can toggle to a list view by clicking the "List View" icon at the top left of the screen if you prefer to see more details, like the file dimensions and upload dates, at a glance. Uploading Files to Your Website Adding files to your Media Library is a straightforward process, designed to be as simple as dragging and dropping a file into an email. WordPress accepts a wide variety of file types, though the most common are images (JPG, PNG, WebP, GIF) and documents (PDF). There are two primary ways to upload media: directly through the Media Library, or from within the Block Editor while you are writing a post or page. Method 1: Uploading via the Media Library If you want to upload a batch of files before you start building pages, this is the best method. 1. Navigate to Media Add New …

8. Extending Functionality with Plugins

The Engine vs. The Accessories Think about a brand-new car straight off the factory floor. It has an engine, a steering wheel, four doors, and a set of tires. It will absolutely get you from point A to point B. But what if you want to listen to the radio? What if you need a roof rack to carry your skis? What if you live in a snowy climate and require heated seats? To get those features, you don't hire a mechanic to dismantle the engine and rebuild the car from scratch. Instead, you buy accessories and add them to the existing vehicle. In the WordPress ecosystem, your theme (which we covered in Chapter 5) is the paint job, the body shape, and the leather seats. It dictates how your website looks. But plugins are the radio, the roof rack, and the heated seats. They are the accessories that add new features and capabilities to your website. A fresh WordPress installation is highly capable—you can create posts and pages, upload images, and format your text using the Block Editor. But if you want to add a contact form, optimize your site for search engines, or automatically back up your files, you will need plugins. What Exactly Is a Plugin? At its core, a plugin is a piece of software containing a group of functions that can be added to a WordPress website to extend functionality or add new features. Because WordPress is an open-source Content Management System (CMS), its core code is available for anyone to view and modify. However, directly editing the core WordPress code is a bad idea. The moment you update WordPress to a newer version (which happens frequently for security and new features), your custom code changes would be completely overwritten and erased. Plugins solve this problem. They operate separately from the core WordPress software. They communicate with WordPress using a system of "hooks." How Plugins Interact with WordPress You don't need to learn how to code to use plugins, but understanding the basic concept of how they interact with your site is helpful. WordPress is built with thousands of "hooks"—specific points in the code where plugins can attach themselves. Think of these hooks like electrical outlets in a house. When you write a new blog post and hit "Publish," WordPress runs through a sequence of steps. At each step, there is an "outlet." A plugin can plug into an outlet before the post is published to check for spelling errors. A plugin can plug into an outlet after the post is published to automatically send an email to your subscribers. A plugin can plug into an outlet when a visitor loads your site to display …

9. Building Menus and Navigation

The Map of Your Website Imagine walking into a massive department store for the first time. You are looking for a specific brand of coffee maker, but there are no signs, no directory, and no logical arrangement to the aisles. You wander aimlessly, growing frustrated, and eventually leave without buying anything. If your website visitors cannot figure out where to go within the first few seconds of arriving, they will do exactly the same thing. They will hit the "back" button and visit a competitor. Navigation is the map of your website. It tells visitors where they are, where they can go, and how to get back to where they started. In WordPress, site navigation is primarily handled through two features: Menus and Widgets. Menus generally provide the primary structural links to your most important pages and categories. Widgets, on the other hand, allow you to add smaller bits of navigation and content to the sidebars and footers of your site. Together, they create a seamless experience for your visitors. Understanding WordPress Menus In everyday life, a menu is a list of options. A restaurant menu lists the food you can order. A computer menu lists the actions you can take. In WordPress, a Menu is a specific, customizable list of links. These links can point to your Pages (like your "About" or "Contact" pages), your Categories (groupings of your blog posts), or even completely external websites. When you create a Menu, you are building a list. But a list sitting in the background doesn't do anything on its own. To make it visible to your visitors, you must assign that Menu to a Menu Location. What is a Menu Location? Think of a Menu as a piece of paper with a list of directions written on it. Think of a Menu Location as an empty picture frame mounted on a specific wall in your house. Your WordPress Theme (which we covered in Chapter 5) dictates how many "frames" are available on your website. Most themes come with at least two or three standard Menu Locations: Primary Menu: Usually located at the very top of the website, horizontally across the screen. This is the main navigation bar. Footer Menu: Located at the very bottom of the website. Often used for secondary links like Privacy Policy or Terms of Service. Mobile Menu: A specific location used when someone visits your site on a smartphone. This usually collapses the primary menu into a "hamburger" icon (three horizontal lines) to save screen space. When you assign your created Menu to a Menu Location, you are essentially sliding your list of directions into the theme’s empty frame, making it visible to the world. Creating …

10. Essential Site Maintenance and Security

Imagine waking up, pouring your coffee, and typing your website’s address into your browser—only to find a blank page, a scary warning screen, or a completely different website plastered with spam links. For many new website owners, this nightmare becomes a reality simply because they treated their website as a "set it and forget it" project. Because WordPress is an open-source Content Management System (CMS), it is constantly being improved by developers worldwide. While this is one of its greatest strengths, it also means that the software, along with your themes and plugins, requires ongoing care to stay secure and functional. Just like a car needs regular oil changes and tire rotations to run safely, your website requires basic maintenance to protect it from threats and keep it running smoothly. The First Line of Defense: User Accounts and Roles When you first installed WordPress on your server, you created an administrator account. As you build your site, you might eventually invite others to help you. Maybe you want a friend to help you upload media, or perhaps you want to hire a writer to draft blog posts using the Block Editor. When you add new users, WordPress assigns them specific user roles. A user role dictates exactly what a person can and cannot do behind the scenes of your website. If you give everyone full administrative access, you are unnecessarily increasing the risk of accidental damage or a security breach. Understanding the Default User Roles WordPress comes with five default user roles. It is crucial to understand the differences so you can grant the appropriate level of access: - Administrator: Has complete control over the website. An administrator can change settings, install and delete plugins and themes, publish content, and add or remove other users. You should reserve this role strictly for the site owner and highly trusted technical partners. - Editor: Can write, edit, and publish their own posts, as well as posts created by other users. They can also manage categories and moderate comments. They cannot change site settings or install plugins. - Author: Can write, edit, and publish their own posts, but cannot edit or publish the posts of others. - Contributor: Can write and edit their own posts, but cannot publish them. Their posts must be reviewed and published by an Editor or Administrator. This is ideal for guest writers. - Subscriber: Can only read posts and manage their own user profile. This role is generally used for sites that require a user to log in to view content or leave comments. The Principle of Least Privilege: When adding users, always follow the principle of least privilege. Give a user the minimum level of access they …

11. Preparing for Launch

Imagine opening the doors to a brand-new brick-and-mortar store. You’ve arranged the shelves, hired the staff, and stocked the inventory. But just before you flip the sign from "Closed" to "Open," you need to make sure the front steps aren't icy, the lights actually turn on, and the cash register works. Launching a website requires the exact same final once-over. You have spent the last ten modules setting up your domain and hosting, installing WordPress, choosing a theme, creating content, and securing your site. Now, it is time to perform the final checks and configurations to make your website ready for public viewing. Configuring SEO-Friendly URLs When you first install WordPress, the system uses a default structure for your web addresses that looks something like this: yourdomain.com/?p=123. This is called a permalink, which is simply the permanent, full web address for a specific page or post on your site. While the default permalink works perfectly well from a technical standpoint, it is terrible for two reasons: it means nothing to human visitors, and it is completely ignored by search engines like Google. Search Engine Optimization (SEO) is the practice of making your website more visible to people searching for your products, services, or content. One of the most basic elements of SEO is having a web address that actually uses words rather than random numbers. Changing Your Permalink Structure To fix this, you need to tell WordPress to use a structure that includes the title of your page or post. 1. Log in to your WordPress Dashboard. 2. In the left-hand menu, hover over Settings and click on Permalinks. 3. You will see a list of Common Settings. The default is usually set to Plain. 4. Select the option labeled Post name. 5. Scroll to the bottom of the screen and click Save Changes. By selecting "Post name," your web addresses will automatically change to reflect the title of your content. For example, instead of yourdomain.com/?p=123, a page titled "About Our Bakery" will become yourdomain.com/about-our-bakery. This simple change makes your URLs memorable for visitors and highly attractive to search engines, which will read the words in the URL to figure out what your page is about. The Final Dress Rehearsal: Testing Functionality Before you invite the world to view your site, you must test how it behaves in the real world. A website might look perfect on your laptop while you are logged into the dashboard, but completely break apart on a mobile phone or in a different web browser. Testing Across Devices The client (the web browser on your computer or phone) interprets the code sent by the server and displays it as a visually formatted website. However, not …