WordPress.com Explained

There are two official WordPress websites: WordPress.com and WordPress.org.

Throughout most of this book, we’re going to be dealing with WordPress.org, but not in this chapter.

Right now, let’s take a tour of WordPress.com.

WordPress.com is the easier, but more basic and limited version of WordPress.org.

At the end of this chapter, you’ll understand how to join WordPress.com and how to write your first blog post.

Joining WordPress.com 

Before we start, let’s recap perhaps that most important lesson … “WordPress is always changing”.

There will be things in this chapter or future chapters that don’t match this book exactly.

Things may look different because the WordPress.com team is simply doing some testing to make things easier for us. Or, the team may have made permanent changes. And things may change again in a few months.

Our goal in this book is to make you comfortable with WordPress and its regular changes.

Change is good. Change will happen. You can work with changes, and you may even start to enjoy them.

So, we’re looking the image below, which shows WordPress.com in 2017. 

• Click the “Get Started” button:

• WordPress.com is going to ask you what type of sire you want to create. Click “Start with a website”.

• On the next screen, WordPress.com will ask you to choose a URL for your site. I’ve choose “wpexplainedbook”. You can choose anything you like, so long as it’s marked “Free”.

 

• On the next screen, WordPress.com will ask you to choose a plan. Click “Start with Free”.

• Enter a username and a password on the next screen:

• Click “View My site”:

 

• You’ll now see your completed WordPress.com website!

The final step to finish your site set-up is to confirm your email. WordPress.com will send you an email that looks like the image below. Click “Confirm Now” and you’ll be able to write blog posts.

Writing a Post on WordPress.com

Let’s get started and write our first post on WordPress.com.

• Click “My Site” in the top-left corner.
• Click “Add” next to “Blog Posts”, as shown below.

You’ll see a screen like the one below.  Enter two details:

• Title: My first WordPress blog post
• Body: Don’t take this too seriously. I’m just testing this out.

• Go to the top-right corner of the screen and click the “Publish” button.

• The button will turn green. Click “Publish” again.

• You’ll now see your post published on your website. You’re screen should look similar to the one below. Congratulations! You’ve published your first WordPress blog post!

Text Formatting on WordPress.com Explained

At the moment, our post is very plain. Let’s liven our text with some formatting.

• Click the “Edit” button, as shown below.

• Leave your WordPress.com screen open.
• In another tab, or another browser, visit https://wordpress.org/about/. Select and copy the text on that page.
• Paste that text into your WordPress.com post, as shown below.

You’ll notice that much of this new text has bold formatting or is in a large heading.

You can control this formatting, and more, using the editing toolbar across the top of the screen, shown below.

Let’s see an example of how it works. 

• Select part of the text with your mouse.
• Click the “B” button.

Go ahead and try that with Italic text, using the image below as a guide.

• Select part of the text with your mouse.
• Click the “I” button.

In addition to formatting, you can add bullets to your text, as shown in the image below.

• Put your cursor in part of the post and click “Enter” or “Return” so the text is on a new line.
• Click the “Bullets” icon.
• Repeat the process for each bulleted item.

• Go ahead and repeat that process with the numbered bullets, shown below.

There are other formatting options you can try here as well. All you need to do is select the text and click the button in the editing toolbar.

• You can add quotation marks, as shown below.

• You can align your text. It’s always aligned to the left by default, but you can align it to the center, as shown below.

• You can add links to other websites. Select the text, click the link button and enter the URL, as shown below.

• Then you can enter the URL for the site you want to link to, and click “Add Link”, as shown here.

• You can remove any link simply by selecting the linked text and clicking the “Remove” link, as shown below.

There are also some more formatting options in the toolbar, but they’re hidden by default.

• To get more options, click the “Toggle Advanced” button on the right-hand side, as shown below.

You’ll now see a wide range of extra formatting options, such as “Underline”, “Justify” and “Text” color. There’s even an “Undo” and “Redo” button on the right-hand side, in case you make a mistake. 

All of these options are useful, but my students find two of them are particularly helpful: “Proofread Writing” and “Paste as Text”.

