How to Create a WordPress Website (for Beginners)

In this in-depth guide on how to make a website using WordPress we will guide you through all you need to know about WordPress and how to get started with it.

SECTION 1

What is a WordPress website?

In order to answer this question, let’s take a step back to understand what is a website first.

What Is a Website

A website is a collection of web pages present on a single address (ex: yourname.com). They can have any kind of content – text, images, videos, audio players, photo gallery, forms and so on. 

With the advancements of the internet, website content began changing and increasing more rapidly. The usual process: downloading your website’s web page, editing it on your computer and then uploading it back online, became too inefficient.

This created the need for a new approach in managing website content. And this is how Content Management Systems (CMS’s) came to life.

What Is a Content Management System?

The web page you are currently reading, is what came known as the public-facing side of a website – the front-end. And just as every theater needs a stage, the front-end is where the show on a website happens. Meanwhile, behind that stage, there is a whole crew making the magic happen. For websites, this is known as the back-end.

The back-end provides website authors and editors with the tools they need to manage the content of a website directly on the internet. The software they use is a Content Management System. It allows for changes submitted on the back-end to appear on the front-end and all the works happens directly online.

Content Management Systems vary in purpose, technologies and so on. But for now, what we need to know is that WordPress is a general-purpose Content Management System.

And to bring it all together:

A WordPress website is a collection of web pages that are being managed by a content management system – WordPress.

Note: we’ll be using the terms “CMS” and “website platform” interchangeably throughout this WordPress website tutorial.

SECTION 2

Why Choose WordPress as Your Website Platform?

Naturally, when we’re looking to pick a tool, we would go for something popular and battle-tested, so we can be sure it’s reliable. WordPress is often regarded as the king of CMS, having more than a third of websites on the internet running it.

How Many Websites Use WordPress?

According to a survey by w3techs.com WordPress is being used in 63.6% of websites who have a CMS and a grand 37.6% of all the websites on the internet. As you might have already thought – that’s a lot! 

And there is a good reason for the mainstream adoption.

Benefits of Using WordPress

1. Short Learning Curve

The learning curve is considered one of the shortest, when it comes to learning how to create a website using WordPress

2. No Coding Skills Required

Unless you want to get down and dirty, there is absolutely no need for you to understand code. Functionality can be extended with plugins and the looks of your website – changed with just a few clicks. Everything is plug and play.

3. Loved by Search Engines

The code of WordPress has been written with all the best practices in mind, thus improving the user experience of your visitors. And a good user experience is just the kind of thing, search engines like Google want to prioritize in their search results

Of course, using WordPress is not going to magically rank your #1 on Google. But is a great starting point for your search engine optimization efforts and, at worst, will provide you with good visibility in search engines, potentially increasing your traffic.

4. Reliable

When it comes to software, there is always a (small) possibility that something might break and an error message might appear. Instead of searching for a platform with zero points of failure, which is practically non-existent, it’s much more productive to choose a platform that has a huge user base and is used by millions of websites. 

The reason? 

Thanks to it’s huge user and developer community, if you ever encounter a problem with WordPress, it’s already solved somewhere by someone. All you need to do is a little googling.

5. Free

Aside from web hosting and domain expenses WordPress is a free website platform thanks to the GNU General Public License. This is a software license, under which WordPress is distributed, that allows you to own a copy completely for free and modify it in any way you see fit.

6. Countless Customization Options

Using the world’s most popular platform draws in another benefit – a ton of WordPress website themes and plugins readily available, completely for free, via a one-click installation process, directly from your site’s back-end.

At the time of writing there are 7,544 themes and 56,995 plugins available

Recently, there have also been Commercial Themes introduced. These are free WordPress website themes and just like the others, can be used or customized however you see fit, but the commercial ones include paid support services by the teams and organizations behind them. If you would like to have someone providing you with support exclusively for your project then this is the option for you.

Also take note that these numbers are just for the plugins and themes provided in the official WordPress repository. There is a large number of markets and studios on the internet that provide different licensing options for their work. We’ll take a look at those later in the tutorial.

Bottom line: you can be running a completely custom WordPress website in a matter of a few hours.

7. Start With a Blog, Grow Into Anything

Put enough effort into anything and you can make a business out of it. When the time comes to start running a WordPress business website, rest assured there are plenty of plugins available to make your website an extension of your business model.

Whether you want to enable your visitors to be booking events, compare products or search through your content, odds are there is a plugin for it.

WordPress Website Examples

WordPress is being used for managing one of the most reputable websites on the internet such as blogs, magazines, businesses and institutions. In fact, there are so many of them using WordPress, that listing them all in one place, would require an article of it’s own.

Since the focus of this article is a WordPress website tutorial, we are listing just 5 of them:

1. Sony Music

2. The New York Times

3. Beyonce

4. The Walt Disney Company

5. Sweden’s Official Website

These websites can easily be considered among some of the best WordPress websites on the Internet. And while some of them have had a lot of customization and development work done, the good news for you is that you get many of the platform’s features without doing all that hard work. 

SECTION 3

How to Pick a Brand for Your Website and Buy a Domain and Hosting

Before we go into how to create a WordPress website, we need to make sure there are 3 prerequisites provided:

  • A brand or website name
  • Registering that name as a domain
  • Ordering a web hosting

Brand or Website Name

First thing is first – your new home on the internet requires a name by which to go by. This can be anything relevant to your project. If you are just starting your journey on the internet and just want to write about various topics, in search of a niche, then you might as well use your own name as a brand.

Whatever project and name you decide to go with, remember that you can always register a different one later on and have your website moved to this new name. Also known as rebranding.

When we talk about “brand name” and “website name”, if there is something to differentiate between, that would be that the brand name is a registered trademark of a business entity while the website name can be the name of your cat. Either way, they are both registered as a “domain” on the internet.

What Is a Domain

The contents of the internet are stored on a vast network of computers. In order for anyone to access this content, the address of this computer must be specified. Every computer operates under it’s own unique, numeric address, also known as an internet protocol (IP) address. An IP address looks like this: 173.237.190.136

Can you imagine having to remember the addresses of your favorite websites in such a way? Thankfully, that’s where domain names come in! A domain name is the human-readable name that is assigned to a computer’s address on the internet. For example, if you open up your browser and in the address bar type scalahosting.com you will actually be going to 173.237.190.136!

Note that whenever a domain name is assigned to an IP address, it can take up to 48 hours for this change to take effect across the world-wide web. This process is known as domain propagation.

Domain names also include a domain extension. Let’s say we’re registering “yourname.com”, where “yourname” will be the name of the domain and “.com” will be it’s extension.

Based on the extension, domain names can be:

  1. generic (.com, .net, .org, .info, .biz) or
  2. geographic (.eu, .us, .cc)

All domain names and IP addresses used within the internet are regulated by the The Internet Corporation for Assigned Names and Numbers – ICANN.

Due to the large number of registered domain names, several years ago ICANN introduced additional generic domain name extensions such as .club, .site and many others. Still, the most sought-after are the “classic” extensions such as .com, .net, .org as they have the biggest recognition among the general public. 

As a general rule of thumb, always try to register a two-word domain name that ends with a .com or .net in the end and .org if you will be doing any kind of nonprofit or not-for-profit work.

What is Web Hosting

Just as a domain will give people easy access to your content, you need a computer where to store that content as well.

That’s where web hosting companies come in. They host your content on their computers in exchange for a yearly or monthly fee. Having a computer configured for such activities requires a myriad of settings, so the fee they charge is an investment well spent. 

Web hosts are also responsible for the “health” and performance of the computer serving your website’s visitors, also known as a server.

With your web hosting package you also receive an ever-growing list of tools and services. Such include, but are not limited to: e-mail under your domain name (ex: you@yourwebsite.com), spam protection, website usage statistics and quite a few others.

What is a Web Hosting Plan

Every web hosting company breaks down its services into plans. These plans cover different performance options and tools in order to fit different price ranges. 

