Skip to content

Instantly share code, notes, and snippets.

@ChrisLTD
Created August 21, 2012 18:21
Show Gist options
  • Save ChrisLTD/3418111 to your computer and use it in GitHub Desktop.
Save ChrisLTD/3418111 to your computer and use it in GitHub Desktop.
Wordpress Timeline using custom content type
<?php
// 1. Put all timeline entries into array
$timeline_entries = array();
// Retrieve entries sorted by date
$query = new WP_Query( array('post_type' => 'timeline-entry', 'posts_per_page' => -1, 'order' => 'ASC' , 'orderby' => 'meta_value', 'meta_key' => 'date' ));
if ($query->have_posts()):
while ( $query->have_posts() ):
$query->the_post();
$date = get_custom_field('date');
$date =
$timeline_entries[] = array("content" => get_the_content(), "year" => date('Y' , strtotime($date)), "month" => date('n' , strtotime($date)), "month_name" => date('F' , strtotime($date)));
endwhile;
endif;
wp_reset_postdata();
// echo '<pre style="overflow: scroll;">';
// print_r($timeline_entries);
// echo '</pre>';
// 2. Figure out year range
$years = array();
foreach($timeline_entries as &$entry){
$years[] = $entry["year"];
}
$years = array_unique($years);
// echo '<pre style="overflow: scroll;">';
// print_r($years);
// echo '</pre>';
// 3. Create full timeline array with years -> all months in range
$full_timeline = array();
foreach($years as &$year){
for($i=1; $i < 13; $i++){
$full_timeline[$year][$i] = "";
}
}
// echo '<pre style="overflow: scroll;">';
// print_r($full_timeline);
// echo '</pre>';
// 4. Combine timeline entry array with full timeline array
foreach($timeline_entries as &$entry){
$full_timeline[$entry["year"]][$entry["month"]] = array("content" => $entry["content"], "month_name" => $entry["month_name"]);
}
// echo '<pre style="overflow: scroll;">';
// print_r($full_timeline);
// echo '</pre>';
// 5. Clear out empty leading and trailing months
foreach($full_timeline[reset($years)] as $i => $v){ // find first year in the array and loop through it
if(is_array($v)){
break; // If you find a value that's not empty, exit the loop
} else {
unset($full_timeline[reset($years)][$i]); // if you find an empty value, remove it from the array
}
}
$reversed_last_year = array_reverse($full_timeline[end($years)], true); // Find the last year in the array, and reverse it
foreach($reversed_last_year as $i => $v){
if(is_array($v)){
break;
} else {
unset($reversed_last_year[$i]);
}
}
$full_timeline[end($years)] = array_reverse($reversed_last_year); // Re-reverse last year array and place it in the timeline
// 6. Output years and months on the page in order
echo '<div id="timeline">';
foreach($full_timeline as $year => $value){
echo '<div class="year">';
echo '<h3>' . $year . '</h3>';
foreach($value as $v){
if(is_array($v)){
echo '<div class="month">'
. '<h4><b>' . $v["month_name"] . '</b> / ' . $year . '</h4>'
. apply_filters('the_content', $v["content"])
. '</div>';
} else {
echo '<div class="month empty"></div>';
}
}
echo '</div>';
}
echo '</div>';
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment