- Here’s the program
- Presentation of WordPress
- Discovering and Setting Up WordPress
- Partie II: Personnaliser votre site/blog WordPress et créer vos premiers articles
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.
WordPress: Create a post
Photo: Pawel Nolbert – Unsplash
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).
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.
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.
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.
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.
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.
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.
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.
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
Themes: I already told you about the themes un peu plus haut 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.
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.
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.
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.
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.
Read carefully here, because we’ll discuss the various important settings of your blog.
Site Title: Here should be indicated the same information as we have already seen above in “Appearance › Personalization › Site Identity”. If this is not the case, write the name of your site here as well as your project or your company. For example, if the Web address of your site is singinglittlebirds.com, you can simply separate the words “Singing little birds”.
Slogan: As we have already seen above, you can summarize in a short sentence what your readers will find on your blog (e.g. A blog dedicated to the photography of the little birds of our country).
Site and WordPress Address: These two fields contain the Web address (URL) by which people will access your site. They are already filled in by default, so you don’t need to change anything here.
Administration Email Address: The email address where all notifications related to your blog will be sent to you (updates, comments, security alert…). If you want to change it, simply enter the new email address and click on the “save changes” button.
Membership: As I explained above, you can give your readers the opportunity to register on your blog. If this is what you want, check this box and then click on the “save changes” button.
New User Default Role: Here you can choose the default role assigned to each new user. I advise you to leave “subscriber” by default, which just allows them to read your posts and comment on them.
Administrator: Provides the same access as you to all WordPress administration features. Therefore, it should be absolutely avoided.
Editor: Can publish and manage his own pages and posts as well as those of other users.
Author: Can publish and manage his own posts only.
Contributor: Can write and manage his own posts but cannot publish them.
Subscriber: Can only manage his profile and comment on published posts.
Needless to say, you should avoid selecting the default Administrator role unless you want to let anyone do anything with your site. And if you want to know more about roles, I advise you to read this article.
Site Language: This allows you to change the language of the dashboard (backend) for all users. Warning, this option will not translate the posts or pages of your blog. For this, you will have to use a specific extension such as WPML or Polylang..
Time Zone: This setting is used, among other things, to indicate the date and time you published your posts. The easiest way is to just choose a city located in the same time zone as yours from the drop-down list.
Date and time format: Choose the format for displaying the date and time on your site. This information is mainly used to indicate precisely when a post or comment was published. If you wish, you can customize these formats by following these instructions.
The week starts on Monday: Leave it like that if you have nothing against this statement.
Click “Save Changes” before proceeding to the next section.
Default Post Category: Once you have created categories for your posts, you will be able to select a default category here. This category will then be predefined each time you write a new post. And if you wish to change it, you can do so via the drop-down list as we’ll see in the second part.
Default Post Format: This option allows you to define the type of post you will publish. The proposed formats vary according to the theme you use but generally include types such as Gallery for an image gallery, Video if it’s a post containing one or more videos, Sound for audio content, etc. This format offers a simple way to customize and homogenize the display of your posts but requires a technical intervention, such as fiddling with the PHP code of your theme. For this reason, and in order to stay focused on the essentials, I won’t go into this topic here, but if you want to know more, have a look here.
Post via email: : As this title suggests, you have the possibility here to post your new posts by email. However, I recommend that you use the WordPress editor (Posts › Add) to get started. It’s better to know how to walk before learning how to run as my grandfather used to say (he was in a wheelchair but had a great sense of humor). But if you are interested, check it out here.
Update Services: Each time you publish a post or modify an existing one, this service will send a “ping” notification to search engines (among others) and facilitate their indexing. There is nothing to change here, but just make sure that the line “http://rpc.pingomatic.com/” is indicated in the text field. And if you want to know more, you can read this post.
Click “Save Changes” before proceeding to the next section.
Your homepage displays: The home page is the main page of your site, the one on which visitors land via the root URL of your site (e.g.: http://www.yoursite.com). Here, you have two possibilities: Either display the latest posts published, which is generally done in the case of a blog, or display a personalized page that you will have created beforehand, a choice that is necessary if you wish to display anything else.
Please note that if you choose this second option, you should also create a page listing your latest posts, and select it from the “Post Page” drop-down list.
Blog pages show at most: You can choose the maximum number of items displayed on the pages listing all your posts (the homepage for example if you have selected the option “Your latest posts” just above).
Syndication feeds show the most recent: Same as above, but for the RSS feed. This feed lists all your posts and allows your readers to view the latest updates on your site. It is not essential to know more about RSS, but if you are interested, check it out here.
For each post in a feed, include: This option allows you to choose either to display the entire post or an extract in the RSS feed. Just select the extract here, and you’ll be fine.
Search Engine Visibility: It is generally advised to check this box during the entire period when the site is in development. This option tells the various “bots” from Google, Bing, and other search engines that will come to visit your site, so that they can index it, not to do so for the moment.
Rather than checking this box, I advise you to install a plugin such as “Password Protected”. These bots are a bit “susceptible” and don’t like to be treated that way. It’s a bit like going to a nightclub on a Saturday night and being refused entry by the bouncer. It’s not very pleasant. With this extension, they will simply think that the nightclub is closed, so no one is having fun without them inside.
Click “Save Changes” before proceeding to the next section.
Default post settings: The first two boxes will be beneficial to your natural referencing on search engines, so you can check them. The third one allows you to activate comments under your posts (which is a bit the purpose of a blog), so you can activate it too.
Other comment settings: Each of the checkboxes is pretty self-explanatory, so you can decide to check them or not, but if you hesitate, I advise you to follow the example on the picture that illustrates this section.
Email me whenever: Here you can choose to be notified by email when a new comment is posted or awaiting moderation (depending on the option you choose just below).
Before a comment appears: Check the first box if you want to approve a comment before it is published. The second allows you to publish the comment immediately if its author has already been approved a first time.
Comment Moderation: You will probably and unfortunately see it soon enough: spam (advertising messages) are a real plague on blogs. One of the characteristics of these unwanted messages is the number of links they contain, often two or more. So leave this first option on 2 links. You can add keywords in the text field just below. If a comment contains one of them, you will have to validate it manually.
Disallowed Comment Keys: This text field here has a similar function to the one just above, except that in this case the comments will be automatically trashed.
Avatar Display: Check the box if you want the commenter’s avatar to be displayed next to his username. If he or she is registered on Gravatar.com, this image will be used.
Maximum Rating: Gravatar is a free service allowing everyone to use the same avatar (image that illustrates your profile) on all compatible websites. When a user uploads an image, they are asked if it is all public or not. This choice is divided into 4 categories:
- G = Visible by all.
- PG = Possibly offending, normally reserved for persons 13 years of age and older.
- R = Reserved for people over 17 years old.
- X = RReserved for adults.
You can, therefore, choose here the level of maturity of the avatars that will be displayed on your blog.
Default Avatar: If the commenter does not have a Gravatar, you can choose which image will be displayed instead.
Click “Save Changes” before proceeding to the next section.
Image Sizes: When you add an image to WordPress, it is automatically resized and saved in three additional sizes. These thumbnails are used to optimize their display and speed up the loading of the pages that make up your site. 3 is a minimum number as many themes add additional sizes for efficiency. Most of these themes take into account the default size of the WP thumbnails, so if you are not sure which size to choose, leave the default values for now.
If you check the “Crop images” box, the images will be cropped to the exact size you want.
Uploading Files: Check the box. Your images will then be placed in folders prioritized according to the month and year they were added. This is best if you want to find them easily in the WordPress’s “Uploads” folder.
Click “Save Changes” before proceeding to the next section.
Common Settings: You can customize the URL, or web address, of the different pages of your site. Just select the Publication Title option. The title of your post or page will then be used as part of this URL. If, for example, this title is “How to photograph little birds”, the web address will be http://yoursite.com/how-to-photograph-little-birds/. So, you might ask, “Why this one rather than another?” And I will simply answer that it’s clear, explicit, and that it’s good for your SEO.
If you have multiple categories, you may very well opt for a URL that would include the name of each of them. To do this, select the Custom Structure option and then specify “/%category%/%postname%/” in the text field next to it. If your post is listed in the “Photography” category, for example, then the URL will be “http://yoursite.com/photography/how-to-photograph-little-birds/”.
Be sure to validate this option BEFORE you start publishing your posts. If you modify it when you have already published several posts, the old URLs already listed on the different search engines will lead to a “404 error” page. Mister Google and his army of bots don’t like this, and it is, therefore, very bad for your SEO.
Optional: These two options give you the ability to change the prefix used for category and tag URIs. By default, the URL for category pages is “http://yoursite.com/CATEGORY/”. So, if you want to change the “category” prefix, simply enter the new term in the text field. If you want more information, click here.
Click “Save Changes” before proceeding to the last section.
Click “Save Changes”.
We have arrived at the end of this first part where we have seen how to install WordPress and how to configure it correctly. In the second part, we will see how to customize the look of your blog and then how to publish your first posts.