Generally speaking, the types of web hosting can be:

  1. Renting a small portion of a very powerful server, which you share with many other website owners. This is known as shared web hosting.
  2. Renting a virtual private server or VPS. This is the closest to owning your own machine. The VPS technology allows you and a few others to share the same machine, but in a much more efficient and secure manner, providing a considerably higher performance.
    The virtual server can either be managed by the hosting company or managed by you (self-managed). Managing a VPS is not to be confused with WordPress website management. The constant management, optimization and monitoring of a server is a highly technical process and requires very advanced skills.
  3.  Renting a dedicated server. As the name implies, there is an entire server, dedicated to you and your project. Completely managed by yourself – again, advanced technical skills required.

Choosing The Web Hosting Plan For You

When starting out it’s perfectly okay to purchase the most basic web hosting plan and as your website grows, to upgrade accordingly. Upgrades are seamless, so you don’t risk having your WordPress website going offline even for a second.

Considering the topic of this tutorial, we’d guess you want the best website hosting for WordPress. That’s why we recommend you to always look for a hosting plan that has been specifically optimized for WordPress websites. 

In fact, this rule applies to any website platform you might be using. Different software requires different server settings, so it’s only beneficial to pick a hosting plan specifically optimized for it.

How to Buy Hosting and Register a Domain Name

And now we’re getting to the first step of setting up a WordPress website! Here is how to register your WordPress hosting plan and get a domain name for 1 year free:

Stage 1 – Pick a WordPress Web Hosting Plan

1. Head over to ScalaHosting.com/wordpress-hosting.html and pick your desired WordPress website hosting plan.

2. Once you have selected a web hosting plan and a period for it, you will be redirected to the domain registration page.

Stage 2 – Register a Domain Name

1. Use the field on that page to enter a desired name and click the blue button Check, to check for availability. Remember to experiment with different domain name extensions. They are selected from the drop-down menu that has “.com” as a default value.

2. Click the Check button and, if the domain name is already taken, you will be presented with alternatives below, based on your query.

3. Once you have picked a domain name from the suggestions list or your first-choice for a domain name came out as available, click “Continue” at the bottom of the page to proceed.

Note: Always check your spelling when registering a domain. Once registered, the name cannot be edited.

Stage 3 – Create Your Account and Complete Checkout

1. If you are already a customer, use the blue button at the top right corner of the page “Already Registered?” to log in and have the order associated with your existing account.

If you’re not, you can either sign up with Facebook or Google, or fill out the fields in the Personal Information section and have an account created with those details.

Take your time and make sure to pick a password with a strength of at least 50% and write it down to a safe place. A good practice is to use a two-word phrase that has capital letters and features a number or a special symbol (!!@#$%^&*) after each word. For example: “This#Is#Great!”

2. In the Domain Registrant Information section make sure you enter valid information. The registrant information is your ID card on the internet and is required by ICANN to be valid at all times. Failure to do so can result in having your domain registration forfeited.

3. Below is the Order Summary section. Double-check your order and make sure the spelling of your domain is right. Once registered, it cannot be changed. 

You can pay for your order by either:

  • Credit or debit card
  • PayPal
  • Bank transfer

4. Before clicking the blue Complete Order button at the bottom of the page, make sure to read the Terms of Service (link opens in a new window) and check the according checkbox as a confirmation.

5. Check the email you specified with the order for a sales receipt. Once your payment has been processed, you will receive a Welcome email with more information on how to log in to your web hosting control panel.

SECTION 4

How to Install WordPress

In this section of the tutorial, we will go over the steps on how to set up a WordPress website and how to create backups. 

Steps for VPS Hosting

On Scala Hosting the VPS Hosting Plan is managed through SPanel. This is a lightweight alternative to a popular web hosting application – cPanel.

In order to begin setting up WordPress, refer to the email you received from Scala once your account has been created.

1. Follow the link to SPanel. It should be something like this: https://yourdomain.com/spanel

2. Login with the your email and password. They should be written in the Welcome email as well.

SPanel Dashboard

3. The SPanel dashboard which features a number of tools, menus and indicators. What we are looking for is the Create an Account link.
It is present first place at the QUICK LINKS section and first place again in the vertical main menu under Accounts Management.

4. Click the Create an Account link to get started.

Creating a VPS Account

5. This page features four fields that are required to continue:

  1. The Domain name field, which is the name of your website. Enter in format: yoursite.com
  2. The Username field, which is the name of the place where you store your website’s files. Specify any name that makes sense to you.
  3. The Password and Repeat Password fields. As a rule of thumb, use a password that’s with strength of at least 50%. For reference, refer to the strength meter below the fields.
    Again, a good practice is using a two-word phrase in combination of capital letters, special symbols and numbers.
  4. The last two fields of the page – Disk Space Limit and Inodes Limit – can be considered advanced options. They are beyond the scope of this tutorial and we are going to leave them to their default values.

6. Click the Create Account button to finish the account creation process.

7. As a confirmation of the account creation you will be presented with something similar to the following:

Logging in to a VPS Account

8. To access the newly created account, locate the Accounts Management section in the vertical main menu to the left side of the page. Click on List Accounts, 3rd place on the list.

9. On the list accounts page, you should see a table with the accounts created on your VPS host. To the right end of the table row, there is a blue Actions button. Click on it and select Login from the menu that appears.

10. Now you are logged in to the account we previously created. Scroll to the bottom of the page and locate the Tools section. Click on the WordPress manager, located within that section.

Installing WordPress

Within the WordPress Manager, we are presented with a very straightforward interface comprised of two sections: 

1) Install New WordPress Site

2) Existing WordPress Installations
Let’s begin the installation by focusing on the first field of the Install New WordPress Site section:

11. Since we are working with a single domain name, leave the Domain/Path field as is.

12. The following fields in this section – username, password, password confirmation and email address – are for creating the administrative user with which you will use to manage your new WordPress website. Fill them out accordingly and click on the Install WordPress button to continue.

Note: The email address you specify is used for notifications from the website (new comments, updates, password resets, etc.)
Also note: The Install WordPress button will remain gray until all fields are properly filled out.

13. Click the blue Install WordPress button to begin installation. Allow a moment for the installation to complete in the background.

14. Once the installation is done, a confirmation message will appear above the button you pressed to start it.

Managing Existing WordPress Installations

Before navigating away from the WordPress Website manager and learning in the coming chapters why you need to back up WordPress your website, let’s take a moment to review what you can do with the Existing WordPress Installations section.

This section is a table listing your active WordPress installations, one website per row.

There are two On/Off buttons to the right of the row. 

The Security Lock feature is used to prevent any changes to your website done by 3rd parties with malicious intent. Once it’s enabled, hackers and malware won’t be able to “write” code to your website as it’s contents will be “read-only”. Be advised this protects the website from any changes, so you won’t be able to make theme changes, plugin installations and any updates while this feature is active.

The Auto Updates feature is used as an easy way to enable or disable updates for your website – WordPress core, themes and plugins. It’s best to keep Auto Updates to On, unless you’re having custom work done to your website. In that case consult with your web developer what will be best.

The blue Actions button, to the far right of each row, can be clicked to open a menu.

The menu contains:

  1. Change password – change the WordPress admin password
  2. Clone – clone your entire website to a new folder
  3. Uninstall – remove the corresponding WordPress website

Logging in

For further instructions, please refer to the section below, titled: WordPress Initial Setup

Steps for Installing WordPress on a Shared Web Hosting Account

1. To log in to your shared web hosting cPanel refer to the Welcome email for instructions or, directly into your browser, type your website’s domain name and add a “/cpanel” after that.
It should look like this: yourdomain.com/cpanel

Note: Accessing cPanel through your site’s name works only if the domain name has propagated. If it’s not, refer to the Welcome email for instructions on accessing cPanel.

2. In order to log in, please use the username and password provided in the Welcome email.

3. Upon successful login, you will see the main page for your cPanel appear. It is loaded with apps.

