Home › Forums › Pro Support › Adding & styling linkedin icon
Tagged: linkedin
- This topic has 9 replies, 3 voices, and was last updated 3 years ago by
Tom.
-
AuthorPosts
-
November 19, 2020 at 9:28 am #22849
P
ParticipantHi there,
I’ve checked through some related posts but i still need some support. Feel free to direct me to a previous thread in case i’ve missed it :).
I’m using Generate Press as a theme ((paid license, Blog add-on activated) with your WPSP plugin (pro version) to filter and show posts from a certain category (network members) in a new page. It’s a simple grid (no cards style, no carousel), each entry showing the featured image, title, small excerpt and read more button.
I also want to present a Linkedin button/link for each of the members, if they have it. The current social sharing buttons do not include this option. I’ve read some of the previous support tickets, which helped partly. My 2 questions are:
1 – Since i want to display the linkedin button via WP Show Posts, what would be the best way to include it in the post? Via an ACF, or some other option?
2 – Depending on the point above, how should i call it? And should i style it via “Customize > Additional CSS” or do you recommended another option?Thank you in advance for your assistance and Best regards,
PauloNovember 19, 2020 at 9:23 pm #22870elvin
ModeratorHi,
1 – Since i want to display the linkedin button via WP Show Posts, what would be the best way to include it in the post? Via an ACF, or some other option?
You can use ACF.
Here’s a sample PHP code:
add_filter( 'after_setup_theme', function(){ remove_action( 'wpsp_after_content', 'wpsp_add_social_sharing', 10 ); add_action( 'wpsp_after_content', function(){ // do your thing here example: do_shortcode('[social_icon_widget_plugin_shortcode"]'); or echo get_field('sample_custom_acf_field'); }, 10 ); });
What this does is, it removes the default function that displays the shortcode and replaces it w/ a function that lets you display whatever you want.
You can either display a shortcode or display ACF fields here.
2 – Depending on the point above, how should i call it? And should i style it via “Customize > Additional CSS” or do you recommended another option?
Once you have a working markup, here’s how you add CSS – https://docs.generatepress.com/article/adding-css/
November 20, 2020 at 4:13 am #22885P
ParticipantHi Elvin,
Thank you for your reply.
I tried your instructions (see below). Before that, i also thought of a couple of possible alternatives. Maybe you have some thoughts on it?
– I thought of using the “Lightweight social icons” plugin from Tom, thinking it would be simple. However, i could not get it to show in the WPSP view so i dropped it.
– After looking at the plugin code, i also thought of simply extending the ” Show social sharing buttons” options by replicating and adapting the existing structure in the code. However, this would be lost with the next upgrade so i also dropped it 🙁Following your instructions, I’ve started by using the ACF plugin to create an extra field called “linkedin__profile” (Type “Link”), to be used and displayed only in Posts of a certain category. The plugin also allows to assign a css class, which is handy.
Since i’m using a child theme, I’ve added the php snippet above into the functions.php file, adapted as such:add_filter( ‘after_setup_theme’, function(){
remove_action( ‘wpsp_after_content’, ‘wpsp_add_social_sharing’, 10 );
add_action( ‘wpsp_after_content’, function(){echo get_field(‘linkedin__profile’);
}, 10 );
});However, i’m still not managing to display it correctly in the WPSP view (or in the single post itself, but that’s another thing). It either shows “Array” or the url as plain text. I’ve seen this mentioned in this thread Custom fields, so i’m checking that more carefully since i’m not very experienced in this part 🙂
That’s is all for now. Thank you for your time and help,
Paulo
I’ll add the css through the “Customize > Additional CSS” path.November 22, 2020 at 12:14 pm #22929elvin
ModeratorHowever, i’m still not managing to display it correctly in the WPSP view (or in the single post itself, but that’s another thing). It either shows “Array” or the url as plain text. I’ve seen this mentioned in this thread Custom fields, so i’m checking that more carefully since i’m not very experienced in this part 🙂
If you’re able to get the URL then you’re pretty close. You just need to iterate them into its proper anchor href.
Example:
foreach ($array_item as $socmed_name => $socmed_link) { echo '<a href='.$socmed_link.'>'. $socmed_name.'</a>' }
And of course you can be more elaborate by adding more markup and conditions within the foreach loop.
Example:
foreach ($array_item as $socmed_name => $socmed_link) { if($socmed_name = 'LinkedIn'){} echo '<a href='.$socmed_link.'><span class="socmed-icon linkedin">[your svg or png icon here]</span></a>' }
November 26, 2020 at 9:06 am #23098P
ParticipantHi Elvin,
Thank you for your previous suggestion. I ended up implementing the code below in the functions.php file:
/* Add linkedin button in WPSP listing*/
add_action( ‘wpsp_after_content’, function( $settings ) {
if ( 10 === $settings[‘list_id’] ) {
$meta = get_post_meta( get_the_ID(), ‘linkedin_profile’, true );
if ( $meta ) {
echo ‘<span><span class=”screen-reader-text”>%4$s</span></span>‘;
}
}
} );I tried to use the fonts loaded with WPSP Pro, hoping i could load the linkedin icon, but i could not make it work. As such, i installed the FontAwesome plugin to get that icon, and ended up using the “fa” classes plus a custom “linkedin-button” for the styling. It’s maybe a bit overkill for just one icon 🙂
I have one additional question, if i may: how can i load the same icon in the individual post entries? If it’s out of scope for this forum, just let me know!
Thank you once again and best regards!November 26, 2020 at 8:30 pm #23141elvin
ModeratorI have one additional question, if i may: how can i load the same icon in the individual post entries? If it’s out of scope for this forum, just let me know!
Thank you once again and best regards!I’m not exactly sure I understand the question. Can you provide more context? What particularly are you trying to achieve?
wpsp_after_content
affects what happens on list’s loop meaning, say you add a linkedin icon in this hook, it will appear on each post entry on a WPSP list.November 30, 2020 at 9:39 am #23439P
ParticipantHi Elvin,
I’ll rephrase the last question: how can i load the same custom meta “linkedin-profile”, created via ACF for all posts of a specific category, and make it show in the individual post entries?
I’ve tried re-using the above code, by adjusting the if clause to look for posts matching the desired category, but i can’t produce the correct code…Thanks in advance,
PauloDecember 1, 2020 at 10:56 am #23538Tom
KeymasterHi there,
You would need to use a hook specific to your theme in that case. For example, if you’re using GeneratePress, you could use
generate_after_content
.Hope this helps 🙂
December 2, 2020 at 5:21 am #23621P
ParticipantHi Tom,
Thanks. I’ll follow that path since i’m using GeneratePress Pro on this particular website.
We can close this ticket.Thank you to you and Elvin,
PauloDecember 2, 2020 at 12:35 pm #23662Tom
KeymasterNo problem!
-
AuthorPosts
- You must be logged in to reply to this topic.