We're merging with GenerateBlocks! Learn more here.

[Resolved] Adding & styling linkedin icon

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Adding & styling linkedin icon

Tagged: 

  • This topic has 9 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #22849
    P
    Participant

    Hi 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,
    Paulo

    #22870
    elvin
    Moderator

    Hi,

    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/

    #22885
    P
    Participant

    Hi 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.

    #22929
    elvin
    Moderator

    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 🙂

    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>'
    }
    #23098
    P
    Participant

    Hi 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!

    #23141
    elvin
    Moderator

    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!

    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.

    #23439
    P
    Participant

    Hi 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,
    Paulo

    #23538
    Tom
    Keymaster

    Hi 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 🙂

    #23621
    P
    Participant

    Hi 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,
    Paulo

    #23662
    Tom
    Keymaster

    No problem!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.