Radio Station Tutorial – Creating a tabbed programming schedule

Have you ever wanted your radio station’s programming grid to look like this instead of the default gigantic table?

Well, today I’m going to show you how. Please note that this tutorial requires that the Radio Station plugin be at version 2.0.12 or higher.

1) Add the shortcode

First, we need to tell the Radio Station plugin that we don’t want a giant grid. This is done by using the “list” attribute of the shortcode. On the page or post that you’ve place the shortcode, add the list attribute:

[master-schedule list="1"]

With the list option enabled, Radio Station will output your schedule using unordered list tags instead of table tags.

2) Add some custom styles

You can place custom style rules in several places. In your theme’s style.css file, in a copy of Radio Station’s templates/program-schedule.css that you’ve copied into your theme directory, or embedded directly in the body of the post/page your shortcode is on using style tags. Pick whatever method works best for you and add the following:

ul.master-list { border: none; }
ul.master-list li.master-list-day { float: left; display: block; width: 70px; padding-right: 5px; margin: 0px; cursor: pointer; text-align: center; background-color: #ffffff; }
ul.master-list li.master-list-day ul { display: none; float: left; margin: 0; position: relative; text-align: left; width: 523px; }
ul.master-list li.master-list-day ul li { padding-top: 10px; }
ul.master-list li.master-list-day ul.master-list-day-sunday-list { margin-left: 0px; }
ul.master-list li.master-list-day ul.master-list-day-monday-list { margin-left: -75px; }
ul.master-list li.master-list-day ul.master-list-day-tuesday-list { margin-left: -150px; }
ul.master-list li.master-list-day ul.master-list-day-wednesday-list { margin-left: -225px; }
ul.master-list li.master-list-day ul.master-list-day-thursday-list { margin-left: -300px; }
ul.master-list li.master-list-day ul.master-list-day-friday-list { margin-left: -375px; }
ul.master-list li.master-list-day ul.master-list-day-saturday-list { margin-left: -450px; }
ul.master-list li.active-day-panel { font-weight: bold; background-color: #363636; color: #ffffff; }
ul.master-list li.active-day-panel ul { display: block; width: 523px; height: 200px; border: 1px solid #333333; background-color: #363636; }

You will probably need to adjust width/height/color settings to complement your theme.

3) Make it interactive with Javascript

First thing’s first… you’ll need to make sure jQuery is enabled in your theme. Most themes have it enabled by default, but on the off-chance yours doesn’t, enabled it by adding this code to your theme’s functions.php file.

function my_theme_enqueue_jquery( $hook_suffix ) {
	wp_enqueue_script("jquery");
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_jquery');

Once that’s done, the jQuery library should be loaded along with your theme. Now we’ll add some javascript to make our schedule work. You can place this in the head section of your theme’s header.php file, or at the end of footer.php. Or you can stick it right in the post/page containing your schedule shortcode if you really want to.

<script type="text/javascript">
var master = jQuery.noConflict();
master(document).ready(function() {
    master("#list-header-sunday").addClass("active-day-panel");
    master(".master-list-day").bind("click", function (event) {
        headerID = event.target.id;
        if(headerID != "") {
             master(".master-list-day").removeClass("active-day-panel");
             master("#"+headerID).addClass("active-day-panel");
        }
    });
});
</script>

That’s all there is to it!

Update: A change to the HTML sturcture in version 2.0.13 requires a minor modification to the javascript code:

<script type="text/javascript">
var master = jQuery.noConflict();
master(document).ready(function() {
    master("#list-header-sunday").addClass("active-day-panel");
    master(".master-list-day").bind("click", function (event) {
        headerID = master(event.target).closest("li").attr("id");

        if(headerID != "") {
             master(".master-list-day").removeClass("active-day-panel");
             master("#"+headerID).addClass("active-day-panel");
        }
    });
});
</script>

Tags: , , , ,

14 Comments to "Radio Station Tutorial – Creating a tabbed programming schedule"

  1. francesco says:

    Hello, thanks for this freat plugin…
    I have a strange behavior with 2.0.11 running on WP3.6.1… (With “blognews” theme)
    There are no translations in the Front Office. On the other hand all seems translated in Back Office… Any Suggestion?

    thanks
    F

  2. […] Creating a tabbed programming schedule […]

  3. Reinard Cox says:

    how would I be able to list the DJ/host name in the programming schedule (#master-program-schedule)

  4. I like the tabbed programming schedule.
    It isn’t active on our website.
    Is it possible to embed this in the next update of the Radio Station Plug-in?

    Best Regards,
    Rogier van Diesfeldt, Radio501

    • Nikki Blight says:

      I’m hesitant to do this because it relies so much on customized css and javascript to function. My goal is to keep the core plugin as generic as possible and let users do their own customizations. That’s why I made it a tutorial rather than a built-in feature.

  5. how to add a live streaming radio link to the plugin and make it play in template

  6. Fenrilh says:

    Hello !

    I love the tab mode, much more interesting then the whole big gigantic table

    I just have not enough notions to include properly this bunch of codes in my webpage to makeit work…

    I can add the shortcode.
    I think I did something by inserting a “style” with the second custom style.

    Then, the javascript, I just mess with it. I am inserting one or another script you put there inside the master shortcode but it doesn’t seem to work. keep having a list with hours.. no tab at all.

    Note that I don’t want to mess with any php files. For me the easier not to bug, is to insert any code directly inside the post. So i can control what i do..

    thanks for help !

  7. Mo says:

    How to make it default to the current day.

    • Gabriel Gonzalez says:

      To make it default to the current day:

      var master = jQuery.noConflict();
      master(document).ready(function() {
      dayweek = new Date().getDay();
      if (dayweek == "0") {
      master("#list-header-sunday").addClass("active-day-panel");
      }
      if (dayweek == "1") {
      master("#list-header-monday").addClass("active-day-panel");
      }
      if (dayweek == "2") {
      master("#list-header-tuesday").addClass("active-day-panel");
      }
      if (dayweek == "3") {
      master("#list-header-wednesday").addClass("active-day-panel");
      }
      if (dayweek == "4") {
      master("#list-header-thursday").addClass("active-day-panel");
      }
      if (dayweek == "5") {
      master("#list-header-friday").addClass("active-day-panel");
      }
      if (dayweek == "6") {
      master("#list-header-saturday").addClass("active-day-panel");
      }
      master(".master-list-day").bind("click", function (event) {
      headerID = master(event.target).closest("li").attr("id");
      if(headerID != "") {
      master(".master-list-day").removeClass("active-day-panel");
      master("#"+headerID).addClass("active-day-panel");
      }
      });
      });

  8. Cristian M. says:

    Would it be posibile to change the time format from am/pm type to 24 hours clock?
    for exemple i want to show 15:00 instead of 3 PM

  9. SOumya says:

    How to make half-an-hour slot?

  10. Mike says:

    Hi i am tying to get a website together http://www.webclash.uk i would like to add a wiget to the page on the right hand side, i have hard coded what is there at the moment be editing the single playllst file, is there a better way

Leave a Reply

Your email address will not be published. Required fields are marked *

Nikki Blight – Web/PHP Developer