Semi-Static Front Page (Changes Weekly)

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(); ?>