Link to home
Start Free TrialLog in
Avatar of Jonathan Duane
Jonathan Duane

asked on

adding player to website

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?
Avatar of David Favor
David Favor
Flag of United States of America image

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.
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.
Avatar of Jonathan Duane
Jonathan Duane

ASKER

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

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.
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

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.
ok guys, i have the player there, but it doesnt seem to be playing? Any ideas?
the one at the bottom of the page
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial