Beginners Guide To Writing WordPress Pages or Posts in 2019 / 2020

Share The Love:

This beginners guide to writing WordPress posts has been put together to assist new users of WordPress and enable them to get started putting their website together quickly. In it, we’ll go over what WordPress posts and pages are. We’ll cover how to start writing a new page or post. Then we’ll cover how to add different types of content to your creation. Headers, Images and YouTube videos are covered, as well of course as paragraphs of text.

This guide should cover everything you’ll need to know as a new beginner using WordPress for the first time, or if you haven’t looked at WordPress in a while and have forgotten how to use it.

What This Guide Will NOT Teach You

This guide is purely for people who are completely new to WordPress. People who are having trouble remembering how to add new content to their website. It is NOT a tutorial about setting up WordPress (though we’ll create one of them in due course). It is NOT a tutorial or recommendation for finding suitable hosting for your WordPress site. Check out SiteGround Hosting Review by our sister site Most-Useful.com for a review of the hosting service we use.

What Is The Difference Between A WordPress Page versus a Post?

If you’re new to WordPress like many of my hosting customers are, you’re probably confused by the terminology of Page versus Post. Creating and updating either of them is exactly the same. The difference is in how WordPress treats them.

WordPress Pages

I describe WordPress pages to my new hosting customers as the delivering the information that is more static. For example, an About Us page, or a Privacy Policy. These are pages on your website that aren’t related to a time or activity as such. They’re more related to the company behind the website rather than activities the company gets up to. You write them today and they’ll still be the same in a years time. And they’ll still be relevant in a years time. Or 10 years time. They’re part of the infrastructure of your website.

WordPress Posts

WordPress posts are related to topics you’re writing about. They might be time sensitive such as news stories. Or they might be review posts that go out of date after a year or too. They could be posts about what you investigated yesterday. I think of WordPress posts as anything that is related to activities that are associated with times and dates.

Why Does It Matter?

Later in the post you’ll see that WordPress makes a distinction between posts and pages and it’s a little confusing. This is why I’ve mentioned it. You’ll get your head around it better as we move through. That’s why this is a beginners guide to writing WordPress posts – we expect you to be a beginner.

Incidentally – what you’re reading right now is a post. If you click Privacy Policy or About Us in the menu at the top, you’ll be reading a page…. Clear as mud? Jolly good ๐Ÿ™‚

Starting Your First Post

Ok, so this guide is all about writing content for your website. Specifically, it’s about how to use WordPress to present your content on your website. So, I’ve assumed you’ve installed WordPress and logged in to your dashboard. If you haven’t you’ll need to enter http://your-domain-name.com/wp-admin/ into the address bar of your browser. Obviously replace ‘your-domain-name.com’ with your actual domain name…

On the left hand side you’ll see a menu structure. Towards the top you’ll see ‘Posts’. If you click that you’ll then see Add New.

Once you click that link you’ll be taken to a new screen which is the WordPress editor. This editor is the same whether you’re adding a new Page or Post.

You should find that you’re using the new Gutenberg Blocks editor. If you’re using the old ‘Classic’ editor this tutorial isn’t for you.


Identifying Gutenberg Editor

If you’re using Gutenberg you should see a screen that looks very similar to the image on the right. If your screen doesn’t look like that, you’re probably on the old classic editor. Ask your hosting provider or whoever manages your WordPress installation to upgrade to Gutenberg. It takes a bit of getting used to compared to the old editor but once you do get the hang of it it’s much quicker and more flexible.

If you’re a beginner writing WordPress posts then you can be forgiven for not knowing if you have Gutenberg or not. If you’ve only just recently set up your web hosting package it’s almost a guarantee that you’re going to be using Gutenberg.

An Introduction To Creating Pages

Everything in the new WordPress Gutenberg editor is a block. A block is an area of the screen which can be filled with pretty much anything that can be displayed in a web page. So a block can be a header, text (paragraph). It could also be an image (we’ll go into those in detail more later). A block can even contain an embedded YouTube video and so much more.

As you can see in the image above, creating a block is easy. The title block shown above is a little bit of a special block and how it is displayed will very much depend on the theme you have installed. The title you choose for your post/page should reflect what the page is about. If the page is an About Us page, put About Us in the title. If the post is about Top Ten Affiliate Schemes for 2019 – well, put that in your title.

