In this GenerateBlocks tutorial, you will learn 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 make GeneratePress author box, since you don’t get one with the theme. 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 WordPress plugin 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.
Now, imagine if I just had the free version of GeneratePress. I would had to create GeneratePress custom hook, write all PHP code, apply hook location, display location, 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.
- Update WordPress Author 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 Users – All Users, and under you user profile, click on Edit. - Create GeneratePress Block Elements
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.
Note:- GeneratePress block elements are super useful in creating author box, related posts, latest posts, etc. - 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.
- 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. - 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%.
- 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.
- 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.
- Add GeneratePress 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 GeneratePress Dynamic Content Block. From the Type drop down list, select Author Description. This will automatically pull author description from the WordPress Author Profile description field. - 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. - Apply Display Location To Your GeneratePress Author Box 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, we have created a simple author box and it looks like this on the front end of the site.
FAQs – GenerateBlocks Author Box
1. On you WordPress dashboard, go to users and click on profile
2. Go down to profile picture and add your author image
3. Click on update profile
By customize, if you mean design, then you need to add custom CSS in order to give border, align author image in the center of the author box.
You can add author box in GeneratePress by the following three ways;
1. Use an author box WordPress plugin
2. Create GeneratePress custom hook
3. Use GenerateBlocks to create author box in GeneratePress
Yes, for that you need to customize GeneratePress sidebar using GenerateBlocks.
On your WordPress dashboard, hover on Users and then click on Profile. Create your WordPress author profile, add author name, description, add your author image and then click on ‘Update’ to update your profile.
After the theme got updated, you now get GeneratePress dynamic content and dynamic image to pull author info and author avatar directly from WordPress.
The author box should consists of author image, first name, last name, author description, and social links, if any.
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.
Thank you sharing such lovely content.
Thanks so much for sharing
Happy to help.