{"id":9445,"date":"2023-02-11T10:05:31","date_gmt":"2023-02-11T04:35:31","guid":{"rendered":"https:\/\/bloggingidol.com\/?p=9445"},"modified":"2023-02-11T10:27:23","modified_gmt":"2023-02-11T04:57:23","slug":"how-to-create-author-box-using-generateblocks","status":"publish","type":"post","link":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/","title":{"rendered":"How To Create Author Box Using GenerateBlocks?"},"content":{"rendered":"\n<p>In this GenerateBlocks tutorial, you will learn how to create an author box using <a href=\"https:\/\/bloggingidol.com\/generateblocks-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">GenerateBlocks<\/a>.<\/p>\n\n\n\n<p>You won\u2019t need a single piece of a code, except for a few lines of custom CSS (optional), that too only for box shadow styling purpose.<\/p>\n\n\n\n<p>We are going to make GeneratePress author box, since you don&#8217;t get one with the theme. Plus, the plugin we will use is GenerateBlocks free version.<\/p>\n\n\n\n<p>For this activity, you will need GP premium. The premium version theme of GeneratePress.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#Why_Create_An_Author_Box_Using_GenerateBlocks\" title=\"Why Create An Author Box Using GenerateBlocks?\">Why Create An Author Box Using GenerateBlocks?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#Create_Author_Box_Using_GenerateBlocks\" title=\"Create Author Box Using GenerateBlocks\">Create Author Box Using GenerateBlocks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#Style_Author_Box_%E2%80%93_Custom_CSS\" title=\"Style Author Box &#8211; Custom CSS\">Style Author Box &#8211; Custom CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#FAQs_%E2%80%93_GenerateBlocks_Author_Box\" title=\"FAQs &#8211; GenerateBlocks Author Box\">FAQs &#8211; GenerateBlocks Author Box<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"has-text-align-center wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Create_An_Author_Box_Using_GenerateBlocks\"><\/span>Why Create An Author Box Using GenerateBlocks?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are mainly 2 reasons for this;<\/p>\n\n\n\n<p><strong>Firstly<\/strong>, I never like to install a lot of plugins on my site for each and every requirement.<\/p>\n\n\n\n<p>Let\u2019s 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.<\/p>\n\n\n\n<p>It is better to keep a single WordPress block-based plugin and try creating most of the aspects of your site.<\/p>\n\n\n\n<p>For example, on BloggingIdol, we work with GenerateBlocks WordPress plugin and it has been enough for us.<\/p>\n\n\n\n<p><strong>Secondly<\/strong>, if aren\u2019t using plugin at all, then you\u2019d 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\u2019s performance.<\/p>\n\n\n\n<p>Before <strong>GeneratePress premium version 2.0<\/strong>, I had made an <a href=\"https:\/\/bloggingidol.com\/how-to-add-author-box-in-generatepress-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">author box in GeneratePress<\/a> using GeneratePress Hook Element, few lines of PHP and lots of Custom CSS.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"668\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-in-generatepress-custom-css.png\" alt=\"generatepress author box custom css\" class=\"wp-image-9469\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-in-generatepress-custom-css.png 660w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-in-generatepress-custom-css-296x300.png 296w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-in-generatepress-custom-css-96x96.png 96w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-in-generatepress-custom-css-150x152.png 150w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><figcaption class=\"wp-element-caption\"><em>GeneratePress Custom CSS To Style Author Box <\/em><\/figcaption><\/figure><\/div>\n\n\n<p>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.<\/p>\n\n\n<div class=\"gb-container gb-container-5e27cd9a\"><div class=\"gb-inside-container\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-63d4eaf8\">\n<div class=\"gb-grid-column gb-grid-column-1fc04274\"><div class=\"gb-container gb-container-1fc04274\"><div class=\"gb-inside-container\">\n\n<p class=\"has-text-align-center\" style=\"font-size:22px\"><em>See what&#8217;s new in&#8230;<\/em><\/p>\n\n<\/div><\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-80eb5daa\">\n<div class=\"gb-grid-column gb-grid-column-fde9e93b\"><div class=\"gb-container gb-container-fde9e93b\"><div class=\"gb-inside-container\">\n\n<p class=\"has-text-align-center\" style=\"font-size:26px\"><a href=\"https:\/\/bloggingidol.com\/blocksy-free-vs-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>GenerateBlocks 1.5<\/strong><\/a><\/p>\n\n<\/div><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Author_Box_Using_GenerateBlocks\"><\/span>Create Author Box Using GenerateBlocks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-how-to wp-block-yoast-how-to-block\"><p class=\"schema-how-to-total-time\"><span class=\"schema-how-to-duration-time-text\">Time needed:&nbsp;<\/span>10 minutes<\/p><p class=\"schema-how-to-description\">To create an author box using GenerateBlocks you won&#8217;t need more than 10 minutes. <br\/>GeneratePress premium version 2.0 or higher and free GenerateBlocks is sufficient.<br\/><\/p> <ol class=\"schema-how-to-steps\"><li class=\"schema-how-to-step\" id=\"how-to-step-1660985088079\"><strong class=\"schema-how-to-step-name\">Update WordPress Author Profile<\/strong> <p class=\"schema-how-to-step-text\">Make sure your WordPress author profile is up to date with First Name, Last Name, email address and at least 1 social profile.<br\/><br\/>The social profiles are handled by every SEO plugin like Yoast, RankMath, etc.<br\/><br\/>Also, verify that your profile picture is connected to Gravatar.<br\/><br\/>For verifying all of the above, go to <strong>WordPress Dashboard<\/strong>, hover on <strong>Users<\/strong> &#8211; <strong>All Users<\/strong>, and under you user profile, click on <strong>Edit<\/strong>.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"484\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box.png\" class=\"attachment-full size-full\" alt=\"updated author profile for author box using generateblocks\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box.png 770w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box-300x189.png 300w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box-768x483.png 768w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box-150x94.png 150w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661003236006\"><strong class=\"schema-how-to-step-name\">Create GeneratePress Block Elements<\/strong> <p class=\"schema-how-to-step-text\">From your <strong>WordPress Dashboard<\/strong>, hover your mouse on <strong>Appearance<\/strong>, and click on <strong>Elements<\/strong>. When the GeneratePress Elements page opens up, add a <strong>New Element<\/strong> and select <strong>Block<\/strong> from the drop down list.<br\/><strong>Note:-<\/strong> GeneratePress block elements are super useful in creating author box, related posts, latest posts, etc.<br\/><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"443\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generatepress-block-element.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generatepress-block-element.png 660w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generatepress-block-element-300x201.png 300w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generatepress-block-element-150x101.png 150w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661003504875\"><strong class=\"schema-how-to-step-name\">Customize The GeneratePress Block Element<\/strong> <p class=\"schema-how-to-step-text\">Give a name to your <strong>Element<\/strong>, adjust the entire <strong>element&#8217;s width<\/strong>, select <strong>Element Type<\/strong> as <strong>Hook<\/strong>, select <strong>Hook Name<\/strong> as <strong>&#8216;after_content&#8217;<\/strong>, and give <strong>Priority<\/strong> of <strong>10<\/strong>.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"314\" height=\"498\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/customizing-generatepress-block-element-for-author-box.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/customizing-generatepress-block-element-for-author-box.png 314w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/customizing-generatepress-block-element-for-author-box-189x300.png 189w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/customizing-generatepress-block-element-for-author-box-150x238.png 150w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661003976555\"><strong class=\"schema-how-to-step-name\">Add A GenerateBlocks Container Block<\/strong> <p class=\"schema-how-to-step-text\">This container block will be the main block wrapping all other blocks that will be used in creating the author box.<br\/>I have already made the author box for my website. Therefore, use the image guides for spacing and other components.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"934\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block.png 700w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block-225x300.png 225w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block-640x853.png 640w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block-150x200.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661004904434\"><strong class=\"schema-how-to-step-name\">Apply A GenrateBlocks Grid Block<\/strong> <p class=\"schema-how-to-step-text\">Create a Grid Block with <strong>2 containers<\/strong>. The first container will hold <strong>Author Avatar<\/strong> (image) and the second container will hold the <strong>Post Author Name<\/strong>. Set the first container size to 20% and second container size to 80%.<\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661006203060\"><strong class=\"schema-how-to-step-name\">Add Dynamic Image To Hold Author Avatar<\/strong> <p class=\"schema-how-to-step-text\">In the first container of the grid block, click on Add block and select <strong>Dynamic Image<\/strong>. Later choose <strong>Type<\/strong> as <strong>Author Avatar<\/strong>, set image size to <strong>95 pixels<\/strong> and enable <strong>rounded image<\/strong>.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"485\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/using-dynamic-image-block-to-select-author-avatar.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/using-dynamic-image-block-to-select-author-avatar.png 700w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/using-dynamic-image-block-to-select-author-avatar-300x208.png 300w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/using-dynamic-image-block-to-select-author-avatar-150x104.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661006735277\"><strong class=\"schema-how-to-step-name\">Add GenerateBlocks Headline Block To Hold Post Author Name<\/strong> <p class=\"schema-how-to-step-text\">In the next container, click within the container to add a Headline Block, click on <strong>Dynamic Options<\/strong> and select <strong>Dynamic Text Type<\/strong> as <strong>Post Author Name<\/strong>. Further set <strong>Dynamic Link Type<\/strong> as <strong>Author Archives<\/strong>.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"587\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-adding-of-post-author-name-to-headline-block.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-adding-of-post-author-name-to-headline-block.png 700w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-adding-of-post-author-name-to-headline-block-300x252.png 300w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-adding-of-post-author-name-to-headline-block-150x126.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661008157238\"><strong class=\"schema-how-to-step-name\">Add GeneratePress Dynamic Content Block To Pull Author Description<\/strong> <p class=\"schema-how-to-step-text\">After you have successfully finished customizing both the containers of the Grid Block, in the meantime add another Container Block.<br\/><br\/><strong>Note:-<\/strong> <em>This Container Block is added under the main container, after the Grid Block.<\/em><br\/><br\/>Add a <strong>Container Block<\/strong> and within that container add <strong>GeneratePress Dynamic Content Block<\/strong>. From the <strong>Type<\/strong> drop down list, select <strong>Author Description<\/strong>. This will automatically pull author description from the WordPress Author Profile description field.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"555\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-content-block-to-pull-author-description.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-content-block-to-pull-author-description.png 700w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-content-block-to-pull-author-description-300x238.png 300w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-content-block-to-pull-author-description-150x119.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661009082877\"><strong class=\"schema-how-to-step-name\">Finally, Add Button Block For Author Social Icons<\/strong> <p class=\"schema-how-to-step-text\">Just like the previous step, in the same way add another <strong>Container Block<\/strong> to hold <strong>GenerateBlocks Buttons block<\/strong>.<br\/>Click on the main Button Block and align the entire block to the right-hand-side.<br\/>After that, click on the first button and select <strong>Dynamic Options<\/strong>. Under <strong>Dynamic Link Type<\/strong>, select <strong>Author Meta<\/strong> and under <strong>Meta Field Name<\/strong> type the field name. <br\/>Later, use an appropriate <em>social icon<\/em> from the <strong>Icon<\/strong> section.<br\/><br\/><strong>Note:-<\/strong> <em>The Meta Field Name should match with the social profile field name under WordPress User Profile.<br\/><\/em><br\/>I have a Facebook profile and wanted to link that under my Author Bio.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"328\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/applying-author-meta-to-social-icon.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/applying-author-meta-to-social-icon.png 750w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/applying-author-meta-to-social-icon-300x131.png 300w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/applying-author-meta-to-social-icon-150x66.png 150w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1661012008263\"><strong class=\"schema-how-to-step-name\">Apply Display Location To Your GeneratePress Author Box Block Element<\/strong> <p class=\"schema-how-to-step-text\">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.<br\/><br\/>Since, this is an author box, select location as <strong>Posts<\/strong>, followed by <strong>All Posts<\/strong>. The hook and all other blocks that we&#8217;ve used in creating this author box will automatically pull the author bio under each post.<br\/><br\/>In the end, click on <strong>Publish<\/strong>.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"362\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/05\/generatepress-author-box-hook-display-rules.jpg\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/05\/generatepress-author-box-hook-display-rules.jpg 800w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/05\/generatepress-author-box-hook-display-rules-300x136.jpg 300w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/05\/generatepress-author-box-hook-display-rules-768x348.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p> <\/li><\/ol><\/div>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><span class=\"ez-toc-section\" id=\"Style_Author_Box_%E2%80%93_Custom_CSS\"><\/span>Style Author Box &#8211; Custom CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This is an optional step. At this time, your author box is already created, but for further effects, read below.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Therefore, I needed to apply some Custom CSS codes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.author-box-generateblocks\n {\n  flex-wrap: wrap;\n  display: flex;\n  align-items: center;\n  border-radius: 8px;\n  box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;\n } <\/code><\/pre>\n\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-65dfd3ea\">\n<div class=\"gb-grid-column gb-grid-column-488dc716\"><div class=\"gb-container gb-container-488dc716\"><div class=\"gb-inside-container\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"286\" height=\"264\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/additional-css-class-for-author-box.png\" alt=\"\" class=\"wp-image-9491\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/additional-css-class-for-author-box.png 286w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/additional-css-class-for-author-box-150x138.png 150w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/><\/figure>\n\n<\/div><\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-07a795ed\"><div class=\"gb-container gb-container-07a795ed\"><div class=\"gb-inside-container\"><\/div><\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-b977c079\"><div class=\"gb-container gb-container-b977c079\"><div class=\"gb-inside-container\">\n\n<p><\/p>\n\n\n\n<p>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.<\/p>\n\n<\/div><\/div><\/div>\n<\/div>\n\n\n<p>Finally, we have created a simple author box and it looks like this on the front end of the site.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"885\" height=\"311\" src=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/final-result-of-author-box-using-generateblocks.png\" alt=\"final result image of author box using generateblocks plugin\" class=\"wp-image-9495\" srcset=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/final-result-of-author-box-using-generateblocks.png 885w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/final-result-of-author-box-using-generateblocks-300x105.png 300w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/final-result-of-author-box-using-generateblocks-768x270.png 768w, https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/final-result-of-author-box-using-generateblocks-150x53.png 150w\" sizes=\"(max-width: 885px) 100vw, 885px\" \/><figcaption class=\"wp-element-caption\"><em>Final Result<\/em><\/figcaption><\/figure><\/div>\n\n<div class=\"gb-button-wrapper gb-button-wrapper-65997184\">\n\n<a class=\"gb-button gb-button-0d8c6f13 gb-button-text\" href=\"https:\/\/bloggingidol.com\/go\/generateblocks\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Check GenerateBlocks<\/strong><\/a>\n\n<\/div>\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQs_%E2%80%93_GenerateBlocks_Author_Box\"><\/span>FAQs &#8211; GenerateBlocks Author Box<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1672759793608\"><strong class=\"schema-faq-question\">How do I add an author image in WordPress?<\/strong> <p class=\"schema-faq-answer\">1. On you WordPress dashboard, go to users and click on profile<br\/>2. Go down to profile picture and add your author image<br\/>3. Click on update profile<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1672760015436\"><strong class=\"schema-faq-question\">How to customize Generatepress Author box?<\/strong> <p class=\"schema-faq-answer\">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.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1672760203910\"><strong class=\"schema-faq-question\">How to add an author box in GeneratePress?<\/strong> <p class=\"schema-faq-answer\">You can add author box in GeneratePress by the following three ways;<br\/>1. Use an author box WordPress plugin<br\/>2. Create GeneratePress custom hook<br\/>3. Use GenerateBlocks to create author box in GeneratePress<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1672760329389\"><strong class=\"schema-faq-question\">Can I create author info in GeneratePress sidebar using GenerateBlocks?<\/strong> <p class=\"schema-faq-answer\">Yes, for that you need to customize GeneratePress sidebar using GenerateBlocks.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1672760412814\"><strong class=\"schema-faq-question\">How to create WordPress author profile?<\/strong> <p class=\"schema-faq-answer\">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 &#8216;Update&#8217; to update your profile.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1672760557557\"><strong class=\"schema-faq-question\">How does GeneratePress pull author info and author avatar from WordPress?<\/strong> <p class=\"schema-faq-answer\">After the theme got updated, you now get GeneratePress dynamic content and dynamic image to pull author info and author avatar directly from WordPress.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1672760649677\"><strong class=\"schema-faq-question\">What should an author box consists of?<\/strong> <p class=\"schema-faq-answer\">The author box should consists of author image, first name, last name, author description, and social links, if any. <\/p> <\/div> <\/div>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This is how you create an author box using GenerateBlocks. Easy, wasn&#8217;t it?  To learn more about GenerateBlocks plugin, have a look at my <a href=\"https:\/\/bloggingidol.com\/generateblocks-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">GenerateBlocks review<\/a> guide.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Also, don&#8217;t forget to select display location for your block element.<\/p>\n\n\n\n<p>Plus, you can select your own spacing parameters, colors, and typography.<\/p>\n\n\n\n<p><\/p>\n<div class=\"wp-socializer wpsr-share-icons\" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\"><p><b><i>Share and Enjoy !<\/b><\/i><\/p><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-40px\" style=\"color:#000\"><span class=\"scount\" data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,reddit,pinterest,whatsapp\"><i class=\"fa fa-share-alt\" aria-hidden=\"true\"><\/i><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-count-1 sr-count-1 sr-fluid sr-40px sr-opacity sr-pad\"><span class=\"sr-facebook\"><a data-id=\"facebook\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\" title=\"Share this on Facebook\"><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\" data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\"><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a data-id=\"twitter\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\" title=\"Tweet this !\"><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-reddit\"><a data-id=\"reddit\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/reddit.com\/submit?url=&amp;title=\" target=\"_blank\" title=\"Submit this to Reddit\"><i class=\"fab fa-reddit-alien\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a data-pin-custom=\"true\" data-id=\"pinterest\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\" title=\"Submit this to Pinterest\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\" data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\"><\/span><\/a><\/span>\n<span class=\"sr-whatsapp\"><a data-mobile=\"whatsapp:\/\/send?text=%20-%20\" data-id=\"whatsapp\" style=\"color:#ffffff;\" rel=\"nofollow\" href=\"https:\/\/api.whatsapp.com\/send?text=%20\" target=\"_blank\" title=\"WhatsApp\"><i class=\"fab fa-whatsapp\"><\/i><\/a><\/span>\n<span class=\"sr-share-menu\"><a href=\"#\" target=\"_blank\" title=\"More share links\" style=\"color:#ffffff;\" data-metadata=\"{&quot;url&quot;:&quot;&quot;,&quot;title&quot;:&quot;&quot;,&quot;excerpt&quot;:&quot;&quot;,&quot;image&quot;:&quot;&quot;,&quot;short-url&quot;:&quot;&quot;,&quot;rss-url&quot;:&quot;https:\\\/\\\/bloggingidol.com\\\/feed\\\/&quot;,&quot;comments-section&quot;:&quot;comments&quot;,&quot;raw-url&quot;:null,&quot;twitter-username&quot;:&quot;&quot;,&quot;fb-app-id&quot;:&quot;&quot;,&quot;fb-app-secret&quot;:&quot;&quot;}\"><i class=\"fa fa-plus\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>In this GenerateBlocks tutorial, you will learn how to create an author box using GenerateBlocks. You won\u2019t &#8230; <a title=\"How To Create Author Box Using GenerateBlocks?\" class=\"read-more\" href=\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/\" aria-label=\"Read more about How To Create Author Box Using GenerateBlocks?\">Read more<\/a><\/p>\n","protected":false},"author":4,"featured_media":9610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[2],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Create Author Box Using GenerateBlocks?<\/title>\n<meta name=\"description\" content=\"Forget about PHP and lots of CSS coding, learn how to effectively create author box using GenerateBlocks plugin in 10 minutes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create Author Box Using GenerateBlocks?\" \/>\n<meta property=\"og:description\" content=\"Forget about PHP and lots of CSS coding, learn how to effectively create author box using GenerateBlocks plugin in 10 minutes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/\" \/>\n<meta property=\"og:site_name\" content=\"BloggingIdol\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/groups\/823816958094089\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/ankurpurecha\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-11T04:35:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-11T04:57:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ankur Purecha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@blogging_idol\" \/>\n<meta name=\"twitter:site\" content=\"@blogging_idol\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ankur Purecha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/\"},\"author\":{\"name\":\"Ankur Purecha\",\"@id\":\"https:\/\/bloggingidol.com\/#\/schema\/person\/94cb458020c3a605fd4818a6927beb1d\"},\"headline\":\"How To Create Author Box Using GenerateBlocks?\",\"datePublished\":\"2023-02-11T04:35:31+00:00\",\"dateModified\":\"2023-02-11T04:57:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/\"},\"wordCount\":1403,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/bloggingidol.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png\",\"articleSection\":[\"Wordpress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/\",\"name\":\"How To Create Author Box Using GenerateBlocks?\",\"isPartOf\":{\"@id\":\"https:\/\/bloggingidol.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png\",\"datePublished\":\"2023-02-11T04:35:31+00:00\",\"dateModified\":\"2023-02-11T04:57:23+00:00\",\"description\":\"Forget about PHP and lots of CSS coding, learn how to effectively create author box using GenerateBlocks plugin in 10 minutes.\",\"breadcrumb\":{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672759793608\"},{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760015436\"},{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760203910\"},{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760329389\"},{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760412814\"},{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760557557\"},{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760649677\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#primaryimage\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png\",\"width\":1024,\"height\":576,\"caption\":\"custom author box in generatepress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/bloggingidol.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wordpress\",\"item\":\"https:\/\/bloggingidol.com\/category\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Create Author Box Using GenerateBlocks?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bloggingidol.com\/#website\",\"url\":\"https:\/\/bloggingidol.com\/\",\"name\":\"BloggingIdol\",\"description\":\"Your Blogging Partner\",\"publisher\":{\"@id\":\"https:\/\/bloggingidol.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bloggingidol.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/bloggingidol.com\/#organization\",\"name\":\"BloggingIdol\",\"url\":\"https:\/\/bloggingidol.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/08\/bloggingidol.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/08\/bloggingidol.png\",\"width\":373,\"height\":38,\"caption\":\"BloggingIdol\"},\"image\":{\"@id\":\"https:\/\/bloggingidol.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/groups\/823816958094089\",\"https:\/\/x.com\/blogging_idol\",\"https:\/\/in.pinterest.com\/bloggingidol\/\",\"https:\/\/www.youtube.com\/channel\/UChYmhu7pDckJla59fZfCPkw\",\"https:\/\/www.youtube.com\/channel\/UC2xTwLO2-BzbayBaMqf-qsQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/bloggingidol.com\/#\/schema\/person\/94cb458020c3a605fd4818a6927beb1d\",\"name\":\"Ankur Purecha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7b9e319f636f4f024607ef10e677c6c3?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7b9e319f636f4f024607ef10e677c6c3?s=96&r=g\",\"caption\":\"Ankur Purecha\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/www.facebook.com\/ankurpurecha\/\"],\"url\":\"https:\/\/bloggingidol.com\/author\/unifire\/\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672759793608\",\"position\":1,\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672759793608\",\"name\":\"How do I add an author image in WordPress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"1. On you WordPress dashboard, go to users and click on profile<br\/>2. Go down to profile picture and add your author image<br\/>3. Click on update profile\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760015436\",\"position\":2,\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760015436\",\"name\":\"How to customize Generatepress Author box?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760203910\",\"position\":3,\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760203910\",\"name\":\"How to add an author box in GeneratePress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"You can add author box in GeneratePress by the following three ways;<br\/>1. Use an author box WordPress plugin<br\/>2. Create GeneratePress custom hook<br\/>3. Use GenerateBlocks to create author box in GeneratePress\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760329389\",\"position\":4,\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760329389\",\"name\":\"Can I create author info in GeneratePress sidebar using GenerateBlocks?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, for that you need to customize GeneratePress sidebar using GenerateBlocks.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760412814\",\"position\":5,\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760412814\",\"name\":\"How to create WordPress author profile?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760557557\",\"position\":6,\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760557557\",\"name\":\"How does GeneratePress pull author info and author avatar from WordPress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"After the theme got updated, you now get GeneratePress dynamic content and dynamic image to pull author info and author avatar directly from WordPress.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760649677\",\"position\":7,\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760649677\",\"name\":\"What should an author box consists of?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The author box should consists of author image, first name, last name, author description, and social links, if any. \",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"HowTo\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#howto-1\",\"name\":\"How To Create Author Box Using GenerateBlocks?\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#article\"},\"description\":\"To create an author box using GenerateBlocks you won't need more than 10 minutes. <br\/>GeneratePress premium version 2.0 or higher and free GenerateBlocks is sufficient.<br\/>\",\"totalTime\":\"P0DT0H10M\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1660985088079\",\"name\":\"Update WordPress Author Profile\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Make sure your WordPress author profile is up to date with First Name, Last Name, email address and at least 1 social profile.<br\/><br\/>The social profiles are handled by every SEO plugin like Yoast, RankMath, etc.<br\/><br\/>Also, verify that your profile picture is connected to Gravatar.<br\/><br\/>For verifying all of the above, go to <strong>WordPress Dashboard<\/strong>, hover on <strong>Users<\/strong> - <strong>All Users<\/strong>, and under you user profile, click on <strong>Edit<\/strong>.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-4fa6a1f4a9fa2ba73b733597e150e75c\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box.png\",\"width\":770,\"height\":484,\"caption\":\"updated author profile for author box using generateblocks\"}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661003236006\",\"name\":\"Create GeneratePress Block Elements\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"From your <strong>WordPress Dashboard<\/strong>, hover your mouse on <strong>Appearance<\/strong>, and click on <strong>Elements<\/strong>. When the GeneratePress Elements page opens up, add a <strong>New Element<\/strong> and select <strong>Block<\/strong> from the drop down list.<br\/><strong>Note:-<\/strong> GeneratePress block elements are super useful in creating author box, related posts, latest posts, etc.<br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-6b056a3005107824320e51143acf385c\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generatepress-block-element.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generatepress-block-element.png\",\"width\":660,\"height\":443}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661003504875\",\"name\":\"Customize The GeneratePress Block Element\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Give a name to your <strong>Element<\/strong>, adjust the entire <strong>element's width<\/strong>, select <strong>Element Type<\/strong> as <strong>Hook<\/strong>, select <strong>Hook Name<\/strong> as <strong>'after_content'<\/strong>, and give <strong>Priority<\/strong> of <strong>10<\/strong>.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-545336d92edaf1700b02aa7593b66222\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/customizing-generatepress-block-element-for-author-box.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/customizing-generatepress-block-element-for-author-box.png\",\"width\":314,\"height\":498}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661003976555\",\"name\":\"Add A GenerateBlocks Container Block\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"This container block will be the main block wrapping all other blocks that will be used in creating the author box.<br\/>I have already made the author box for my website. Therefore, use the image guides for spacing and other components.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-a3fc160bbf2e2b9db28b5786c555de64\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block.png\",\"width\":700,\"height\":934}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661004904434\",\"name\":\"Apply A GenrateBlocks Grid Block\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Create a Grid Block with <strong>2 containers<\/strong>. The first container will hold <strong>Author Avatar<\/strong> (image) and the second container will hold the <strong>Post Author Name<\/strong>. Set the first container size to 20% and second container size to 80%.\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661006203060\",\"name\":\"Add Dynamic Image To Hold Author Avatar\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"In the first container of the grid block, click on Add block and select <strong>Dynamic Image<\/strong>. Later choose <strong>Type<\/strong> as <strong>Author Avatar<\/strong>, set image size to <strong>95 pixels<\/strong> and enable <strong>rounded image<\/strong>.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-0e084a0c1e44bccd804b0fa9eeb2ed93\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/using-dynamic-image-block-to-select-author-avatar.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/using-dynamic-image-block-to-select-author-avatar.png\",\"width\":700,\"height\":485}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661006735277\",\"name\":\"Add GenerateBlocks Headline Block To Hold Post Author Name\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"In the next container, click within the container to add a Headline Block, click on <strong>Dynamic Options<\/strong> and select <strong>Dynamic Text Type<\/strong> as <strong>Post Author Name<\/strong>. Further set <strong>Dynamic Link Type<\/strong> as <strong>Author Archives<\/strong>.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-c377c20154d43cf5f348a8b0b5808fa4\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-adding-of-post-author-name-to-headline-block.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-adding-of-post-author-name-to-headline-block.png\",\"width\":700,\"height\":587}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661008157238\",\"name\":\"Add GeneratePress Dynamic Content Block To Pull Author Description\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"After you have successfully finished customizing both the containers of the Grid Block, in the meantime add another Container Block.<br\/><br\/><strong>Note:-<\/strong> <em>This Container Block is added under the main container, after the Grid Block.<\/em><br\/><br\/>Add a <strong>Container Block<\/strong> and within that container add <strong>GeneratePress Dynamic Content Block<\/strong>. From the <strong>Type<\/strong> drop down list, select <strong>Author Description<\/strong>. This will automatically pull author description from the WordPress Author Profile description field.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-b7813116751011df485a6930a4160d16\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-content-block-to-pull-author-description.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-content-block-to-pull-author-description.png\",\"width\":700,\"height\":555}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661009082877\",\"name\":\"Finally, Add Button Block For Author Social Icons\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Just like the previous step, in the same way add another <strong>Container Block<\/strong> to hold <strong>GenerateBlocks Buttons block<\/strong>.<br\/>Click on the main Button Block and align the entire block to the right-hand-side.<br\/>After that, click on the first button and select <strong>Dynamic Options<\/strong>. Under <strong>Dynamic Link Type<\/strong>, select <strong>Author Meta<\/strong> and under <strong>Meta Field Name<\/strong> type the field name. <br\/>Later, use an appropriate <em>social icon<\/em> from the <strong>Icon<\/strong> section.<br\/><br\/><strong>Note:-<\/strong> <em>The Meta Field Name should match with the social profile field name under WordPress User Profile.<br\/><\/em><br\/>I have a Facebook profile and wanted to link that under my Author Bio.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-877f374ac2601950f7f7246a39713cab\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/applying-author-meta-to-social-icon.png\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/applying-author-meta-to-social-icon.png\",\"width\":750,\"height\":328}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661012008263\",\"name\":\"Apply Display Location To Your GeneratePress Author Box Block Element\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"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.<br\/><br\/>Since, this is an author box, select location as <strong>Posts<\/strong>, followed by <strong>All Posts<\/strong>. The hook and all other blocks that we've used in creating this author box will automatically pull the author bio under each post.<br\/><br\/>In the end, click on <strong>Publish<\/strong>.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-df38c7d0fa94e59c70475cdaeb462667\",\"url\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/05\/generatepress-author-box-hook-display-rules.jpg\",\"contentUrl\":\"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/05\/generatepress-author-box-hook-display-rules.jpg\",\"width\":800,\"height\":362}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create Author Box Using GenerateBlocks?","description":"Forget about PHP and lots of CSS coding, learn how to effectively create author box using GenerateBlocks plugin in 10 minutes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/","og_locale":"en_US","og_type":"article","og_title":"How To Create Author Box Using GenerateBlocks?","og_description":"Forget about PHP and lots of CSS coding, learn how to effectively create author box using GenerateBlocks plugin in 10 minutes.","og_url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/","og_site_name":"BloggingIdol","article_publisher":"https:\/\/www.facebook.com\/groups\/823816958094089","article_author":"https:\/\/www.facebook.com\/ankurpurecha\/","article_published_time":"2023-02-11T04:35:31+00:00","article_modified_time":"2023-02-11T04:57:23+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png","type":"image\/png"}],"author":"Ankur Purecha","twitter_card":"summary_large_image","twitter_creator":"@blogging_idol","twitter_site":"@blogging_idol","twitter_misc":{"Written by":"Ankur Purecha","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#article","isPartOf":{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/"},"author":{"name":"Ankur Purecha","@id":"https:\/\/bloggingidol.com\/#\/schema\/person\/94cb458020c3a605fd4818a6927beb1d"},"headline":"How To Create Author Box Using GenerateBlocks?","datePublished":"2023-02-11T04:35:31+00:00","dateModified":"2023-02-11T04:57:23+00:00","mainEntityOfPage":{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/"},"wordCount":1403,"commentCount":3,"publisher":{"@id":"https:\/\/bloggingidol.com\/#organization"},"image":{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#primaryimage"},"thumbnailUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png","articleSection":["Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/","name":"How To Create Author Box Using GenerateBlocks?","isPartOf":{"@id":"https:\/\/bloggingidol.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#primaryimage"},"image":{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#primaryimage"},"thumbnailUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png","datePublished":"2023-02-11T04:35:31+00:00","dateModified":"2023-02-11T04:57:23+00:00","description":"Forget about PHP and lots of CSS coding, learn how to effectively create author box using GenerateBlocks plugin in 10 minutes.","breadcrumb":{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672759793608"},{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760015436"},{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760203910"},{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760329389"},{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760412814"},{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760557557"},{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760649677"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#primaryimage","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png","width":1024,"height":576,"caption":"custom author box in generatepress"},{"@type":"BreadcrumbList","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bloggingidol.com\/"},{"@type":"ListItem","position":2,"name":"Wordpress","item":"https:\/\/bloggingidol.com\/category\/wordpress\/"},{"@type":"ListItem","position":3,"name":"How To Create Author Box Using GenerateBlocks?"}]},{"@type":"WebSite","@id":"https:\/\/bloggingidol.com\/#website","url":"https:\/\/bloggingidol.com\/","name":"BloggingIdol","description":"Your Blogging Partner","publisher":{"@id":"https:\/\/bloggingidol.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bloggingidol.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/bloggingidol.com\/#organization","name":"BloggingIdol","url":"https:\/\/bloggingidol.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/#\/schema\/logo\/image\/","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/08\/bloggingidol.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/08\/bloggingidol.png","width":373,"height":38,"caption":"BloggingIdol"},"image":{"@id":"https:\/\/bloggingidol.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/groups\/823816958094089","https:\/\/x.com\/blogging_idol","https:\/\/in.pinterest.com\/bloggingidol\/","https:\/\/www.youtube.com\/channel\/UChYmhu7pDckJla59fZfCPkw","https:\/\/www.youtube.com\/channel\/UC2xTwLO2-BzbayBaMqf-qsQ"]},{"@type":"Person","@id":"https:\/\/bloggingidol.com\/#\/schema\/person\/94cb458020c3a605fd4818a6927beb1d","name":"Ankur Purecha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7b9e319f636f4f024607ef10e677c6c3?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7b9e319f636f4f024607ef10e677c6c3?s=96&r=g","caption":"Ankur Purecha"},"description":"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.","sameAs":["https:\/\/www.facebook.com\/ankurpurecha\/"],"url":"https:\/\/bloggingidol.com\/author\/unifire\/"},{"@type":"Question","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672759793608","position":1,"url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672759793608","name":"How do I add an author image in WordPress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"1. On you WordPress dashboard, go to users and click on profile<br\/>2. Go down to profile picture and add your author image<br\/>3. Click on update profile","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760015436","position":2,"url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760015436","name":"How to customize Generatepress Author box?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"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.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760203910","position":3,"url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760203910","name":"How to add an author box in GeneratePress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"You can add author box in GeneratePress by the following three ways;<br\/>1. Use an author box WordPress plugin<br\/>2. Create GeneratePress custom hook<br\/>3. Use GenerateBlocks to create author box in GeneratePress","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760329389","position":4,"url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760329389","name":"Can I create author info in GeneratePress sidebar using GenerateBlocks?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes, for that you need to customize GeneratePress sidebar using GenerateBlocks.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760412814","position":5,"url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760412814","name":"How to create WordPress author profile?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"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.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760557557","position":6,"url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760557557","name":"How does GeneratePress pull author info and author avatar from WordPress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"After the theme got updated, you now get GeneratePress dynamic content and dynamic image to pull author info and author avatar directly from WordPress.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760649677","position":7,"url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#faq-question-1672760649677","name":"What should an author box consists of?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The author box should consists of author image, first name, last name, author description, and social links, if any. ","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"HowTo","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#howto-1","name":"How To Create Author Box Using GenerateBlocks?","mainEntityOfPage":{"@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#article"},"description":"To create an author box using GenerateBlocks you won't need more than 10 minutes. <br\/>GeneratePress premium version 2.0 or higher and free GenerateBlocks is sufficient.<br\/>","totalTime":"P0DT0H10M","step":[{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1660985088079","name":"Update WordPress Author Profile","itemListElement":[{"@type":"HowToDirection","text":"Make sure your WordPress author profile is up to date with First Name, Last Name, email address and at least 1 social profile.<br\/><br\/>The social profiles are handled by every SEO plugin like Yoast, RankMath, etc.<br\/><br\/>Also, verify that your profile picture is connected to Gravatar.<br\/><br\/>For verifying all of the above, go to <strong>WordPress Dashboard<\/strong>, hover on <strong>Users<\/strong> - <strong>All Users<\/strong>, and under you user profile, click on <strong>Edit<\/strong>.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-4fa6a1f4a9fa2ba73b733597e150e75c","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/updated-user-profile-for-author-box.png","width":770,"height":484,"caption":"updated author profile for author box using generateblocks"}},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661003236006","name":"Create GeneratePress Block Elements","itemListElement":[{"@type":"HowToDirection","text":"From your <strong>WordPress Dashboard<\/strong>, hover your mouse on <strong>Appearance<\/strong>, and click on <strong>Elements<\/strong>. When the GeneratePress Elements page opens up, add a <strong>New Element<\/strong> and select <strong>Block<\/strong> from the drop down list.<br\/><strong>Note:-<\/strong> GeneratePress block elements are super useful in creating author box, related posts, latest posts, etc.<br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-6b056a3005107824320e51143acf385c","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generatepress-block-element.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generatepress-block-element.png","width":660,"height":443}},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661003504875","name":"Customize The GeneratePress Block Element","itemListElement":[{"@type":"HowToDirection","text":"Give a name to your <strong>Element<\/strong>, adjust the entire <strong>element's width<\/strong>, select <strong>Element Type<\/strong> as <strong>Hook<\/strong>, select <strong>Hook Name<\/strong> as <strong>'after_content'<\/strong>, and give <strong>Priority<\/strong> of <strong>10<\/strong>.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-545336d92edaf1700b02aa7593b66222","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/customizing-generatepress-block-element-for-author-box.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/customizing-generatepress-block-element-for-author-box.png","width":314,"height":498}},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661003976555","name":"Add A GenerateBlocks Container Block","itemListElement":[{"@type":"HowToDirection","text":"This container block will be the main block wrapping all other blocks that will be used in creating the author box.<br\/>I have already made the author box for my website. Therefore, use the image guides for spacing and other components.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-a3fc160bbf2e2b9db28b5786c555de64","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/author-box-container-block.png","width":700,"height":934}},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661004904434","name":"Apply A GenrateBlocks Grid Block","itemListElement":[{"@type":"HowToDirection","text":"Create a Grid Block with <strong>2 containers<\/strong>. The first container will hold <strong>Author Avatar<\/strong> (image) and the second container will hold the <strong>Post Author Name<\/strong>. Set the first container size to 20% and second container size to 80%."}]},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661006203060","name":"Add Dynamic Image To Hold Author Avatar","itemListElement":[{"@type":"HowToDirection","text":"In the first container of the grid block, click on Add block and select <strong>Dynamic Image<\/strong>. Later choose <strong>Type<\/strong> as <strong>Author Avatar<\/strong>, set image size to <strong>95 pixels<\/strong> and enable <strong>rounded image<\/strong>.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-0e084a0c1e44bccd804b0fa9eeb2ed93","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/using-dynamic-image-block-to-select-author-avatar.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/using-dynamic-image-block-to-select-author-avatar.png","width":700,"height":485}},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661006735277","name":"Add GenerateBlocks Headline Block To Hold Post Author Name","itemListElement":[{"@type":"HowToDirection","text":"In the next container, click within the container to add a Headline Block, click on <strong>Dynamic Options<\/strong> and select <strong>Dynamic Text Type<\/strong> as <strong>Post Author Name<\/strong>. Further set <strong>Dynamic Link Type<\/strong> as <strong>Author Archives<\/strong>.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-c377c20154d43cf5f348a8b0b5808fa4","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-adding-of-post-author-name-to-headline-block.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-adding-of-post-author-name-to-headline-block.png","width":700,"height":587}},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661008157238","name":"Add GeneratePress Dynamic Content Block To Pull Author Description","itemListElement":[{"@type":"HowToDirection","text":"After you have successfully finished customizing both the containers of the Grid Block, in the meantime add another Container Block.<br\/><br\/><strong>Note:-<\/strong> <em>This Container Block is added under the main container, after the Grid Block.<\/em><br\/><br\/>Add a <strong>Container Block<\/strong> and within that container add <strong>GeneratePress Dynamic Content Block<\/strong>. From the <strong>Type<\/strong> drop down list, select <strong>Author Description<\/strong>. This will automatically pull author description from the WordPress Author Profile description field.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-b7813116751011df485a6930a4160d16","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-content-block-to-pull-author-description.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/dynamic-content-block-to-pull-author-description.png","width":700,"height":555}},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661009082877","name":"Finally, Add Button Block For Author Social Icons","itemListElement":[{"@type":"HowToDirection","text":"Just like the previous step, in the same way add another <strong>Container Block<\/strong> to hold <strong>GenerateBlocks Buttons block<\/strong>.<br\/>Click on the main Button Block and align the entire block to the right-hand-side.<br\/>After that, click on the first button and select <strong>Dynamic Options<\/strong>. Under <strong>Dynamic Link Type<\/strong>, select <strong>Author Meta<\/strong> and under <strong>Meta Field Name<\/strong> type the field name. <br\/>Later, use an appropriate <em>social icon<\/em> from the <strong>Icon<\/strong> section.<br\/><br\/><strong>Note:-<\/strong> <em>The Meta Field Name should match with the social profile field name under WordPress User Profile.<br\/><\/em><br\/>I have a Facebook profile and wanted to link that under my Author Bio.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-877f374ac2601950f7f7246a39713cab","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/applying-author-meta-to-social-icon.png","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/applying-author-meta-to-social-icon.png","width":750,"height":328}},{"@type":"HowToStep","url":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#how-to-step-1661012008263","name":"Apply Display Location To Your GeneratePress Author Box Block Element","itemListElement":[{"@type":"HowToDirection","text":"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.<br\/><br\/>Since, this is an author box, select location as <strong>Posts<\/strong>, followed by <strong>All Posts<\/strong>. The hook and all other blocks that we've used in creating this author box will automatically pull the author bio under each post.<br\/><br\/>In the end, click on <strong>Publish<\/strong>.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggingidol.com\/how-to-create-author-box-using-generateblocks\/#schema-image-df38c7d0fa94e59c70475cdaeb462667","url":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/05\/generatepress-author-box-hook-display-rules.jpg","contentUrl":"https:\/\/bloggingidol.com\/wp-content\/uploads\/2021\/05\/generatepress-author-box-hook-display-rules.jpg","width":800,"height":362}}],"inLanguage":"en-US"}]}},"uagb_featured_image_src":{"full":["https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png",1024,576,false],"thumbnail":["https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box-150x150.png",150,150,true],"medium":["https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box-300x169.png",300,169,true],"medium_large":["https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box-768x432.png",768,432,true],"large":["https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png",1024,576,false],"1536x1536":["https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png",1024,576,false],"2048x2048":["https:\/\/bloggingidol.com\/wp-content\/uploads\/2022\/08\/generateblocks-author-box.png",1024,576,false]},"uagb_author_info":{"display_name":"Ankur Purecha","author_link":"https:\/\/bloggingidol.com\/author\/unifire\/"},"uagb_comment_info":3,"uagb_excerpt":"In this GenerateBlocks tutorial, you will learn how to create an author box using GenerateBlocks. You won\u2019t ... Read more","_links":{"self":[{"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/posts\/9445"}],"collection":[{"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/comments?post=9445"}],"version-history":[{"count":0,"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/posts\/9445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/media\/9610"}],"wp:attachment":[{"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/media?parent=9445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/categories?post=9445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bloggingidol.com\/wp-json\/wp\/v2\/tags?post=9445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}