The “Proofread Writing” button is shown below. If you click this button, it will find all your spelling mistakes and make suggestions to improve your grammar.

The “Paste as Text” button is shown in the image below. If you click this button, it will allow you to paste content from Microsoft Word and other sources, without making a big mess. Microsoft Word is notorious for providing messy content. If you make sure you’ve clicked this button, you’ll be able to copy-and-paste content from almost anywhere without making a mess of your blog posts.

• When you’ve finished experimenting with the editing toolbar, scroll down and click the blue Update button:

• Check to see your handiwork, as in the image below.

Now that you know how to format text in WordPress, let’s liven up our content with images and videos.

• Click the “Edit” button in the top-right corner of your post to return to the editing screen.

Images and Video on WordPress.com Explained

In this final part of the chapter, let’s add some media to our site. Let’s start by adding the WordPress logo:

• Keep your post editing screen open. In another tab or browser, go to https://wordpress.org/about/logos/.
• Click the WordPress Logo Stacked PNG link, shown in the image below.
• You’ll see a copy of the WordPress logo. Download this to your desktop.

Now let’s add the WordPress logo to our post:

• Go back to the post editing screen.
• Click the “Media” button, shown below.

You’ll now see a full-screen pop-up, like the one below. Notice that WordPress.com says that you only have a limited amount of storage with your free account. Paid accounts do have more image and video storage.

• Drag-and-drop the file onto this screen. Your image will automatically upload for you.

• All you need to do is click “Insert” button in the bottom-right, as in the image below.

• You’ll now see the WordPress logo inside your post, as shown below.

If you don’t like how your image appears in the post, you can make changes.

• Simply select the image and a small editing toolbar will appear, as shown below.
• You can change the alignment of the image, edit the image or remove it entirely. I often like to align my images to the right so that the text wraps around the image.

If anything, it’s even easier to add video to WordPress.com posts. If the video is hosted on YouTube.com, Vimeo.com or another popular video site, then all you need to know is the URL of the video.

All you need to do is place that URL into your post. Sound too easy? Give it a try.

I’ve shown you how in the image below.

Note: With WordPress.com, you’re not allowed to upload your own videos unless you have a paid account, but you can still host on YouTube, Vimeo and other sites for free.

Now that you have an image and a video in your post, let’s see what it looks like:

• Click “Update” at the bottom of the screen.
• Click “View Post” at the top of the screen.

In addition to the formatted text, you should see your image and video inside the post, as in the image below.

We said that there are two official WordPress websites: WordPress.com and WordPress.org.

The majority of this book will deal with WordPress.org, but we’re starting with WordPress.com because it is easier to use. The skills learned in these chapters also apply to WordPress.org sites.

Now I’m going to show you how to design your site with WordPress.com. We’ll also see some the major limitations with WordPress.com. These limitations explain why WordPress.org is a better choice for many sites.

Choosing a New WordPress.com Theme Explained

No matter when you are on WordPress.com, you can easily return to the main dashboard by clicking the “My Site” button, as shown below.

• On the left-hand side menu, find for the “Themes” menu, as shown below:

You’ll now see a list of site designs, or what WordPress calls, “Themes”.

The list you see now will inevitably have different themes than what you see in the image below. This is so because the WordPress team always want to offer fresh, new designs.

• To see what any theme will look like, click the icon with three dots, and the click the “Live demo” link, as shown in the image below.

You will notice that some themes have a price next to them, so you will you have to pay to use them.

• If you only want to see free themes, click the “Free” link in the top-right corner, as shown in the image below.

After you’ve seen several themes, let’s find the theme that we’re going to use in this chapter.

• Click the “Search box” in the top-right corner and type in “Twenty Seventeen”, as shown in the image below.

You will now see the “Twenty Seventeen” theme.

• Click the “Activate” link for this theme, as you can see in the image below.

You’ll now see a pop-up screen offering information about the “Twenty Seventeen” theme, as in the image below.

• Click the blue “Visit site” button.

This new screen allows you to make changes to your new site design. You can also get here by clicking the “Customize” link from the bottom-right corner or dashboard:

Every time you make a change on this screen, you’ll see a live preview of your site with those changes. Don’t worry, no-one will see your changes until you click the blue “Save & Publish” button.

