The Easy Guide to Creating Your Website with WordPress

Here’s a handy, illustrated, and concise guide to creating your blog or website with WordPress. In this first part, we’ll look at what WordPress is, the administration interface, and the basic settings. Then, in the second part, you’ll learn how to customize your blog or website and how to publish your first posts.

Here’s the program
Presentation of WordPress
Discovering and Setting Up WordPress
Part II: Customize your WordPress website/blog and create your first posts

Presentation of WordPress

But first, what is WordPress?

WordPress (WP) is what’s called a Content Management System (CMS). It allows you to create a site or blog, without necessarily knowing Web coding (HTML, CSS, JS or PHP). It is free, open-source, and used by more than half of the world’s bloggers. It is one of the strengths of WP because it gathers such a community of users that you can be sure, in case of problems, to find an answer to your questions or even fast and free assistance on one of the many sites or forums which are entirely dedicated to it.

How does it work?

Two Distinct Parts: The Backend and the Frontend

The frontend (or front-office): This is the visible and public part of your website— pages, posts, images, videos, comments, in short, all the content that you make available to your readers.
The backend (or back-office): This is the invisible part of the iceberg. It’s from here that you’re going to manage all the administration of your website or blog—whether you want to write your posts, choose a skin, create a contact form, manage registered members, add extensions, etc.

_{IMAGE 1} WordPress: Create a post
Photo: Pawel Nolbert – Unsplash
_{IMAGE 2} WordPress: Customization
Theme: Astra

What you need to understand and remember here is that all the modifications you wish to make to the visible part of your site (frontend) will be done from the administration part (backend).

The themes

WordPress comes with a default skin that determines the overall appearance of the site/blog. This is called a theme. You’re free to keep it if you like, but be aware that there are a multitude of free and premium themes on the web. Some of them even already include features that could be useful to you (portfolio or image gallery, contact form, adaptability to mobile devices, social media integration, etc.). And you don’t need to be a NASA engineer to change it—a few clicks are enough as we will see.

Note that most of the free themes also exist in premium version, offering much more customization possibilities and additional features.

_{IMAGE 3} WordPress: Themes
_{IMAGE 4} WordPress: Premium Themes

The plugins

WordPress allows the simple addition of so-called plugins. As with themes, there are free and premium ones. They come in the form of small compressed (zip) files that, once downloaded and installed, will add new features to your site. For example, you’ll be able to add forms (contact, quiz, polls…), social network sharing icons, a discussion forum, offer your posts in multiple languages, create image galleries, secure WP, etc. I propose a list of my favorite plugins in the third part of this article dedicated to WordPress, as well as a short tutorial explaining how to install them in the second part.

_{IMAGE 5} WordPress: The plugins
_{IMAGE 6} WordPress: Premium Plugins

WordPress .com and .org?

There are two types of WordPress:

WordPress.com: If you don’t have any technical knowledge of the Web, this is probably the easiest solution. No installation is necessary, you just need to go to wordpress.com, create an account, adjust the main settings to your needs, and from there, you can start writing your posts. But beware though: what you gain in simplicity, you lose in flexibility, at least with the free version.
First of all, since your site is hosted by them, you have neither control nor absolute ownership of it. This can be a problem if you later decide to migrate to a wordpress.org version.
Next, the web address (URL) of your site will end with wordpress.com. For example, if you want to create a blog about little birds that sing in the spring and want to call it “singing little birds”, your URL will be “www.singinglittlebirds.wordpress.com”.
Other inconveniences, ads will be displayed on your blog, and it is impossible for you to install plugins or monetize your posts.
This is if you use the free version, of course. And to avoid all these disadvantages, you will have to choose one of the paid plans. If you are willing to spend up to 25$ per month ($4 if you just want to remove the ad and customize the domain name), then this is a great option. But, personally, I prefer to use the wordpress.org version.

_{IMAGE 7} WordPress.com: The user interface
_{IMAGE 8} WordPress.com: Themes
_{IMAGE 9} WordPress.com: The creation interface

WordPress.org: : As I said earlier, the “.com” version is mainly for those who have no experience in managing a website. Having said that, the basics are learned fairly quickly. The main difference here is that you have to start by buying a domain name (www.yourwebsite.com), a web hosting, and install WordPress on it. Well, if you didn’t faint or leave screaming in horror, I’ll explain how to proceed a little further down.

WordPress Demo: If you want to see what the WordPress admin interface looks like, check out the demo site at softaculous.com, click on “admin panel” and log in using the credentials provided.

Which .com or .org is best for me?

It’s simple. If you don’t want to bother too much with technical manipulations and just need a basic blog or are willing to pay a certain amount of money every month to have more features, wordpress.com will suit you perfectly.

On the other hand, if you are a minimum autodidact and curious (it often goes hand in hand) but above all, you want to have total control over your website or blog, choose wordpress.org without hesitation.

In this article, I’m going to focus on those who have chosen the “.org” version of WordPress. However, since the two versions are quite similar, it should also be very useful to others who have chosen the “.com” version. If this is the case for you, you can go directly to the “Discovering and Setting Up WordPress” section.

