GeneratePress is one of the lightweight and fast loading themes for WordPress sites. Though there is a free version available in WordPress theme depository, it has lot of limitations. Author box is one basic stuff you will be missing when creating blog posts in GeneratePress theme. However, it is super easy to create an author box in GeneratePress theme and customize the appearance as per your layout.
What You Need for Creating Author Box?
Here are the stuffs you need:
- Free GeneratePress theme
- Premium add-on plugin
- GenerateBlocks free plugin
- Gutenberg editor
Note that you need GenerateBlocks free or premium version for installing any demo from Site Library section. So, GP Premium plugin is the only thing you need for creating author box.
Add Author Box Below Post Content
Author box explained in this tutorial contains three elements – an author image, description and title. If required, you can also add social links below the description as text links or as icons. Follow the below steps to add author box below the post content and above the comments container.
Step 1 – Preparing Author Image
The first step is to keep your author image ready for using in the setup. You have two options:
- Gravatar – if your WordPress administrator email is linked to a gravatar.com account, then make sure to upload a decent picture there. After that, go to “Settings > Discussion” section in your admin panel and enable “Show Avatars” option.
- Custom image – keep a PNG or JPEG image of your picture in 200 x 200 pixels size.
Note: You can also use a plugin for using custom avatar image instead of gravatar. However, you still need a clearly visible profile picture for uploading. In this tutorial, we use custom image without any additional plugin which is suitable for single author blog. If you have multiple authors, then use gravatar and dynamic options as explained in step #5.
Step 2 – Activate Elements
Elements is a module that comes with GeneratePress premium add-on. You need to activate this for inserting hooks and blocks in the layout.
- Make sure you have installed and activated GeneratePress GP Premium plugin.
- After that, go to “Appearance > GeneratePress” section.
- Find “Elements” module and activate it.
Note: “Disable Elements” is a different module and make sure to correctively activate “Elements” module.
Step 3 – Create Author Box Block Hook
Once the Elements module is activated, it will add a menu item in the left sidebar of the admin panel.
- Go to “Appearance > Elements” section and click “Add New Element” button.
- This will show a “Choose Element Type” pop-up. Select “Block” from the dropdown and click “Create” button.
- This will open Gutenberg block editor and add the title as “Author”.
Step 4 – Filling Hook Details
- Go to the “Elements” tab in “Settings” section of the right sidebar.
- Expand “Block Element” section and fill the details as below:
- Editor width – leave it as default 100%
- Element Type – Hook
- Hook Name – before_comments_container
- Priority: 10
As mentioned, “before_comments_container” hook is to insert the author box before the comments box. You can choose different hook position if you want to change the position of author box in your layout. Priority 10 is used to show the author box as a first item in the hook. Make sure to use priority greater than 10 for any other “Elements” using the same hook.
Step 5 – Adding Content for Author Box
This is an important part and below is how the final “List View” of final setup will look like. This is a minimalist author box and you can add colors and background as per your layout.
- First insert a Container block, assign 40 px paddings (top, bottom, right and left) and then 20 px top/bottom margins.
- Add a Grid block inside the container and select 1/3 + 2/3 split option.
- In the first 1/3 column, add an image block and upload your profile picture image as prepared in step #1. If you want to use gravatar image, add an image block and select the following details from the “Dynamic Data” section on right sidebar Block settings.
- Enable Dynamic Data – Turn on this button.Data Source – Select Current post.Image Source – Select Author avatar.
- Link Source – Select Author archive if you want to link, otherwise, leave it blank.
- Go to “Spacing” settings and change the border radius to 100% for all four corners.
- In the second 2/3 column, add two GenerateBlocks heading blocks one below another. Change the first heading to H3, click the “Dynamic options” database icon and choose the following details.
- Dynamic Text Type – Select Post author name.
- Before Text – Type About.
- Dynamic Link Type – Select Author archives if you want to link author archive page to author name in the box. Otherwise, leave it blank if you have disabled author archive using plugins like Yoast SEO (it should be the case for single author blog to avoid duplicate content with blog page).
- Select the second heading, change it to a paragraph and add the following “Dynamic options”.
- Dynamic Text Type – Select Author meta.
- Meta Field Name – Just type description.
- Before Text – Leave it blank.
- Dynamic Link Type – Leave it blank.
Note that for both headings, you can simply fill static text for author name and author description which is ideal for single author blog. The above example will dynamically fetch the author’s name from post and the description from author’s user profile (Users > Profile > Biographical Info). Use these dynamic options (including for image block) when you want to dynamically add author details as in the case with multiple authors blog.
Step 6 – Adding Colors to Author Box
This is an optional step as you do not need colors when using separate boxes for each element in your layout. Otherwise, select the top Container block and change the color from right sidebar settings. If you select dark background for parent container, make sure to select light colors for author name and description.
Step 7 – Assigning Location for Author Box
You need the author box to show on all blog post articles.
- Go to “Display Rules” section showing below the content area.
- Click “Add Location Rule” button in “Location” section and select “Post” option from the dropdown.
- It will automatically show a second dropdown with “All Posts” and leave it as it is.
If required, you can also add exclusion and user role applicability to restrict the display of your author box. Otherwise, leave those two options as they are.
Step 8 – Publish and Check Your Author Box
Finally, click the “Publish” button and open any of your blog article in browser’s new tab. You should see the author box appears just above the comments container as per the selected hook.
You can check the author box in your mobile or test with browser’s “Inspect” element option.
If the alignment is not good, you can edit the author box under “Appearance > Elements” section to add required margins and paddings.
Copy Paste Code for Author Box
If you are lazy or not able to create the author box as explained above, follow the first 4 steps. After that, simply copy and paste the following code in the content area (below the title). You will see an author box created exactly looking as above. Add your title, location display rule and click “Publish” button.
<!-- wp:generateblocks/container {"uniqueId":"02d854d8","backgroundColor":"#000000","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"alignmentMobile":"center","marginTop":"20","marginBottom":"20","paddingTop":"40","paddingRight":"40","paddingBottom":"40","paddingLeft":"40","paddingSyncUnits":true} -->
<!-- wp:generateblocks/grid {"uniqueId":"47bce4c6","columns":2,"horizontalGap":20,"verticalAlignment":"center","verticalGapMobile":20,"isDynamic":true,"blockVersion":3,"useLegacyRowGap":true} -->
<!-- wp:generateblocks/container {"uniqueId":"f4a9fdfa","isGrid":true,"gridId":"47bce4c6","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"22%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"7f7f29ab","mediaId":87,"sizeSlug":"full","width":"100px","height":"100px","objectFit":"contain","alignment":"center","borderRadiusTopRight":"100","borderRadiusBottomRight":"100","borderRadiusBottomLeft":"100","borderRadiusTopLeft":"100","borderRadiusUnit":"%","useDynamicData":true,"dynamicContentType":"author-avatar"} /-->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"9d875209","isGrid":true,"gridId":"47bce4c6","flexBasisUnit":"%","removeVerticalGapMobile":true,"isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"78%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"92f52333","element":"h3","blockVersion":2,"fontSize":18,"marginBottom":"10","backgroundColor":"","textColor":"var(\u002d\u002dbase-3)","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","className":"","gpDynamicTextType":"post-author","gpDynamicTextReplace":"Post author name","gpDynamicTextBefore":"About "} -->
<h3 class="gb-headline gb-headline-92f52333 gb-headline-text">Post author name</h3>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"ff3f4ce4","element":"p","blockVersion":2,"fontSize":17,"marginBottom":"15","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","className":"","gpDynamicTextType":"user-meta","gpDynamicTextReplace":"User meta","gpDynamicTextCustomField":"description"} -->
<p class="gb-headline gb-headline-ff3f4ce4 gb-headline-text">User meta</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
Leave a Reply
Your email is safe with us.