4. Scroll down, to the very bottom of the cPanel page and look for a section titled SOFTACULUOUS APPS INSTALLER

– or –

Click on the search field at the top of the page and type “softa”. The Softaculous Apps Installer will appear right below the search field. Click on it.

5. Now that we’re in, all you need to do is click on the WordPress icon on the front page, under the Top Scripts section.

6. Just point and click anywhere on the square with the WordPress logo and you will be redirected to the WordPress installer.

7. On the WordPress Installer page, please locate the horizontal menu right under the WordPress logo.

8. On the blue Install button, click the triangle pointing downwards to open up a menu.

9. Select Quick Install from the menu.

The next page requires just a few fields to set up for installing a default, out-of-the-box WordPress as your primary website.

10. By default, the installer sets WordPress to a sub-folder. There is no need for that. Please clear the contents of the second text field that has ‘wp’ in it.

11. In the Admin Account section, please enter username and password you will be using to log in as the administrator of your website. As always, make sure your password is at least at 50% difficulty.

12. In the Admin Email field, type in the email where you would like to receive notifications on updates, comments and other events related to your website.

13. For the purposes of this tutorial we will skip the sections Select Plugin(s) and Select Theme as we will be reviewing themes and plugins in detail later on.

14. Scroll down to the bottom of the page. You might want to enter the same email, you used for the Admin user, in the field below the blue Install button. Once the installation is completed, you will receive an email with your login credentials and website address.

15. Press the blue Install button to initiate the installation. You will be presented with a progress bar to monitor how the installation is going. Please allow a couple of minutes for it to complete.

Logging in

For further instructions please refer to the section below, titled: WordPress Initial Setup

SECTION 8

WordPress Initial Setup

Now that your custom WordPress website is up and running, it’s time to customize it and make it your own. 

In this section we’re going to work with some of the core settings for your website, taking care of visibility on search engines, website name, tagline and so on.

WordPress is designed to work with people from any skill level and for this reason the administrative area includes both – advanced and beginner settings. In the following sections we will go through the core settings, so that you can get started creating content as soon as possible.

Logging Into the WordPress Admin

1. To reach your website’s login page, just open up a new tab and in the address bar enter your domain name followed by a “/wp-admin” at the end. The full address should look something like this: https://yoursite.com/wp-admin 

2. Now that you are at the WordPress Admin login screen, enter the username and password you specified in the WordPress installer and hit the Enter button on your keyboard.

3. Upon successful login you will be redirected to the Dashboard. The front page your website’s administrative area. Welcome to WordPress!

Site Title and Tagline

1. Now that you are at the dashboard, locate the Settings link at the bottom of the main menu, which is a dark, vertical column located to the left hand side of the screen.

2. Clicking the Settings link will redirect you to the first sub-page of this menuGeneral Settings. This is where you will set the name and tagline or catchphrase of your website.

Note: The different designs for your website, also known as “themes”, might or might not display the tagline of your site.
Also note: You can always come back to the Admin and update any of your site’s settings.

3. At the bottom of every settings page in the admin there is a blue Save Changes button that you must always click whenever you change any of the settings on that page.

Timezone

1. Once you have saved the website title and tagline you entered, remain on the same page and scroll down to the Timezone drop-down. It looks like this:

2. Use it to pick the appropriate timezone for your location. This is an important setting related to tasks such as post scheduling.

3. Remember to save your changes by clicking the blue Save Changes button at the bottom.

To Search Engine or Not to Search Engine?

Since you are just starting out building a website, it’s important to keep in mind that search engines might pick you up to display in their search results before you are ready to accept any visitors. 

There is a saying that you launch a project only once, so in order to avoid any issues with search engines, make sure you discourage them from displaying your website in their search results.

1. To do this, locate the Settings menu to the left and click the Reading sub-page.

2. At the bottom of the page, right above the Save Changes button, there is the Search Engine Visibility checkbox.

To discourage search engines from indexing your site, make sure the checkbox is checked.

3. It’s best to write down somewhere that you have search engines blocked, so that you can be sure not to forget unchecking this setting once your website is ready, which could be weeks or months from now.

4. Click the Save Changes button.

Allowing and Disallowing Comments

Comments on posts can be of great value to your blog, but can also be an unnecessary distraction when you are presenting your business or selling a product. Comments are enabled by default.

1. To set up comments, click on the Discussion link in the Settings menu

2. The first section of the Discussion Settings page is the “Default post settings” which includes all the basic settings for the comment system of WordPress:

  1.  Attempt to notify any blogs linked to from the post
    – When you write a post and you place a link within your text, that leads to another post on another WordPress site, the “recipient” of the link will receive a notification in this comments section that you have linked to their blog post. This is known as Pingbacks. Basically, it’s a comment you leave on another website by linking to them.
  2.  Allow link notifications from other blogs (pingbacks and trackbacks) on new posts
    – Just like 1) but when someone links to your blog post from theirs. If you leave this setting on, a notification will automatically appear in the said blog post of yours, that someone has linked to you.
  3.  Allow people to submit comments on new posts – Toggle this to enable or disable comments on your blog posts. Note that this setting can be and is overridden by the comments setting on your individual blog posts.

3. Click the blue Save Changes button to confirm your settings.

Permalinks

Permalinks are the bread and butter of your website’s structure! Every post and page on your WordPress website has a web address, also known as URL. Permalinks define the structure of your URL. Whether the URL of a blog post is

yoursite.com?p=94
– or –

yoursite.com/what-i-ate-for-dinner

it gets constructed according to your permalinks settings.

1. To access permalinks settings, click on the Permalinks link located near the bottom of your settings menu.

2. As you can see there are quite a few options to pick from and all of them are intended for different types of WordPress websites. If you are unsure, as a rule of thumb, avoid leaving the Plain setting on. “Day and name” and “Post name” are the most common ones.

Note: Not included in the screenshot is the Custom Structure setting which is an advanced settings and is outside the scope of this tutorial.

3. To select a Permalink scheme simple click on the on the name or the white circle, known as a “radio button” left of it.

4. Scroll to the bottom of the page and click on the Save Changes button to confirm your permalink changes.

Note: Permalinks basically change the addresses of your posts and pages, so it’s best to avoid changing them often. Once you change the structure of the URLs for your content, the old URLs will become invalid.

Conclusion

Going through the steps so far must have been time consuming and clicking through all those pages – overwhelming, but compared to most content management systems out there, making a website with WordPress is a breeze! We are certain you will love the ease of use once you are used to working with WordPress.

SECTION 5

Viewing the Website as a Visitor

As we discussed in the beginning of this WordPress tutorial, visitors view content in the front-end and administrators manage it on the back-end.

From this point on you will be making lots of changes that will affect the front-end and you need fast and easy way to alternate between the front-end and back-end of your website.

1. Notice the top left corner of the WordPress admin.

2. There is a button with your website’s name (My Blog in our case) with a house icon left to it. Click on it.

3. You are now transported to the front-end. Notice how the icon changed. It is now showing a gauge.

4. Click on the gauge icon to return to the WordPress admin.

SECTION 6

Working With Content

Types of Content in WordPress

The content of your website is divided into 6 types:

  1. Posts– appear as content displayed within a Category or a Tag of your blog– can be displayed as links on your website’s menus and sidebars
  2. Pages
    – appear as links on your website’s menus and sidebars
    – unlike posts, can only be organized into pages and sub-pages
  3. Files– appear as download links in the content of your site or
    – inserted into a posts and pages as a gallery of images
  4. Categories– are used to group posts together
    – can also contain other sub-categories, filled with their own posts
    – each post must belong to at least one category
    – posts can belong to multiple categories
    – example category: Books, Comedy
  5. Tags– are used as a more fine-grained method for grouping posts together
    – cannot contain items other than posts
    – are optional for grouping posts, unlike categories
    – posts can have multiple tags
    – example category: hardcover, good read, handwriting
  6. Comments– appear under posts as content submitted by your website’s visitors
    – like files, do not have categories, tags and parents.