Adding new paragraphs is as simple as pressing Return (Enter) on your keyboard anywhere at the end of a block.

Adding Headers

Headers help to separate your content – making it easier to read. Headers should be used to structure your page into bite size chunks for the reader to consume. They can also make it easy to navigate to specific parts of your page quickly with the addition of a table of contents.

Adding a Gutenberg Heading Block

Adding a header is simply a case of hovering your mouse at the bottom of a previous block and clicking on the plus icon. You can see an example in the screen shot to the left.

This screen shot also shows you examples of some of the other blocks that you can add to your page.

Click the Heading block to add a new heading to your page. Once you have done that you’ll see something very similar to the screen shot shown below.

Type the text for your header into the block and choose which type of header you’d like to show. Generally speaking, you should use H2 header types for top level headers, and H3 for subheadings. H4 for sub-subheadings. In this way, if you do use a table of contents at the top, the H3’s will show as subheadings to the H2 content. Getting a table of contents on your page will require a WordPress plugin to be installed as Gutenberg doesn’t provide one by default.

Creating a new Header Block in Gutenberg

Adding Images To Your Content

Adding images is done in exactly the same way as adding a header, except instead of choosing a Header block choose Image.

Again, hover your mouse pointer at the bottom of a paragraph and click the plus icon. You’ll then get presented with the popup box as shown to the right.

There are a lot more options you can play with when it comes to images though. For example, you can choose whether the image should be left aligned or right aligned. Or you can choose to centre it in the page. Or you can choose to have it spread across the whole width of the article.

Then you can choose whether to have the image full size (beware, some will be huge!) or a different size. You can choose to only show a thumbnail image and then you can choose to show the full image if someone clicks on the thumbnail.

Uploading Images

Images that are to be displayed on your website must also be kept on the server on which your content is being developed. That is, if your website is https://wpbrains.net then you’ll need to upload any images to the wpbrains.net server. When you first choose a block to be an image block you’ll see a block that looks like the one below;

Add an Image to Your Webpage With Gutenberg

If you’ve previously uploaded the image you want to insert then you can choose the Media Library option. We’ll talk about the Media Library in a few moments. But for now, choose Upload. This will bring up a screen from your computer where you can choose which image to upload. That screen will likely look something like the screen shot below;

Choose which image you wish to upload, then click open.

After a few seconds – possibly more depending on your internet connection, your image will show in the page. Once it’s uploaded you can click on the image which will bring up a small toolbar at the top. In there you can set the alignment of the image. It’s important to realise that the image will align with respect to the block that follows it. If the block that follows it is text then clicking the left alignment icon will align the image to the left with the following text showing on the right hand side. If you align the image to the right the text following will show on the left of the image.

Image Alignment

The statement I made above is a source of significant confusion for new WordPress Gutenberg users. So I’ve also written it into its own section here. It’s important to get the hang of it.

An image will align with respect to the block that follows it. If the block that follows the image is text then any text will show on the side opposite to the image. Text will wrap around the image too. But the point is, the block that follows the image is the reference point for the alignment. This can get particularly confusing if you’re trying to right align an image. You might naturally assume that you would write your text then upload your image and align it to the right. You’ll probably end up with the wrong paragraph wrapping around your image if you do it that way.

I’ll produce a video over the next few days which will highlight this much easier for you. It’s pretty simple so long as you remember that the block that follows will be the reference point ๐Ÿ™‚

Image Settings

Over on the right hand side of your screen when you’ve got an image selected you’ll see something similar to the picture. This is the image settings panel. Every block in WordPress has a panel like this. It will change depending on what block you have selected. Go ahead and select different blocks in your page and see.

In this settings panel you can change the size of the image within your page. You can fine tune the size by specifying specific width and height even. I tend to leave those alone and just choose Medium or Large depending on how I need the image to be embedded into the page.

Alt Text is used to provide screen reader software with some clues relating to what the picture is about. You can provide a text description of your picture here to help visually impaired people to understand your page better.

Linking To Other Things From Images

Possibly one of the most important settings in that panel is the link to box. In this tutorial we’ll just concentrate on linking to the larger size of the image and why it’s useful. In a more advanced tutorial we’ll look at linking to other things such as different websites or affiliate offers.

If your image is quite complicated, or the space on your website is limited and you’ve included a small thumbnail image then linking to a more detailed version is important. WordPress makes this easy. Simply change the Link To drop down box to be Media File and then anyone clicking the image will be shown a bigger version. You can try this on this tutorial by clicking any images to see how it will look.

