The Easy Guide to Creating Your Website with WordPress – Part 2

Here is the second part of this guide explaining how to create your website or blog with WordPress. After installing and configuring it, let’s now look at how to customize WordPress and how to publish your first pages and posts.

So, now that WordPress is configured, let’s move on to the next phase, which is certainly the most interesting. Here, I will discuss the different steps that will allow you to build your website/blog according to your needs. You don’t have to follow them all, but maybe you should take the time to read each one before deciding on anything. I’ve arranged these steps in a logical order that I invite you to follow.

Changing the WordPress Theme

As I already explained in part 1, the theme is a default skin that determines the overall appearance of the site/blog and often includes some additional features. Here you have 4 choices:

1WordPress comes with several basic, ready-to-use themes. You can find them by going to “Appearance › Themes” [IMG1]. One of them is already set by default [IMG1:1], but if you want to use one of the others, hover over it with the mouse cursor and then simply click the “Enable” button [IMG1:2].

You can preview each theme before activating it by clicking the live preview button next to it [IMG1:3]. Very useful if you hesitate between several themes.

2If none of the pre-installed themes are suitable for you, click the “Add New” button in the upper left corner of the screen [IMG1:4]. You will then have access to a large number of free themes, sorted according to popularity, date of release, etc. [IMG2:1]

Click the Preview button to see the details of the theme [IMG2:2] and how it looks. When you have chosen the one you want, click the Install button [IMG2:3] and then click Activate.

If you want to delete a theme, go to “Appearances › Themes”, click on Theme Details [IMG1:5], and then click on the Delete link at the bottom right [IMG3:1]. If you do not find this delete link, that means the theme is currently active. You will need to activate another one before you can delete it.

  • IMAGE 1 Wordpress - Installed themes WordPress – Installed themes
  • IMAGE 2 Wordpress - Other themes WordPress – Other themes
  • IMAGE 3 Wordpress - Delete a theme WordPress – Delete a theme

3Opt for a Premium theme. This is the one I usually choose for each new WP project. Premium themes are not free, but prices start at 15€, which is not much compared to the various undeniable advantages they offer over free themes. Here is a short list of them:

Premium Theme Advantages:

  • Frequent updates to adapt to the evolution of WP, but also to fix possible security flaws.
  • More customization options (choice of colors, background images, layouts…).
  • Integration of some additional features (widgets, sharing icons on social networks, contact form…).
  • Ready for SEO (Search Engine Optimization), which means that they are better optimized for the natural referencing of your site on search engines.
  • Often provided with shortcodes, these small snippets of code placed between two [ ] (a set of square brackets) allow you to easily add dynamic elements (e.g. Image Gallery, clickable button, tabbed list, share buttons, etc.) to your posts/pages.
  • Multilingual ready if your website/blog is in several languages (but you will still need to use a plugin such as WPML. More details here).
  • CSS Responsive, which means that they adapt to any screen (computer, tablet, or smartphone).
  • No risk of finding malicious code, which can happen sometimes with some free themes.
  • Technical assistance provided by their authors, very useful in case of problems.

There are several platforms offering premium quality themes, but personally, I always find what I’m looking for on Themeforest. The choice is huge, the prices are very affordable, and their search filter is very efficient.

To choose the one that’s right for you, first select WordPress themes from the top navigation menu [IMG6:1], then choose between the different sub-categories [IMG6:2] (Corporate, Creative, Blog, Magazine, Portfolio, etc.), and then refine your search via the filter on the left side of the screen [IMG6:3]. Please take the time to compare the options/features provided with each theme before deciding.

And if ThemeForest doesn’t suit you, there are other platforms to find good WordPress themes such as Elegant Themes, Template Monster or MyThemeShop.

Installing a Premium Theme

To install a Premium theme or any other theme that you have previously downloaded as a compressed (.zip) file, you will need to:

  • aGo to “Appearances › Themes”
  • bClick on “Add New” in the top right corner of the screen [IMG1:4]
  • cClick on “Upload Theme”. [IMG4:1]
  • dClick on “Browse” [IMG4:2]
  • eSelect the archive containing your theme [IMG4:3]
  • fClick on “Open” [IMG4:4]
  • g. Click on “Install” [IMG4:5]
  • h. Click on “Activate” [IMG5:1]

Then go to “Appearances › Themes” to make sure the theme you have chosen is installed and activated.

  • IMAGE 4 Wordpress - Install a theme WordPress – Install a theme
  • IMAGE 5 Wordpress - Install a theme WordPress – Install a theme
  • IMAGE 6 Wordpress - ThemeForest WordPress – ThemeForest

4DIVI is a theme developed by Elegant Theme which integrates what is called a “Website Builder”, a Drag & Drop interface allowing you to build your pages in a totally visual way [IMG7+8].

Each element can be added or modified simply and quickly via a fairly complete list of predefined modules. Moreover, it is very flexible, adapts to all types of projects (blog, e-commerce, corporate, etc.), and provides a multitude of very useful options and functionalities.

DIVI is a premium theme a little more expensive than the others ($89), but it is an investment that will certainly save you precious time and make your job much easier.

If you are interested, but not totally convinced, you can try their demo page. You’ll discover how simple and intuitive it is, perfect for anyone new to website creation, and how quickly you’ll become addicted to it.

If you don’t have a budget, there are also free or freemium alternatives in the form of plugins such as Elementor Page Builder [IMG9] or Page Builder by SiteOrigin.

  • IMAGE 7 Wordpress - DIVI Demo WordPress – DIVI Demo
  • IMAGE 8 Wordpress - DIVI Demo WordPress – DIVI Demo
  • IMAGE 9 Wordpress - Elementor Page Builder WordPress – Elementor Page Builder

Child Theme: Just a few words for those who have a little bit of HTML/CSS/PHP knowledge and would like to modify the source code of the theme they have chosen. I strongly advise you to create what is called a child theme. This will allow you not to lose all your modifications each time your theme is updated. It’s a fairly simple procedure which is also well explained in this article.

Create Categories

This step is not mandatory but can be very useful in some cases. For example, if you have a blog containing posts on a variety of topics, it will be possible to classify each one in a specific category or sub-category.