Creating and Managing Content

Posts

To begin working with posts, click on Posts in the main menu.

Welcome to the Posts screen. When working with the other content types you will notice that the screens for posts and pages are very much alike, the same way categories and tags are.

Creating a Post

1. To start creating a post, click on the Add New button, located right next to the Posts title of the page.

2. Welcome to the Post Edit screen. You will see a welcome screen explaining about the Block Editor. The Block Editor is a recent addition to WordPress that allows you to create content in multiple columns. Make sure to read the guide in the 4th slide of the welcome message. You can read it later by opening it in a new tab. Then click on the blue Get Started button.

3. The block editor is outside the scope of this tutorial, so please make sure to read it later. Now we can focus on adding text content by simply selecting one of the blocks and typing in it. 

4. On the right-hand sidebar you will see two tabs: Document and Block; whenever you click on a block to add text, the sidebar will switch to the Block tab. And as you might have already guessed, the global post settings are in the Document tab. Switch over to the Document tab.

5. Adding the post to a category is important for your website’s structure. You can assign the post to one by clicking on the Categories drop-down.

6. When the drop-down expands you will see there is only one category – Uncategorized. This is the default category where all posts without an assigned category go automatically.

7. Click on the Add New Category link to assign a more specific category.
Upon clicking the link, the drop-down will expand:

8. Under the New Category Name label, select the text field and type the name of your new category.

9. Click the Add New Category button to apply the changes. The category is created and the post is added.

10. Adding a tag to a post is definitely more straightforward. Click on the Tags drop-down, located right under the Categories.

11. When you write down a tag, hit comma on the keyboard, if you want to continue adding new ones, and Enter when there is only one tag or you’re done adding.

Note: When you are entering the name of a tag that exists, WordPress will auto-complete its name for you, based on the first 3 characters you have entered.

12. When you are done creating your post click on the Publish button at the top right corner of the page.

13. When you click the Publish button you will be presented with a confirmation. Make sure you are okay with the changes you’ve done with the post and click the blue Publish button once again.

14. The post is published and you can now leave the Block Editor by clicking on the black and white WordPress-themed button at the top left corner of the page.

15. You are redirected back to the Posts screen.

Updating a Post

Updating a post uses the very same screens we’ve been through in the previous section with the only difference that we will be addressing an existing post.

1. In the Posts screen locate the post you just created and move your mouse over its row.

2. Four links appear below its title. Click on Edit

3. You are now back at the Block Editor. Notice the top right corner where the blue Publish button was. It is now replaced by Update.

4. To test, add a letter in the title. Just a minor change to trigger the Update button. It will now become available.

5. Click on the Update button. A notification will appear in the bottom left corner of the page.

6. You can either click on the View Post link or move back to the WordPress Admin by clicking on the black and white WordPress logo, located at the top left corner of the Block Editor screen.

7. Click on the black and white WordPress logo in order to proceed to the next step of this tutorial.

Deleting a Post

Deleting a post can be easily achieved through the Posts screen. You can delete posts in two ways:

1. Deleting a single post is done by pointing at its row and click on the red Trash icon

2. Deleting multiple posts is done by clicking the checkbox at the beginning of every row and then selecting Move to Trash from the Bulk Actions drop-down. 

The Trash Bin

Once a post is deleted it goes to the Trash bin where you can either restore the post or delete it forever. The Trash is accessible only when there are posts or pages in it. To visit the trash, once you have deleted a post, refer to the trash link that is now visible under the title of the Posts screen.

The Trash screen uses the same mechanics to manage posts just as the Posts screen does. With the only exception of the Empty Trash button. The button is visible right above the posts list. Use it to empty the entire trash.

Just like the Posts screen, you can remove single posts by clicking on the checkbox at the beginning of each row and then performing a bulk action from the Bulk Actions drop-down.

Categories

The Categories screen is accessed by clicking on Posts in the main menu and then clicking on Categories.

The post edit screen is comprised of two halves:

  1. Add New Category section, to the left
  2. Existing categories list, to the right

Note: The categories list is identical to the posts list and works in the same way when it comes to editing and deleting existing categories.

Adding a New Category

1. In the Add New Category section of the Categories screen type in the desired name of your category in the blank text field, labeled Name.

2. Skip the Slug text field – it is populated automatically.

3. Use the Parent Category drop-down if you would like to make the category, you are creating, a sub-category of another one.

4. The Description field is usually skipped – it can be used by themes for displaying a category description on the front-end, but this feature is rarely present. Most themes display categories, without a description.

5. Once you are done filling out the text fields for the new category, click the blue button Add New Category, located at the bottom of the page.

Editing Categories

1. You can edit a category by moving the mouse cursor over its row and clicking Edit.

2. This will take you to the Edit Category screen

3. It presents you with the same fields from the Add New Category section.

4. Once you are done editing the contents of the fields make sure to click the blue Update button, located at the bottom left corner of the page.

Deleting Categories

Just like posts, categories are deleted either by hovering over their row in the Categories screen and clicking Delete or by using check boxes and the Bulk Actions drop-down. There is one difference, however.

Categories and tags do not have a Trash. They are permanently deleted.

Tags

The Tags screen is accessible by clicking on Posts → Tags.

Tags are managed the same way as categories. When creating a new tag, they do have fewer fields, however, as tags are not hierarchical like categories.

It’s also worth pointing out that tags are best created when adding them to a post, in the Post Edit screen.

Files

To keep things beginner-friendly we will go only through the process of attaching an image to a post and then removing it – both from the post and the file library of the site.

Attach image to a post

1. Start a new post by going to main menu → Posts → Add New

2. In the block editor, note the two lines of text visible. The first one is the title of the post and the second on is the first block of the content. Click on the second line of text that says: “start writing or type / to choose a block”

3. The blinking text cursor will replace the text. Note the circular button with a plus in it, to the right of the blinking text cursor. Click on that button.

4. The block menu appears. Click on the Image icon, placed by the end of the first line of blocks.

5. The block in the post content now displays the image uploader. Pick an image from your computer by clicking the Upload button.

Remove Image From a Post

1. To remove the image block, click on the image and click on the button with 3 vertical dots on it.

2. A menu expands. Click on the Remove Block button located at the bottom of the menu.

The image block is now removed, but the image remains stored on your website.

Remove Image From the File Library

1. Click on main menu → Media

2. This will display the Media Library screen. Switch to the list view by clicking the first button from the horizontal bar, located under the title of the screen.

3. Now that we switched to a familiar interface (resembling the Posts screen), point to the row of the uploaded image and click on the red Delete Permanently link that appears underneath.

4. Upon clicking the link, a popup requesting confirmation will appear. Click the Okay button to confirm the removal.

Pages

Pages are created, updated and deleted in the same way as posts.

To start working with pages, click on the Pages link, located in the main menu to the left. Once you are redirected to the Pages screen, you will notice everything is identical from this point on.

The main difference is that instead of setting category and tags you can set an optional page parent.

SECTION 7

Changing the Structure of Your Custom WordPress Site

Setting the Homepage and Posts Page

By default your WordPress website lists the last 10 posts on its front page.

In this section we are going to take a look at a very popular alternative – a static front page and a separate Blog page which lists the latest 10 posts.

To take advantage of this feature let’s create 2 new pages:

1. Click on Pages in the main menu. This will take you to the Pages screen.

2. Click Add New.

3. In the “Add title” field enter “This Is My Awesome Site” for the title. You can add content later on, if you wish.

4. Expand the Page Attributes drop-down, located at the bottom right corner of the screen.

5. From the Template drop-down, select Cover Template.

6. Click the blue button Publish, located in the top right corner. Click the Publish button once again to confirm the changes.

7. Once the post has been published, click on the black and white WordPress logo at the top left corner of the screen. This will return you back to the Pages screen.

8. Repeat the previous steps to create a second new page, titled “Blog”, but don’t select a template for it.

