WordPress jquery timeline implementation Shortcode example (Using http://tutorialzine.com/2012/04/timeline-portfolio/ timeline code to output). Passing one attribute.

data.json.php

<?php session_start();
// load WordPress environment
include_once('../../../wp-load.php');
header("Pragma: no-cache");
header('Content-type: application/json');
?>
{
"timeline":
<?php
        /* $cat = $_REQUEST["cat"]; // better to use from session instead of url request */
	$cat = $_SESSION['t_cat'];  // Category name from session variable
	if(isset($_SESSION['t_cat']))  unset($_SESSION['t_cat']);
?>
<?php
	$timeline_query = new WP_Query( array ( 'category_name' => "$cat", 'orderby' => 'date', 'order' => 'ASC' , 'posts_per_page' => -1 ));
	while ( $timeline_query->have_posts() ) : $timeline_query->the_post();
		$timeline_text = get_the_content();
		$timeline_text = str_replace(array("\r\n", "\r", "\t"), " ", $timeline_text);
		$timeline_text = str_replace('"', "'", $timeline_text);
		$timeline_text = trim($timeline_text);
		if(strlen($timeline_text) == 0) $timeline_text = "&nbsp;";
		$timeline_start_date = get_post_meta($post->ID, 'it_start_date', true);
		$timeline_start_date = str_replace('"', "'", $timeline_start_date);
		$timeline_media = get_post_meta($post->ID, 'it_media', true);
		$timeline_media = str_replace('"', "'", $timeline_media);
		$timeline_credit = get_post_meta($post->ID, 'it_credit', true);
		$timeline_credit = str_replace('"', "'", $timeline_credit);
		$timeline_caption = get_post_meta($post->ID, 'it_caption', true);
		$timeline_caption = str_replace('"', "'", $timeline_caption);

if(($timeline_query->current_post) == 0):
?>
 {
        "headline":"<?php the_title(); ?>",
        "type":"default",
		"startDate":"<?php echo $timeline_start_date; ?>",
		"text":"<?php echo $timeline_text; ?>",
		"asset":
        {
            "media":"<?php echo $timeline_media; ?>",
            "credit":"<?php echo $timeline_credit; ?>",
            "caption":"<?php echo $timeline_caption; ?>"
        },
        "date": [
<?php else: ?>
            {
                "startDate":"<?php echo $timeline_start_date; ?>",
                "headline":"<?php the_title(); ?>",
                "text":"<?php echo $timeline_text; ?>",
                "asset":
                {
                    "media":"<?php echo $timeline_media; ?>",
                    "credit":"<?php echo $timeline_credit; ?>",
                    "caption":"<?php echo $timeline_caption; ?>"
                }
			<?php
			if(($timeline_query->current_post + 1) == $timeline_query->post_count) {
				echo "}";
			}else{
				echo "},";
			}
	 endif;
				endwhile;
				// Restore original Post Data
				wp_reset_postdata();
			?>
		]
    }
}

experimental-timeline-category-pass.php

global $post;
// echo add_query_arg( 't_cat', 'timeline', get_permalink($post->ID) );
/* $json_url = get_bloginfo('template_url')."/data.json.php";
$params = array( 't_cat' => "timeline" );
$json_url = add_query_arg( $params, $json_url ); */


// header("Pragma: no-cache");
/* if (isset($wp_query->query_vars['myvar']))
{
print $wp_query->query_vars['myvar'];
} */


$.ajax({
				'type': 'POST',
				'url': "<?php bloginfo('template_url'); ?>/data.json.php",
				'data': {t_cat: "timeline"},
				'dataType': 'json',
				success: function (data) { alert(2); }
			});
			
			/* $.ajax({
				'type': 'POST',
				'url': "<?php bloginfo('template_url'); ?>/data.json.php",
				'data': {t_cat: "timeline"},
				'dataType': 'json',
				success: function (data) { 
					<?php $page = file_get_contents('http://localhost/wpsite/wp-content/themes/gazette/data.json.php');
					echo $page; ?>
				}
			}); */
			
			
			
			<?php 
			$_SESSION['t_cat'] = "timeline"; ?> 
			// timeline.init("<?php bloginfo('template_directory'); ?>/data.json.php");
			<?php //  if(isset($_SESSION['t_cat']))  unset($_SESSION['t_cat']); ?>
			
			
			
			<?php $cat = $_REQUEST["t_cat"];
	echo '<pre>';
    print_r($GLOBALS['wp_query']);
	echo '</pre>';
?>

<?php global $post;
	  echo $post->ID;
	  echo $timeline_cat = get_post_meta( $post->ID, 'timeline_category', true ); 
?>

header.php

<?php
/**
 * Code is being used include css and js file for timeline template
 *
 *
 * @date 07/03/2013
 * @author Deepak.Rajpal
 *
 */
	if ( is_page_template('timeline-template.php') ) { ?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/timeline/css/timeline.css" />
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/timeline/css/styles.css" />
		<script src="<?php bloginfo('template_directory'); ?>/timeline/js/timeline-min.js"></script>
		<script type="text/javascript">
		jQuery(document).ready(function(){
			var timeline = new VMM.Timeline();
                        // old way to get category is by url while it is good to use session instead
			// var timeline_category = $('#t_cat').val();
			// timeline.init("<?php bloginfo('template_directory'); ?>/data.json.php?cat="+timeline_category);

			<?php 
				global $post;
				$timeline_cat = get_post_meta( $post->ID, 'it_timeline_category', true ); 
				$_SESSION['t_cat'] = $timeline_cat; 
			?>
			timeline.init("<?php bloginfo('template_directory'); ?>/data.json.php");
		});
		</script>
	<?php } 

timeline-plugin-compare.php

=========Timeline options=======
wp-veriteco-timeline:
	Screenshot: http://timeline.verite.co/
	1) Based on verite.co's timeline.js 
	2) Admin option to add timeline (separate custom post content rather than page/post)
	3) shortcode to add timeline to anywhere (post and pages)
	4) Video and Image can be added to timeline in plugin version (Original script support twitt,flicker and lot)
	5) Timeline output window shows title at the bottom and content boxes in rest part.
	6) height, width, start-end date etc options available in dashboards.

