how to add Author Image With Author Name In WordPress Without Plugin

This tutorial on “how to add Author Image With Author Name In WordPress Without Plugin” is one of the most awaited and requested tutorials on our website. If you’re using a theme like Generatepress or Astra that allows you to customize your own hooks, then you’re good to go. If not, you can modify the function.php file or, for a better and smoother process, install plugins to add PHP snippets.

Now, let’s start creating a custom authoring section.

Create a hook

To create a custom hook, go to WordPress Dashboard > Appearance > Objects.

Click “Add new item” at the top and select item type like “hook“.

Name your hook as “Top Category Author” or something similar to help you navigate through all of your custom hooks.

Paste the following code snippet into the box.

<div class="author-box-top-indgeek">
	<div class="prt-1">
    <span class="insights-avatar-top">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </span>
<span class="author-links-top">
							<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="More about the author"><span class="author-title-top" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span class="author-name-top" itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </span></a>            
       </span>
	</div>
	<div class="prt-2">
			<div class="pub-date-top">
			 • Updated <?php echo get_the_date( get_option('date_format') ); ?>
	</div>				
	</div>
</div>

In addition to entering the code, it is also necessary to change some settings.

Select the status hook as “Generate_after_entry_title“, so that the author section appears immediately the title of the blog posts entry.

Check the PHP speed options and set the priority number if you have configured multiple hooks.

In the “Display Rules” tab, select areas such as “Messages” and “All Messages“.

Work on the Hook

Let’s take a look at the main functions used in this code snippet to give you an idea of ​​this code.

The get_avatar() function returns the author image of these posts.

Then the function get_author_posts_url() returns the author profile link.

The get_the_date() function returns the publication date of the article.

All the services discussed are WordPress based services and get different arguments depending on the service.

After making all the changes, click publish to apply the hook.

The process of adding an author image and author name in WordPress still requires some configuration.

how to add Author’s photo

Once the custom program is installed, it is still necessary to add a cascading style sheet to complete the author image section.

In the thumbnail there is an icon displayed with the author’s name, we cover this in another tutorial.

To add CSS, go to your WordPress dashboard again > Appearance > Customize.

In the configuration section, open the “Additional CSS” option at the bottom of the navigation menu bar.

Paste the following CSS code that will apply to the part of the hook we created earlier.

.author-box-top .insights-avatar-top img{
	width: 30px;
	height: auto;
	border-radius: 50%;
	margin-right: 12px;
}
.author-box-top{
	font-size:14px;
	font-family: poppins, mont, montserrat, verdana, helvetica, roboto, sans-serif;
}
.author-box-top{
	display:flex;
	flex-direction:row;
	padding-top:8px;
}

.pub-date-top{
		font-size:14px;
		margin-right: 15px;
		color:#060e2b;
}
.entry-meta{
	display:none;
}


.author-name{
	display:none;
}
.author-name-top{
	color:#0a1332;
}
.author-name-top:after {
    content: url(https://indgeek.com/wp-content/uploads/2022/02/best-verified-icon.svg);
		zoom:55%;
		margin: 0 12px;
}
@media screen and (max-width:530px){
	.author-box-top{
		display:flex;
		flex-direction:column;
	}
	.prt-1{
		display:flex;
		flex-direction:row;
	}
}

@media screen and (min-width:530px){
	.author-name-top{
		position: relative;
	top:-10px;
	}
}

Everything is ready and you are good to go.

Now your website has an author image section with the author name.

Conclusion

I hope this article on “how to add Author Image and Author Name in WordPress without plugin” is useful for you.