Archived topic
How to add social media links in/below author profile hook.
5 replies · Started by sreekanth on July 28, 2021
hey, I want to add my personal social media links like Facebook, Youtube, Pinterest, Quora, and Instagram handles inside the author profile. Also, each author can have set their own social media links.
On my site, I had created the author profile using the hooks. I read some docs related to this same query but I'm unable to execute because I don't understand codings like adding HTML and CSS codes. can you guys guide/help me step by step adding them to my site?
Present author codes:
<div class="author-box">
<div class="avatar" style="height:100px;width:100px;">
<?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>
<hr>
<!-- <div class="author-links">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">
...
</a>
</div> -->
</div>
</div>what kind of tweaks should I need to do now?
Hi there,
The simple way of doing it is by using a social media plugin to generate the element for you.
You then get its shortcode or provided HTML and add it below the code you have on your hook element. :D
As for what social media plugins, you can try these:
https://wordpress.org/plugins/simple-social-icons/
https://wordpress.org/plugins/social-icons-widget-by-wpzoom/
https://generatepress.com/lightweight-social-icons/
And keep what you find best for you. :D
did you read my query properly? I want to add it inside the author box.
did you read my query properly? I want to add it inside the author box.
You place can the shortcode from the plugin wherever you want inside your code. (make sure "Execute Shortcode" is checked on the hook element for it to run)
You can add it around the bottom side of your code right before the last </div> so it's inside the author box.
How do I find the shortcode of the plugins you mentioned, I'm unable to find shortcodes of the plugins.
If it's from WPZoom, here's their recommendation.
https://wordpress.org/plugins/social-icons-widget-by-wpzoom/#can%20i%20insert%20the%20widget%20as%20a%20shortcode%20in%20a%20page%3F
I'm not exactly sure if simple social icons is in active development anymore to be sure if their shortcode works(or if it exists).
There's another approach to this if you wish to not use any third party plugin:
You can actually create your own custom hook within the code you're using with <?php do_action('your_hook_name_here'); ?>
You can create your social icon layout using GenerateBlocks' Headline or button block placed inside a Block Element and then hook the Block element you've created to the custom hook you've placed using do_action().
Example:
<div class="author-box">
<div class="avatar" style="height:100px;width:100px;">
<?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>
<?php do_action('author_social_icons_hook'); ?>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<hr>
<!-- <div class="author-links">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">
...
</a>
</div> -->
</div>
</div>Which added author_social_icons_hook using <?php do_action('author_social_icons_hook'); ?>.
And then use that hook for the Block Element as shown here - https://share.getcloudapp.com/d5u6YEgJ
