WordPress Web Design Tutorial | AnitaM

How to Design a Profitable Website with WordPres

[UPDATED: JUL 2022]

As a seasoned web designer and project manager with over 10+ years of experience, I have helped hundreds of clients go through the process of designing a website. And because, time and time again, people ask me the famous “how-to” questions, I decided to put together a WordPress Web Design Tutorial for all of you interested in the “do-it-yourself” approach. Keep in mind, starting a website can be a terrifying thought especially when you’re not techie. Don’t worry, you’re not alone. Together we’ll rock the web with your new WordPress website in no time one step at a time.

WordPress Tutorial | AnitaM

Over the years, I’ve realized that some clients find the process of launching a website (with or without WordPress) rather daunting or difficult. While others go into the web design process without clearly defining their objectives or goals, which limits how effective their website will be in the long run.

The good news is — building an attractive, user-friendly, and effective website isn’t all that difficult. With the right planning processes and technologies in place, you can create a website that meets and even exceeds your expectations. That means more traffic, more sales, and more profit for your business and brand. And that’s what really matters at the end of the day, right?

So, in a nutshell, I will give you the essential information and tools you need to plan, design and launch a website with WordPress — the world’s most popular content management system.

BONUS: Don’t have a website yet but ready to rock the web? Get the Website Roadmap for Solopreneurs & learn how to design a WordPress website in 7 easy steps. GET STARTED TODAY 🧑‍💻

Let’s start with an overview from start to finish of all the steps I’ll walk you through in this guide:

  • Finding and registering a domain name
  • Choosing the best WordPress web hosting
  • Setting up WordPress on your web host
  • Installing templates to change your site’s design
  • Creating pages in WordPress dashboard
  • Customizing WordPress with add-ons and extensions
  • Resources to learn WordPress and get support
  • Taking it further, building websites with more features

As you can see, this WordPress Web Design Tutorial, designed and tested to have your website ready in no time and with no tech skills, is ideal for hands-on entrepreneurs, small businesses and anyone who always wanted to design websites with WordPress.

Before I start the website design process, let’s cover some of the most commonly asked questions.

What do I need to build a website?

You’ll need the following three things to start your WordPress site:

  • A domain name – the name of your website such as youwebsite.com
  • WordPress hosting – online space where your website files are stored
  • Few hours of your undivided attention to get started with WordPress

How much does a WordPress website cost?

The answer to this question really depends on what kind of website you are trying to build. A self-hosted WordPress website can cost as low as $100 per year and can go as high as $30,000 per year. I always recommend to my clients to start small and then add more features to your website as your business grows. This way you will save money and minimize potential losses and avoiding overspending.

In this WordPress Web Design Tutorial, I’ll show you how to build a website for less than $100. And I will also show you how to take it further by adding more features to it in the future.

If you keen to learn the difference is between WordPress.com vs WordPress.org check out my in-depth article.

Website Roadmap for Solopreneurs | AnitaM

Which is the best website design platform?

There are many website design platforms available that will help you set up a website. But I recommend using self-hosted WordPress as your website platform. WordPress is the most popular website platform in the world. It powers nearly 38% of all websites on the internet.

Essentially, WordPress is free and comes with thousands of website designs and extensions. It is extremely flexible and works with almost every third-party tool and service available to website owners. I use WordPress with all my web design projects and also teach WordPress workshops.

How to Use The WordPress Web Design Tutorial?

This is a step-by-step WordPress Web Design Tutorial on how to create a website. I have divided it into different steps, and I’ll walk you through everything from start to finish. Just follow the instructions, and you’ll have a very professional looking website in the end. Have fun designing your WordPress website & remember, if you need help, you can contact me for more in-depth help or check out my WordPress Bootcamp – The Ultimate Guide to WordPress for Non-Tech Solopreneurs for additional assistance.

But, first of all, congratulations on taking your first step to designing your website with WordPress. Well, we’re not there yet, but at least you are ready to get started with this step by step WordPress guide. Now that deserves a round of applause, don’t you think? 

Here is the WordPress Web Design Tutorial Outline:
1: Setup Web Hosting & Domain
2: Install WordPress
3: Select Your Theme
4: Add Content to Your Site
5: Customize & Tweak Your Website
6: Install Plugins
7: Master WordPress
8: Expand your Web Presence

Step 1: Setup Web Hosting & Domain