9. Back at the Pages screen, click on Settings, at the bottom of the main menu.

10. From the menu that expanded below Settings, click on Reading.

11. The first setting on the Reading Settings page is “Your homepage displays”. Switch the radio button from “Your latest posts” to “A static page (select below)“.

12. Use the Homepage drop-down menu to select “This Is My Awesome Site”, we created earlier.

13. Use the “Posts page” drop-down to select “Blog” from the list.

14. Click on the blue Save Changes button, located at the bottom of the page.

15. View the results of your work by switching over to the front-end – click the button with a house icon at the top left corner of the screen.

Please switch over to the WordPress admin before continuing to the next section of this tutorial.

Working With Menus

The Menus screen is accessed by going to main menu → Appearance → Menus.

The Menus screen consists of two columns. “Add menu items” where you pick pages, posts and other items and “Menu structure” where you create a menu and manage its items arranged in the form of a vertical list.

1. By default your website has no menus created. To begin, create a menu by entering a name and then clicking the blue Create Menu button to the right. For example, “Main Menu”.

2. Now that we created Main Menu, note that the “Add menu items” column became active and back in the center, “Menu Settings” appeared near the bottom.

3. Let’s start by adding a page to the menu. From the “Add menu items” column click on the checkbox labeled Sample Page.

4. Once you have clicked on the checkbox, click the Add to Menu button to confirm your choice.

5. Now the page, titled Sample Page, is present in the Menu Structure column and the Main Menu as well.

Make sure to click Save Menu after making any changes to the menu or they will be lost.

6. In order for the menu to appear on the front-end it needs to be assigned to a display location. Just like sidebars, display locations are areas around your site that can have a specific type of content assigned to them. In this case – it’s menus.
Click the checkbox labeled Desktop Horizontal Menu to assign the Main Menu to this location.

7. Click the Save Menu button again, to confirm your changes.

8. Switch over to the front-end.

9. Take note of the newly added link, located in the top right corner of the page.

Working With Sidebars and Widgets

Sidebars are areas where Widgets are displayed. Widgets are pieces of content that can be pretty much anything – from your top 10 most commented posts, to a search field or email subscription form, to a calendar with dates when you posted.

The majority of themes use sidebars. When you visit the Appearance → Widgets page

you will see a list of Available Widgets to the left and one or more sidebars to the right. In the example below, these sidebars are called Footer #1 and Footer #2. 

These sidebars will be displayed as areas on the layout of your website’s design – also known as your website’s Theme.

Every WordPress theme includes:

  1. a top section, called a header.
  2. a bottom section, called a footer.
  3. and sometimes, but not always, includes a vertical section to the side of the content, known as a sidebar.

Assigning a Widget to a Sidebar

There are two, very easy ways to assign a widget to a sidebar, both with their own use cases.

Drag-and-drop for when the widget is at the top of the list and you don’t need scrolling:

1. Just click and hold the left mouse button on a widget you choose.

2. Then drag it over the Sidebar of choice and it will rearrange the widgets there. Also, a dotted line will appear to point out the location of where the widget will be added, once you release the left mouse button.

3. Unlike most settings pages, rearranging widgets does not require you to save changes. They save automatically when placed.

Expanding the widget for when drag-and-drop is uncomfortable:

1. Just click on the widget of choice. It will expand with a list of the available sidebars, marking the first one by default.

2. Click on the sidebar name, where you want the widget to appear.

3. Click the blue Add Widget button to confirm your choice.

4. The widget will appear in the sidebar you chose.

Common Widgets

As you can see there is a variety of widgets available out of the box that is only expanded by an ever-growing amount of plugins available. All widgets apply to different use cases and scenarios, so it’s up to you to test them out and decide for yourself.

A common theme across WordPress websites is having a Categories widget at the top of the sidebar, complimented by a Search widget at the bottom of the sidebar. The idea is that when users look through the entire sidebar and don’t find what they are looking for, they reach the search at the bottom.

SECTION 10

Backups and How to Backup a WordPress Website

Now that we are about to venture into a bit more technical part of the tutorial, let’s take a moment to talk about backups.

Backups are an important precaution when doing changes to the files of your website, especially when you’re not 100% sure what the outcome of those changes might be. Remember that nearly every time you install a new theme or plugin, you install code written by different than the previous person, with their own different set of skills and understanding of how things work. Sometimes the differences in code can cause things to break.

For example, adding complex plugins to an existing WordPress website with more than 10 plugins active, can cause a conflict in the database and break everything. Furthermore, database errors are commonly irreversible. Same goes for testing out different themes.

The good news is that the odds of breaking your website are in your favour. Just make sure to make a habit out of backing up before installing new plugins and themes. This will be enough to make sure you avoid irreversible issues. If you are working on a live site, keep that backup file ready to upload in a moment’s notice.

Backups are available through plugins you can get for free from WordPress’ plugin catalogue. Note you need to refer to plugin documentation on how to backup and restore your website. 

Most plugins feature a process of their own, therefore detailed instructions won’t be part of this tutorial. You will learn more about that in one of the following sections, titled Working With WordPress Plugins.

SECTION 9

How to Choose a WordPress Website Theme

A big part of the process on how to make a WordPress website is focused on the theme. And there is a good reason for that.

What Are Themes

Themes or templates, are WordPress website designs intended to be easily switched with one another. They provide a consistent change of the look and feel across your website. While it’s worth noting that not all themes are equally aesthetical and functional, with more than 7500 themes available in the WordPress theme catalogue alone, it’s safe to say you might find a favourite.

Finding a Theme

As we talked in the beginning of this tutorial, the WordPress developer community is huge. There are dozens, if not hundreds of new WordPress website templates uploaded every day. Meanwhile there are also the ones used by tens of thousands and hundred of thousands of websites.

There are also plenty of places to browse WordPress website themes. Paid and free, and all in between! You can start with the popular themes on WordPress.org. Various studios, focusing on WordPress website development, entered this space and along them – even bigger platforms, known as marketplaces. See some of them listed below.

Types of Theme Licenses

Free

Free themes are themes usually shared under a type of GNU General Public License (GPL). This is a kind of free software license that is intended to license software on the internet as a common wealth.

Usually, software with a GNU GPL license is free to edit and expand upon, and utilize either for commercial or personal use.

As can be expected, there is no exclusive support, but some developers and agencies actively maintain forums and groups intended for troubleshooting. A good resource for free themes are various collections with free WordPress website templates in web design blogs such as aThemes and Theme Grill.

Paid, also called Premium

Paid themes usually feature an online demo and sometimes a free trial. They have become an economy of their own and there are many places online where you can purchase one.

First there are the marketplaces – Theme Forest, which is currently the largest, and some of its alternatives – Mojo Marketplace and Creative Market.

Then there are web design agencies that have put out their own theme as a flagship product. Such themes are:

  • Divi (700,000+ users)

It’s worth mentioning that the price for a theme includes technical support by its creators. If you encounter a compatibility issue it’s good to have someone to turn to instead of googling for up to a few days.

Freemium

The freemium business model allows users to download a premium WordPress theme with part of it’s features cut out. Practically a fully functioning demo version of a WordPress theme. 

In order to have the complete package, website owners are required to make a purchase. Freemium themes are usually the highest quality in the “free” category as developers want to impress their users in order to drive a sale.

Unfortunately these are a bit hard to categorize, since they are always put together in with the fully free themes.

As for the support, you can most likely rely on online forums and groups for the free version. There is a big chance such will be moderated by the creators of the theme since your feedback improves their product. 

It’s a win-win. And, of course, if you become a paying customer, you can expect exclusive support.

Still, another good resource for such, besides Theme Grill is Just Free Themes .com.

Installing a Theme Through the WordPress Themes Catalogue

1. From the WordPress Admin screen, head on to main menu → Appearance → Themes

2. Similar to creating a post, click on the Add New button, located near the title of the screen.

