How to Add an Author Box in GeneratePress

GeneratePress is a popular free lightweight WordPress theme designed for speed. This theme is available for free at WordPress repository and offers a wide range of features and can extend the functionality by purchasing a plugin called GP Premium.

Also read: Redirect non-www to www using .htaccess

One of the most important features in GP Premium is using Hook Elements to “hook” your own custom code into various areas of the theme without changing core theme files.

In this article, we are sharing the steps involved in adding an awesome author box after blog posts in GeneratePress theme using Hooks.

How to add Author Box in GeneratePress

It’s very common also important to have an author box for every website especially websites that sharing guides and tutorials. It helps readers to learn more about the person behind each awesome article’s.

1. Create Hook Element

The author box we create will pull the Gravatar image associated with the author of your site (most cases it’s you). Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog.

To create a new Hook element you need to enable the Elements module in Appearance > GeneratePress

Go to AppearanceElements, then Add New. Select Hook from the dropdown list.

add hook generatepress
<div class="author-box-container">
    <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ));?></div>
    <div class="tb-meta">
        <div class="tb-author-head">
            <div class="author-head">
                <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
                    <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span></h5>
                <div class="tb-author-position">Founder</div>
            </div>
            <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">All posts</a>
        </div>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
            <div class="author-links">
                <div class="tb-author-page-contact">
                    <a href="#" target="_top" class="tb-contact-icon cb-tip-bot">
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="#" target="_top" class="tb-contact-icon cb-tip-bot">
                    <i class="fa fa-google-plus"></i>
                    </a>
                    <a href="#" target="_blank" class="tb-contact-icon cb-tip-bot">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a href="#" target="_blank" class="tb-contact-icon cb-tip-bot">
                        <i class="fa fa-link"></i>
                    </a>
                    <a href="#" class="tb-contact-icon cb-tip-bot">
                        <i class="fa fa-envelope-o"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Give the Hook Element an appropriate name, such as “Author Box”.

In the Settings box, choose after_content as the Hook, tick the Execute PHP box and select 20 as the Priority:

add hooks in generatepress wordpress

In the Display Rules box, select Post and All Posts as the location:

That’s it, you’ve created an author box Hook Element.

Now hit the publish button but before seeing your Author box we need to add some CSS code to make our box look pretty.


2: Add CSS Code

You can add CSS to your GeneratePress using Theme’s customizer or using any third-party plugin like Simple CSS Plugin. The easiest method is using Theme’s Customizer under Appearance > Customize > Additional CSS.

Enter the following CSS code and hit save:

.author-box-container {
margin-top: 60px;
font-size: 0.8em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #f2f2f2;
padding: 60px 30px;
}

.tb-meta {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}

.author-links a {
font-size: 1.1rem;
line-height: 0.5em;
}

.author-links, .tb-author-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.tb-author-head {
justify-content: space-between;
-webkit-align-items: center; /* Safari 7.0+ */
align-items: center;
}

.tb-author-head a {
background: #323232;
color: #ffffff;
padding: 5px 8px;
border-radius: 3px;
box-shadow: 0px 1px 10px 1px #bebebe;
}

.tb-author-head a:hover {
background: #282828;
box-shadow: 0px 1px 5px 1px #bebebe;
}

@media(max-width:767px) {
.author-box-container {
padding: 30px;
}
.author-box-container,.tb-author-head {
flex-flow:column;
align-items: center;
}
.author-head {
text-align:center;
}
.author-box-container .avatar {
margin-bottom: 10px;
}
.tb-author-position {
margin-bottom:6px;
}
.author-description {
text-align:center;
}
.author-links a:last-child {
margin-right: 0;
}
.author-links {
align-items:center;
justify-content:center;
}
}

.author-box-container .avatar {
display:block;
border-radius: 100%;
}

@media(min-width:769px) {
.author-box-container .avatar {
margin-right: 20px;
}
}

h5.author-title {
margin-bottom: 0;
font-size: 20px;
font-weight: 600;
}

.tb-author-position {
letter-spacing: 2px;
font-size: 12px;
line-height: 1.5;
text-transform: uppercase;
color: dimgray;
}

.author-description {
margin-top:1rem;
font-size:16px;
}

.tb-contact-icon {
color: #161616;
}

Save & Publish

Now you have the Markup and CSS for your Author Box and is ready for you to view. Navigate to a blog post on your website and see what your new author box looks like. This style is from my needs and you are free to change the look and feel of Author Box to your own.

Follow TechBiriyani on FacebookTwitter to get all the latest updates.

source : blogpioneer

Founder
View posts

A passionate blogger and a tech enthusiast who is always keen and awaiting to know about fully fledged new technologies who's currently using Zenfone 3 as a part of daily routine. You can spot me @ #facebook, #twitter & #Google +

Leave a Comment