How To Create Author Box Using GenerateBlocks?

In this post, I will show how to create an author box using GenerateBlocks.

You won’t need a single piece of a code, except for a few lines of custom CSS (optional), that too only for box shadow styling purpose.

We are going to perform this on the GeneratePress theme. Since you don’t get an author box in GeneratePress by default, whether free or premium. Plus, the plugin we will use is GenerateBlocks free version.

For this activity, you will need GP premium. The premium version theme of GeneratePress.

Why Create An Author Box Using GenerateBlocks?

There are mainly 2 reasons for this;

Firstly, I never like to install a lot of plugins on my site for each and every requirement.

Let’s say today I need to create an author box, so I install a WordPress author box plugin, tomorrow I download another plugin for related posts, and so on.

It is better to keep a single WordPress block-based plugin and try creating most of the aspects of your site.

For example, on BloggingIdol, we work with GenerateBlocks and it has been enough for us.

Secondly, if aren’t using plugin at all, then you’d have to code everything manually. Like creating PHP code for the author box, adding a hook, setting display location, and writing a lot of custom CSS code lines. In the end, affecting your website’s performance.

Before GeneratePress premium version 2.0, I had made an author box in GeneratePress using GeneratePress Hook Element, few lines of PHP and lots of Custom CSS.

generatepress author box custom css
Custom CSS To Style Author Box In GeneratePress

Now, imagine if I just had the free version of GeneratePress. I would had to write all PHP code, apply hook and display location via coding, and write all custom CSS too.

See what’s new in…

But, with GenerateBlocks, you just have to create the author box and it picks up all the required user data by itself, showing a beautiful author profile section.

Create Author Box Using GenerateBlocks

Time needed: 10 minutes.

To create an author box using GenerateBlocks you won’t need more than 10 minutes.
GeneratePress premium version 2.0 or higher and free GenerateBlocks is sufficient.

  1. Update WordPress Auther (User) Profile

    Make sure your WordPress author profile is up to date with First Name, Last Name, email address and at least 1 social profile.

    The social profiles are handled by every SEO plugin like Yoast, RankMath, etc.

    Also, verify that your profile picture is connected to Gravatar.

    For verifying all of the above, go to WordPress Dashboard, hover on UsersAll Users, and under you user profile, click on Edit.

    updated author profile for author box using generateblocks

  2. Create A GeneratePress Block Element

    From your WordPress Dashboard, hover your mouse on Appearance, and click on Elements. When the GeneratePress Elements page opens up, add a New Element and select Block from the drop down list.

  3. Customize The GeneratePress Block Element

    Give a name to your Element, adjust the entire element’s width, select Element Type as Hook, select Hook Name as ‘after_content’, and give Priority of 10.

  4. Add A GenerateBlocks Container Block

    This container block will be the main block wrapping all other blocks that will be used in creating the author box.
    I have already made the author box for my website. Therefore, use the image guides for spacing and other components.

  5. Apply A GenrateBlocks Grid Block

    Create a Grid Block with 2 containers. The first container will hold Author Avatar (image) and the second container will hold the Post Author Name. Set the first container size to 20% and second container size to 80%.

  6. Add Dynamic Image To Hold Author Avatar

    In the first container of the grid block, click on Add block and select Dynamic Image. Later choose Type as Author Avatar, set image size to 95 pixels and enable rounded image.

  7. Add GenerateBlocks Headline Block To Hold Post Author Name

    In the next container, click within the container to add a Headline Block, click on Dynamic Options and select Dynamic Text Type as Post Author Name. Further set Dynamic Link Type as Author Archives.

  8. Add Dynamic Content Block To Pull Author Description

    After you have successfully finished customizing both the containers of the Grid Block, in the meantime add another Container Block.

    Note:- This Container Block is added under the main container, after the Grid Block.

    Add a Container Block and within that container add Dynamic Content Block. From the Type drop down list, select Author Description. This will automatically pull author (your) description from the WordPress Author Profile description field.

  9. Finally, Add Button Block For Author Social Icons

    Just like the previous step, in the same way add another Container Block to hold GenerateBlocks Buttons block.
    Click on the main Button Block and align the entire block to the right-hand-side.
    After that, click on the first button and select Dynamic Options. Under Dynamic Link Type, select Author Meta and under Meta Field Name type the field name.
    Later, use an appropriate social icon from the Icon section.

    Note:- The Meta Field Name should match with the social profile field name under WordPress User Profile.

    I have a Facebook profile and wanted to link that under my Author Bio.

  10. Apply Display Location To Your Block Element

    To conclude, we have completed customizing the author box via GenerateBlocks. But, there is one last thing to do, and that is applying to correct display location to your GeneratePress Element Block.

    Since, this is an author box, select location as Posts, followed by All Posts. The hook and all other blocks that we’ve used in creating this author box will automatically pull the author bio under each post.

    In the end, click on Publish.

Style Author Box – Custom CSS

This is an optional step. At this time, your author box is already created, but for further effects, read below.

The free version of GenerateBlocks does not offer box shadow customization effects, and the content section of my single blog post already has content divided in flexboxes with box shadow effects.

Therefore, I needed to apply some Custom CSS codes.

.author-box-generateblocks
 {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
 } 

You need to write these codes in the Additional CSS section of your theme customizer. Then copy the name of the class and paste into Additional CSS Clases under the Advanced section of the main Container Block, used for creating the author box.

Finally, this is how the author box looks like on the front end of the site.

final result image of author box using generateblocks plugin
Final Result

Conclusion

This is how you create an author box using GenerateBlocks. Easy, wasn’t it? To learn more about GenerateBlocks plugin, have a look at my GenerateBlocks review guide.

You only need to be careful about a few things like using Author Avatar in Dynamic Image block, selecting Post Author Name for Author Name, etc.

Also, don’t forget to select display location for your block element.

Plus, you can select your own spacing parameters, colors, and typography.

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol.

1 thought on “How To Create Author Box Using GenerateBlocks?”

Leave a Comment