Can’t display my code in any widget

That is a workaround but not a secure solution.

I assume you have a bit of coding skills.. I would create an include for the functions.php file and write a conditional enqueue function for the scripts and css for the app. Then create a custom app.php file that included the html and js for the app. Then use get_template_part( includes’, ‘app’ ); to include it in the theme template for all the “radio” pages that need it.

so you are using a child theme?
in your child theme’s functions.php
add require_once('includes/app-functions.php');
create a folder named “includes” and a file named “app-functions.php”

in that file:

<?php

//enqueue app scripts and styles
<?php 
function the_app_scripts_styles() {
 
   // Loads shoutcast CSS file.
  wp_enqueue_style('shoutcast-theme', 'https://site.com/shoutcastinfo-ambient/css/darkVertical.css', false ,'');
  // Loads player CSS file.
  wp_enqueue_style('player-css', 'https://www.site.com/shoutcastinfo-ambient/player/clean.css', false ,'');
  // Loads FontAwesome CSS file.
  wp_enqueue_style('fontawesome-css', 'https://www.netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', false ,'');
  // Loads google fonts CSS file.
  wp_enqueue_style('fonts-css', 'https://www.fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,greek,vietnamese,cyrillic', false ,'');
  // Loads fancybox CSS file.
  wp_enqueue_style('fancybox-css', 'https://www.site.com/shoutcastinfo-ambient/js/fancybox/jquery.fancybox-1.3.0.css', false ,'');
 
  // Loads app JavaScript files.
  wp_enqueue_script('fancyboxJS', 'https://www.site.com/shoutcastinfo-ambient/js/fancybox/jquery.fancybox-1.3.0.pack.js', array('jquery'),'0', true );
  // Loads shoutcast main JavaScript files.
  wp_enqueue_script('shoutMain', 'https://www.site.com/shoutcastinfo-ambient/js/main.js', array('jquery'),'0', true );

}
add_action('wp_enqueue_scripts', 'the_app_scripts_styles');

then create a file in the child-theme folder named app.php

<? php

<!--start shoutcast javascripts-->
<script>
//settings
var websiteUrl = 'https://www.site.com/shoutcastinfo-ambient/';//website url
var showPlayer = '0';//show player status
var shoutcastUrl = '198.24.145.147:9332';//shoutcast stream server url
var autostartPlayer = false;//autostart player status
var displayPlayer = 'top';//player area
</script>
<!--end shoutcast javascripts-->

<!--SHOUTCAST INFO AND STATS START - Add this in your page(s)-->
<div id="statsOuter">
<div id='playNow'>
<!--show Shoutcast info and stats here-->
</div>
<div id='hiddeNowPlay'>
<!--hidden title-->
</div>
</div>
<!--SHOUTCAST INFO AND STATS END-->

make a duplicate of the page template that the radio pages are using and at the top add this or change what is there to this:

<?php
/* Template Name: Radio-APP-Page
*
*/

somewhere in the page it will call the sidebar <?php get_sidebar();?>
if you add this get_template_part( ‘app’ );

go to the radio pages and select Radio-APP-Page as the page template and it will shot the app in the template –

<?php get_sidebar(name);?> is how you show a custom widget. Not the “Sidebar” it is just WordPress’ name for a widgetized section.

https://codex.wordpress.org/Widgetizing_Themes

• This reply was modified 8 years, 3 months ago by HudsonValleyWebDesign.