Procedure to Add a Category:

  • 1Go to “Posts › Categories” [IMG10:1].
  • 2Give a name to this category in the “Name” field [IMG10:2].
  • 3Give a “slug” that will be used among other things as part of the URL of the page in this category [IMG10:3]. Be careful not to put spaces between words, no accents or capitalization here
  • 4Select a parent category [IMG10:4] if there is one, and therefore, the one you are creating is a subcategory
  • 5Add a short description [IMG10:5] (this is optional, but beneficial for Google referencing).
  • 6Click on the “Add New” Category button [IMG10:6].

In this illustration [IMG11], you can see the category “Blog” and then the subcategory Photography that I just created. This subcategory is easy to find thanks to the dash ( – ) displayed just to its left [IMG11:7].

Now you will be able to choose one of these categories each time you create a new item as we will see later. Don’t worry too much about the default uncategorized category that is already present on this page [IMG11:8]. It’s there in case you don’t use this category system or simply forgot to select one.

  • IMAGE 10 Wordpress - Add a category WordPress – Add a category
  • IMAGE 11 Wordpress - Category and sub-category WordPress – Category and sub-category

Add Media to Your Posts or Pages

I will explain here the quite simple procedure to add images, videos, and sounds to your posts or pages. You could do it directly from the Media Library, but personally, I prefer to take care of it directly when creating the content. Please note that the available options may vary depending on the theme you use.

Add an Image:

  • 1Go to “Pages › Add New” or “Posts › Add New” [IMG12:1].
  • 2Click on the icon in the top left corner [IMG12:2].
  • 3Click on the Image icon [IMG12:3].
  • 4Click the “Upload” button [IMG12:4] unless you have already imported the image into your library. In this second case, click the “Media Library” button [IMG12:5].
  • 5Select the image(s) to be imported [IMG12:7] and then click the “Open” or “Select” button[IMG12:8], depending on the button you clicked in the previous step.
  • 6Here you can apply rounded edges to your image [IMG13:9]. Some themes offer even more options, such as the Twenty Twenty-One theme, which offers the possibility to add a black frame or border.
  • 7Add a small text describing the image (a few words are enough) in the Alternative Text (alt) section [IMG13:10]. Do it—Google likes this—so it will be very useful for the natural referencing of your pages/posts.
  • 8Choose the size of the image to be displayed [IMG13:11], the one you have defined as I explained in the first part, in the Media settings section.
  • 9If you want to display your image in precise dimensions, you can either change its width and height (in pixels), or simply change the percentage of its initial size in the Image Dimensions section [IMG13:12], or by moving the two blue dots located at the bottom and to the right of the image when it is selected [IMG13:13].
  • 10Add some text below the image (caption, link, reference…) if you wish [IMG13:14].
  • 11Add a new block at this location [IMG13:15].

