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_shoutca st 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?
I want to add a player to the homepage of my website here https://sunshineradio.es, basically by adding this shortcode
[lbg_audio11_html5_shoutca
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?
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.
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>
Yea, that looks right.
It is the do_shortcode that calls your shortcode https://developer.wordpress.org/reference/functions/do_shortcode/
It is the do_shortcode that calls your shortcode https://developer.wordpress.org/reference/functions/do_shortcode/
echo do_shortcode('[gridgum_hitradio_socials]');
That is in place of just adding the short code in brackets to the editor.
ASKER
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>
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.
ASKER
ok guys, i have the player there, but it doesnt seem to be playing? Any ideas?
ASKER
the one at the bottom of the page
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If you already have some code, like a plugin on your site which processes [lbg_audio11_html5_shoutca
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.