I am mocking up at http://bibletogether.com/servantsavior
As you can see the days of the week are clickable and cause content to appear below. I am grabbing this content by post_ID.
The deal is that I want to be able to change this front page each week automatically and I don't have any idea how to do it. My thought was to create a unique page for each week, but that just causes things to blow up.
I also want to be able to click "Last Week" and see last week's version of this page.
I think you can see what I'm doing here, but I'm stuck after a FULL DAY of working on it. I'll take any suggestions.
'<a href="javascript:ReplaceContentInContainer('reflectioncontent','
<?php
$post_id = 25;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<p><?php echo $queried_post->post_content; ?></p>
')">
FRIDAY'
Below I'll post my code for my index.php.
I know it is a mess, but I'm quite new to this.
<?php get_header(); ?>
<div id="container" class="container_12" >
<div id="contentcontainer" class="grid_12" >
<!-- ======= -->
<!-- Week Of -->
<!-- ======= -->
<div class="grid_2 alpha" id="weekof" >
<p>W</br>E</br>E</br>K</br></br>of</br></br>D</br>E</br>C</br>E</br>M</br>B</br>E</br>R</br></br>12</p>
</div>
<!-- ============ -->
<!-- Main Content -->
<!-- ============ -->
<div class="grid_10 omega" id=maincontent>
<!-- HEADER -->
<div class="grid_10" id="bt-header" >
</div>
<!-- DAYS -->
<div class="grid_10" id="navigation" >
<div class="grid_4 alpha" >
<p><a href="">LISTEN</a></p>
</div>
<div class="grid_2" >
<p><a href="">LAST WEEK</a></p>
</div>
<div class="grid_2" >
<p><a href="">ARCHIVE</a></p>
</div>
<div class="grid_2 omega" >
<p><a href="">ABOUT</a></p>
</div>
</div>
<!-- DAYS -->
<div class="grid_10 alpha" id="days" >
<div class="grid_2 alpha" >
<p>
<a href="javascript:ReplaceContentInContainer('reflectioncontent','
<?php
$post_id = 16;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<p><?php echo $queried_post->post_content; ?></p>
')">
MONDAY
</a>
</p>
</div>
<div class="grid_2" >
<p>
<a href="javascript:ReplaceContentInContainer('reflectioncontent','
<?php
$post_id = 1;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<p><?php echo $queried_post->post_content; ?></p>
')">
TUESDAY
</a>
</p>
</div>
<div class="grid_2" >
<p>
<a href="javascript:ReplaceContentInContainer('reflectioncontent','
<?php
$post_id = 20;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<p><?php echo $queried_post->post_content; ?></p>
')">
WEDNESDAY
</a>
</p>
</div>
<div class="grid_2" >
<p>
<a href="javascript:ReplaceContentInContainer('reflectioncontent','
<?php
$post_id = 23;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<p><?php echo $queried_post->post_content; ?></p>
')">
THURSDAY
</a>
</p>
</div>
<div class="grid_2 omega" >
<p>
<a href="javascript:ReplaceContentInContainer('reflectioncontent','
<?php
$post_id = 25;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<p><?php echo $queried_post->post_content; ?></p>
')">
FRIDAY
</a>
</p>
</div>
</div>
<!-- DATES -->
<div class="grid_10 alpha" id="dates" >
<div class="grid_2 alpha" >
<p>December 12</p>
</div>
<div class="grid_2" >
<p>December 13</p>
</div>
<div class="grid_2" >
<p>December 14</p>
</div>
<div class="grid_2" >
<p>December 15</p>
</div>
<div class="grid_2 omega" >
<p>December 16</p>
</div>
</div>
<!-- SCRIPTURE -->
<div class="grid_10 alpha" id="scripture" >
<div class="grid_2 alpha" >
<p>Romans 12</p>
</div>
<div class="grid_2" >
<p>Psalm 13</p>
</div>
<div class="grid_2" >
<p>Romans 13</p>
</div>
<div class="grid_2" >
<p>Genesis 1</p>
</div>
<div class="grid_2 omega" >
<p>Hebrews 7</p>
</div>
</div>
<!-- READ MORE - COMMENTED OUT
<div class="grid_10 alpha" id="readmore" >
<div class="grid_2 alpha" >
<p><a href="">Click to<br>Read Reflection</a></p>
</div>
<div class="grid_2" >
<a href="javascript:ReplaceContentInContainer('reflectioncontent',
'<?php
$post_id = 1;
$queried_post = get_post($post_id);
$content = $queried_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;
?>
')">
Click me to replace the content in the container.
</a>
</div>
<div class="grid_2" >
<p><a href="">Click to<br>Read Reflection</a></p>
</div>
<div class="grid_2" >
<p><a href="">Click to<br>Read Reflection</a></p>
</div>
<div class="grid_2 omega" >
<p><a href="">Click to<br>Read Reflection</a></p>
</div>
</div>
-->
<script type="text/javascript"><!--
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
//--></script>
<div class="grid_10" id="readmore" >
<div class="grid_2 alpha" >
<p></p>
</div>
<div class="grid_6" id="reflectioncontent" >
<p></p>
</div>
<div class="grid_2 omega" >
<p></p>
</div>
</div>
</div>
</div>
<div id="footer" class="grid_12" >
<p>test footer</p>
</div>
</div>
<?php get_footer(); ?>