One of the most common mistakes that beginners make is choosing the wrong website platform. Thankfully, you are here so you will not be making that mistake. For most users, a self-hosted WordPress.org site is the perfect solution. It comes with thousands of designs and add-ons which allow you to create any kind of website you can think of. WordPress is free to download and use it to build any kind of website without any restrictions.

If WordPress is free, then where is the cost coming from?

WordPress is free because you’ll have to arrange your own domain name and hosting, which costs money. A domain name is your website’s address on the internet. This is what your users will type in their browsers to reach your site (for example, yourwebsite.com or anitam.com).

Next, you’ll need website hosting. All websites on the internet need hosting. Imagine a closet space on the world wide web where you keep all the files and databases that make up your website. It’s your website’s home on the internet. Keep in mind, there are two types of hosting packages available for you to choose from – WordPress web hosting with One-Click installation or regular hosting where you will have to manually install WordPress via FTP. It’s little more labor intensive but has its perks like everything else in life.

A domain name typically costs $17.99/year or more and hosting costs start from $14.99/month. This is A LOT for most people who are just starting out. Thankfully, GoDaddy has extended a special offer for my readers: 

Basic Managed WordPress Web Hosting, Free Domain Name & Email Address for $12 a year!

So, please go ahead and purchase a domain name and hosting now.

First, you’ll need to go to the GoDaddy website and click on the ‘Get Started’ button.

Special Deal for WordPress Web Hosting with GoDaddy | AnitaM

This will prompt you to select a domain name for your website. Ideally, you should stick to a .com domain name. Make sure that it is related to your business, easy to pronounce and spell, and easy to remember.

Domain Selection GoDaddy | AnitaM

Once you have decided on your domain name, it will take you to your cart where you can create your account & checkout. You’ll be asked to provide your information such as name, address, email, etc.

GoDaddy Checkout Page | AnitaM

On the checkout page, you will also see optional extras that you can purchase. I generally don’t recommend purchasing these extras. You can always add them later on if you decide that you need them. Next, you will add your payment information to finish the purchase.

After completing your purchase, you’ll receive an email with details on how to login to your web hosting control panel. This is your hosting dashboard where you manage everything like getting support, setting up emails, etc. Most importantly, this is where you’ll install WordPress with one click.

Step 2: Install WordPress

The great thing about GoDaddy’s WordPress web hosting is the installation process you can complete in a few minutes during your checkout. Simply follow the on-screen instruction (select a theme, public author name, the purpose of your website, etc.) and GoDaddy will do all the work for you in the background.

GoDaddy WordPress Connect | AnitaM

Every WordPress installation comes with a temporary URL (domain name) so you’ll have to connect the domain you have picked during checkout to your new WordPress website. Simply set up your custom domain by attaching your domain from the dropdown window.

Connect Your Domain Name in GoDaddy | AnitaM

You are pretty much done now with your WordPress install. You now set up your email address (if applicable) and you are ready to move on to rock the web!

GoDaddy WordPress Web Hosting Overview | AnitaM

Now all you need is to click on the “Edit Site” button in the upper left, and it will take you to your WordPress Dashboard which you can also access via yourwebsite.com/wp-admin.

WordPress Dashboard | AnitaM

Congratulations! You have created your first WordPress website.

Going forward, you can always log in to your WordPress site via yourwebsite.com/wp-admin instead of going through the GoDaddy website. All you have to do is enter the username and password you entered earlier on the login screen and you’ll get to WordPress Dashboard right away.

WordPress Login Screen | AnitaM

Wasn’t that easy? Now let’s move on to the next step and choose a design for your website.

Step 3: Select Your Theme

The visual appearance of your WordPress site is controlled by a WordPress theme. It’s the place where all the beautification and magic happens that will make your website stand out.

In a nutshell, WordPress themes are professionally designed templates that you can install on your website to change their appearance. By default, each WordPress site comes with a basic theme. But since your website is powered by GoDaddy, you have the option (during the installation process) to select one of GoDaddy’s WordPress themes to get yourself started which you can change later on.

Demo WordPress Website for WordPress Bootcamp | AnitaM

This is not very appealing for most users.

But don’t worry, there are thousands of free or premium WordPress themes that you can install on your site. You can change your theme from the WordPress admin dashboard. Visit Appearance » Themes page and then click on the “Add New” button. But proceed with caution as some of the customizations made in your current theme may not carry over to the new theme.

WordPress Themes | AnitaM

