Hey there! Some links on this page are affiliate links which means that, if you choose to make a purchase, I may earn a small commission at no extra cost to you. I greatly appreciate your support!

GeneratePress Child Theme Lightweight WordPress Theme

GeneratePress Child Theme

A child theme can likewise be utilized to add custom CSS and PHP in the style.css and functions.php records. These two documents are the lone child topic records that ought to be vacant of course (don’t duplicate the parent documents). Notwithstanding, if all you’ll do is adding CSS or PHP, a child theme likely isn’t required.

When utilizing a kid subject, GeneratePress will consequently en queue the important style.css documents. You don’t have to enqueue the parent or kid subject CSS documents in your functions.php record.

There are some normal issues that individuals run into while making a youngster topic which you can find out about here.

GeneratePress is a perfect lightweight and fastest WordPress theme. GeneratePress Child theme is also available to download.

You can download the Generatepress child theme by following this link.

The theme is made for some advanced-level customization for those who want to add some extra functionality to their WordPress theme.

If you’d like to download a completely blank starter child theme, click here.

To install the child theme, save it as a .zip file to your computer.

Will I Lose my changes After installing a child theme?

No You would not lose your changes if you are using theme options in the Customizer.

How To Install GeneratePress Child Theme

To install the child theme, save it as a .zip file to your computer.

Then go to Appearance > Themes > Add New > Upload and upload the .zip file.

Avoid loading style.css of the child theme

add_action( 'wp_enqueue_scripts', function() { wp_dequeue_style( 'generate-child' ); }, 50 );

Creating an Author Box in GeneratePress

Create Author Box in GeneratePress using Elements and HTML, CSS.

The main reason you need an Author Box is on your website is due to E-A-T signals. It Stands for  Expertise, Authoritativeness, and Trustworthiness

Today I will show you how to create a simple author box in GeneratePress using HTML CSS.

The tutorial is only for GeneratePress premium theme users but sometimes it works for all theme users.

First, update to the latest GeneratePress version if you haven’t already, and then.

Since Author Bio is certainly not a positioning element however including a memoir the presents page assists Google with deciding the mastery of the essayist and why the Author ought to be trusted.

So by including Author Bio your site assists with expanding Google’s Search Quality Guidelines signals. Consequently, you need to include it GeneratePress Theme also utilizing a module strategy or without a module technique.

Likewise, read more about E-A-T and Quality Raters’ Guidelines clarified in Whiteboard Friday by Marie Haynes on the Moz site.

Besides, the Author Bio assists perusers with thinking about the individual behind the substance/site. It assists with expanding the validity of your blog since having bio make your website credible.

Creating Author Box With Plugin

1. Fancier Author Box

It’s a great and well-coded plugin by ThematoSoup If you want to add an author box in every single post than use this Author Box Plugin.
This plugin has more than 10000 Active installations. Average Rating of 4.8.
It has not been updated over the last 5 years. So be aware of compatibility issues.

2. Simple Author Box

The plugin is very simple to integrate you just need to set your bio and Gravatar. After setting up your biographical info go to Plugins>Add New>Simple Author Box>Install>Activate.
As suggested in the name it is very easy to set up.
Also, you can add up to 30 social media profiles on your Author Bio Box.

3. Starbox – the Author Box for Humans

While GeneratePress Premium customers are getting some information about Author Box, the client assistance group suggests the Starbox Author module. In this way, you can attempt the Starbox module in GeneratePress Theme.

Starbox module upholds Google Microformats vCard, customization of the creator information for each Author, Social Media Profiles interface for each Author, utilize your own Avatar than utilizing Gravatar, and so on

Moreover, If you need to keep away from the utilization of the above-recorded modules then you need to enact the Element Module to utilize Hook. In any case, the Element module is just accessible on the Premium form. In this way, to get the creator box without module follows the underneath strategy.

Prior to Adding Author Box in WordPress

Before the creator bio shows up in the WordPress site, you need to think about Gravatar and Biographical Info.

How to Enable Gravatar in WordPress?

  • Go to your WordPress Dashboard.
  • Visit the Users Menu.
  • Alter your User Profile.
  • Go to About Yourself area > Profile Picture.
  • Presently Click on You can change your profile picture on Gravatar.
  • You will be diverted to the Gravatar site.
  • Sign in/Signup utilizing WordPress.com qualifications.
  • Approve your WordPress account with Gravatar.
  • Presently go to Add a New Image area.
  • Transfer your image.
  • Rate your Gravatar between G, PG, R, and X.
  • You’re finished with the Gravatar profile.
  • Return to the About Yourself Section and you will actually want to See your Profile Picture.
Custom html css author box
Author box description in GeneratePress

The profile picture shows up while remarking on WordPress destinations, Author Bio, WordPress discussion. This one picture works for every one of your profiles.

Personal Info

Subsequent to chipping away at Gravatar in the About Yourself segment, you need to compose the Author Bio. It will show up on your site alongside your profile picture. You can likewise connect up your Social Media Profile utilizing Anchor Tag in the Biography Section.

Gravatar

Gravatar is a Globally Recognized Avatar. It is a piece of WordPress that is kept up and upheld via Automattic.

Utilizing the Gravatar site you can make your profile simply by joining and transferring the photographs. Furthermore, Gravatar can be empowered in any WordPress site naturally.

To begin with, you need to make a record on the Gravatar site to finish your profile.

  • Go to your Dashboard > Appearance > GeneratePress.
  • Activate the Elements Module.
  • Now go to Appearance > Elements.
  • Click on Add New Element and Choose Element Type as Block.
GeneratePress Block Element

Now, you can use Block Elements with Gutenberg. Let’s explore Block Element Settings.

Copy and paste these HTML code to HTML element box in GeneratePress. 

Code I

<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="author-info">
        <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="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<div class="author-links">
            <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
       </div>
    </div>
</div>

CODE II

<div class="author-box">
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
	
	<div class="author-summary">
	
        <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
 
        <div class="author-links">
 
        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
 
        </div>
 
    </div>
 
</div>
display rules in GP Hook elements

Again, Go to Display Rules and Choose the Location to display in Post > All Posts.

All post hook in generatepress

CODE I

.author-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4%;
    margin-top: 30px;
    font-size: 1em;
    box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

.author-box .avatar {
    width: 30px;
    border-radius: 100%;
    margin-right: 20px;
}

.author-title {
   font-weight: 700;
}

h4.author-title {
    margin-bottom: 0.5em;
}

.author-description {
	margin-bottom: 10px;
}

/* For Mobile Devices */
@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        text-align: center;
	padding: 50px 10px;
    }

    .author-box .avatar {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
	margin-top: -35px;
    }

    .author-box .avatar img {
        max-width: 70px;
    }
}

CODE II

.author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 30px;
	font-size: 0.9em;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
        box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.author-box .avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
}
.author-description {
	line-height: 1.6em
}
.author-links a {
	margin-top: -1.5em;
	font-size: 2em;
	line-height: 2em;
	float: left;
}
@media (max-width: 768px) {
	.author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		flex-direction: column;
		text-align: center;
	}
	.author-box .avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -25px;
	}
	.author-box .avatar img {
		max-width: 100px;
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}

Go to Appearance>Customize>Additional CSS:

Syed Saadullah

I am Saad. I run this blog and work for Syntax Software House. I build Super fast WordPress sites. Do you have a question in mind?connect with me at Twitter

Leave a Comment