WordPress Tutorials for Beginners and Intermediate Users

There may be some times when you want to show some computer code to your readers.  In the past that may have been hit or miss because the code may have executable instructions in it that would make the formatting inconsistent.  The Code Block in Gutenberg allows you...

The archive block places a listing of the archived posts on your site.   Step 1- Choose the archive block by either typing into the search bar or scrolling down to the "widgets" category in the block selector. Choose the Archive B``lock underneath the Widget  Step 2 -...

Adding a Page Break in the Gutenberg Editor can be a great way to break up long content. Step 1 - In the block selector under the Layout Category choose Page Break Step 2 - You'll now have a line that you can use to separate your content into a multi-page experience. ...

A preformatted block allows you to add text that respects your spacing and tabs, and also allows particular styling. Step 1-  Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Scroll to Formatting....

A Gallery Block allows you to add a gallery to your pages. Step 1- Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Scroll to Common Blocks. Select Gallery. Step 2 - A gallery block will appear. You...

A latest comments block allows you to display a list of your most recent blog post comments.  This is essentiall the Recent Comments Widget available to you in a block that can be added anywhere in the content of your post. Step 1- Hover your mouse over the Add Block...

Embedding Youtube and Vimeo videos in Gutenberg is even easier than it was with the classic WordPress editor.  Embed Blocks allow you to add content from other websites (videos from YouTube, tweets from Twitter, an event from meetup.com, etc.) into your own pages....

AKA - placing text beside an image in WordPress 5.0 This is the block that we've all been waiting for!  For anyone who has been using the Gutenberg editor, placing text beside an image or video was extremely frustrating and difficult. In fact there was a workaround...

The classic block allows you to use the familiar classic WordPress editor within a Gutenberg block.  If you convert a post from the Classic Editor,( pre WordPress 5.0), to Gutenberg, your whole post will show up in one Classic Block.  This block allows multiple...

A categories block allows you to display a list of all of your post categories. Think of this as a block version of the popular category widget. Step 1- Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor)....

A cover block is a great option to use as a header for your content. You can add an image or video with a text overlay. Step 1- Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Scroll to Common Blocks....

With the Columns block, you can quickly and easily adjust your page’s layout. Step 1- First go to the page where you would like to page’s layout. Click on the plus sign icon in the upper left hand corner. From there, select the Layouts from the drop down menu. Click...

The Separator block is used when you want to create a break of ideas or sections with a horizontal separator. Step 1 First go to the page where you would like to add the separator. Click on the plus sign icon in the upper left hand corner. From there, select the...

The "more" block is used when you want to include a short introduction of piece of content on a page or post. It will help create separation from the rest of your content. Step 1 - First go to the page where you would like to add the more block. Click on the plus sign...

The Spacer block is used when you want to create a white space between blocks and customize its height.  You can also add a CSS class to give an additional design to the spacer block. Step 1- First go to the page where you would like to add the spacer. Click on the...

Thanks to Jeff Chandler of WP Tavern for this solution.  Adding an image to the paragraph block can be extremely frustrating because it is not a straightforward process.  Follow the steps below to pull it off. Step 1 - Write Your paragraph(s) using the paragraph block...

Step 1 Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Step 2 Select Blocks. Then scroll to Layout Elements. Under that section you will see Button. Select Button. Hint: You can also type “Button” in...

The Author Profile block lets you add a user profile box to your page with an avatar, name, title, profile text and social media links. The block also comes with several settings to help you customize it in many ways.  This particular block is from the Atomic Blocks...

Step 1 First hover your cursor over the block you would like to move. When you hover a block, you will see arrows on the left side of the block. The arrows will allow you to adjust your blocks (clicking the up arrow will move it up by one space, click the down arrow...

Step 1 Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Step 2 Select Blocks. Then scroll to Common Blocks. Under that section you will see File. Select File. Hint: You can also type “file” in the...

If you have blog posts, artwork, music or other creative content on your website you may want to share them on social media and encourage your website visitors to also share on social media. Atomic Blocks’ sharing icon block will allow you to integrate your content to...

Step 1 Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Step 2 Select Blocks. Then scroll to Common Blocks. Under that section you will see Audio. Select Audio. Hint: You can also type “audio” in the...

If you have an woocommerce website, you may want to allow customers a preview of products you’re selling. A products block would be ideal for you to use. The products block is similar to the products short code. The Products block allows you to  insert any products...

Just like a successful business requires a team to manage and maintain it, a website will require the same thing. Each role within the company has different positions, responsibilities, and permissions. Each person is given their role based off of their skill set, ...

Gutenberg introduces a great way for you to add paragraph text.  You can use blocks to better separate and organize your content.  Also using blocks, you can easily move content around. Step 1 Hover your mouse over the Add Block icon (the plus sign in the upper left...

Pull Quotes are an important feature in many online publishing platforms.  In the new Gutenberg editor for WordPress, this is made really simple and intuitive.  The look of the pull quote on the front of your site is still determined by your particular theme setup,...

There are three ways to add images with Gutenberg: as an individual image, cover image, or an image gallery. Step 1 Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Step 2 Select Blocks. Then scroll to...

Adding a video in Gutenberg Step 1 - There are two types of videos you can add in Gutenberg: uploaded video file and embedded video. Step 2- To add a video as a file upload, hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within...