On the next screen, you will be able to search from 7500+ free WordPress themes that are available in the official WordPress.org themes directory. You can sort them by popular, latest, featured, GoDaddy Themes as well as other feature filters (i.e industry, layout, etc).

Add New WordPress Theme | AnitaM

Need help choosing a theme? I know it can be rather a pain, but over the years I have been a big fan of the WP Astra theme. Together with the Beaver Builder page builder, your options are endless. Check it out!

For the sake of this WordPress Web Design Tutorial, I’ll be using the free version of Astra theme. It is a popular multi-purpose WordPress theme with flexible design options for all kinds of websites.

If you know the name of the free theme you want to install (i.e. Astra), then you can look for it by entering its name in the search field. WordPress will show you the theme in search results. You will need to take your mouse over to the theme and then click on the Install button.

Install New WordPress Theme | AnitaM

Once you have installed your theme, you can adjust the theme settings under Appearance » Customize in WordPress Dashboard. This will launch the theme customizer where you will be able to change your theme settings with a live preview of your website.

WordPress Customizer | AnitaM

You don’t need to finalize all theme settings right away. You will be able to customize it much better once you have some content on your website. So, let’s see how to add content to your WordPress site.

STEP 4: Add Content to Your Site

WordPress comes with two default content types called Posts and Pages. Posts are part of a blog and appear in reverse-chronological order (newer items displayed first). On the other hand, pages are meant to be static “one-off” type content such as your about page, contact page, privacy policy, etc.

By default, WordPress shows your blog posts on the front page of your website. You can change that, and make WordPress show any page as the front-page of your website (I’ll show you how to do that later in this guide). You can create a separate page for your blog or news section. In fact, you can create a website without any blog section at all.

Having said that, let’s add some content to your website. You’ll start by adding a few pages to your WordPress site. Don’t worry if you don’t have enough content for these pages at the moment. You can always edit and update them. Head over to Pages » Add New page in the WordPress admin area.

This will bring you to the page editor screen, which looks like this:

Add New WordPress Page | AnitaM

First, you need to provide a title for your page, let’s call this page “Home“. After that, you can add content to the text editor below. You can add text, links, images, embed videos, audio, etc. Learn more about WordPress Gutenberg here.

After adding content to your page, you can click on the publish button to make it live on your website. You can repeat the process by adding more pages for different sections of your website. For example, an about page, contact us, and a blog page to display blog posts.

Now let’s add a few blog posts as well. Head over to Posts » Add New in your WordPress admin area.

Add New WordPress Post | AnitaM

You will see a screen much as you saw earlier when adding pages. You can add a post title and then add content in the visual post editor. You’ll also notice some extra options like post Formats, Categories, and Tags. You can click on the save button to store your post as a draft or click the publish button to make it visible on your site.

Step 5: Customize & Tweak Your Website

Now that you have created some content on your website, you will be able to customize and put it all in a nice presentable shape on your website. Let’s start by setting up a static front Page.

Setting up a Static Front Pag

You need to visit the Settings » Reading page in your WordPress admin area. Under the ‘Front page displays’ option click on the static front page and then select ‘Pages’ you created earlier for your home and blog pages.

WordPress Reading Settings | AnitaM

Don’t forget to click on the ‘Save Changes’ button at the bottom of the page to store your changes. WordPress will now use the page titled ‘Home’ as your site’s front page and ‘Blog’ page to display your blog posts.

Change Site Title and Tagline

During the installation, you get to choose your site’s title. WordPress automatically adds a tag line to your site title that says ‘Just another WordPress site’.You can change both your site’s title and tagline at any time by visiting Settings » General page.

WordPress General Settings | AnitaM

Your site title will be the name of your website like WordPress Bootcamp. The tag line is usually a single line that describes your website. You can also leave the tag line field blank if you want. Don’t forget to click on the save changes button to store your settings.

Set up Comments Settings

WordPress comes with a built-in comment system allowing your users to leave comments on your posts. This is great for user engagement, but it is targeted by spammers as well. To deal with this, you’ll need to enable comment moderation on your website. Visit Settings » Discussions page and scroll down to ‘Before a comment appears’ section. Check the box next to ‘Comment must be manually approved’ option or leave it unchecked.

WordPress Comment Settings | AnitaM

Don’t forget to click on the save changes button to store your settings.

Create Navigation Menus

