adding player to website

Jonathan Duane
Jonathan Duane used Ask the Experts™
on
Hi Guys,

I want to add a player to the homepage of my website here https://sunshineradio.es, basically by adding this shortcode

[lbg_audio11_html5_shoutcast settings_id='2']      

in the footer at the moment there is a player i want to remove that and add in the above shortcode.

Whats the best way to do it?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David FavorFractional CTO
Distinguished Expert 2018

Commented:
How you do this depends.

If you already have some code, like a plugin on your site which processes [lbg_audio11_html5_shoutcast] then you just add this shortcode where ever you like.

If not, you'll have to write code to process this shortcode, rendering it into HTML + JQuery + CSS + whatever's required to implement your player.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
If you already know what the shortcode is as you posted, then I assume you already have a plug in that will accept that short code. If that is the case, then just add that text to your editor. WP will intercept it and process the code for the plug in and display your player.

Author

Commented:
Here is the header.php so, will i replace the code thats already in there for the existing player with the shortcode?

<?php global $woocommerce; ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
   
    <?php wp_head(); ?>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/soundmanager2/2.97a.20150601/script/soundmanager2-jsmin.js"></script>
<script src="https://use.fontawesome.com/976d6d02fb.js"></script>
	<script data-ad-client="ca-pub-6451451030932918" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <script>
	$(document).ready(function(e) {
		$('.txt1 a').click(function(event){
			event.preventDefault();
    		$().addClass

      });
	  
        $('.playb').click(function(){
		$('.playb').hide();
		$('.pab').show();	
		soundManager.destroySound('mySound3');
	var demo2Sound = soundManager.createSound({
		id: 'mySound2',
 url: 'http://88.202.183.16:8088/stream',
 onfinish: function() {
   soundManager._writeDebug(this.id + ' finished playing');
 }
});
demo2Sound.play({
  volume: 90
});
	});
	
	$('.pab').click(function(){
		$('.pab').hide();
		$('.playb').show();
		soundManager.destroySound('mySound2');
	});
		
	 $('.playit1').click(function(){
		 soundManager.destroySound('mySound2');
		$('.playit1').hide();
		$('.pau1').css('display','inline-block');	
	var demo2Sound = soundManager.createSound({
		id: 'mySound3',
 url: 'http://88.202.183.16:8088/stream',
 onfinish: function() {
   soundManager._writeDebug(this.id + ' finished playing');
 }
});
demo2Sound.play({
  volume: 90
});
	});
	
	$('.pau1').click(function(){
		$('.pau1').hide();
		$('.playit1').show();
		soundManager.destroySound('mySound3');
	});
    });
	
	
