GeneratePress Block Elements Tutorials: Author Box + Related Posts with GenerateBlocks

In this GeneratePress Block Elements Tutorials, we are going to use GenerateBlocks with the GP Premium version to create custom headers, footers, sidebars, author box, related posts, etc. The new Block Element is introduced in the GP Premium 1.11.0.

Block Element is one of the most powerful features added in the GeneratePress Premium version. You can almost add content anywhere using this functionality.

Moreover, you will also learn about

  • How to use Block Element?
  • Block Element with GenerateBlocks.
  • Use of GenerateBlocks, WP Show Posts, and GP Premium.
  • Author Box using GenerateBlocks and Block Element.
  • Related Posts using Block Elements, WP Show Posts, and GenerateBlocks.
  • So On …
GeneratePress Block Elements Tutorials with GenerateBlocks

If you aren’t familiar with GenerateBlocks (GB), then it is a WordPress block created by Tom Usborne, the same person behind GeneratePress Theme. It consists of only 4 blocks: Container, Grid, Headline, and Buttons. Container and Grid are the most powerful blocks.

Read GenerateBlocks Review and install it on your WordPress website. GB works with every WordPress Theme. I am personally using GenerateBlocks with GeneratePress Premium Theme.

So in this tutorial, we are using the combination of GenerateBlocks and GeneratePress with WP Show Posts to create author box, related posts, etc.

How to use GeneratePress Block Elements?

First, update to latest GeneratePress version if you haven’t already and then

  • Go to your Dashboard > Appearance > GeneratePress.
  • Activate the Elements Module.
  • Now go to Appearance > Elements.
  • Click on Add New Element and Choose Element Type as Block.
Add New Block Elements

Now, you can use Block Elements with the Gutenberg. Let’s explore Block Element Settings.

Block Element Settings
  • Block Type: Here you can choose a block to show between your Hook, Site Header, Site Footer, Right Sidebar, Left Sidebar. If you are familiar with Hook Element Type then you know about Hook Setting and Priority.
  • Location: You can choose where the element should display.
  • Exclude: You can choose where the element should not display.
  • Users: If your blog has multiple authors then you can set the element for specific users.

This is how you can use Block Element Type in GeneratePress WordPress Theme.

Also Read: GeneratePress Review

GeneratePress Block Elements Tutorials

Here, we will try to create different tutorials using GeneratePress Block Elements with the help of GenerateBlocks and WP Show Posts.

1. Create Author Box using GenerateBlocks and Block Elements

I have already created a tutorial regarding Author Box in GeneratePress using Hook Elements and custom CSS. Now, we are using GenerateBlocks and Block Elements in this tutorial.

We are using GP Premium Version and I hope you are using Pro version too.

First Install GenerateBlocks Plugin. Then go to Appearance > Elements > Add New Element > Choose Element Type as Block. Add Title as Author Box.

1. Add Container Block

Now go to the content area and add new Container Block.

Add Container Block

Since Container is the main block in this author box so, let’s style Container.

Go to Spacing and manage padding, margin, Border Size, Border Radius.

Author Box Spacing Settings

Now, Go to Container Color settings and Choose Border Color as #cccccc. You can also set Background Color, Link Color, etc.

Author Box Colors Setting

Note: You can adjust these settings according to your requirements. Make sure it fits your blog style.

2. Add Grid Block

Add Grid inside the Container Block. We will choose 25/75 grid layout.

25% width to the left side and 75% width to the right side in Grid Block

3. Add Image

Now on the left side of the grid, we will add author image, choose Image block with a rounded style with Thumbnail Image size.

Image block in Grid Block

4. Add Author Bio

Now on the right side of the grid block, we will add author title and author bio.

We will use Headline GenerateBlocks not get confused with headings.

Choose Headline Block and add Author Title.

Here I have added About Author but you can add Author Title as your Name.

Headline Author Title Block

Now under Author Title add new Headline block to add Author Bio.

Headline Author Bio Block

5. Choose Block Element Settings

Now, go to Block Element Settings and choose Block Type as Hook. Choose Hook as generate_after_content. Select Location as Post > All Posts.

Author Box Block Elements Settings

Note: You can create multiple author boxes for multiple authors. You can use Users Block Elements settings for the respective authors.

6. Author Box Result

Now, you finally create an author box with the help of Generateblocks and the result looks like the below screenshot.

Author Box in GenerateBlocks with GeneratePress block elements tutorials

After creating author box, hit publish button and check your single post.

2. Create Related Posts using Block Elements, WP Show Posts, and GenerateBlocks

If you combine WP Show Posts plugin, GeneratePress Theme, and GenerateBlocks plugin then you can create some awesome things in WordPress. It is developed by the same developer keeping performance in mind.

I have used WP Show Posts and Hook Element to display related posts in the GP Premium version already. Now we are going to use WP Show Posts, Block Elements, and Generateblocks here to create related posts.

For related posts, you need to install WP Show Posts and GenerateBlocks

1. Set up WP Show Posts

After installing WPSP, Click on Add New > Title and setup WPSP settings as follows.

Go to Posts Section > Post Type as a post. Taxonomy as a CategoryPost per page as 3 or 6. Remember your Shortcode generated by WPSP.

WPSP Related Post Setting

Go to Columns section > Columns as 3. Columns gutter as 2em.

Go to the Images section > Check the Images. Set the Image width (px) and Image height (px) with 210 and 150 respectively. Image alignment as CenterImage Location as Above Title.

Next, go to Content section > Content type as None. Check Include titleTitle Elements as p. Leave all other as blank.

Go to Meta section> Uncheck all settings.

Go to More settings > Check Exclude current and leave all the settings as it is.

2. Add Container Block

Now, go to Appearance > Elements > Add New Element > Choose Element Type as Block.

Add a title and add new Container Block and use Container settings like Spacing, Colors and other according to your requirements.

Add new containter

Here is the sample Container Spacing and Color settings.

Generateblocks Spacing Settings
Generateblocks Colors Setting

3. Add Shortcode

Add new Shortcode block inside the container block. Copy the shortcode from WP Show Posts mentioned above and Paste it into the Shortcode box.

Shortcode block for related posts

4. Related Posts Result

After finishing up, hit publish button and check the result. The related posts look like this

Related Posts using GenerateBlocks and WP Show Posts

Summary

Element is the most powerful module in GeneratePress Premium Theme. I love using Hook, Layout, Header, and Block Element Type. Here, you can create different styles using Block Elements in the header, footer, sidebar, etc.

Moreover, you will get to see more options in Block Type in future updates as stated in the official GP Blog.

Here I have created few GeneratePress Block Elements Tutorials with the help of GenerateBlocks. In the future, I will create even more tutorials using Block Elements.

If you have any queries, please feel free to comment below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

7 thoughts on “GeneratePress Block Elements Tutorials: Author Box + Related Posts with GenerateBlocks”

  1. What if i have multiple authors on the website and i want the Author Box to be visible on posts written by each post author.

    If i set up an Author Box for each author how can i connect the author box to the right author?

    Reply
    • Hi Morgan, You can Users setting available in Hook Block Type.
      Please refer to this screenshot.
      Hook Setting
      You can assign different author box to different author.

      Reply
  2. Not able to find “Add a title and add new Container Block and use Container settings like Spacing, Colors and other according to your requirements.”

    Reply

Leave a Comment