Quick tip: To access the administration interface visually similar to that of wordpress.org from wordpress.com, you will need to go to the “My Home” page and click on the “WP Admin” link in the left column. [IMG7:1]

Domain Name and Hosting

So, if you chose the “.org” version, you will need, as I said, a domain name and hosting.

The domain name: As a reminder, the domain name is the URL that will be displayed in the address bar of your browser when Internet users visit your site (e.g., https://www.yoursite.com). The cost is about $10 to $40/year. This amount varies according to the chosen extension (.com, .uk, .ca, .au, .net, .org, etc.).
Hosting: Hosting represents the physical space that will be allocated to you on a server, in order to host all the files of your site (images, HTML, PHP, etc.). Choosing among the different offers depends on the size of your site, the number of visitors, etc. I simply advise you to start with a basic hosting which usually includes the minimum necessary and usually costs between 50 to 120$/year. Most hosting providers offer a specific plan for WordPress users. It includes one-click installation but most importantly guarantees compatibility with WP.

I won’t be able to detail the purchase procedure here as it varies greatly depending on the web hosting provider you choose, but their interface is relatively intuitive, so it should go smoothly. As soon as you have subscribed to a hosting plan and activated the WordPress installation in one click, you should receive an email containing login information allowing you to access your cPanel administration area. Keep it safe.

cPanel is the user interface found in many hosting services. This is where you will be able to manage your web hosting, databases, custom emails, etc. If you want to see what it looks like, click here to visit the demo version of cPanel.

Installing WordPress.org

I’ve prepared a short video to show you how to install WordPress. If you did the installation with one click (e.g. with cPanel/Softaculous), you can go directly to 2:36” of the video. For others, watch it from the beginning to learn how to download WP and send the files to your web space.

Here are the download links cited in this video. They are all free:

FileZilla: FTP client to access your web space and transfer the WordPress folder.
WordPress: To download WordPress.

Discovering and Setting Up WordPress

Now that WordPress is installed, let’s review the different sections of the dashboard (backend) and the main settings to be done. I won’t go into the customization and page or post creation phase here yet, but I will talk about it in detail in the second part of this article.

Posts

As you’ve probably guessed, this is where you will create and manage all your items [IMG10], but let’s leave that aside for now.

Media

This is where all the images [IMG11] that will be used to illustrate your posts or appear on the pages of your blog will be added, but here again, we’ll come back to this later.

Pages

Unlike posts, pages [IMG12] offer static content and are generally used to create a home page, contact page, or any other page that is linked to the navigation menu. For example, if your blog contains a contact form, you will need to create a contact link in your navigation menu that will lead to a page containing this form. If this still seems a bit nebulous, don’t worry; I’ll explain how it works in the second part of this article.

Comments

If you have enabled comments on your blog, they will be displayed at the bottom of each of your posts but also in this section [IMG13]. As you’ll see, it’s convenient and very simple to view, delete, reply, or even modify the comments left by your readers.

_{IMAGE 10} WordPress: Posts
_{IMAGE 11} WordPress: Media
_{IMAGE 12} WordPress: Pages
_{IMAGE 13} WordPress: Comments

Appearance

Themes: I already told you about the themes a little above. This set of files change the look of your blog and also add (depending on the theme chosen) some additional features. I will explain how to change the theme in the second part of the article, but in the meantime, we will use the default themes offered for the rest of this lesson on WordPress.org.
Customize: In this section, you will have a visual on your blog, and you will be able to modify it as we will see here. The elements that are proposed differ according to the theme you choose, so don’t worry if you notice some differences.
- Site Identity: You will be able to modify the title of your blog [IMG14:1] as well as its slogan [IMG14:2]. For example, you can choose as title: “Little Birds”, and as slogan: “A blog about little birds that sing in spring”.
  You will also be able to add a logo [IMG14:3] if you have one, via the “Select logo” button. It will usually be inserted in the upper part of the blog, next to the navigation menu.
  And if you wish, you will also be able to add an icon to your site [IMG14:4], which is a small image that can be seen in the browser tabs, bookmark bars, and mobile applications. To do this, just like adding a logo, simply click on the “Select site icon” button at the bottom of the left column and choose an image (preferably square and 512 pixels wide) that will be automatically converted by WordPress to display correctly on all browsers and mobile devices.
- Colors: The content of this tab varies depending on the theme you have installed, but this is where you will be able to choose the dominant and recurring colors [IMG14:5] that are displayed on your site.
  If, for example, you have selected the “Twenty-Sixteen” theme, you will be able to choose the background color, the color of the page background, the links, the main text and so on.
- Header Image and Background Image: These options are only available on some themes such as “Twenty-Sixteen” and allow you, as you might guess, to add a header image [IMG14:6] at the top of the page and a background image [IMG14:7].
- Menus: You can create a navigation menu here [IMG14:8], but personally, I prefer to go through the specially dedicated settings page which I will talk about here.
- Widgets: Widgets are small modules that are usually found on the sidebars of blogs and contain some handy tools such as a search bar, a list of recent posts or blog categories, a calendar, a tag cloud, etc.
  The number of widgets available again depends on the theme you choose. At the very least, you will be able to use the ones I just listed above, but be aware that some themes offer even more widgets: mini-image gallery, Facebook or Twitter feed display, Google Maps, YouTube video display, etc.
  To add a widget, simply click on the “Add a widget” button [IMG15:9], then select the one you want to add and finish by clicking on the blue “Publish” button above. But as for the Menus option, I prefer to use the settings page dedicated to this and will explain it to you in more details here.
- Homepage settings: Here, you can choose the type of homepage [IMG15:10] you want to use. Either a page that will display a list of the latest posts from your blog, or a personalized page that you will have created beforehand.
  In this second case, simply select a static page and then choose the desired page from the drop-down list. If you have not created any, click on “Add a new page” [IMG15:11], give it a title, and then click on “Add”. I will explain how to customize it in the second part.
- Additional CSS: CSS (Cascading Style Sheets) is a Web language that is used to manage the appearance of a site. Among other things, it allows you to set the color and size of different texts, the size of images, the spaces between different elements, add borders, etc. Most themes allow you to add your own CSS code [IMG15:12] and, even if it is not mandatory to know this language, acquiring the basics is a real asset.
Widgets and Menus: I have already explained above what widgets and the navigation menu are, and we will see in the second part how to use them.
Editor: Don’t touch anything here, especially if you have no knowledge of PHP, HTML and CSS. The editor is used to modify the source code of your theme, so needless to say, if you make a mistake, your blog may simply not be displayed anymore. Moreover, any modification made here will be automatically canceled the next time you update the theme. So, if you really need to make changes to the theme source files, do it via a “child theme” as explained in part two.

_{IMAGE 14} WordPress: Customization I
_{IMAGE 15} WordPress: Customization II
_{IMAGE 16} WordPress: Editor

Plugins

You will be able to add the extensions you will need for your blog. [IMG17] As a reminder, these will add new features to your site, such as forms (contact, quiz, polls…), icons for sharing on social networks, a discussion forum, propose your posts in several languages, create image galleries, secure WP, etc.

WordPress comes with two extensions by default: “Akismet” and “Hello Dolly”. The first one, “Akismet”, is used to filter the comments left by your readers and removes possible spam (unwanted advertising) which, otherwise you will see, will flourish quite quickly under your posts. You can, therefore, activate this plugin if your blog posts are open to comments.

The second, “Hello Dolly”, is an plugin developed by Matt Mullenweg, the founder of WordPress, that displays the lyrics of a random song in the upper right corner of your dashboard. It doesn’t really serve any purpose, so you can remove it.

As for the themes, the plugins are regularly updated by their creator, so you will have to install them each time they are updated. Fortunately, it is now possible to do this automatically. To do so, just click on “Enable auto-updates” [IMG17:1], and you won’t have to worry about it anymore.

_{IMAGE 17} WordPress: Plugins

Users

Another great strength of WordPress is that you can give your readers the ability to register with a username and password on your blog. This can be useful, for example, if you want to create a community of users or if you have multiple people writing posts.

All registered users are listed here, including you. By clicking on a profile, you have the possibility to modify some parameters, and while I won’t mention all of them, here are the main ones:

Toolbar: : Checked by default, this box allows you to display a toolbar [IMG18:1] at the top of your blog (the same one you’ll find at the top of your admin area) and only visible by you. Via this handy bar, you will be able to directly access the theme options, widget and menus, create a new post, see new comments, and more, knowing that some extensions add new items to this bar.
Language: Here you can change the WordPress dashboard language [IMG18:2] for each user. If you want to add languages other than the default, go to “Settings › General › Site Language” [IMG20:7], then choose the language you need, and finish by clicking the “Save Changes”’ button.
Role: Here you can assign a new role [IMG18:3] to the user. I explain this in more detail just a little below.
Display name publicly as: By clicking on the drop-down list [IMG18:4], you can choose the name that will appear on each of the posts you have posted or comments you have left. Several combinations will be offered to you if you have filled in the “First Name”, “Last Name”, and “Nickname” fields.
Warning: For security reasons, I strongly advise you to use a different name for “Login” and “Display name publicly as”. Indeed, if malicious people try to hack your account, they will only have to find the password since they already have the login. Avoid making this mistake.
Profile Picture: [IMG18:5] If you don’t have a “Gravatar” profile image linked to your email address, you can add one by going to their site. If, on the other hand, you want to be able to change your avatar without going through their service, you will have to use an extension such as “WP User Avatar”, for example.
New password: You can change your current password by clicking on the “Set new password” button [IMG18:6]. If you do so, because you think your account may have been hacked for example, be sure to click on the “Log Out Everywhere Else” button, then on the “Update Profile” button, so that the changes will take effect.
Application passwords: This feature appeared since v5.6 of WordPress, allows making authenticated requests to various WordPress APIs. I won’t go into details here, but if you want to know more about it, it’s here.

_{IMAGE 18} WordPress: Users I
_{IMAGE 19} WordPress: Users II
_{IMAGE 20} WordPress: Genéral › Language

Tools

This section contains tools to make a complete backup of WordPress (posts, pages, and media), but it’s not important at the moment, so I won’t dwell on it.