<script data-ad-client="ca-pub-6451451030932918" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	
	
	</script>
    <style>
		.ertt {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    padding: 15px 45px;
    text-transform: uppercase;
    position: relative;
    border: none;
    letter-spacing: 0;
    cursor: pointer;
    background: #fe612a;
    background: -moz-linear-gradient(left, #fe612a 0%, #fc0c3f 100%);
    background: -webkit-linear-gradient(left, #fe612a 0%,#fc0c3f 100%);
    background: linear-gradient(to right, #fe612a 0%,#fc0c3f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe612a', endColorstr='#fc0c3f',GradientType=1 );
}


	.pab{display:none;}
	.mtext{
		    color: white;
    font-size: 17px;
    padding-right: 21px;
	}
	.fa-play{color:white !important;}
	.fa-pause{color:white !important;}
	.playit1 {
    font-weight: bold;
    background: #fc143d;
    display: inline-block;
    color: white;
    font-size: 19px;
    padding: 4px 63px 5px 19px;
    border-radius: 26px;
}
.playit1 .fa-play-circle {
    font-size: 48px !important;
    position: absolute;
    top: -4px;
    right: -8px;
}
	.pau1 {
    font-weight: bold;
    background: #fc143d;
    display: none;
    color: white;
    font-size: 19px;
    padding: 4px 63px 5px 19px;
    border-radius: 26px;
}
.pau1 .fa-stop-circle {
    font-size: 48px !important;
    position: absolute;
    top: -4px;
    right: -8px;
}
	</style>
</head>

<body <?php body_class(); ?>>
<input type="hidden" class="siteuri" value="<?php echo get_site_url();?>">
<div id="main">
    <div class="header-v<?php if(!is_front_page() || is_home()): echo '2'; else: echo '1'; endif;?>">
        <div class="container">
            <?php if(!is_front_page()  && function_exists('get_field') || is_home() && function_exists('get_field')):
                dynamic_sidebar('header');
                ?>
            <?php endif; ?>
            <div class="header-inner clearfix">
                <header>
                    <div class="logo_wrapper">
                        <a href="<?php echo get_site_url();?>" class="logo">
                            <?php if(function_exists('get_field')):
                                if(is_array(get_field('logo','option'))):
                                    $link = get_field('logo','option'); ?>
                                    <img src="<?php echo $link['url'];?>" alt="<?php echo $link['alt'];?>" class="img-fluid">
                                <?php else: ?>
                                    <img src="<?php echo get_template_directory_uri()?>/images/logo.png" alt="Default logo" class="img-fluid">
                                <?php endif; else: ?>
                                <img src="<?php echo get_template_directory_uri()?>/images/logo.png" alt="Default logo" class="img-fluid">
                            <?php endif; ?>
                        </a>
                    </div>
                </header>
                <ul class="social-top clearfix">
                    <?php
                    if(function_exists('get_field')) {
                        echo do_shortcode('[gridgum_hitradio_socials]');
                    }
                    ?>
                </ul>
                <nav class="navbar_ navbar navbar-expand-md clearfix">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <?php echo gridgum_hitradio_create_menu('main', 'collapse navbar-collapse'); ?>
                </nav>
            </div>
        </div>
    </div>

Open in new window

Expert Spotlight: Joe Anderson (DatabaseMX)

We’ve posted a new Expert Spotlight!  Joe Anderson (DatabaseMX) has been on Experts Exchange since 2006. Learn more about this database architect, guitar aficionado, and Microsoft MVP.

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Yea, that looks right.

It is the do_shortcode that calls your shortcode https://developer.wordpress.org/reference/functions/do_shortcode/
                        echo do_shortcode('[gridgum_hitradio_socials]');

Open in new window

That is in place of just adding the short code in brackets to the editor.

Author

Commented:
so, this is the code i am going to try does it look right?

<?php global $woocommerce; ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
   
    <?php wp_head(); ?>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/soundmanager2/2.97a.20150601/script/soundmanager2-jsmin.js"></script>
<script src="https://use.fontawesome.com/976d6d02fb.js"></script>
	<script data-ad-client="ca-pub-6451451030932918" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<?php
                    if(function_exists('get_field')) {
                        echo do_shortcode('[lbg_audio11_html5_shoutcast settings_id='2']');
                    }
                    ?>
	
<script data-ad-client="ca-pub-6451451030932918" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	
	
	</script>
    <style>
		.ertt {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    padding: 15px 45px;
    text-transform: uppercase;
    position: relative;
    border: none;
    letter-spacing: 0;
    cursor: pointer;
    background: #fe612a;
    background: -moz-linear-gradient(left, #fe612a 0%, #fc0c3f 100%);
    background: -webkit-linear-gradient(left, #fe612a 0%,#fc0c3f 100%);
    background: linear-gradient(to right, #fe612a 0%,#fc0c3f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe612a', endColorstr='#fc0c3f',GradientType=1 );
}


	.pab{display:none;}
	.mtext{
		    color: white;
    font-size: 17px;
    padding-right: 21px;
	}
	.fa-play{color:white !important;}
	.fa-pause{color:white !important;}
	.playit1 {
    font-weight: bold;
    background: #fc143d;
    display: inline-block;
    color: white;
    font-size: 19px;
    padding: 4px 63px 5px 19px;
    border-radius: 26px;
}
.playit1 .fa-play-circle {
    font-size: 48px !important;
    position: absolute;
    top: -4px;
    right: -8px;
}
	.pau1 {
    font-weight: bold;
    background: #fc143d;
    display: none;
    color: white;
    font-size: 19px;
    padding: 4px 63px 5px 19px;
    border-radius: 26px;
}
.pau1 .fa-stop-circle {
    font-size: 48px !important;
    position: absolute;
    top: -4px;
    right: -8px;
}
	</style>
</head>

<body <?php body_class(); ?>>
<input type="hidden" class="siteuri" value="<?php echo get_site_url();?>">
<div id="main">
    <div class="header-v<?php if(!is_front_page() || is_home()): echo '2'; else: echo '1'; endif;?>">
        <div class="container">
            <?php if(!is_front_page()  && function_exists('get_field') || is_home() && function_exists('get_field')):
                dynamic_sidebar('header');
                ?>
            <?php endif; ?>
            <div class="header-inner clearfix">
                <header>
                    <div class="logo_wrapper">
                        <a href="<?php echo get_site_url();?>" class="logo">
                            <?php if(function_exists('get_field')):
                                if(is_array(get_field('logo','option'))):
                                    $link = get_field('logo','option'); ?>
                                    <img src="<?php echo $link['url'];?>" alt="<?php echo $link['alt'];?>" class="img-fluid">
                                <?php else: ?>
                                    <img src="<?php echo get_template_directory_uri()?>/images/logo.png" alt="Default logo" class="img-fluid">
                                <?php endif; else: ?>
                                <img src="<?php echo get_template_directory_uri()?>/images/logo.png" alt="Default logo" class="img-fluid">
                            <?php endif; ?>
                        </a>
                    </div>
                </header>
                <ul class="social-top clearfix">
                    <?php
                    if(function_exists('get_field')) {
                        echo do_shortcode('[gridgum_hitradio_socials]');
                    }
                    ?>
                </ul>
                <nav class="navbar_ navbar navbar-expand-md clearfix">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <?php echo gridgum_hitradio_create_menu('main', 'collapse navbar-collapse'); ?>
                </nav>
            </div>
        </div>
    </div>

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Create a test page that is not linked to the navigation and try it out.  The better option is to have a test environment with a duplicate of your site and test it.

Author

Commented:
ok guys, i have the player there, but it doesnt seem to be playing? Any ideas?

Author

Commented:
the one at the bottom of the page
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
You can see in the console it is coming up with an error. Since this is a wordpress plug in, did you follow the instructions for the plug in here https://www.youtube.com/watch?v=SV7xkVEYXjM?

There is an error with adsense tags too.

What I suggest is to create a new WP site for testing. Don't install any other plug in or theme other than one of the very simple WP default themes.  Then install this plug in just to make sure it is working as expected without anything else interfering.  

If you view the source of your page, it looks like there are multiple items that are being duplicated.  One of those items is jquery. It is loaded with the plug in and again after.  When viewing source, look at lines 64
<script type='text/javascript' src='https://www.sunshineradio.es/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>

Open in new window

and line 83
<meta name="tec-api-version" content="v1"><meta name="tec-api-origin" content="https://www.sunshineradio.es"><link rel="https://theeventscalendar.com/" href="https://www.sunshineradio.es/wp-json/tribe/events/v1/" />     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Open in new window


Also, the meta data should be in the head section and look at the google code being added multiple times too.

This is why I would try and recreate what you are doing on new fresh site and see if you can get it working. If you can get the plug in to work on a very simple theme, you know the issue is something else. Once that is working, start  over and add the WP theme you are using. Now with no other plug in other than what came with the theme, add the player and test using the instructions in the video.  Then start adding more of your plug ins until you can duplicate the error. You may not and it may work with the new site. In that case, I might either uninstall everything and start over, or just take my new site and move that to the live.

If it was not a WP site, it would be easy to say move all the meta tags to the head section, eliminate all duplicate items such as jquery and use the newest version of jquery.  Load css, then the main jquery file, then the supporting jquery and javascript files. Because this is WP, that is easier said than done. You have to work the plug ins.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial