shortcodes in widgets and mobile social media

[realityhouse]

Hi Jason

I have two queries for you.

1. Can you use shortcodes in widgets? I am trying to put a button in a widget but it’s not displaying and just shows the HTML…
2. My social media icons are not displaying correctly on mobile. They are in the correct position etc but the actual image is all stretched. Can you help?

I will send you the test site privately.
Thanks, Chrissie

Topic

[Jason Bobich]

Hello Chrissie,

1. Can you use shortcodes in widgets? I am trying to put a button in a widget but it’s not displaying and just shows the HTML…

WordPress doesn’t natively support shortcodes in widgets. It is possible to add this functionality though through your Child theme’s functions.php, however that would be a customization you’d need to make to the theme.

http://digwp.com/2010/03/shortcodes-in-widgets/

You can do this via plugins like this one, as well.

http://wordpress.org/extend/plugins/shortcodes-in-sidebar-widgets/

Keep in mind that shortcodes are not styled for widgets and sidebars. So it’s possible that not all of the theme’s shortcodes will look right when placed in a widget.

2. My social media icons are not displaying correctly on mobile. They are in the correct position etc but the actual image is all stretched. Can you help?

I can’t say I’ve ever heard of that one. Can I see a link to the issue? And what mobile browser are you seeing the issue in?

[realityhouse]

Hi Jason – I sent you a private message with the link earlier. Please confirm you have received this. I am looking on Iphone IOS7 Safari. Thanks 🙂

[realityhouse]

Jason, 1st issue is fixed – thanks for the pointer. Great support….

[Jason Bobich]

The theme comes with two images for the social icons that it’s implementing through CSS. First, you’ve got the the image displaying at its native size, and then for Hi-DPI devices (i.e. MacBook Retina, iPhone 4+, etc), the CSS swaps in a background image for the icons that’s twice the size, and then scaled with the background-size CSS property to display at 50%. This is how we deliver background images optimized for these Hi-DPI (i.e. Retina) devices.

In your site, when you made the customization of uploading your own image for the social icons, this is what’s causing your issue. So, let’s backup, and start from the beginning on making this customization properly from a child theme so it will remain when you update the theme in the future.

Note: I noticed you’re already using a child theme, but that you edited the actual social icon image in the parent theme, which will get erased next time you update the theme.

Basically, you’ll upload your new image to your child theme and then add your overriding custom CSS to call those images from your child theme’s style.css.

1) In your child theme, create a folder called “images” and upload your version of the social-media-grey_32x32.png to that folder.

2) Then, it looks like you’ve got most of the CSS in your style.css already for this, but you’ll want to reference this image from there. So, this part:

.themeblvd-contact-bar ul.social-media-grey li a{
	background-image: url('http://fisherslaw.co.uk.linux.rh-temp.co.uk/wp-content/themes/alyeska/framework/assets/images/parts/social-media-grey_32x32.png')
}

Becomes:

.themeblvd-contact-bar ul.social-media-grey li a {
	background-image: url('images/social-media-grey_32x32.png');
}

3) Then the next thing is to deal with the original issue you were posting about. Since you’re not creating a double size, retina-ready image there, you just want to declare the background-size of the image just to override the theme’s call to the retina-ready image. So, add this to the part above like this:

.themeblvd-contact-bar ul.social-media-grey li a {
	background-image: url('images/social-media-grey_32x32.png');
	background-size: 32px 96px;
}

Note: 32×96 is the dimensions of that image you created.

[realityhouse]

Perfect! Thanks for the explanation as well as for helping out here… 🙂

[Author]

Replies