Let’s see an example of this live preview.

• Click the “Site Identity” box on the left-hand side, as in the image below.
• Change your “Site Title”.
• Enter a “Tagline”, or slogan, for your site.

You’ll see that your updates are automatically shown on the right-hand side of the site.

Let’s see another example of this live preview.

• Click the “Header Image” box on the left-hand side, as in the image below.

• Choose one of the suggested headers. Every time you click on one of the available headers, the image at the top of your site will change.

You can also control the information display on your site. Click on the “Blog” menu link, and you’ll see two boxes in the sidebar: “Search” and “Text Widget”.

In WordPress, these boxes are called “Widgets”.

Let’s go ahead and change these Widgets.

• Click the “Widgets” link on the left-hand side. You’ll now see a list of 3 areas, as in the image below

• Click the “Blog Sidebar” link. This list of Widgets will match the Widgets you see on the right-hand side.

You can re-order these widgets by dragging-and-dropping them with your mouse, as in the image below. As soon as you drop the widgets into a new position, the live preview of your site will update.

It is possible to remove widgets if you don’t want them to display. For example, you can remove the “Search” widget by clicking the “Remove” button, as shown below.

You can also add new Widgets.

• Click the “Add a Widget” button that you see in the image below.

You can now see a list of about 50 different widgets. Some of the widgets require connecting to outside services, but let’s take a simple example.

• Click on the “Blog Stats” widget, shown in the image below.

The “Blog Stats” widget will automatically be added to your site, on the bottom of both the left-hand and right-hand sides, as in the image below.

WordPress.com does offer you the chance to make some changes to your site design.

• Click on the “Colors & Backgrounds” link, and you’ll see you can change the color of your site. I don’t recommend choosing a purple background, but you can choose that if you want
• After you’ve finished changing your site design, click “Save & Publish” in the top-left corner.

WordPress.com Menus and Pages Explained

In the final part of this WordPress.com intro, we’re going to introduce two new features that impact the design of your WordPress site.

The first feature is “Menus”. You can see the “Menus” link highlighted in the image below.

• Click the “Menus” link, and you’ll see a screen that looks like the one below. There is already one entry called “Primary” and another called “Social Media”.

• Click “Primary”, and you’ll see the main links in your site navigation:

• These links reflect the main navigation that’s live on your site:

As with the Widgets, you can drag-and-drop the menu links to rearrange them:

• Click the “About” link, and you will be taken to an “About” screen.

Not only does visiting this page show you how menu links work, but you can also see an example of a “Page”.

A “Page” is similar to a “Post” but it doesn’t have a date attached. This means that it’s really useful for long-lasting content. The text on the page says this:

Unlike posts, pages are better suited for more timeless content that you want to be easily accessible, like your About or Contact information.

So Pages are very similar to Posts, but have several small differences.

What Are the Limitations of WordPress.com?

During the last two chapters, you’ve seen almost all of the key features available on WordPress.com.

Without paying for anything, you can quickly set up a site with images and videos. You can also choose different themes with widgets and menus of your choice.

However, we also saw some limitations. Without paying for a premium plan, it wasn’t possible to customize our theme, beyond a few basic settings. You also can’t choose a theme that hasn’t been pre-approved by WordPress.com. There’s a whole world of themes that can’t be used on WordPress.com.

It wasn’t possible to upload our own videos, as we had to rely on videos already hosted elsewhere.

It also isn’t possible to use our our own domain name, or to add extra features (called “plugins” in WordPress) without upgrading to premium plan.

You can solve those problems by purchasing a plan, but there are some fundamental limitations to WordPress.com.

None of this is to say that WordPress.com is a bad choice. If you want a simple site that’s easy to maintain, then WordPress.com is great option. It’s reliable, easy-to-use and even if you pay for extra features, it’s significantly cheaper than many alternatives. About 50% of WordPress users choose WordPress.com.

But, if you want a powerful, great-looking website with features beyond what you’ve seen in these last two chapters, you need an alternate approach. In the rest of this book, we’re going to focus on WordPress.org, which allows us the freedom to use any designs or features we want.