- This topic has 23 replies, 2 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
January 20, 2020 at 4:30 am #1137725DavidStaffCustomer Support
You could use this PHP instead to display static HTML:
add_shortcode( 'db_author_box', 'db_author_box_shortcode' ); function db_author_box_shortcode() { ob_start(); ?> <div class="author-box"> <div class="avatar"><img src="ADD_FULL_URL_TO_IMAGE" /></div> <h5 class="author-title">ADD YOUR AUTHOR NAME</h5> <div class="author-summary"> <p class="author-description">ADD YOUR AUTHOR DESCRIPTION</p> <a href="ADD_FULL_URL_TO_AUTHOR_PAGE" class="button author-link" title="Read more">Read More</a> </div> </div> <?php return ob_get_clean(); } ?>
Update the the CONTENT and URLS for your needs, this includes image link from media library and link to author page. Then you can add the Shortcode to any widget area for it to be displayed.
The current CSS will still work. Make sure to remove the OLD PHP first.
January 20, 2020 at 5:54 am #1137777newmedianewpeople.com*ADD PHP*
<?php echo get_avatar( get_the_author_meta( ‘ID’ ));?><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><p class=”author-description”><?php echo wp_kses( get_the_author_meta( ‘description’ ), null ); ?></p>*ADD CSS*
.author-box {
text-align: center;
padding: 0 20px 20px;
margin-bottom: 20px;
background-color: #f6f5f3;
margin-top: 70px;
}.author-box .avatar {
position: relative;
top: -20px;
margin-bottom: -20px;
}.author-box .avatar img {
width: 80px;
border-radius: 50px;
vertical-align: middle;}
.author-box .author-title {
font-size: 18px;
font-weight: bold;
margin-top: 0.5em;
margin-bottom: 0;
}.author-box .author-summary,
a.author-link {
font-size: 13px;
}.author-summary a.author-link {
padding: 6px 12px;
border-radius: 24px;
text-transform: uppercase;
}January 20, 2020 at 5:58 am #1137785DavidStaffCustomer SupportThat looks good ๐ That work for you?
January 21, 2020 at 2:16 am #1138766newmedianewpeople.comsorry for the late reply ๐
that code works very well for me.
What did you send me “insert it” using the plugin (https://it.wordpress.org/plugins/code-snippets/)?
January 21, 2020 at 3:26 am #1138844DavidStaffCustomer SupportGlad to hear that.
Code Snippets can be used for adding PHP functions if you’re not using a Child Theme. Doesn’t look like you needed it.
January 21, 2020 at 3:38 am #1138858newmedianewpeople.comthank you David
January 21, 2020 at 3:46 am #1138880DavidStaffCustomer SupportYou’re welcome
February 1, 2021 at 9:06 am #1641830JanoschDear David,
please allow a short question on your code snippet.
The “read more” button doesn’t quite fit the design of my page. What can I do to link the name or author picture to the respective author pages?
Thanks in advance!
JanFebruary 1, 2021 at 10:19 am #1641923DavidStaffCustomer SupportHi there,
you can replace the HTML within the Shortcode with something like this:
<div class="author-box"> <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div> <p class="author-title"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php printf( esc_attr( '%s', 'the author'), get_the_author_meta('display_name') );?></a></p> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p> </div>
This will automatically output the author meta automatically and with the link to the author archive ( attached to author name ).
-
AuthorPosts
- You must be logged in to reply to this topic.