Navigation menus allow your users to browse different pages or sections on your website. WordPress comes with a powerful navigation menu system, and your WordPress theme utilizes this system to display menus.

Website Navigation Menu | AnitaM

Let’s add a navigation menu to your website. First, you need to visit Appearance » Menus page. Enter a name for your navigation menu and click on the create menu button.

WordPress Menu Settings | AnitaM

WordPress will now create your navigation menu. But it will be empty at the moment.

Next, you need to select the pages you want to display in your menu and then click on add to the menu button.

Add Pages to WordPress Menu | AnitaM

You will notice your selected pages filling the empty area of your navigation menu. You can move them up and down to rearrange their position in the menu.

WordPress Menu Location Display | AnitaM

Now you need to select a display location. These locations are defined by your WordPress theme. Usually, most WordPress themes have a primary menu that appears on top. Finally, click on the save menu button to store your navigation menu.


You can now visit your website to see the menu in action.

Step 6: Install Plugins

WordPress Plugins are like apps for your WordPress site. They allow you to add features to your website. Think contact form, online shop, social sharing, photo galleries, etc.

There are currently more than 54,000 plugins available for WordPress. Some are free and others are premium plugins sold by third-party websites and developers. With this many plugins, how do you find which plugins to install? I got you covered, check out my guide on the must-have WordPress plugins.

WordPress Plugins | AnitaM

List of essential plugins that you should install on your site right away for free.

  • WPForms Lite – Allows you to add a contact form to your WordPress site
  • Envira Gallery Lite – Add beautiful image galleries to your WordPress site
  • MonsterInsights – Connect your website with Google Analytics
  • Yoast SEO – Improve your WordPress SEO and get more traffic from Google
  • WP Super Cache – Improves your website speed by serving cached pages
  • Updraft Plus – Create automatic scheduled backups of your website
  • Sucuri – Website security audit and malware scanner

Step 7: Master WordPress

WordPress is easy to use yet extremely powerful. From time to time, you may find yourself looking for some quick answers. The good news is that there is plenty of free WordPress help available. WPBeginner.com is one is the largest WordPress resource site on the internet. They have great articles covering everything WordPress and I am certain you’ll find your answer there.

But if you’re looking for a comprehensive WordPress online course that will teach about website design but also content creation, SEO and so much more, you may be interested in checking out my Website in Week where I go more in-depth into everything WordPress with video tutorials, worksheets, private community and plenty of WordPress tips & tricks.

Step 8: Expand your Web Presence

So far we have shown you how to make a website, add a theme, and install essential plugins. Want to take it even further? Why not turn your WordPress website into a client-winning web presence?

  • Create an eCommerce store
  • Start your own podcast
  • Create a membership website
  • Create a web directory
  • Host a coupons website
  • Build a reviews website
  • Create multilingual websites
  • Create a Job Board website
  • Launch a question and answers website
  • Create a wiki knowledge base website

As you can see, WordPress comes with endless options to translate your creative vision into reality.

Take your Time and Rock the Web with WordPress

Take it from someone who has created many websites and also taught others how to design with WordPress, it’s a never-ending project that requires regular updates, maintenance and takes overall time to plan, design and share. After all, your WordPress website should be a tool to generate profit for your business and be a virtual office for your brand. So take your time, tweak as you see fit and most importantly have fun designing with your WordPress website.

WordPress Web Design Tutorial | AnitaM

I hope this WordPress Web Design Tutorial helped you create your WordPress website without having to hire a professional designer or spending a lot of money to get started. And should you need further assistance with your WordPress website, feel free to contact me directly.

Website Roadmap for Solopreneurs | AnitaM

ARE YOU READY TO LAUNCH YOUR WEBSITE?

Learn how to create a professional, client-winning website – without tech skills.

Editor’s Note: This post was originally published in August 2018 and has been completely revamped and updated for accuracy and comprehensiveness. In addition, I believe in transparency. If you use my referral links above, then I will get a small commission at no additional cost to you. In fact, you will get a discount on hosting + a free domain name. 

Summary
Learn How to Design a Website in 2020 - Step by Step WordPress Web Design Tutorial
Article Name
Learn How to Design a Website in 2020 - Step by Step WordPress Web Design Tutorial
Description
Want to learn how to design your website with Wordpress in no time & for free? Check out this WordPress Web Design Tutorial and get started today.
Author
Publisher Name
AnitaM | The Course Creator
Publisher Logo