I’m creating two websites, one radio station and one bands website. I want to add a player (already have a php with the player in it) to the top of the page, like a frame.
The main point is to have the player playing music while people can navigate to other pages without interrupting the player.
I’ve created the following:
<frameset framespacing="0" border="0" frameborder="0" rows="*,65">
<frame name="main" target="_self" src="https://www.website.com/index.php" scrolling="auto">
<frame name="footer" scrolling="no" noresize="noresize" src="https://www.website.com/player">
<noframes>
However this creates a loop.
Child theme for TwentyEleven:
- create the child theme folder,
twentyhalf
- create a
style.css
file with the content:
/*
Theme Name: Framed Audio
Theme URI: http://wordpress.stackexchange.com/questions/69624
Version: 1.0
Description: Index page with framed content - one frame points to a parent page with the slug of 'sample-page' and the other for a folder at the root level named 'radio'
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
- copy the parent theme
index.php
into the child theme folder
- substitute
get_header()
and get_sidebar() + get_footer()
with the parent content of header.php
and footer.php
, and adapt to suit your site’s framed Front Page
- set the “Front page display” in
Reading Settings (/wp-admin/options-reading.php)
to “Your latest posts“.
/sample-page/
is the slug of a WordPress page with the “true” first WP
page. For exhibiting a “blog” page some template/shortcode will be
needed.
/radio/
is an actual folder with an index.html
containing the audio player.
Sample index.php
for the child theme
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>HAND WRITTEN TITLE</title>
<?php wp_head(); ?>
</head>
<frameset rows="*,65" frameborder="0" border="0" framespacing="0">
<frame name="main" src="<?php bloginfo( 'url' ); ?>/sample-page/" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<frame name="footer" src="<?php bloginfo( 'url' ); ?>/radio/" marginheight="0" marginwidth="0" scrolling="no" noresize>
<noframes></noframes>
</frameset>
</html>
==============
Attention to the “Home” link in the navigation menus: this one must be directed to the frame “main”, otherwise the frameset will duplicate the footer.
==============