PHP echo showing on top of page instead of in being used in buttons

I can’t figure this out. I’m building this HTML link in WP using Shortcoder (HTML below) and a self created plugin to create a shortcode (PHP below) and CSS to create the button (CSS below).

The problem is that the shortcode, [upo_url_shortlink] (php below) is showing up (echoed) on top of the page instead of being used by the link (&url). Everything else is in place. The short url used is generated by Short URL and the url that is echoed is the correct one. It is just not used by the button link…

Read More

Example page: http://www.behind-the-scenes.co.za/Ib0Lf

Can someone please see what I’m doing wrong?

<span class="upo-share-buttons"><a href="https://twitter.com/intent/tweet?text=[types field="twitter-text" output="raw"][/types]&url=[upo_url_shortlink]&via=RenierDelport &hashtags=[types field="visitor-twitter-hashtags" output="raw"][/types]" target="_blank" title="Share [wpv-post-title] on Twitter"><i class="fa fa-twitter fa-2x"></i></a></span>
// [upo_url_shortlink]
function upo_url_shortlink_function() {
	echo wp_get_shortlink();
}
add_shortcode('upo_url_shortlink', 'upo_url_shortlink_function');
.upo-share-buttons {
	display: inline-block;
	border-right: 2px solid white;
	width: 40px;
	line-height: 40px;
	padding: 5px;
	position: relative;
	background-color:#ff0000;
	text-decoration: none;
	text-shadow:0px 1px 0px rgba(0,0,0,0.5);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
	-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
	box-shadow:0px 2px 2px rgba(0,0,0,0.2);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}

.upo-share-buttons a:link, .upo-share-buttons a:visited {
	color: white !important;
}

.upo-share-buttons a:hover {
	color: #eeeaee !important
}

Related posts

Leave a Reply

1 comment

  1. You should be returning your output not echoing it. try changing your shortcode to…

    function upo_url_shortlink_function() {
        return wp_get_shortlink();
    }
    add_shortcode('upo_url_shortlink', 'upo_url_shortlink_function');
    

    Hope that helps

    Dan