How to Add Content with the WordPress Block Editor
In this article we will learn how to add and edit a WordPress Post (Article) with the Block Editor. You need access to a WordPress website in order to go through the steps in this slideshow. In my college courses, I provide access to students to a WordPress website, WebDevPortfolios.com.
If you are in one of my classes, what we will be doing in this article is creating a page of portfolios for all of the students in one class. You can see the end result at this link:
Note that not all students used a photo of themselves or even their real name. As you build out your online presence, it is a good idea to use your own name and photo. This will help you in the career marketplace. However, think of your own online safety as well, and make the decision about what is right for you as you work through this lab assignment.
If you aren’t in one of my courses, I recommend that you spin up a website with Local by Flywheel:
Local by Flywheel
As we learned in Lesson 2 on how WordPress works, it is just a bit complicated to spin up a WordPress website, because it uses both website files and a MySQL database.
Local by Flywheel will get a WordPress website started on your computer. Start by making and account, and then Downloading Local by Flywheel to your computer. You will need to then install the software by clicking on the .exe or .dmg file. Follow the prompts to create a new WordPress website. Be sure to use a good email address and a strong password in creating the WordPress account. When the website is installed, click on the WP Admin link in the upper right corner of the screen. That will get you to where we are in the lab assignment.
If you run into problems, here are installation instructions:
https://localwp.com/help-docs/getting-started/installing-local/
Note: Do not pay for any services, at least not at this point. Local by Flywheel is a product of Flywheel, and Flywheel is premium WordPress hosting. I highly recommend Flywheel hosting, but only when you are ready to publish. In addition, there are lower cost options that may be more appropriate for you, depending on your goals.
Logging Into WordPress
If you are in one of my courses, you would have received a password reset email from me for your WordPress login. Follow the link in the email to set a password and login into WordPress.
Find the email I sent to you from WebDevPortfolios.com. It may be in your spam folder. Then, follow the instructions to set your password for WebDevPortfolios.com. Remember your password. If you can’t find the email, let me know so I can help you obtain access to the website.
Remember that you can login into most WordPress websites by going to: MyDomainName.com/wp-admin. If you are one of my students, there is a Login link at the top of the WebDevPortfolios.com.
Go ahead and login to either WebDevStudents.com or your Local by Flywheel website.
The WordPress Dashboard
After you are logged in, you are immediately brought to the dashboard. The dashboard is the logged in part of the website that you can use to manage the website.
If you don’t see the options on the Dashboard, click the arrow at the bottom of the list. That opens up the text on the sidebar.
You can toggle between the home page and the WordPress Dashboard by clicking the “Web Dev Portfolios” in the top left corner of the page.
Note the black bar at the top of the website. Only logged in users see the black bar.
Your WordPress User Profile
Before we dive into the Block Editor, let’s add a bit more detail to your user account.
Let’s toggle back to the dashboard, and set up your user profile. This is important, because as an author, your name will display on the posts that you write.
Add your first name, last name, and then select how you want your name to appear on posts.
This is a live website, so do not use your real name if that isn’t a safe thing for you to do. It fine to use a fake name or pen name. Even if you are working in Local by Flywheel, set up a name now that it is safe to use publicly. If you can safely use your real name, I recommend that you do so, so you start to build out a presence on the internet.
You are setting how your name will appear on posts. Anything is fine, except for the default user name. In the screenshot below, you can see how your name may appear with your posts.
Creating a New WordPress Post
Now that you are logged in and know a bit about how to navigate in WordPress, it is time to add your first post.
Click the +New button in the top black bar, and choose New Post. You can find the +New button from either the front or backend of the website. See the screenshot below.
Make sure you choose “Post” from the dropdown list. We’ll learn how to add Pages and Products in future lessons.
Adding a new post will bring you to the Block Editor page, where you can create the post for the lab assignment. The post we create when I teach this is a portfolio page. If you are working through this lesson on your own you can make a post on any topic.
Create a relevant for your post. If you are in one of my classes, use a name or pen name. To add the title, simply click “Add title” and start typing. The title you create will be the <h1> heading on the web page.
Add Post Info
Before we start writing, lets add some meta data and a featured image to the post. To do this, you need to see the Post settings. If you don’t see a sidebar on the right side of the page, click the settings wheel at the top of the page. Make sure the page is set to Post instead of Block.
Scroll down on the sidebar until you find the Categories. If you are in one of my classes, choose the appropriate category so your post will appear with the others in your class. If you aren’t in one of my classes, you may want to try adding a category. You can name the category whatever you want, but if you need an idea, just name it “Articles”.
Most posts on most WordPress websites have a featured image. The featured image is the image that best represents your post. Keep scrolling the right sidebar down until you find the Featured Image. Add a featured image for your post. Use a picture of yourself or something that represents you if you are making a portfolio post.
Let’s go ahead and publish the page, even though it only has a title, featured image and some categories. Click through the warning prompts.
Now that it is published, it automatically appears on the list of posts for your class. If you are in one of my classes, navigate to WebDevPortfolios.com and click on the page for your course. You will see your post listed with the feature image.
You will also see your classmates posts on this page. (If you don’t see your post, go back to your post and make sure you added the categories and saved it.)
Check your featured image and make sure the default WordPress cropping looks ok. If not, crop the image yourself and redo the featured image.
Adding Blocks to your Post
Now that you have a post, we will add some content to it. WordPress pages and posts are edited with the Block Editor.Navigate to your post, and click the Edit Post in the black bar at the top of the page.
If you don’t see Edit Post, you haven’t navigated to your page, or you aren’t logged in.
Before we start adding blocks, let’s practice navigating inside of Edit Post. As soon as you start adding blocks, you will see the the Post tab toggle to the Block tab.
When you want to go back to editing the entire post instead of one block, toggle over to see the Post settings as shown in the image at right. (If you remember, we edited the Categories and Featured Image in the Post tab.)
Now we need to start adding blocks to the block editor. The default block is a paragraph. If you know HTML, a paragraph is simply a <p> tag. Simply click where it says “Type / to choose a block” and start typing.
Rather than write a new paragraph, you can cut and paste a paragraph about yourself from your portfolio website, your cover letter, or LinkedIn description.
Now let’s add an image. In the block editor, click on the little black plus + sign and choose “Image”. You can choose the same image you used for your featured image.
At this stage, adding an image is intuitive. Once you have the image added, you will see a lot of options for the image.
Some of the options are above the image, and some of the options are in the right sidebar. If you don’t see the options, click on the image to select it.
In WordPress, these options are the equivalent of writing some CSS. In fact, you may recognize many of the options as CSS properties. As you select options, you are changing the CSS for the image and its container.
In the screenshot below, you see the options for choosing whether the images float, with align left and align right.
Let’s float your first image with the Align Right selection. Using the image floating is a way to design your web pages to be a mix of images and text.
You can also decide how wide you want the image to be by dragging the little blue circles.
Save your post and view it. It looks great on a desktop, right? Now look at it on a smartphone size screen. When you float an image in WordPress, it often leads to a problem for smaller screens.
There is an easy CSS solution to this problem. When you want to float an image, simply add a max-width to the floating image in CSS.
In WebDevPortfolios.com, I have created a class you can add to your floating image:
forty-percent-max
Click on the image to select it. Scroll to the bottom of the sidebar and open Advanced section.
Add the class: forty-percent-max
On WebDevPortfolio.com, I have already added the following CSS, so you don’t have to:
wp-block-image.forty-percent-max{
max-width: 40%
}If you are working on a different website, you can add this CSS trick to your website as well. Simply go to the home page, and choose Customize from the top menu. Scroll to the bottom of all of the options, and you will see “Additional CSS”. Just paste the CSS above into that area.
Now it is time to try some additional block types. Here are some easy blocks to try.
- Headings: Every web page should have at least 2 <h2> and some <h3> headings. There is no need to add an <h1> because the title is the Heading 1.
- Paragraphs <p>
- Bulleted lists or Numbered lists
- Photo Gallery: To make a photo gallery find a half dozen photos. Navigate to the Photo Gallery block. Make sure that you have the rights to use any images you post.
- Separator Block: This is the <hr>. It has some cool settings.
- YouTube Embed: This would be a great way to share some of your work from other courses.