Welcome to my guide on WordPress Basics for Beginners! If you’re new to WordPress and looking to understand the essentials of building and managing a WordPress website, you’re in the right place.
*This article is tailored for beginners, offering simple steps to get started, without the need for advanced technical knowledge.
WordPress Basics for Beginners
First and foremost, it’s important to understand that WordPress.com and WordPress.org are two different platforms.
WordPress.com is a hosted service that handles most technical aspects, making it a good choice for those who prefer simplicity and convenience.
On the other hand, WordPress.org is self-hosted, giving you full control and customization over your website, but it requires you to manage your hosting and domain.
These two options allow users to choose a platform that best fits their needs, whether it’s ease of use or complete flexibility.
Understand the Basic Terminology
Domain 域名
A domain is your website’s name on the Internet (e.g., www.yoursite.com) that people type into their browsers to visit your site.
To register one, it usually cost around RM30 – RM150 per year.
You can easily register your domain at platforms like GoDaddy, Namecheap, Domain.com, and others.
Hosting
Hosting (存放空间) is the service that stores your website’s files, photos, images, videos, and content and makes them accessible online.
It’s like renting space on the Internet for your site to live.
A typical hosting plan costs around RM200–RM500++ and varies based on your needs and requirements.
Notable hosting service providers include Hostinger, HostGator, Bluehost, DreamHost, and others.
Server
A server is the physical computer or virtual system that powers your website, delivering its content to visitors whenever they access it. It’s the engine that keeps your site running.
Note: With WordPress.org, you need to set up your own domain and hosting, whereas with WordPress.com, you don’t need to, as it uses WordPress’s own hosting by default.
Setting up WordPress.org: An overview
Buy a hosting plan
Choose a hosting plan based on your website’s needs. The cost depends on features like storage size—note that e-commerce websites usually require larger storage for images and customer databases.
Choose your Domain Name
Generally, you’ll have three options:
- Register a new domain.
- Transfer your domain from another registrar.
- Use an existing domain and update the nameservers. Choose a Top-Level Domain (TLD) such as .com, .net, or .org, or opt for a country-specific domain (ccTLD) like .com.my in Malaysia.
Manage Hosting with Plesk
What is Plesk?
Plesk is a web hosting control panel that allows you to manage your hosting account efficiently. Once your hosting is activated, log in to the Plesk dashboard, click WordPress, and install WordPress with just a few clicks.
Set Up SSL/TLS
SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are protocols that secure the connection between your website and its visitors, ensuring data privacy and encryption.
To activate, go to the Plesk dashboard and click Get SSL/TLS Certificate to secure your site.
3 common types of websites
Landing Page
- A single-page website (no menu bar).
- Also known as a sales page or sales funnel.
- Purpose: Used for sales or appointment bookings.
Business/Corporate Website
- Can include multiple pages, typically: Home, About Us, Product/Services, and Contact Us.
- Purpose: To showcase the company’s brand and provide a means of contact.
E-commerce Website
- Includes order placement features and multiple pages.
- Features such as a shopping cart, payment gateway, and order management system.
- Purpose: For online shopping or bookings.
Before we dive in, let’s take a look at what you need to prepare before building your very first website.
List the following before building your first website:
Note that you can refer to a few of your competitors’ websites, research them, and benchmark the ones you feel are well-designed.
Website Style
Decide on the overall look and feel of your website.
Website Pages
Identify which pages your website needs (e.g., Home, About Us, Products & Services, Blog, News, Contact, etc).
Page Content
Plan the content and design for each banner and section on every page.
Logo
Ensure your website or company logo is ready.
Images
Always try to use your own photos; however, if you don’t have any yet, you can find free photos on platforms like Unsplash or Freepik. You can also search for open-source images on Google.
Theme Colors and Fonts
Choose your website’s color theme (search for hex codes or HTML color codes) and font type.
WordPress Theme
A WordPress theme is a pre-designed template that determines the overall look and layout of your website.
You can explore popular themes like Astra, Envato, ThemeForest and Divi, or use WordPress default themes such as Twenty Twenty-Four, Twenty Twenty-Three, or Twenty Twenty-Two by navigating to Appearance > Themes > Add New Themes in your WordPress dashboard.
Install a website builder tools
A website builder is a tool that allows you to design and customize your website without needing coding skills.
Unlike a WordPress theme, which provides a predefined layout and design, a website builder gives you drag-and-drop functionality to create fully customized pages.
You can install popular website builder plugins like Elementor by navigating to Plugins > Add New Plugin, then clicking Install and Activate.
About Plugins
Plugins are add-ons that extend the functionality of your WordPress website, allowing you to add features like contact forms, SEO tools, or e-commerce capabilities.
They are easy to install and can be managed directly from the WordPress dashboard under the Plugins section.
By default, you will have the following plugins installed:
Akismet Anti-Spam
This plugin helps filter and block spam comments on your website to maintain a clean and professional appearance.
Hello Dolly
A simple, lighthearted plugin that displays random lyrics from the song “Hello, Dolly!” in your WordPress dashboard.
You can delete this plugin as I don’t find it functional.
LiteSpeed Cache
This plugin improves your website’s performance by providing caching solutions and optimization tools to enhance loading speed.
Add, edit or remove a page
Go to Pages > All Pages, and by default, you will see two given pages:
- Sample Page
- Privacy Policy Page: This page outlines your website’s operations and explains how user data is collected, stored, and used. It also acts as a disclaimer to protect you in case someone misuses your website or creates a fraudulent copy, helping to prove your integrity.
To add a new page, go to Pages > Add New Page and start creating your first page.
Pro Tip:
To edit the URL link structure, go to Settings > Permalinks, choose the permalink structure you prefer, and click Save Changes.
Type of pages
Home Page:
The front page of your website. It introduces your brand and links to key sections like services, blog, or contact.Category Page:
A page that groups related posts or products together (e.g. all blog posts under “Marketing” or products under “Shoes”).Service/Product Page:
A detailed page showcasing one specific service or product. It usually includes descriptions, features, pricing, and a call-to-action (like “Buy Now” or “Contact Us”).
Editing Header & Footer
To customize your website’s header and footer, go to Appearance > Customize and select either Header Builder or Footer Builder.
Here’s what you can do:
- Add your logo and site icon (recommended size: 60 x 60).
- Write a copyright statement, typically in the footer section.
- Set your site title and tagline (if applicable).
- Add links to your social media profiles.
- Edit the menu bar and navigation.
- Include a “Contact Us” section.
Components of a webpage
Section
A section is the largest building block of a page, acting as a container that holds multiple columns or elements. It helps structure your content into distinct areas.
Sometimes, people also call it a “block”.
Column
A column divides a section vertically, allowing you to organize content side-by-side, such as text on one side and an image on the other.
Element
An element is an individual piece of content, such as a heading, text, image, button, icon, video, divider, Google Map, image carousel, testimonial, or progress bar, that you add within a column.
Flexbox
Flexbox (short for Flexible Box Layout) is a layout system designed to arrange items in a single row or column. It’s ideal for aligning and distributing space between items, like creating evenly spaced buttons or centering content.
Grid
Grid is a more advanced layout system that divides a webpage into rows and columns, making it perfect for creating complex designs with precise control over spacing and alignment of multiple elements.
Fundamental of website layout
A website layout is the arrangement of visual elements on a page to create a structured and user-friendly design.
Margin
Margin is the space outside an element, creating distance between the element and other elements on the page.
Padding
Padding is the space inside an element, adding distance between the content and the element’s border.
What's the difference between Margin and Padding
Margin is external spacing, while padding is internal spacing. Think of margin as the outer buffer and padding as the inner cushion.
Responsiveness
Website Responsiveness:
Note that you can edit the style of the mobile and tablet versions of your website without affecting the desktop version. However, if you edit the text, it will affect the desktop version as well.
Due to varying screen sizes across different devices, the layout needs to adapt to cater to these differences. Fortunately, WordPress handles responsiveness quite effectively.
The goal is to create a layout that is neat and easy to read for mobile and tablet versions.
2 Methods to Design Your Page (Without Coding)
Use Pre-Designed Templates
Choose from a wide range of pre-designed WordPress templates and customize them by replacing elements like images, videos, text, and more to fit your needs.
Build from Scratch with a Page Builder Plugin
Create your design section by section or block by block using popular page builder plugins like Elementor, Divi, or Beaver Builder.
Tips
You can always use free or paid templates to design a webpage faster. Another option is to use a popular plugin like ‘Starter Templates‘ to streamline the process.
Menu Bar
Edit your menu bar at: Appearance > Customize > Header Builder > Configure menu from here
Primary Menu
The main navigation menu, usually located at the top (header) of your website, guides users to key pages.
Secondary Menu
A supplementary menu often placed above or below the primary menu for less critical links.
Off-Canvas Menu
A hidden menu that slides out when triggered, is typically used for mobile and tablet navigation.
Logged-In Account Menu
A menu specifically visible to logged-in users, showing account-related options like profile, settings, or logout.
Footer Menu
A navigation menu located at the bottom of the website, usually for links like privacy policy, terms of service, or contact information.
Tips
Scroll to Top is a feature that adds a button on your website, allowing users to quickly return to the top of the page with a single click.
Customize > Global > Scroll to Top
Blog
Blog posts, article posts, or news updates are essential for sharing valuable insights and knowledge within your industry or area of expertise.
By regularly publishing fresh content on your website, you not only provide useful information to your audiences but also demonstrate that your site is actively maintained.
This builds trust with your visitors and keeps them engaged with your brand.
From an SEO perspective, consistent updates invite search engine crawlers to index your latest content, improving your site’s visibility and ranking.
Blog posts also create opportunities for backlinking, cover more keywords and inquiries, and establish your brand as a subject matter expert.
Sharing the latest industry news or updates strengthens your branding, positioning your business as a reliable and authoritative source in your field.