Hi. By the end of this tutorial, you’ll know how to build and customize a variety of websites using WordPress. Whether you’re a complete beginner or looking to refine your skills, this step-by-step guide will walk you through everything you need to know—from initial setup to advanced customization. Best of all, you won’t need to know HTML, CSS, or JavaScript; WordPress makes it all possible graphically.
The current date is March 14, 2025, and this guide is based on the latest WordPress features available at this time.
What You’ll Learn
In this course, you’ll discover how to:
- Set up a domain name, hosting, and WordPress installation.
- Customize your site for different purposes (e.g., blog, e-commerce, or local business).
- Design your website with your preferred look, including images and colors.
- Manage content, plugins, and themes to suit your needs.
WordPress powers 40% of all websites globally, and it’s free to use. Let’s get started!
Step 1: Initial Setup
Understanding Domains and Hosting
- Domain Name: This is the address people type into their browser to visit your site (e.g., youtube.com, freecodecamp.org). It typically costs $10–$20 per year.
- Hosting: This is where your website’s files and data are stored. A hosting provider manages the servers that deliver your site to visitors. Hosting usually costs around $5 per month.
For simplicity, we’ll use Hostinger to get both a domain and hosting. They’re affordable, reliable, and make WordPress setup easy. (Note: Hostinger provided freeCodeCamp a grant for this course, but the steps apply to any hosting provider.)
Getting Started with Hostinger
- Visit Hostinger: Go to hostinger.com (use the link in the description for a discount).
- Choose a Plan:
- Single Shared Hosting: $0.99/month (renews at $2.99/month) + $8.99 domain (if not included).
- Premium Shared Hosting: $2.19/month (renews at $4.99/month) with a free domain.
- For beginners, the 12-month plan strikes a good balance—avoid committing to 48 months unless you’re certain.
- Sign Up: Enter your payment details and create an account.
- Claim or Buy a Domain: If your plan includes a free domain, claim it (e.g., robotoysreview.com). Otherwise, purchase one during setup.
Using an Existing Domain
If you bought a domain elsewhere (e.g., Google Domains), point it to Hostinger:
- Log in to your domain registrar.
- Update the Name Servers to:
- ns1.dns-parking.com
- ns2.dns-parking.com
- Save changes (this may take up to 48 hours to propagate).
Installing WordPress
- Access the Dashboard: Log in to Hostinger and go to your hosting dashboard.
- Select Your Plan: Click “Setup” under your hosting plan.
- Choose a Domain: Use your free domain, buy one, or link an existing one.
- Install WordPress:
- Click “Auto Installer” > “WordPress.”
- Enter a username (e.g., “beau”), password, and site title (e.g., “Robot Family Reviews”).
- Click “Install.”
- Verify: Visit your domain (e.g., robotfamilyreviews.com) to see the default WordPress page.
Step 2: Exploring WordPress Basics
What is WordPress?
WordPress is a Content Management System (CMS) that simplifies website creation and management. You don’t need coding skills—everything is handled through a user-friendly interface.
Logging In
- Go to yourdomain.com/wp-admin (e.g., robotfamilyreviews.com/wp-admin).
- Log in with your username and password.
The Dashboard
The WordPress dashboard is your control center. Here, you can:
- Check for updates (Dashboard > Updates).
- Add users (Users > Add New).
- Change passwords (Users > Edit).
Step 3: Configuring Your Site
Setting Permalinks
Permalinks define your page URLs. For clean, readable links:
- Go to Settings > Permalinks.
- Select “Post Name” (e.g., yourdomain.com/sample-post).
- Save changes.
Choosing a Theme
Themes control your site’s appearance. We’ll use OceanWP, a popular, customizable, and free theme:
- Go to Appearance > Themes > Add New.
- Search for “OceanWP” > Install > Activate.
- Run the setup wizard (optional) and pick a demo (e.g., “Lawyer”) to start with.
Installing Plugins
Plugins add functionality. Install these essentials:
- Ocean Extra: Enhances OceanWP (Plugins > Add New > Search “Ocean Extra” > Install > Activate).
- Elementor: A drag-and-drop page builder (Plugins > Add New > Search “Elementor” > Install > Activate).
- All-in-One WP Migration: For backups (Plugins > Add New > Search “All-in-One WP Migration” > Install > Activate).
Delete default plugins you don’t need (Plugins > Select All > Deactivate > Delete).
Step 4: Customizing Your Site
Setting Up Backups
- Go to All-in-One WP Migration > Export > Export to File > Download (save to your computer).
- Or use Backups tab to store backups on the server automatically.
General Customization
- Go to your site (e.g., robotfamilyreviews.com) and click Customize in the top bar.
- Site Identity:
- Title: “Robot Family Reviews.”
- Tagline: “Reviews of Robot Toys.”
- Logo:
- Visit logomaker.com, search “robot,” customize, and download a free logo.
- Upload via Customize > Header > Logo.
- Colors:
- Customize > General Options > General Styling.
- Set primary color (e.g., #0055A5) and hover color.
- Favicon: Customize > Site Identity > Select Site Icon > Upload.
Editing Pages with Elementor
- Go to a page (e.g., Home) and click Edit with Elementor.
- Drag elements (e.g., image, text, video) from the left panel.
- Edit content:
- Change text (e.g., “Read Amazing Robot Reviews”).
- Update colors via Style tab (use global colors for consistency).
- Add links (e.g., /contact).
- Add images from pexels.com or unsplash.com (search “robot”).
- Save changes with Update.
Managing Pages and Menus
- Delete Pages: Dashboard > Pages > Select unwanted pages (e.g., Attorneys) > Move to Trash.
- Add Pages: Pages > Add New > Title (e.g., “Programming Lessons”) > Template: Elementor Full Width > Edit with Elementor.
- Update Menu: Appearance > Menus > Main Menu > Add/Remove items (e.g., “Reviews,” “Programming Lessons”) > Save.
Blog Setup (Reviews Page)
- Set Blog as Homepage (optional): Settings > Reading > Your Latest Posts.
- Customize Layout: Appearance > Customize > Blog > Blog Entries > Choose thumbnail style, sidebar position.
- Add Posts: Posts > Add New > Title (e.g., “Cosmo Robot Review”) > Add text, gallery, featured image > Publish.
- Remove Sample Content: Posts > Select demo posts > Move to Trash.
Contact Page
- Edit with Elementor.
- Update map (Style > Location: “Michigan”).
- Add a form: Drag WPForms element > Create Simple Contact Form > Customize fields (e.g., Subject dropdown) > Save.
- Confirm email settings (Settings > General > Email Address).
Footer and Header
- Top Bar: Customize > Top Bar > Content (e.g., “Check Out Our New Programming Lessons”) > Enable social icons (Twitter, YouTube).
- Header: Customize > Header > Adjust height, colors.
- Footer Widgets: Customize > Footer Widgets > Update About Us, Contact Info > Remove unneeded sections.
- Footer Bottom: Customize > Footer Bottom > Update copyright (e.g., “Copyright 2021”).
- Scroll-to-Top Button: General Options > Scroll to Top > Disable or customize.
Final Touches
- Preview: Regularly check your site (Visit Site) to ensure changes look good.
- CSS Tweaks: Customize > Custom CSS/JS > Adjust specific elements (e.g., .button-footer { color: #0055A5; }).
- Test: Submit a contact form to verify it emails correctly.
Conclusion
You now have the skills to create and customize a WordPress website tailored to your needs—whether it’s a blog, business site, or something else entirely. Experiment with themes, plugins, and Elementor to make it your own. Happy building!
WordPress Publishing Tips
- Gutenberg Editor: Add blocks for each section (Heading, Paragraph, Code, List, etc.).
- Custom HTML Block: Paste the full HTML version (available upon request) for a one-step solution.
- Plugins: Use SyntaxHighlighter Evolved for code snippets and Insert Headers and Footers for custom CSS.
Let me know if you need the full HTML version or further assistance!