3. In the catalogue, you are presented with several ways of filtering themes. Head over to the search bar and type-in Twenty Sixteen as this will be the theme we will use for this exercise. Search results should show up automatically, but if they do not – press enter to confirm your search.

4. Twenty Sixteen should be first in the results. Move the mouse cursor to it and the blue Install button will appear.

5. Clicking the install button will trigger the install process. Wait for it to finish.

6. A blue Activate button should have appeared in place of the Install button. Click it to finish the installation.

7. Note the notification that appeared under the Themes title. Your theme is active.

Customizing Your New Theme

You can customize your new theme using the Theme Customizer.
The Theme Customizer is the first thing you need to familiarize yourself with when you are wondering how to design a WordPress website.

Access it by clicking on Appearance → Customizer, in the main menu.

You will be redirected to the following screen:

When you create a WordPress website, the Customizer is a go-to tool as it allows adjusting the settings of the design and layout side by side, displaying the front-end of your website. This means that you get to see how every change done in the Customizer looks like without having to switch between the admin and the front-end as we have been doing until this point.

The only downside of the Customizer is that it rarely includes all the options we need to fully customize the website. Upon click, the buttons of the Customizer slide into sub-screens with their corresponding settings.

As an example of how the Customizer works, update the description of the site:

1. At the Customizer screen, click on Site Identity. The column will slide llogeft, revealing a new one. You can always return to the previous column by clicking the back arrow near the title.

2. Change the content of the Tagline field to anything you like.

3. Once you are done editing the field, take note of how the website’s description, in the left hand part of the screen, changed.

4. Save the changes by clicking the blue Publish button, located at the top of the Customizer column.

5. Click on the X button, located at the top left corner of the Customizer column, to return to the WordPress admin.

Security Considerations

Website security is certainly way beyond the scope of this beginner tutorial. The most important thing you need to know as a WordPress website owner, is that every time you plug in a theme or a plugin to your website, a new piece of code becomes present and hackers love to exploit code for their own malicious purposes. 

Therefore it’s a good security practice to delete themes you have just tried out and are no longer using. Don’t leave code, you’re not using, laying around for someone else to pick up and use against you.

SECTION 11

Working With WordPress Plugins

What are Plugins

Imagine you’ve written a piece of code on your site, that turns the background color to black every time there is a Black Friday. Now you want to make it available to everyone running a site on WordPress. You also want to make sure that they can install it on their website whether they are developers or not.

Plugins are just that – the technology that WordPress uses to make sure a certain piece of code “fits” to at least 99% of WordPress websites and is easily installed and customizable through the admin.

It’s worth mentioning that whichever online retailer or service (ex: Shopify, Google Analytics, Mailchimp) decides to release an official plugin offering integration between your site and theirs, goes first for WordPress.

Common Roles for WordPress Plugins

Just in the WordPress plugin catalogue there are more than 56,000 plugins available. With number like that you can make a safe guess that whatever you need to be done by a plugin, there is in fact one you can plug to your website.

To give you a general idea of what you can expect, we’ll mention some of the more common areas where plugins can be employed:

  • Content Design and Layout (A.K.A. “Page Builders”)
    – Give your content a captivating and interactive look with sliders, multi-column layouts and much, much more.
  • Plugins for System and Administrative Tasks
    – Make your website faster, automatically creating backups on a schedule, protect your site from hacker attacks and spam.
  • Plugins for E-Commerce
    – Serve customers and charge them for whatever goods or services you are offering
    – Learn more in the next section How WordPress E-Commerce Works.
  • Marketing Plugins– Collect email subscriptions, optimize for search engines (SEO), increase leads through your store and track activity of your visitors

Website Performance Considerations

Many plugins are built on software frameworks. Roughly speaking, software frameworks are collections of tools and components that save a lot of time and errors when building software. They are usually contained in a single package that is required for the software to run.

In WordPress context that means – if you download a plugin that uses framework A and later, you encounter a different one that uses framework. A, but a different version this time, the software framework will be loaded twice on your site in order to function.

This causes redundancies in the size of your website and causes it to slow down and require more resources than it would if all these features were present directly in your website’s theme.

Of course, that’s just a rough, illustrative explanation of a rather complex matter. Just remember that even if plugins are free, you are still paying for them with the performance of your site. Furthermore, certain plugins might require you to upgrade your web hosting plan to a higher tier.

A good practice when adding plugins is to always try and make the best use of the most fully-featured plugin for the given purpose and don’t try to complement it with secondary, simpler plugins.

Plugin Licenses

Just like themes, plugins have free, premium and freemium licensing.
Support goes the same way as with WordPress themes:

  • forums and groups for free plugins
  • exclusive email or ticket support for paid ones and
  • probably both if you are a paying customer of a freemium plugin.

Needless to say, these vary a bit, case by case.

Free

It can easily be said that most of the WordPress plugins are free. Whether someone is gaining experience as a developer, by maintaining a plugin or a studio is making a name for themselves, free plugins are available to serve nearly any purpose. Just make sure the plugin you chose is used on at least 5,000 websites and has at least a 4.5 star rating and you should be good.

Paid

Paid plugins usually offer an entire tool for your website or a service you can make money from, designed professionally and with exclusive ticket or e-mail support.

Freemium

There a lot of advanced plugins. Examples includes plugins that allow you to run a full-featured real estate agency on your site or a page builder that gives you a thousand page templates and components to pick from. Such plugins often offer a base package that is free and allow you to buy separate extensions to complement the specific needs of your project.

Another rather fair example of freemium is plugins that charge only for extensions that integrate with payment processors. Simply put, you pay only when you use them to charge people.

Finding Plugins

When we talk about distribution, plugins and themes can often be found in the same place. Starting-off with the one stop for all your needs – the WordPress plugins catalogue for free and freemium plugins. 

Moving on to marketplaces such as CodeCanyon which is currently the biggest marketplace for premium plugins on the web. 

An alternative that’s been around since the early days of the word-wide web is HotScipts.com. HotScripts offers a good collection of free and premium plugins. 

Lastly, a couple of smaller marketplaces that are still gaining traction, but worth checking out: CreativeMarket with 64 plugins and MOJO Marketplace with 100 plugins.

Installing a Plugin Through the WordPress Plugins Catalogue

1. Back in the WordPress admin for your site, click on Plugins, located at the main menu.

2. On the Plugins screen, click Add New located at the top, next to the page title or the Add New link in the Plugins sub-menu.

3. You are now browsing the WordPress plugins catalogue. Use the search field to the right or the filters below the Add Plugins title to find your desired plugins. For the purpose of this tutorial, let’s type “wordpress importer” into the search field.

4. WordPress Importer enables you to import previously exported content from another website. Click on the Install button, at the top right corner search result for the plugin.

5. Observe the Install button you clicked for the progress of the plugin installation. Once it’s installed it will changed to a blue button, title Activate. Click on it to activate WordPress Importer.

6. You are now redirected to the Plugins screen with a notification below the page title “Plugin activated.” The installation process is now completed and you can see where in the admin the plugin has registered: in the main menu, click on Tools → Import and at the bottom of the table with importers will be the WordPress importer.

Note: Usually plugins appear in much more obvious places such as the Settings menu, located at the bottom of the main menu or they have a main menu link exclusively dedicated to themselves. If you are unsure where to find a plugin, always check the plugin documentation.

Managing Plugins

Now that we learned how to install plugins, let’s see what else can we do.

Deactivation

1. Return back to the Plugins screen by clicking main menu → Plugins → Installed Plugins.

2. On the page you will find a table with plugins on your website. Plugins with a blue table row are currently active. Located WordPress Importer and click on the Deactivate link below.

Removal

1. The page will refresh and the row with WordPress Importer will no longer have blue background. Now, on the same row, below the title of the plugin, click on the red Delete button to remove it.

2. A pop-up window will appear as a confirmation. Make sure to click Okay. Once you confirm, the row in the table will change to a confirmation message:

Settings