From a web address?? I advise you to use the “Insert from URL” button [IMG12:6] only if the image belongs to you or you have a permission to use it, and be sure that the image will not be deleted or moved (control over the hosting where the images are stored). In this case, just specify the absolute path of the image (e.g., https://yoursite.com/images/image.jpg).

Options

You have probably noticed that a menu of options appears when your image is selected. Here are some explanations on how to use it:

  • aModify the type of item. A single image can become an image gallery or a banner for example.
  • bModify the alignment of the image, so it’s integrated with the text.
  • cAdd a link to make this image clickable. You can specify a URL, choose a media file, or attach a page. By clicking on the option button (the little caret in the top right corner [g]), you can choose whether the link should open in a new tab, a rel attribute or a CSS class (a computer language used to format web pages).
  • dCrop the image. 3 options are proposed here:
    • The first, represented by the small magnifying glass, allows you to zoom into the image and then reposition it.
    • Via the second one, you can change the aspect ratio by selecting one of the presets displayed in the sub-list.
    • The last one allows you to rotate the image by 45° each time you click on it.

    When you are done, click on “Apply” for your changes to take effect, or “Cancel” if you are not satisfied with the result.

  • e Replace the image with another. You can either choose a different one in your Media Library or import a new one.
  • f Additional options. Additional options will be displayed when you click here:
    • Hide the lateral settings column: This is, as you might guess, the column on the right side of the screen.
    • Copy: Allows you to copy the block to be able to paste it to another location.
    • Duplicate: Duplicates the element just below itself.
    • Insert before/after: Adds an empty block before or after the selected one.
    • Move To: To move the block to another location on your page/post, click “Move To”, use the up/down arrow keys on your keyboard to move it to the desired location, and then press “Enter” to apply the move.
    • Modify HTML: Allows you to modify the HTML code of the element. If you don’t understand what this means, it’s best that you don’t touch it.
    • Add to reusable blocks: You can save the block and all the elements you have inserted in it for later reuse. To do so, simply give it a new name and then click on “Save”. You will then find it again with the other blocks by clicking on the “Reusable” tab.
    • Remove block: Deletes the block.

Adding Images to the Media Library

If, on the other hand, you only want to add one or more images to your library, you can also do it directly from the Media Library section:

  • 1Go to “Media › Add” [IMG14:1].
  • 2Click on the “Choose Files” button [IMG14:2].
  • 3Select the image(s) you wish to add to your library [IMG14:3].
  • 4Click on the “Open” button [IMG14:4].
  • IMAGE 12 Wordpress - Add an image WordPress – Add an image I
  • IMAGE 13 Wordpress - Add an image WordPress – Add an image II
  • IMAGE 14 Add an image via Media Add an image via Media

How to select multiple images?

You don’t have to import images one by one. If you need to use several images to create a gallery, for example, you can select multiple images at once. For this you can either:

  • Hold down the CTRL key (Command ⌘ on mac) on your keyboard and click on each of the images you want to add.
  • If it’s a series of images that follow each other, select the first one with a mouse click, then hold down the shift key on your keyboard before selecting the last one, always with a click.
  • Use CTRL + A (Command ⌘ + A on mac) to select all files in a directory.
  • F- Make a multiple selection with your mouse.

A Few Tips before Adding Media

It is always a very good idea to add images, videos, or sounds to a post or a page. It breaks the monotony of a monolithic text, and Mr. Google likes it. But you have to be careful with some points:

  • Avoid images that are too large, such as 5000px by 3000px. They will make your pages heavier to load. If your images are not intended to be enlarged in a “lightbox” (which allows you to display an image in full screen), limit yourself to a maximum width of 1200px, which is more than enough.
  • Use a free plugin such as Shortpixel or Imagify to optimize and, therefore, reduce the weight of your images.
  • For videos, I advise you to use platforms such as YouTube, Dailymotion or Vimeo. First, because they have all the necessary tools adapted to this type of content, they will allow you to reach more people (YouTube is the second most used search engine after Google), but also because it will save you various hassles (integration of the player in your pages, the video that lags, heavy video files that saturate your web space…).
  • For sounds, use an online service such as SoundCloud. It is free and allows you to easily integrate them into your pages/ posts.

To reduce the size or crop your images, but also to retouch colors and enhance their dynamism, you can choose between different image editing software or platforms. Personally, I use Adobe Photoshop which for me is the most powerful tool in this category. What’s more, a subscription costs only $9.99/month (with Lightroom included in the package). But there are others such as Gimp or Pixlr which are free.

How to add a YouTube video?

The procedure for adding a YouTube video (or another video platform) is quite simple:

  • 1Click on the icon in the top left corner [IMG15:1].
  • 2Type “video” in the block search field, then click on the “YouTube”, “Dailymotion” or “Vimeo” icon. All the video integration blocks can be found in the Embedded content section a little farther down in the list.
  • 3Enter the URL of the video and click on the “Embed” button next to it [IMG15:4]. To find this URL, go to YouTube, Dailymotion, or Vimeo, open the video you want to embed, and then select the entire URL indicated in the address bar [IMG16] and copy it.
  • 4Make sure, once the video is added, that the “Resize for Small Devices” option in the right column is enabled [IMG15:5]. This option allows to optimize the display on mobile devices.
  • IMAGE 15 Wordpress - Add a YouTube video WordPress – Add a YouTube video
  • IMAGE 16 URL of a YouTube video URL of a YouTube video
  • IMAGE 17 Wordpress - Add a SoundCloud audio file WordPress – Add a SoundCloud audio

Copy/paste?

Here’s a useful little trick, which some of you already know, to quickly copy, paste, or cut any item. Instead of right-clicking and selecting the function from the drop-down list, you can use a keyboard shortcut as follows:

  • Copy: CTRL (Windows) / ⌘ (Mac) + C
  • Paste: CTRL (Windows) / ⌘ (Mac) + V
  • Cut: CTRL (Windows) / ⌘ (Mac) + X

How do I add a SoundCloud audio?

The process is similar to adding a YouTube video, except that here we will first click on the “Share link” button located just below the audio track on the SoundCloud page [IMG17:1], and then copy the share link that will appear just afterwards [IMG17:2]. If you just copy/paste the URL of the page, like YouTube, you may get an error message. For this reason, it is better to use the SoundCloud share button.

Then, to integrate it into your post, click on the icon to add a new block [IMG17:3], type “sound” in the search bar, and then click on the SoundCloud icon that will appear just below [IMG17:4]. Then paste the share link in the SoundCloud URL field and click on the “Embed” button next to it [IMG17:5].

How do I add an audio or video file?

If you want to add a video or audio file without going through one of the platforms I just mentioned, please note that the procedure is very similar to adding an image. Just choose the “Video” or “Sound” icon [IMG18:1], and then change the options in the right column according to your needs [IMG18:2] as I’ll explain just below.

Video/audio options:

  • Auto play: Video or audio starts automatically as soon as the page is loaded.
  • Repeat: The video or audio is played in a loop.
  • Mute*: The volume of the video is muted and must be turned on manually by the user.
  • Player control*: The playback control bar at the bottom of the video (playback, progress, volume level…) is hidden.
  • Play online*: This option allows you to define that your video should be played online, within the element’s playback area.
  • Preload: This drop-down list allows you to choose how the video or audio file will be loaded by the browser.
    • Automatic: The video will be fully loaded as soon as the page is displayed in the browser (which may slow down the page loading).
    • Metadata: The browser will preload only the basic information of the video.
    • None: The video is loaded as soon as the user launches the video. Be careful here—if you have a lot of multimedia content inserted in your page, don’t preload all of them as this may slow down its loading considerably.
  • Poster image*: This option allows you to add an image that will be displayed in the video player while it is not running.
    (* = Only available for the video)
  • IMAGE 18 Add an audio or video file Add an audio or video file

Create a Page

There are many reasons to create a page: a home page, a page listing all your posts, a page with a contact form, a FAQ (Frequently Asked Questions) page, etc. In short, just about everything that is not a post is a page.

I will quickly explain here how you can create one [IMG18:1] as I will need it to illustrate the next step. But since this process is very similar to creating a post, and I’ll explain this in more detail later; I won’t spend too much time on it here.

To create a page:

  • 1Go to “Pages › Add” [IMG19:1].
  • 2Enter a title [IMG19:2].
  • 3Fill the page with whatever you want using the icon that allows you to add blocks of content [IMG19:3].
  • 4Click the “Preview” button to see what it looks like and then click the “Publish” button when you are satisfied with the result [IMG19:4].
  • IMAGE 19 WordPress - Create a page WordPress – Create a page

Create a Navigation Menu

We can now create the navigation menu. This is essential, so that your visitors can directly and easily access the pages or categories that interest them (and this is why it is preferable to create them before the navigation menu).

The style of the menu as well as where it is displayed depends on the theme you have installed, but it is usually located at the very top of your site/blog.

  • 1Go to “Appearances › Menus” [IMG20:1].
  • 2Give your menu a name (e.g., Main Menu) in the “Menu Name” text field [IMG20:2] and check the “Main Menu” box located in the “Menu Settings” section [IMG20:3]. The name of this box may vary depending on the theme you are using, but the idea here is to tell WordPress that the menu you just created is the main menu, the one that should appear at the top of the site.
  • 3Click the “Create Menu” button [IMG20:4].
  • 4Now that your Menu is created, you will be able to add the navigation elements. For this, you have 4 tabs on the left (“pages”, “posts”, “custom links”, and “categories”) [IMG20:5]. Open the tab containing the item you want to insert, check the box of each item you want to add, and then click on the “Add to Menu” button.
  • 5Each item can be moved by drag and drop. By taking an item with the mouse, you can either move it up or down and thus change the display order. If you move it to the right, the item will become a sub-service (or sub-element) which will then depend on the one just above it [IMG20:6]. Very useful if your site is organized in categories and subcategories, for example.

If you click on the small triangle to the right of each item [IMG20:7], you will see the available options. So, here you can change the title of the navigation element, move it to the top, bottom, or right (as I explained for dragging and dropping it above) via the links displayed just below, or simply delete it.

Finally, you can also delete the entire menu by clicking on “Delete Menu” [IMG20:8].

Once you’re done, don’t forget to save via the “Save Menu” button [IMG20:5]. You will then be able to see the result on one of the pages of your site [IMG21].

  • IMAGE 20 WordPress - Create a Navigation Menu WordPress – Create a Navigation Menu
  • IMAGE 21 WordPress - The navigation menu created WordPress – The navigation menu created
  • IMAGE 22 WordPress - Widgets WordPress – Widgets

Widgets

Widgets are small modules that are inserted on one of the dedicated areas, generally located on the right or left of your post (sidebar) and at the bottom of the page (Footer) [IMG22].

They allow you to display various items such as a list of recent posts, a search form area, a calendar, advertising, a video, a list of tags, etc… You can put just about anything you want.

Changes since v5.8 of WordPress

Since the WordPress 5.8 update, widgets are managed the same way as posts and pages. A series of blocks are available and will allow you to build your widgets in a visual way.

I will not explain here how it works since the principle is the same as that of pages/posts. Just know that if, like me, you prefer to use the old system, you can either install a plugin that will disable the blocks for widgets, or use this piece of code (snippet) that you will insert in the functions.php file of your child theme.

  • IMAGE 22a WordPress - Widgets via les blocks WordPress – Widgets via les blocks

To Add a Widget (before version 5.8 or by disabling blocks):

Go to “Appearance › Widgets” [IMG23:1]. On the left side of the screen, you will find all the available widgets [IMG23:2] while the right side shows the places where you can add them [IMG23:3]. So, all you have to do is simply drag the widgets to the right location using your mouse [IMG23:4].

Once inserted, each widget must be set up according to your needs [IMG23:5]. Since this setting is different for each widget, I won’t be able to explain it here, but don’t worry—it’s quite intuitive.

If the widget you need doesn’t appear in the list, you will be able to add it either via a plugin or by adding HTML code that you will insert in the “Custom HTML” widget [IMG23:6].

Two more things to know: The registration will be done automatically each time you add, move, or delete a widget. You will only need to click the “Save” button when you make a change to one of the installed widgets. Finally, as with the Navigation Menu items, you will be able to change the order in which the widgets appear by moving them with the mouse.

Another Way to Add a Widget

There are 2 ways to add widgets. I prefer the one I just showed you, but there is another one. I’ll explain it to you quickly, so you can decide which one is best for you.

  • 1Go to “Appearance › Customize › Widgets”. The bar on the left shows the widgets already installed [IMG24:1].
  • 2Click on the “Add a Widget” button at the bottom of the left column [IMG24:2], and you’ll see a second column appear. This column contains all available widgets [IMG24:3].
  • 3To add one, just click on it, and it will be added to the list of installed widgets. As soon as it is done, you can modify or move it. To modify an installed widget, you can also click on the blue icon displayed next to each widget [IMG24:4].
  • 4. Be sure to click the “Publish” button [IMG24:5] before leaving the page as registration is not automatic here.
  • IMAGE 23 WordPress - Add a Widget WordPress – Add a Widget
  • IMAGE 24 WordPress - Another way to add widgets WordPress – Another way to add widgets

Tags

Tags are clickable keywords that link different posts together, allowing the reader to find them easily, much like categories or hashtags (#) on social networks.

Concretely, when you write your post, you will have to add a series of keywords related to it. In most cases, these are words taken from the post or related to the media it contains. When the reader clicks on one of these keywords, all the posts in which it appears will be displayed as a list.

When I say “you will have to add”, it’s because it’s important to Mr. Google. Most search engines take this into account for the referencing of your site. Too often neglected, it is, however, useful for your natural referencing.

You will be able to add tags when you create a new post, but also as I will explain now.

Add Tags

  • 1Go to “Posts › Tags”
  • 2Enter a name and a slug. The slug is the identifier, often identical to the name, but without accent, capitalization or space, and which will serve among other things as an element of the URL leading to the tag. The description is optional but beneficial for SEO.
  • 3Click “Add New Tag”.
  • 4The tags are displayed as a list on the right. As you hover over them with the mouse, you will see a few options that will allow you to modify, view, or delete each one.

These tags will be stored in the database, and you will be able to use them each time you write a new post. All you have to do is write the first few letters, and it will appear in a drop-down list just below the field as we will see later on when creating a post.

To learn all the good practices related to tags, I advise you to read this very good article.

  • IMAGE 25 WordPress - Add Tags WordPress – Add Tags

Plugins

Plugins are a bit like apps on your smartphone. They add new features to your website/blog. So, you need to download and install them.

The easiest way is to go to “Plugins › Add New” [IMG26:1]. From there, you will have access to the WordPress catalog which has a plethora of free plugins. You can find the one you need by using the search bar at the top right of the screen [IMG26:2].

Once you see the plugin, simply install [IMG26:3] and activate it [IMG27]. If you would like to know more about the plugin before installing it, click on the “More details” link located just below the “Install Now” button [IMG26:4].

If you have downloaded an extension from another site, and it’s a compressed (.zip) file, then you will need to proceed as follows:

  • 1Go to “Plugins › Add” [IMG28:1]
  • 2Click on the “Upload Plugin” button in the upper left corner of the screen [IMG28:2].
  • 3Click the “Browse” button that just appeared [IMG28:3].
  • 4Find and select the zipped folder you downloaded [IMG28:4], click “Open”, and then click “Install” [IMG28:5/6].
  • 5Click the “Enable Plugin” button on the page that just appeared [IMG29:7].

When installed and activated, most plugins need to be pre-configured before they can be used. The location of this settings page varies for each extension, but is usually found in “Admin › Tools”, “Admin › Settings”, or directly in the Admin bar.

Each plugin has its own settings, and as this post is already quite long, it will be impossible for me to explain here how to proceed. If you encounter any problem, I advise you to go to the plugin’s page on the WordPress website. There you will find an “Installation” tab that will explain how to do it and a support tab where you can find help. You will also find many tutorials on YouTube.

If you want to disable or remove an existing plugin, it’s very simple: Go to “Plugins › Installed Plugins”, click “Deactivate” or “Delete” below the plugin name. Deactivating it will not delete it but will make it unusable.

As with themes, there are free and premium plugins available. If you can’t find what you’re looking for in the WordPress catalog, chances are you’ll find it on sites such as CodeCanyon, MyThemeShop, MOJO or WpmuDev, which are full of very good premium plugins.

  • IMAGE 26 WordPress - Add a plugin WordPress – Add a plugin
  • IMAGE 27 WordPress - Activate the plugin WordPress – Activate the plugin
  • IMAGE 28 WordPress - Install a plugin WordPress – Install a plugin
  • IMAGE 29 WordPress - Activate the installed plugin WordPress – Activate the installed plugin
  • IMAGE 30 WordPress - Deactivate or delete a plugin WordPress – Deactivate or delete a plugin

If you’re not sure which plugins to use, I’ve prepared a small list of those, free, freemium (free, but with paid options) or premium (paid), that I prefer.

You can install several plugins of course, but be careful not to put too many of them because each one slows down more or less the loading of your site. 20 seems to me to be a good maximum number, but it depends entirely on each extension, some requiring more resources than others.

Write Your First Post

Here we are, finally. WordPress is now set up, you’ve installed your theme, created categories, added extensions… in short, your blog is waiting for just one thing: your fabulous posts. And now that you’ve spent some time preparing the groundwork, you’ll see that it can go very fast. The method is quite similar to creating a new page but with a few more options.

If you’re not sure how to go about writing your post, I suggest you take a look at this one first.

Create and Add Content to Your Post

  • 1Go to “Posts › Add” [IMG31:1].

  • 2Give your post an explicit title in the first field above [IMG31:2].

  • 3Just below the title, you will find a first empty paragraph type block. Here you have two possibilities: Either start writing your first paragraph, or change the type of block using the “/” key on your keyboard. Blocks are elements that you will be able to add and nest one after the other to create your post (or your page). There are different types of blocks and, by clicking on the icon just to the right and higher on the left [IMG31:3], you will see a list of all the available blocks.

    To add a new block, the easiest way is to position your cursor on this first block and then use the “Enter” key on your keyboard. The new block will then appear just below it. It will be of “Paragraph” type by default, and if you wish, you can change it as I just explained.

    When you’re done, click on one of the 3 options above [IMG31:4]: “Save draft”, which will save your article without publishing it, “Preview” to see what it looks like, or “Publish” if everything is OK.

    Each of these blocks offers a series of very useful options which are displayed just above [IMG32:1+2] and on the right column [IMG32:3]. Please note they only appear when this one is selected with a click. These options vary greatly from one type of block to another; that’s why I’ll come back to them in more detail below. But before that, let’s take a look at the working interface which also contains a lot of very useful elements.

  • IMAGE 31 WordPress - Write an article WordPress – Write an article
  • IMAGE 32 WordPress - Block options WordPress – Block options

A mistake? Just go back

If you make a typing or other error while writing your page or article, you can go back either via the “back” arrow located in the toolbar at the very top [IMG31:5] or use the keyboard shortcut CTRL/⌘ Z.

Also be aware that WordPress regularly makes a security backup of your pages/articles while you are building them. So, you can revert back to a previous version at any time via the revision history. To do this, click on the number of revisions shown to the right [IMG31:7], then choose the version you want to restore [IMG31:8], and click “Restore this Revision” [IMG31:9]. You can read this very complete blog post to learn more about the revision tool.

Post Settings

As you may have noticed, the right column has two tabs: The “Block” tab which contains the options of the selected block, as I explained above and which I will come back to later, and the “Post” tab (or “Page” if it is a page). The latter will allow you to choose the settings for your post as follows:

  • 1Status and visibility [IMG33:1]

    • Visibility: You can restrict access to this post [IMG33:1a].

      • Public: The post will be visible to everyone.

      • Private: It will only be visible to administrators and editors.

      • Password protected: As the name implies, you can set a password for access to this post, so only those who know it will be able to access it.

    • Publish: Allows you to publish the post immediately or postpone it to a later date or time [IMG33:1b].

    • Publication format: I talked about it in the first part. This option allows you to define the type of post you will publish (video, image gallery, quote…). But if you don’t really see what to do here, don’t worry because it is completely optional.

    • Pin at the top of the blog: If you check this box, the post will be placed at the top of the page, displaying the list of all the posts, and will stay there even if you publish new ones.

    • Waiting for proofreading: By default, your post is regularly and automatically saved as a draft. If this box is checked, it means that the draft is waiting for review by an editor before being published.

    • Move to Trash: Clicking on this button will move the post to the trash. If you want to delete it, you will have to go through the trash page. See below.

  • 2Permalink: Allows you to change the “slug” of the article [IMG33:2], depending on the URL structure you have chosen in “Permalink Settings” as I explained in the first part.

  • 3Categories: Select the category or categories in which your article will appear by simply checking the corresponding checkbox(es) [IMG31:3]. If you wish to create a new category, click on “Add New Category”, give it a name, assign a parent category if necessary, and finish by clicking on “Add new category” below.

  • 4Tags: Write down the tags (keywords) for your item and then type “Enter” to add them to the list. If you don’t see what it is, I explained above. You’ll notice that the tags already created in the database will appear just below as soon as you start typing them [IMG33:4]. Clicking on them will save you time, contribute to their uniformity, and reduce the risk of spelling mistakes.

  • 5Featured image: Add a main illustration image to your post [IMG33:5]. This image will be displayed at the top of the article but also as a thumbnail on the page listing all your posts (depending on the theme you use [IMG34:1]), or when the article is shared on social networks.

    Choose an eye-catching thumbnail that is relevant to the topic you are going to talk about. This image is there to complement the title, attract attention, and give a visual indication of the content of your post. Click here if you want to know more about the Featured Image.

  • 6Excerpt: You can write a short summary that, in one or two sentences, will explain to your readers what they will find in this post and what it is about [IMG33:6]. This extract will be displayed in the RSS feed (if the option to display summaries is activated), but also (depending on the theme you use [IMG34:2]) on the page listing all your posts.

    This extract is theoretically also used to indicate to search engines which text to display below the title in the Search Engine Results Pages (SERP), but you can also do it via a plugin such as Yoast for example. It will be even more efficient, in my opinion.

  • 7Comments: : We saw above how to allow comments as well as default ping and backlinks for all articles. Here [IMG33:7], you can change these options individually for each post.

  • 8Page attributes: This tab [IMG33:8] is only available in the page options. Here you can choose a parent page for each page you create and specify the order in which they should be displayed.

  • IMAGE 33 WordPress - Post/page options WordPress – Post/Page options
  • IMAGE 34 WordPress - Examples of blogs WordPress – Examples of blogs

Blocks and Their Options

Now, let’s see which blocks are the most commonly used as well as their different settings. I will not come back here on the Image, Video, and Sound blocks since I have already mentioned them above.

Paragraph Block

This is the default block and probably the one you will use most often since it allows you to create blocks of text.

  • The first icon in the upper left corner [IMG35:1], above the text, allows you to change the type of block. Unlike the icon, this one offers a limited number of choices but similar to the one currently active.

  • These 2 icons [IMG35:2] allow you to change the location of the block in the page or article. To do so, you can either “grab” the block with the mouse and drag it to the place where you want to move it or use the up/down arrow keys.

  • Here you can change the horizontal alignment of the text [IMG35:3]: left aligned, right aligned, or centered.

  • To make text bold or italic, select it with the mouse and click the appropriate icon [IMG35:4].

  • If you want to add a link pointing to a web address, select the text and then click this icon [IMG35:5]. A text field will appear below it. There are two choices here:

    • To a page or a post: to add a link to a page or post on your site, start writing its title in the field and a list of pages/articles containing that word(s) will appear just below it. Click on the right page as soon as it is displayed and finish by typing the “Enter” key on your keyboard.

    • To an external link: If it’s a link to a site other than yours, just enter the full URL (ex: https://en.wikipedia.org/wiki/Bird) and press “Enter”.

    If you want this link to open in a new tab, you will have to activate the small cursor at the bottom “Open in a new tab” (blue = activated).

    To modify the link, just click on it and then on the “Edit” button.

    To remove the link, click on it and then on the icon to add a link [IMG35:5]. It will then turn from black to white, which means that the link has been removed.

  • By clicking on the small caret [IMG35:6], you will have access to a few additional options such as strikethrough text, transforming it into a line of code, changing the color, transforming it into “superscript” or “subscript” format, and inserting a thumbnail image.

  • Other options will also appear when you click on [IMG35:7], as I also explained above.

  • In the options on the right, you will be able to change the size of the text [IMG35:8], either by selecting a predefined size from the drop-down list (Large, medium, small…) or by directly indicating the size in pixels. You can also change the line height just below and in the same way.

  • This colored section is used to change the background color of the text or of the text itself [IMG35:9]. To do this, select one of the predefined colors or choose a custom one by clicking on “Custom Color”.

    If you have a hexadecimal, RGB, or HSL color code, enter it in the field just below the picker [IMG35:10]. Just click on the caret on the right to switch between the different values.

  • The drop cap option [IMG35:11]. A drop cap is a capital letter much larger than the rest of the text and is used as the first letter of a paragraph [IMG35:10]. It’s a method used for centuries to highlight the beginning of a text or a chapter in old books.

Advanced Tab

For most blocks, there is an “Advanced” tab located at the very bottom of the options sidebar. Its content being identical each time, I explain here what you will find there.

  • HTML Anchors: This option allows you to add an HTML anchor to the selected block. These are used to create a link pointing to a specific location on your page or post. If, for example, you want to create a link to the conclusion of your post, you can add an identifier (your anchor) to this block, which you can then integrate at the end of the URL. Let’s imagine that this identifier is “conclusion”, the link leading directly to the conclusion will look like https://yoursite.com/yourpost/#conclusion (don’t forget the hash #, otherwise it won’t work).

  • CSS classes: The block formatting options are quite limited, but it is possible to add one or more CSS classes. These allow you to insert lines of code in your theme and thus to greatly increase the formatting possibilities. This implies that you have a minimum of knowledge in HTML and CSS coding (2 Web languages), but the basics are fairly easy to learn. If you are interested, here is a link that should interest you.

Title Block

As its name indicates, this block allows you to add titles and subtitles of different sizes before a paragraph or any other type of block.

To add a title, you just have to write it and then choose its size [IMG35:12]. In HTML, this size is expressed in “H” value (Headings) followed by a number between 1 to 6. The larger this number is, the smaller the font size will be. H1, therefore, displays the largest font size while H6 displays the smallest.

Personally, I advise you not to use the H1 tag because it is already used for the main title of the post you publish. So, use it only if the title you want to add is as important as this one.

Gallery Block

With this block, you can create an image gallery in a grid form. The principle is the same as adding a single image, with the difference that here you can select several images from the Media Library. This gallery can be aligned to the previous block via the “Alignment” option [IMG35:13].

When you have imported several images, click on one of them, and you’ll see some options appear [IMG35:14]. These will allow you to change the order in which they are arranged, replace one image with another, delete one, and finally, add a small text at the bottom of the image.

You will find some very interesting options in the right column.

  • First of all, you can choose the number of columns, i.e., the number of images that will be displayed side by side in the same row [IMG35:15].

  • Next, you can crop the images, so they are perfectly integrated into the gallery [IMG35:16], which is useful when your images do not all have the same dimensions.

  • This option [IMG35:17] is, from my point of view, especially interesting if you want to integrate a “Lightbox” into your site. I’ll talk about it a few lines below.

  • Here you can select the size of the image to display [IMG35:18] as I already explained here. If the displayed image is blurred or too small, it is probably because you have not selected the right size.

Lightbox

A lightbox is a very useful tool to use when you create an image gallery. It allows the user to click on a thumbnail image to view it in full size without leaving the page. If you want to see an example, just click on one of the images displayed here. There are several plugins that will allow you to integrate this feature into your website quite easily. Responsive Lightbox & Gallery, for example, is both complete and free, and I use it myself for some projects.

When this plugin is installed and then activated, just select the image option “Link to a media file” [IMG35:17] in the right column of the article, as I explained above, and make sure that the “Enable lightbox” checkboxes are checked for “Images” and “Gallery” [IMG37:1] in the plugin options (Lightbox › General) [IMG37:2].

Media & Text Block

This block allows to display an image and a paragraph side by side. Once inserted, it will be divided into two parts: the image on the left and the paragraph on the right. If you wish to reverse this order, click on the corresponding icon in the options bar just above [IMG36:1]. If the image is smaller than the height of the text next to it, you can choose its vertical positioning (top, middle, bottom) [IMG36:2].

If you enable the “Stack on Mobile” option in the right sidebar, the image and text will overlap when displayed on a small screen [IMG36:3]. Just below, you can choose to “Crop the image to fill the entire column”. Useful if your image is wide and the column is rather high. You already know the last two options since they are the Alternative Text (alt) and the Image Size choice [IMG36:4] I mentioned earlier.

Table Block

As its name suggests, the Table block allows you to easily integrate a table into your post or page. Once you have added this block, you will have to choose the number of columns and rows before generating it via the button Create a table. When this is done, you will be able to choose the alignment of the text contained in the cells [IMG36:5]. Next to it, you will have the possibility to add or remove rows or columns [IMG36:6].

In the right options, you can choose a striped table style [IMG36:7], and in this case, the background color will be darker for one out of every two rows, similar to an Excel table. Finally, you have 3 options in the “Table Settings section” [IMG36:8]: The first one, “Fixed Width Table Cells” will homogenize the width of the columns, so that they are all the same. The last two will add a Header or Footer Section to your table, which is useful if you want to add a title or a conclusion to each column, for example.

List Block

This block allows you to organize your text as a bulleted or numbered list [IMG36:9]. You can also add an indentation (a small space on the left) and thus create bulleted or numbered sub-lists as shown in the illustration [IMG36:10].

If you display a bulleted list, you will be able to choose the starting value (which is 1, by default) or invert the numbering of the list [IMG36:11].

Classic Block

This block displays the text editor that was used in previous versions of WordPress (prior to version 5.0). If you’re having trouble getting used to block systems, maybe you’ll only use this one. It includes many of the tools found on other blocks such as formatting, alignment, bulleting, linking, adding media, and more [IMG36:12].

The best way, if you want to learn how to use it, is to write a short text and then try, one after the other, all the buttons displayed on the toolbar that you don’t know about. Once you’ve finished and made an incredible mess in your article, you can simply delete that block and create a new one.

  • IMAGE 35 WordPress - Blocs I WordPress – Blocs I
  • IMAGE 36 WordPress - Blocs II WordPress – Blocs II
  • IMAGE 37 WordPress - Add a lightbox WordPress – Add a lightbox

Doing without Gutenberg?

If you really don’t like this block system, called Gutenberg by its creators, you may not use it. For this, there are two solutions: The first and simplest one is to install the Classic Editor plugin. This will disable Gutenberg for any new article you write.

The other solution is a bit more technical and is for those who have created a child theme, which I mentioned earlier. If this is your case, you just have to insert this piece of code in the “functions.php” file of your “child theme”:

/* Disable Gutnberg */add_filter('use_block_editor_for_post', '__return_false');

Note also that if you master the HTML language, you can totally create your pages/posts entirely with lines of code. To do this, click on the icon at the top right of the screen and select “Code Editor” [IMG31:6], or on the Text tab if you have disabled Gutenberg or installed Classic Editor. There is even a plugin, HTML Editor Syntax Highlighter (which I use myself), allowing you to highlight syntax as Notepad++ does, for example.

So that’s it for the main blocks available for creating pages or posts in WordPress. There are a few others, but overall, the principle for using them is similar each time.

The best thing to do if you want to use others is to test them yourself. And if you have a question or problem, you can always leave a comment. I will try to help you as much as I can.

Please also be aware that there are extensions that allow you to add other blocks and options. You can find them easily by going to “Plugins › Add New” and making a search with the keyword “blocks”.

Manage Posts and Pages

Let’s end this chapter with the page that lists all the posts or pages on your site. You may have noticed that a series of options appear when you hover over each line? There are 4 of them [IMG38:1]:

  • Edit: Via this link, you will access the article editing page, the same one we studied throughout the previous chapter.

  • Quick Edit: Here, you have a faster way to make some changes to your article. When you click on this link, the line slides down and displays a series of options [IMG38:2] that are also found on the edit page. Not all of them are there, of course, but this is a good place to make some basic changes.

    For example, you can change the title, slug, or publication date, restrict access, change the category, or add/remove tags [IMG38:3].

    Click the “Update” button to save your changes.

  • Trash: As I explained above, it is not possible to delete a post or a page directly, for obvious security reasons (you are never safe from a bad move). You can, therefore, move it here to the trash, and from there, you will have the choice between restoring it or deleting it permanently [IMG38:5].

    If you need to move several items to the trash, you can do it quickly via the “Bulk actions” drop-down list at the top and bottom of the page [IMG38:6]. To do so, select all the items to be moved by checking the checkbox to the left of each item, then select “Move to trash” in the drop-down list and click “Apply”.

  • View: Allows you to view your post.

Tip: Press CTRL or ⌘ on your keyboard just before clicking on a link, and it will open in a new tab. Press SHIFT, and it will open in a new window.

Once you have published hundreds of articles, it will become difficult to find a particular one if you would like to modify it, for example. Luckily, there are two handy tools to help you do this:

  • The search bar: Located on the top right [IMG38:7], it allows you to easily find one or more articles based on keywords.
  • The search filters: You can modify the display of your articles via the two drop-down lists located above the list of articles [IMG38:8]. The one on the left allows you to select the month in which the articles were published while the other one on the right allows you to select all the articles of a certain category. Click the “Filter” button to apply the filtering.

Finally, you can change the display options of this page by clicking on the “Screen Options” button on the top right-hand side of the screen [IMG38:9]. From here, you can decide whether to display certain columns (Date, Author, Category…), choose the number of articles to display per page or display a short extract of each post.

All of these options are also available in the WordPress pages section.

  • IMAGE 38 WordPress - Posts list WordPress – Posts list

Voilà, nothing very complicated here as I told you. But before closing this article, let’s look at two more important points that I advise you to read carefully.

Why and how to secure WordPress?

This is a point too often neglected by new WP users. The problem is that, as it is the most used CMS in the world, it is also the one that is the victim of the most attacks of all kinds. And if you think that you are safe from these attacks just because your password is solid, I’m sorry to say that you are, unfortunately, fooling yourself.

These attacks can come in different forms (“DDOS”, exploiting security breaches, “brute force”, etc.), but there are rules that will allow you to resist most of them and here are the main ones:

  • Choose a very strong and exclusive password for WP. It is best to use the one that WordPress will generate when you install it. Anyway, use a long password (at least 12 characters) and mix lowercase/uppercase letters, numbers, and special characters (@, #, $, etc.). Use this password ONLY for this site.
  • Do not use the same name for logging in and signing your posts. Go to “Users › Your profile”, enter a nickname that is different from your username and then select it from the “Name to be publicly displayed” drop-down list.
  • Install a security plugin and take the time to set it up properly. It will be the only shield against the various attacks you may face, so don’t hesitate to opt for a premium plan from Wordfence, Sucuri, or iThemes when your site has reached a certain popularity and the number of posts it contains becomes quite significant. I’ll tell you more about this in the third and last part of this article: The 20 Best Plugins for WordPress.
  • If you allow your readers to register on your site, don’t give them a higher role than “Subscriber”. And above all, if you really need to give the Administrator role to anyone, do it manually and ONLY if you have complete and absolute trust in her/him.
  • Update WordPress, your plugins, and your theme regularly.
  • Only use themes and plugins from trusted sites (WordPress.org, CodeCanyon, Themeforest, WPMUDEV, iThemes, etc.).
  • Avoid themes or plugins that are too young. The v1.0.0 versions have yet to make their “children’s diseases” and are sometimes open doors to hackers of all kinds.
  • Don’t use the default prefix (_WP) for your tables during installation as I explained when installing WordPress. Instead, choose a random combination of 4 to 6 letters (upper and lower case) and numbers (e.g. _ZvTr34).
  • Choose a host that already supports security. This is the case with most one-click WordPress installers services such as Greengeeks, WP Engine, SiteGround, Bluehost, Hostgator, etc.
  • Upgrade your site to “HTTPS”. This is important to secure your site but also for your SEO. The subject being rather vast and perhaps complex for the neophytes, I suggest you go here to learn more.
  • Make regular backups of WordPress and your database. You can use a plugin such as UpdraftPlus or BackWPup, for example.

So, these are the basics, and if you follow them all, you shouldn’t have any problems. But if this ever happens, contact technical support for the security plugin you use, or check out the >WordPress support forums.

WordPress Maintenance

WordPress requires very little maintenance, but there are a few things you should still check on a regular basis:

  • Make sure that WordPress, your theme, and the installed plugins are up to date. To do this, go to “Dashboard › Updates”, then follow the instructions displayed [IMG39] if updates are available.
  • Check your backups. If you have set up the backup plugin correctly, they are normally executed automatically, but it is always safe to check from time to time if they are there.
  • Check the loading time of your site. To do this, go to GTMetrix and Pingdom [IMG40], enter the URL and run the test. If the loading time does not exceed 3 to 4 seconds, you are fine. Otherwise, look at what is proposed to speed up the loading of the site and use a plugin like the one below.
  • Clean up WordPress with WP-Optimize if you notice any slowdowns. Be careful, and make sure to make a backup of your database before using it because you are never safe from a problem with this type of plugin.
  • Check your dead links: You will probably insert links to external sources in your articles. Unfortunately, sometimes these links will become obsolete because the pages to which they lead have been moved or simply deleted. Here is a link where you will find out how to fix this.
  • IMAGE 39 WordPress - Updates WordPress – Updates
  • IMAGE 40 Pingdom Pingdom

What to do in case of a problem?

Don’t forget that if you have a problem, you have several solutions. WordPress is widely used around the world, so there are many ways to get help:

  • Do a search on Google or YouTube using the right keywords.
  • Find help on sites such as wordpress.org or StackExchange.
  • If it is a problem related to the theme you are using or a plugin you have installed, please contact the author directly.
  • Ask for help from someone you know who is already using WP.
  • Call a pro via sites such as UpWork, Freelancer or Fiverr.

Conclusion

That’s how this long article “How to Create Your Website or Blog with WordPress” comes to an end. Congratulations to you if you read it entirely—it means that you have a real will to learn how to create yours yourself. Perseverance is a remarkable quality and often pays off, so bravo. Really.

Of course, I’ve only been through most of the different aspects of WordPress, and I could have written a 300-page book on the subject. But the goal here was to give you the keys to start your WP project on your own while being as concise as possible and focusing on what I thought was essential. I hope I succeeded (maybe you’ll tell me in the comments).

This article could be completed or improved with your help. Feel free to leave a comment below if you have any question, a relevant remark, a feedback, additional information or spotted any error.Go to comments

Share

Leave a comment

You can also or Register to comment

This website is hosted by GreenGeeks,
a hosting service powered by 300% green energy.

Hello, I'm Sweekie, a chatbot whose role is to assist you in your search. Ask me a question like “How can I make money online?” or “I love cooking, how can I monetize my passion?”. I'm still in the testing phase, so don't hesitate to use the search filters if the results I give you aren't satisfactory.

This chatbot is currently in test phase. Give us on your experience.

In the comments, you can add not only text but also elements such as:


Please remain polite and respectful to others in all circumstances. There is enough hate in this world of bullies, and we are not on Facebook or Twitter. No disrespect or insults will be tolerated. Please keep in mind that you are legally responsible for everything you post on our site. Thank you.

Feedback