Embedding YouTube Videos

If you create your own YouTube videos, or you have YouTube videos that are relevant to your web content that are allowed to be embedded into other web pages you can do so with WordPress. In fact there’s a whole raft of places you can embed content from. But in this tutorial we’ll concentrate on YouTube videos.

Click the Plus icon like normal for adding a new WordPress Gutenberg block. Look for the Embeds category. Choose YouTube. You’ll then add a new block that looks like the image included below;

YouTube embedding block

You’ll then need to open up your web browser – or open another tab. Navigate to the YouTube video you want to include in your own website. Then select the URL from the address bar and copy it to your clipboard. On Windows you can do this by pressing CTRL-C on your keyboard. On Mac it’s CMD-C. You can see where the address bar is on the image below;

Picture Showing Where The Address Bar Is On Chrome

Having copied the URL to the clipboard, navigate back to your WordPress window and paste the URL into the YouTube embedding box. There you go, you’ll now have a YouTube video embedded in your content. You can choose alignment just like you can with an image – and the same rules apply.

Changing a Block Type

Sometimes you may have chosen the wrong block type for the content you want to put in place. The most common of these times is when you press Return at the end of a paragraph and actually want to introduce a new header. Fortunately Gutenberg for WordPress has thought of this and made it super easy.

Gutenberg Transform Block

To achieve it, simply move the mouse over the block you wish to change. This will bring up the block ‘surround’ which includes a small toolbar at the top. On the very left hand side the toolbar will show you the type of block you currently have it set to. Clicking this will bring up a context box similar to the one to the left of this text.

Gutenberg will only allow you to transform into block types that make sense for the current content. If the type of block you want to transform into isn’t showing this could be why.

If you’re writing a post rather than a page then a Featured Image is probably something you want to set up. Different themes will show featured images differently. Most themes won’t show a featured image for a page – although they may show at the top of the page itself.

Featured images are generally used on an index page where all the posts on your site are shown as snippets. An example is shown below as it’s easier to show you than explain. Bear in mind though that each theme can often be customised to show featured images differently so yours may not look quite the same.

The images above the text in those columns are featured images. WordPress automatically applies them to your theme so you don’t have to worry about the way your page looks if you change theme – the featured image will still be applied appropriately.

Adding a featured image is easy. Using the panel on the right, make sure you have Document selected as in the image to the right.

As you can see there are loads of options here. These options apply to the whole document ( post or page ). The only one we’ll look at in this tutorial is the featured image.

Click the featured image option which will drop down a section containing a Set featured image button. Clicking this button will allow you to upload an image that will be shown on index pages and category pages etc.

Clicking the button will take you to the media library. You can choose an image you have already uploaded from the media library or you can click the upload tab.

Choosing the upload tab will allow you upload a new image in exactly the same way as you upload images for the content of your page. Even though this is a beginners guide to writing WordPress posts, setting featured images is a little more advanced. You may need to have a little play around with it all to get the hang of it – don’t panic you won’t break anything.

Previewing And Publishing

At any time during your content creation process you preview your work without anyone else being able to see it. It won’t show anywhere on your website at this point. Simply click the Preview button in the top right hand corner of the WordPress environment. This will open up a new window or tab, which will show you exactly what your content will look like when it’s published.

Once you’re happy with the finished result – probably after many previews – you can Publish it. As this is a beginners guide to writing WordPress posts we’ll not go into the details of scheduling posts or password protecting the posts. We’ll just go for a plain and simple publish. In a more advanced tutorial we’ll go over scheduling posts – including why you might want to. We’ll also cover things like categories and tags and other more advanced topics in a future article. I’ll come back and link that post in when it’s written ๐Ÿ™‚

If you get part way through your creation and decide you need a break, it’s a good idea to manually Save Draft. WordPress will automatically save a draft every so often, but it’s good practice to save your own draft if you’re going to leave your computer for any period of time. Web browsers and servers can crash at the most inopportune moments and usually when you have no draft saved…

I hope you’ve found this tutorial useful. If you have any questions please do feel free to leave a comment below. If I’ve missed anything please feel free to let me know!

All the best and enjoy your new WordPress website!


Share The Love:

Leave a Comment

Your email address will not be published. Required fields are marked *