In order to avoid hunting through the menus to find where your new plugin has registered, you can use the Plugins screen and directly switch over to the settings page for the said plugin.

  1. Locate the row where your plugin resides
  2. Make sure it’s active – its row will have a blue background
  3. Click on the Settings link below the plugin title

Security Considerations

As with WordPress themes, a good security practice is to delete plugins you are not using. If you use them occasionally, then at least keep them disabled until you need them again.

7 Plugins to Get You Started

Unlike themes, which can be picked simply for the aesthetic appeal, plugins play a variety of roles in your website and we just can’t let you go without some recommendations. Of course, you need keep your website light, so pick wisely.

1. Elementor Page Builder
5+ million active installations
role: content editor

Rightfully advertised as “the best FREE WordPress Website Builder”. Page builders provide you with a “palette” of blocks you can drag and drop on your page to create complex layouts and interactive pages with drop-down menus and animated components. Makes creating home pages and promo pages a lot of fun.

2.Contact Form 7
5+ million active installations
role: displays contact form to your visitors

A reliable plugin that enables you to create a contact form with custom fields and attributes, would you need one.

3. WPS Hide Login
600,000+ active installations
role: hides the WordPress admin login page

The WordPress admin login page is the most commonly attacked part of your WordPress website. This plugins changes the default address for accessing the admin to anything you like.

Basically, you can turn that address into a password of your own. Once active, the original /wp-admin address will result in a “page not found” error message to anyone who tries it.

4. UpdraftPlus WordPress Backup Plugin
2+ million active installations
role: creates and manages backups

As we discussed backups are crucial when you are working on a live site and UpdraftPlus is one of the recommended plugins for managing your backups. You can schedule automatic backups and, before you start working on something, create a manual backup as well. Make sure to carefully read the plugin documentation on how to create and restore backups.

5. WP Fastest Cache
1+ million active installations
role: website performance

Every time a visitor loads a page on your site, WordPress combines together dozens of files into a single web page, before displaying it to your visitor. This process makes visitors wait and your wastes server resources.

A ‘cache’ is simply a copy of the final web page, after all the WordPress has done to display it. With this simple, yet powerful plugin, you can have your visitors access directly the ‘assembled’ web page, cutting down the page load time dramatically.

Note: Might not work well with JetPack.

6. JetPack
5+ million active installations
role: website management

Created by WordPress themselves, this toolkit is what you need to: 

  • improve website load times
  • protect against spam and monitor for downtime
  • analytics for learning about your visitors
  • website monetization with pay-per-click ads
  • PayPal button integration and much, much more

7. Classic Editor
5+ million active installations
role: text editing

WordPress recently introduced the block editor we used earlier which is currently in beta. Try it out and if you decide to opt-in for a more traditional experience – the Classic Editor is for you.

In fact, it used to be the primary content editor for WordPress up until the block editor took it’s place. Also note that if you decide to use page builders such as Elementor, you might need this plugin as well.

Remember to use the steps you learned in the previous section to install those plugins directly from your WordPress admin. Find recommended plugins for e-commerce in the following section.

SECTION 12

How WordPress E-Commerce Works

Whether you are looking into it to start your first business online or to supplement your brick-and-mortar store, combining one of the most disruptive technologies ever created with the most popular content management system is certainly a good idea.

Some E-Commerce Basics

Electronic commerce (e-commerce) is the transaction of goods and services over the world-wide web. Nowadays you can order nearly anything online – from clothes, furniture and medicine to tickets, consultancy services and creative work like art. In fact, e-commerce is the technology that has impacted our lives to date, since the creating of the internet, of course!

E-commerce websites can be retailers such as Amazon, that allow you to order directly from their warehouses or marketplaces like eBay and Etsy which provide a platform for buyers and sellers to transact with each other.

Types of WordPress E-Commerce Websites

There are quite a few plugins out there that allow you to create a WordPress business website. To give you an idea of the variety, here are a few things you can sell, as an example:

  • event and travel tickets
  • apartment and office rentals
  • bookings for guided tours and weekend getaways
  • retail products (read: anything from computer parts to flip-flops)
  • appointments for consultancy services
  • software and music (digital products that can be downloaded after purchasing)
  • subscriptions for streaming services

Marketplaces and classified sites are not part of the list above for a good reason. They fall in a bit of a gray area, compared to the shopping process we are used to think of when we hear “e-commerce”. They are, in fact, more of intermediary services where the owner provides a place for buyers and sellers to transact with one another and charges the seller a small fee for enabling them to earn a profit.

The WordPress E-Commerce Process

With marketplaces and classifieds out of the way, we can now focus on the solely transactional process between a happy shopper and the e-commerce website they are visiting. There are some specifics in the e-commerce process for some of the business models we mentioned, but the general gist is that your WordPress e-commerce website consists of:

1. A page on your website that serves as products/services catalog

2. Shopping cart, where you add purchased items

3. A checkout processor, to calculate delivery and collect customer data

A payment processor, to:

1. process the payment method of your customer (ex: debit card, PayPal, Skrill)

2. deposit the processed payment to your (bank) account

3. redirect the customer to a “Thank You!” page, that serves as the confirmation for a successful order

All you need to do in order to have this multi-step process serving your website’s visitors 24/7 and make money for you is to set up the right plugin.

7 WordPress Plugins for E-Commerce

WordPress plugins for e-commerce are bit different than the rest. They can range from simple product catalogs to more complex ones that estimate delivery time or manage availability for events and apartment rentals.

Plugin Considerations

Most e-commerce plugins do not come with the extensive developer community and voluntary support WordPress does. With this in mind, it’s good to mention that they can be a bit of an advanced topic because they might require manual installation (not a one-click install through the plugin catalog in your admin). Furthermore, if you require customization to fit your business model, it might be a good idea to commission the creator of the plugins or hire a freelance developer.

The List

So, without further ado, here are 8 e-commerce plugin recommendations, based on the goods and services we mentioned at the beginning of this section. We are mentioning only e-commerce plugins that allow you to sell your own product or service. This excludes business models such as dropshipping and affiliate marketing. 

Also, the minimum criteria for this list is the plugin having an means to display the product or service and collect a payment for it.

1. WooCommerce

One of the most widely used e-commerce plugins for WordPress. While most, if not all, e-commerce plugins come as an out-of-the-box product that you can use for a singular purpose, WooCommerce has its own developer community and a variety of plugins and themes, specifically designed for itself. Really, WooCommerce is like the WordPress of e-commerce plugins and deserves a separate article on its own.

2. BigCommerce

Enterprise-grade e-commerce platform, powering one of the biggest retailers on the web. Offers integration with WordPress via a free plugin. A lot of your e-store is handled by their servers which allows to take load off your WordPress hosting and provide high grade of security and performance; $29.95/mo

3. The Events Calendar

Free and feature-rich plugin for booking virtual and in-person events. It comes with it’s own search engine and Google Maps integration. Having it’s own library of paid and free extensions, with which you can collect payments for tickets via PayPal and start your own community, enabling members to submit events.

4. Appointment Hour Booking

The plugin comes in a free and several commercial versions, starting 5.99€ per month. It’s intended for booking consultations, trainings and similar services over a predefined schedule and calendar. Features addons for integrations such as Zoom, reCaptcha, MailChimp and SalesForce. 

Support a number of payment providers: 

  • PayPal Standard
  • PayPal Pro
  • Stripe
  • Skrill
  • Authorize.net
  • TargetPay/iDEAL
  • Mollie/iDEAL
  • SagePay
  • Redsys

5. Paid Member Subscriptions

An excellent plugin if you are running a WordPres website focusing on member-only content. It’s advertised as “a complete membership solution” allowing you to manage members, create subscription plans and hierarchical subscription plans (ex: Free, Silver, Gold)l; and restrict access to premium content. It collects payments from your members via PayPal and is free to download.

6. Easy Digital Downloads

