[Robert MParticipant]

Does the X theme offer the ability to add a follow widget similar to the follow icons on the header/footer? I’d prefer not to install another plugin to do this if I don’t have to

[ChristianModerator]

Hey Robert,

Please add the code below in a Text Widget.

[container style="font-size: 20px"]<a href="#">[icon type="facebook-square"]</a> | <a href="#">[icon type="twitter-square"]</a> [/container]

Replace the # with your social URL and icon type with an icon listed at http://theme.co/x/demo/integrity/1/shortcodes/icons/

Hope that helps. 🙂

[Robert MParticipant]

What if I wanted to use my own icons I uploaded and have it so the clickable icon is to the right and the clickable text name of the social media icon is to the right of it (both open new windows too). With each social media site on its own line?

[ChristopherModerator]

Hi there,

Please try this code :

[container style="font-size: 20px"]<a href="#" target="_balnk">Facebook<img src="put icon path here"></a> | <a href="#" target="_balnk">Twitter<img src="put icon path here"></a></a> [/container]

Hope it helps.

[Robert MParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

Thanks for clearing it to us.

Would you mind sharing us your admin credentials so we could take a closer look on your setup.

Thanks. Don’t forget to set it as private reply.

[Robert MParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Please try to use this instead;

[container style="font-size: 20px"]<a href="http://facebook.com/your-profile" target="_blank"><img src="put icon path here"> Facebook</a> <a href="http://twitter.com/your-profile" target="_blank"><img src="put icon path here"> Twitter</a> [/container]

Please let us know if this works out for you.

[Robert MParticipant]

Didn’t work it looks like this:

Would like a mouseover effect on the icon, it to open in a new tab, and be nofollow.

[Prasant RaiModerator]

Hello Robert,

Thanks for writing in!

In-order to better assist we request you to share the URL of the page where you are trying to add the social icons? We are unable to locate the above social icons on your website.

Thanks.

[Robert MParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Sorry if that didn’t worked out for you. That is already a customization we have tried. There is one thing we’d like you to try but this one needs you to have a child theme installed because to accomplish this requires a template customization. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once your child theme is set up, please insert this code below into your child theme’s functions.php

// Add a custom social icons shortcode
// =============================================================================
function add_social_icons_shortcode(){
  add_shortcode( 'social_icons', 'x_social_global' );
}
add_action( 'init', 'add_social_icons_shortcode');
// =============================================================================

With the code above, we just make the social icons you found in the header or footer into a shortcode. You can use [social_icons] and place it everywhere in your post, page or even in the widget area.

Please let us know if this works out for you.

[awaidellParticipant]

I’ve used this shortcode and it works great in the footer widger. But I’m having an issue making them look like the footer social links (with the circles) even though I’ve added the css:

.x-colophon.top .x-social-global a {display: inline-block;text-align: center;color: #fff;background-color: rgba(255,255,255,0.2);border-radius: 100em;}

[awaidellParticipant]

And in a footer text widget the [social_icons] is placing the code above the widget title, is there a way to have them appear below?

[FriechModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[Author]

Posts