Code Snippets and Examples
Sample Page Using PHP includes
<?php include_once('_head.php'); ?><title>Your Name :: Your Instrument</title>
<?php include_once('_top.php'); ?>
<div id="sidebar">
<img src="http://placehold.it/350x500" alt="Replace Me With your Real Sidebar Graphic" />
</div>
<div id="content">
<h1>Page Header - Important</h1>
<div class="hr"> </div>
<p><a href="http://www.lipsum.com/">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Aenean vehicula, libero ac ullamcorper lobortis, nisl elit pharetra urna, ut imperdiet dui erat eget eros. Vivamus interdum mauris et erat varius ullamcorper at sit amet massa. Duis semper venenatis gravida. Nam eleifend adipiscing mattis. Proin nec massa egestas diam tincidunt rutrum. Donec luctus varius ante, a consectetur sapien eleifend in. Donec nec iaculis metus. Pellentesque id nibh enim, quis sollicitudin nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ultricies leo a velit aliquam at convallis massa aliquam. Fusce sodales pharetra dignissim. Etiam rhoncus augue vel ante tristique lacinia. Integer a est lacus, ut porta massa. Etiam id metus odio. Cras auctor neque ac sem varius consequat sed ac magna.</p>
<p>Phasellus molestie ligula nec lectus malesuada dapibus. Nunc vitae nisl ut mi ornare sollicitudin ut ac magna. Etiam quis tellus risus, nec aliquet metus.Aenean sodales, erat sit amet dignissim mollis, mi dui faucibus diam, id volutpat nisi tellus at leo. Donec et nibh massa. Curabitur sodales lorem non leo porta quis interdum velit viverra. Vestibulum vitae enim a ante suscipit placerat at in tortor. Vestibulum tincidunt dolor sit amet nunc tincidunt sit amet rutrum ipsum iaculis. Integer egestas aliquam lorem non malesuada. In euismod purus in arcu vehicula auctor. Fusce in tincidunt turpis. Proin nunc mi, varius non accumsan non, dignissim eu tellus. Curabitur in nisl felis, ut tempus massa. Sed tellus lectus, posuere a euismod quis, iaculis ac dolor. Integer libero elit, porttitor vitae vehicula vitae, pellentesque ac lectus. </p>
</div>
<?php include_once('_bottom.php'); ?>
Audio Page (Wordpress Audio Player)
Requires Wordpress Audio Player: http://wpaudioplayer.com/installation/
View Example Page: http://www.noahlapidus.com/audio.php
<?php include_once('_head.php'); ?>
<title>Your Name :: Your Instrument :: Audio Samples</title>
<script type="text/javascript" src="js/audio-player.js"></script>
<script type="text/javascript">
AudioPlayer.setup("flash/player.swf", {
width: 560,
bg: "FFFFFF",
leftbg: "FFFFFF",
lefticon: "E46F24",
righticon: "FFFFFF",
righticonhover: "FFFFFF",
rightbg: "E46F24",
rightbghover: "516C97",
volslider: "E46F24",
loader: "E46F24"
});
</script>
<?php include_once('_top.php'); ?>
<div id="sidebar">
<img src="http://placehold.it/350x500" alt="Replace Me With your Real Sidebar Graphic" />
</div>
<div id="content">
<h1>Audio Samples</h1>
<p>Eastman Wind Ensemble - Strauss - Vienna Philharmonic Fanfare</p>
<p id="audioplayer_1">Eastman Wind Ensemble - Strauss - Vienna Philharmonic Fanfare</p>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {
soundFile: "/audio/01 - Eastman Wind Ensemble - Strauss - Vienna Philharmonic Fanfare.mp3",
titles: "Strauss - Vienna Philharmonic Fanfare",
artists: "Eastman Wind Ensemble",
autostart: "no"
});
</script>
<p>Eastman Philharmonia - Tchaikovsky - Symphony No 6 (excerpt)</p>
<p id="audioplayer_2">Eastman Philharmonia - Tchaikovsky - Symphony No 6 (excerpt)</p>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_2", {
soundFile: "audio/02 - Eastman Philharmonia - Tchaikovsky - Symphony No 6 (excerpt).mp3",
titles: "Tchaikovsky - Symphony No 6 (excerpt)",
artists: "Eastman Philharmonia",
autostart: "no"
});
</script>
</div>
<?php include_once('_bottom.php'); ?>
Video page (Youtube Embed):
<?php include_once('_head.php'); ?>
<title>Your Name :: Your Instrument :: Video Samples</title>
<?php include_once('_top.php'); ?>
<div id="sidebar">
<img src="http://placehold.it/350x500" alt="Replace Me With your Real Sidebar Graphic" />
</div>
<div id="content">
<h1>Video Samples</h1>
<h3>RSA Animate - Drive: The surprising truth about what motivates us</h3>
<iframe width="560" height="315" src="http://www.youtube.com/embed/u6XAPnuFjJc" frameborder="0" allowfullscreen></iframe>
</div>
<?php include_once('_bottom.php'); ?>
Photo Gallery Page Using Shadowbox:
Requires Shadowbox - download here: http://shadowbox-js.com/download.html
View example page here: http://noahlapidus.com/photos.php
<?php include_once('_head.php'); ?>
<style type="text/css">
#content {
float:none;
width:940px;
height:auto;
padding:10px;
margin:auto;
text-align:center;
}
/******** Photo Gallery ********/
#gallery {
margin:auto;
}
#gallery a {
margin:0 12px 14px 0;
display:block;
float:left;
height:300px; /* should be the height of your largest thumbnails */
}
#gallery img {
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}
</style>
<title>Your Name :: Your Instrument :: Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['img', 'html', 'iframe','swf']
});
</script>
<?php include_once('_top.php'); ?>
<div id="content">
<h2>Photo Gallery</h2>
<div id="gallery">
<a rel="shadowbox[gallery];options={continuous:true}" title="Sample Image 1" href="images/gallery/818_Autumn.jpg"><img src="images/gallery/thumbnails/300_Autumn.jpg" alt="Sample Image 1" /></a>
<a rel="shadowbox[gallery];options={continuous:true}" title="Sample Image 2" href="images/gallery/818_Red_Bow_Flower.jpg"><img src="images/gallery/thumbnails/300_Red_Bow_Flower.jpg" alt="Sample Image 2" /></a>
<a rel="shadowbox[gallery];options={continuous:true}" title="Sample Image 3" href="images/gallery/818_Through_the_Mesh.jpg"><img src="images/gallery/thumbnails/300_Through_the_Mesh.jpg" alt="Sample Image 3" /></a>
</div>
</div>
<?php include_once('_bottom.php'); ?>
Full Width Content Area
For some of your pages, you may want the content area to span the full width instead of having a sidebar (for instance, the photo gallery). To do so, follow the following steps:
1) Add the full width CSS snippet to any page, just below where it says
"<?php include_once('_head.php'); ?>"
2) Delete the sidebar div from your page. The structure of your page should end up looking more like this:
<?php include_once('_head.php'); ?>
<style type="text/css">/******* Full-width content area *******/
#content {
width:940px;
padding:10px;
float:none;
}
</style>
<title>Page Title :: Your name, instrument</title>
<?php include_once('_top.php'); ?>
<div id="content">
<h1>Page Title</h1>
<p>Content goes here.</p>
</div>
<?php include_once('_bottom.php'); ?>