steps to publishing a WordPress post

Publishing Your First Post in WordPress

What are posts?

WordPress was released as a blogging platform in 2003, enabling people to share their stories online without the knowledge and coding experience normally required to build a website. The software was really useful because posts could be assigned to categories and tags and displayed in archive pages when visitors clicked the link to a particular term. This helped writers organise their content and provided a clear and effective way for users to find relevant information to their interests.

One of the reasons WordPress became so successful was the fact you could focus on writing content while the software took care of the rest.

In this tutorial, we will show you how to create and publish a post in WordPress, so you can share your own thoughts and theories with the world. Although there are many differences between posts and pages, this walkthrough will work for both.

How to Add a New Post in WordPress

There are a couple of ways you can add a new post. The quickest option is to click add button in the toolbar in the toolbar at the top of your admin screen. Or you can hover your cursor over the “Posts” tab to reveal the submenu:

add a new post screenshot
WordPress Administration Screen

The Block Editor

Both links will take you to the Gutenberg Block Editor where you can design and develop your new post. Do not be daunted by this interface because it’s relatively straightforward to use with a little practice. There are three main sections to consider:

screenshot of Gutenberg Block Editor interface
Gutenberg Block Editor Interface

First, the editing canvas is the main area where you add all your “blocks” to build a fantastic web page which will grab the attention of your target audience. The toolbar at the top of the page has a number of options to support your progress, such as the Block Inserter Library, the List View panel and, of course, the publish button.

Finally, the settings panel on the right of the screen has two default tabs. The “Post” tab lets you change the document settings, including the option to modify the permalink, add a featured image and disable the comments section on the post. The “Block” tab changes to match the block you are editing.

For a more detailed exploration of the different areas, you should read our guide to the Gutenberg Editor interface. If you are already comfortable using the software but would like to find ways to improve your workflow, we also have some suggestions about customising the editor.

Adding Content to your Post

Obviously, you will want to include headings, images, paragraphs, video embeds, tables and buttons to your first post. All these elements are contained in individual “blocks” which are pieced together to form your web page.

The Title Block

The first block of every post or page is reserved for the title. If you have WordPress open, go ahead and type your attention grabbing title:

The Title Block Gutenberg Editor

The Paragraph Block

By default, the next block is for your first paragraph. If you press enter after typing your title, or click “Type / to choose a block”, you can start writing your inspirational text:

screenshot of first paragraph in Gutenberg Editor
Paragraph Block

Paragraph Settings

There are some basic options to choose from in settings panel on the right side of the screen, such as changing the text colour and the block’s background. You can also adjust font size and the letter spacing by expanding the typography section to open those values. It is important to note you are only modifying this particular paragraph block. Your other paragraph blocks will be unaffected by any changes you make here.

When the paragraph block is selected, the “top toolbar” will appear so you can modify the font weight and text alignment. In the following example, we have used a white font on a red background with a right alignment. The first sentence is now in italics.

screenshot of paragraph block options
Paragraph Block Settings Panel

Play around with the options in the settings panel and top toolbar. Try different colours and backgrounds. Your task is to create either an aesthetically pleasing paragraph or the most hideous and unreadable combination of text and colour.

The Image Block

Next, we are going to insert an image. Hit the enter button to create a new paragraph. Then type “/image” and press enter again to open the image inserter box. Don’t forget the forward slash when typing because it lets WordPress know you are looking for a block.

By the way, you may notice a list of options appear while you are typing. Choose the image block from this list if it is quicker. Either way will open the different options to add an image:

screenshot of the image blcok
Image Block Options
  1. The “Upload” button will open a dialog box so you can select an image file from your device.
  2. Clicking the “Media Library” will open the Media Library Screen where you can manage your images, audio, videos, and documents in WordPress. Follow the onscreen prompts to insert the image you have ticked.
  3. Or you can insert an image you found online by selecting the “Insert from URL” option.
  4. You can even drag and drop an image file into this block from your computer.

In the following example, we clicked the “Media Library” button and selected an image from our own list, but test out all four options in your own WordPress installation to develop your understanding of the different processes.

Add an Image

There are other ways to add an image. In fact, you could simply copy and paste an image straight into the paragraph block by using the popular shortcuts control+c and control+v. However, we are going to look at the block library to help us become more familiar with the Gutenberg interface.

The Block Inserter Panel

Let’s use the Block Insterter Panel to embed a YouTube video into our post. The first step is to click the block inserter icon gutenberg block inserter icon in the main toolbar at the top of the screen to access the block library.

When the new panel opens, scroll through the library to see which blocks are available. Since we are looking for the YouTube block, start typing the name into the search bar and the option should now be at the top of the list.

screenshot of block library
Block Inserter Panel

After you click the YouTube icon to insert the block, click the close icon Gutenberg close icon or somewhere on the editing canvas, so you can add the URL to embed the video:

Gutenberg YouTube block
Gutenberg YouTube Block

The Plus Icon

You may have noticed the plus icon blue plus icon wordpress appear underneath the paragraph block when you were editing your text or modifying the image settings. Clicking that button will open an add block menu displaying some of the most commonly used blocks:

Screenshot of the Block Inserter Menu
Screenshot of the Block Inserter Menu

Use this feature to add another block, such as the pull quote or bulleted list. If you are not sure about the different options, you can read our guide to the most commonly used blocks in the Gutenberg page builder.

Moving and Dragging Blocks

With so many ways to insert an block, you should be able to find an option to suit your own workflow. Now, spend some time adding more blocks and rearranging the content using the move tool move block icon in Gutenberg or the drag tool drag icon in Gutenberg which can be found on the top toolbar of the block you have selected.

However, once you have created your post, there are a few more things to check: permalinks, categories and tags, and featured images.

Permalinks

When you added your clever title to the post, WordPress automatically generated a permalink – a user-friendly address for your web page. You can find your permalink in the “URL Slug” field under the “Post” tab of the advanced settings section. Make sure the post address will make sense to your target audience.

permalink example WordPress screenshot

Categories and Tags

Adding categories and tags to your posts are a great way to keep your website organised and for visitors to find content they need. Categories are used to group related posts together into broad topics whereas tags are more specific to the posts.

You option to add categories and tags are in the settings panel just below the permalinks option. You can also take more control of this feature by reading our more detailed guide to categories and tags in WordPress.

Featured Image

A featured image is the main picture associated with your post. Many WordPress themes will add the image to the top of the web page, but they will also accompany your post title when viewed from your blog, archive page, when your posts are shared on other platforms, or listed in Google’s search results.

First impressions count so make sure your featured image sets the right tone for your content and supports your intended message.

Clicking the grey tile will open the Media Library Screen where you can then upload an file from your device or use an image you have already added to WordPress.

Set featured image screenshot

Preview and Publish Your Post

Finally, you can find the preview and publish options in the toolbar at the top of your screen:

preview your post menu
The Preview Menu

WordPress automatically saves your changes, but you should do it manually once in a while by clicking the “Save draft” button.

The “Preview” button opens a new window to show you what your post will look like on a desktop screen, tablet device or a mobile phone. This useful feature can help you make final adjustments before publishing.

If you click the “Publish” button, a variety of pre-publish checks opens where you can change the publication date or set the post to private.

Final Thoughts

Now you have added some content and hit the publish button, view your work in your browser. You are now able to share your thoughts and theories with the world. If you would like more practice using blocks, our introduction to the default text blocks should be your next stop because it will help you become as familiar with using the WordPress editor to write great content as you are using Microsoft Word or Google Docs.

Further Reading

Thanks for reading!