This is a very popular solution for selling digital downloads on WordPress. Features a shopping cart, checkout form, detailed reporting and a number of thoughtful extensions. More importantly, features product file protection, which you can use to prevent access to users who haven’t paid. 

For the times when one person pays and sends the download link to someone, so they can download it as well. Supports payments through PayPal Standard and Amazon Payments. Another 11 payment processors are available as premium extensions.

7. Easy Property Listings

A freemium plugin, intended for real estate agents and agencies, this plugin features a number of customization makes it adjustable according to the market you operate in. This is the only plugin on the list that doesn’t feature a payment processor.

Can be used to generate a list of available properties, based on your client’s criteria and has professionally designed listings, among a number of other features. Extendable with 25 paid extensions.

8. WCFM Marketplace – Multivendor Marketplace* WCFM stands for WooCommerce Front-end Manager.

Another freemium plugin (for WooCommerce) that enables you to quickly have your own version of eBay, Etsy or AirBnB running

Features a comprehensive search engine, commission system and flexible shipping, order withdrawal, refund and payout options. Really has a number of extensions and features. Note that some are paid.

SECTION 13

Editing the Code of Your WordPress Website

Since this tutorial is for beginners, we’re assuming you are not familiar with things such as HTML, PHP, CSS and JavaScript.

Editing the code of your website is a technical undertaking and is not recommended – it can break your website completely. It’s not just about knowing how to edit a WordPress website, but also being familiar with various programming concepts and best practices.

Of course, if you’re feeling adventurous you can do some minor edits such as pasting your Google Analytics code, according to Google’s instructions. Just keep in mind the following:

  1. Changes will be overwritten if your theme is updated
  2. Always back up your website before making changes
  3. Have your backup ready to be restored in a moment’s notice
  4. Always have just 1 copy of a certain javascript, loaded on your page

When Do You Need a Developer?

A developer is required every time you need:

  • complex changes on your website to be done and
  • when you cannot afford your website stop serving visitors by showing an error or going offline.

When you hire a developer to work on your site, they will copy your website on their computer in something known as “development environment”. They will make all the required changes, test for and fix technical issues. Once everything is verified to work, the developer copies these changes over to your live website.

This approach allows for complex changes to the code without risking the live site going offline.

Introduction to the WordPress Theme Editor

This section is provided as a brief introduction on how to edit your WordPress website, directly from the admin. Just remember edits you make will be overwritten by updates.

The link for the Theme Editor is located at the bottom of the Appearance section in the main menu.

Clearly, we are not the only ones concerned about your theme’s safety – when visiting the Theme Editor for the first time, WordPress will display a warning message:

Click the blue “I understand” button to continue and it will permanently disable the warning.

The Theme Editor is basically a text editor with a list of files next to it. The main column to the left, titled “Selected file content:” is for editing files and the one you pick files from is titled “Theme Files”.

Every time a page on your site is visited, WordPress takes all or most files from the Theme Files list and combines them together into one, which we usually refer to as “the web page”.

The Theme Editor also displays the currently active theme for your site. If you want to edit another theme, use the drop-down menu to the top-right of the screen, labeled “Select theme to edit:”. Once you have picked another theme, make sure to click the Select button, to switch over to it.

Working With JavaScript Tracking Codes

Most commonly, the Theme Editor is used for placing JavaScript code provided by various counters and trackers, website owners use. This could be Google Analytics, Google Tag Manager or any other website analytics or marketing service. When pasting code provided by any of those, always make sure to read carefully the installation instructions and make sure you know in which part of the document the script should go.

Usually, JavaScript code is placed in either: 

  • the header.php file (a.k.a. ‘the web page header’), containing:
    • the <head> section of the web page.
    • the beginning of the <body> section of the web page
  • or the footer, which is an abstract term for “the bottom of the web page”.

The <head> section is at the very top of the web page’s code and contains technical information such as the page title displayed in your browser’s window title (the top most horizontal line where you close and minimize).

The <body> section is responsible for holding your content together on the screen and making it visible to you and your visitors.

Bare in mind that when we talk about tags and files, we assume that, whichever theme you are editing, is created in accordance to WordPress’ Developer Handbook. Not all themes are made equal and there is a miniature chance for you to come across a theme that lacks <body> tag in the header.php file, for example.

Testing for Editing Capabilities

It’s becoming more and more common for the Theme Editor to be disabled by your web hosting provider for security reasons. After all, anyone who gains access to the admin can do a ton of damage to your hosting account (and not only) if they get their hands on the Theme Editor.

To test if the editor is enabled just make sure you:

  • haven’t done any changes to the code (refresh the page if you have) and
  • are at the Edit Themes screen

Press the blue Update File button, located at the bottom left corner of the screen, right below the editor.

If you receive an error message after updating the file, it’s best to contact technical support and request that this restriction is lifted for your hosting account.

Working With Some JavaScript

For the purpose of this exercise, we are providing you with a JavaScript code that will display a small window with an OK button on it, on page load.

Note: Always Keep 1 Copy of the Script for the Entire Web Page

For example, you paste the sample JavaScript code in footer.php. Make sure it is present only once in this file and it isn’t pasted in other theme files as well.

Sample JavaScript Code

<script>alert(‘This is JavaScript’);</script>

Note: Most of HTML page elements have an opening and a closing tag. In the sample below it’s <script> and </script>. Take notice of the forward slash at the beginning of the second tag. This is the closing tag.

Locating Files In The Theme Editor

By default you start out with the Stylesheet (style.css) of your theme selected. Every time you visit the Editor this file will be selected.

The more important files of any WordPress theme, follow a specific naming convention, such as:

  • Stylesheet, for the theme’s style.css file, containing the design of the theme
    Using WP Theme Editor 4
  • Theme Header, for the header.php file
    Using WP Theme Editor 4
  • Theme Footer, for the footer.php file
    Using WP Theme Editor 4

Each one of these files is present only once in your theme. As you can see their name is always followed by the filename, in brackets below. It’s best to always look for the name and then confirm with the filename, just to make sure. As we said earlier, not all themes are made equal.

Let’s locate the header.php file in the list and click on it. The contents of the text editor to the left change and we can bring our attention there.

Updating Header.php

When directed to place a JavaScript code in the header it can be either just before the closing </head> tag or right after the opening <body> tag.

HTML follows a tree-like structure of indentations, meaning if a tag is contained within another one, most of the cases it will be indented with a few spaces:

Use this knowledge to your advantage and read through the beginning of every line until you locate the closing </head> tag and the opening <body> tag.

To open a new line, simply click in front of the </head> tag and hit Enter on your keyboard.

Now copy the JavaScript sample from this article and paste it in the new line we just opened.

Your code should look something like this:

Previewing Changes in the Front End

Now press the blue Update file below the text editor and proceed to the front-end of your website. Refresh the web page and you will be presented with a pop-up window that features the text “This is JavaScript” and an OK button.

Depending on your browser and operating system the pop-up should look something like this:

  • Now let’s switch over to the back-end and revert the changes
  • Once you’ve clicked through Appearance → Theme Editor, from the main menu, load up the Theme Header (header.php) file from the list to the right
  • If you’re working with the Twenty Sixteen theme, we installed earlier, just scroll down to line #22 to locate your JavaScript
  • Select the entire line, making sure it is the only one marked and delete it. Double check you haven’t deleted any other characters by accident as this will break your web page
  • Hit the Update File button to save the changes
  • Always test what you’ve done, just to be sure. After heading back to the front-end and refreshing the page, there should be no pop-up this time

Other Files

You can repeat these steps for this and other locations in your code. To summarize:

  • before the closing </head> tag, in header.php
  • after the opening <body> tag, in header.php
  • before the closing </body> tag, in footer.php (in the last few lines before the very end of the document)

SECTION 14

Conclusion

We hope you found this guide on how to build a website using WordPress useful. Your WordPress journey is just beginning as is a lot more to be learned. Furthermore, WordPress is a project that is being continuously developed and it probably won’t stop now, releasing new and exciting features.

Write a Comment

Required*