VéritéCo Timeline shortcode:
	1) It will add a simple shortcode plugin to add the Timeline made by "VéritéCo" using url mentioned in shortcode. Url will be generated from 'Google Docs'.
	2) No options to manage/add timeline content from wordpress admin.
	
wp-simile-timeline:
	Screenshot: http://wordpress.org/extend/plugins/wp-simile-timeline/screenshots/
	1) Use posts as timeline content, option for selection particular categories for timeline
	2) title display in timeline box, after click popup appears to display content.
	3) Color/display option availble in admin
	4) Timeline modification is not working for the latest plugin. (Not able to set startdate/end date, not getting saved.) (http://wordpress.org/support/topic/time-duration-posts-not-working)
	
WP Facebook Timeline (MF Timeline):
	Requires: 3.1.3 or higher
	Screenshot: http://wordpress.org/extend/plugins/wp-facebook-timeline-mf-timeline/screenshots/
	1) Can include content from: Posts, Pages, Media, Revisions, Navigation Menu Items and custom timline posts (with category options)
	2) Not much options in admin regarding time frame etc.
	3) Twitter feed can also included "WordPress Posts Timeline" but not working on local (get_file_content warning showing)
	4) All post showing one side in IE, looking pretty in FF. (CSS compatibility issue.)
	5) Working fine in "WP 3.0.4"
	
WordPress Posts Timeline:
	Screenshot: http://wordpress.org/extend/plugins/wordpress-posts-timeline/screenshots/
	1) Parse error: syntax error, unexpected T_ELSEIF in
		E:\Deepak.Rajpal\dev\mutest\wp-content\plugins\wordpress-posts-timeline\inc\timeline_options.php on line 173
		Fixed using: http://wordpress.org/support/topic/plugin-wordpress-posts-timeline-unable-to-activate-fatal-error
	2) All post showing one side in IE, looking pretty in FF. (CSS compatibility issue.)
	3) Use Wordpress post/categories/page as timeline content.
	4) Option to limit character to show in timeline, and to keep/not-keep link to post.
	5) Working fine in "WP 3.0.4"

WP JQuery Timelinr:
	Screenshot: http://wordpress.org/extend/plugins/wp-jquery-timelinr/screenshots/
	Requires: 3.2 or higher
	1) Works like slider, Year based slides (month/date not supported)
	2) FrontEnd slider not working properly - slider is broke down in old version (Not tested in latest version)

============Plugin finalization mail========

wordpress-shortcode-example.php

<?php
function timeline_generator ($atts, $content=null){
    extract(shortcode_atts( array('cat' => ''), $atts));
	$timeline_content = '<div id="timeline">
							<!-- Timeline.js will genereate the markup here -->
						</div>';
	//$timeline_content = "timeline-shortcode-test".$cat;
    return $timeline_content;
}
add_shortcode('wp-timeline', 'timeline_generator');
?>