Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Support request] 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: 

Viewing 4 posts - 1 through 4 (of 4 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
    Participant

    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
    Participant

    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>'
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.