How our Wordpress Plugin works

Wordpress plugins are written in php. We describe a simplified version of our publicly available plugin here. You create a main php file which we will call ziggeo.php that allows you to set up everything your plugin needs. As you know from our documentation, the first thing every Ziggeo-based application has to do is to include our javascript and stylesheet files. We also add a custom css file for the Wordpress plugin, which will be located in the root directory of our plugin and be called styles.css

function ziggeo_enqueue_scripts() {
    wp_register_script('ziggeo-js', "//assets.ziggeo.com/js/ziggeo-json2-betajs-player.min.js", array('jquery'));
    wp_enqueue_script('ziggeo-js');
    wp_register_style('ziggeo-css', "//assets.ziggeo.com/css/ziggeo-betajs-player.min.css", array());
    wp_enqueue_style('ziggeo-css');
    wp_register_style('ziggeo-styles-css', plugins_url('styles.css', __FILE__), array());
    wp_enqueue_style('ziggeo-styles-css');
}

add_action('wp_enqueue_scripts', "ziggeo_enqueue_scripts");

Next, you need to include your token in the header of your website.

function ziggeo_script_header() {
	echo "<script>ZiggeoApi.token = 'INSERT_TOKEN_HERE';</script>\n";
}

add_action('wp_head', "ziggeo_script_header");

So far, so good. How to include video comments? We will use the default comments database to store our video comments as well. A video comment will be saved as a string [ ziggeo ]video-token[/ ziggeo ]. So in order to display video comments, we will have to replace all comments of such type by the actual video player:

add_filter('comment_text', 'ziggeo_content_filter');
add_filter('thesis_comment_text', 'ziggeo_content_filter');

function ziggeo_content_replace($matches) {
	return "";
}

function ziggeo_content_filter($content) {
	return preg_replace_callback("|\\[ziggeo\\](.*)\\[/ziggeo\\]|", 'ziggeo_content_replace', $content);
}

Last, we need to enable the user to actually post video comments. For that, we write our own template file ./templates/comments_template.php and include it as follows:

function ziggeo_comment_template($comment_template) {
	return dirname(__FILE__) . "/templates/comments_template.php";
}

add_filter("comments_template", "ziggeo_comment_template");

The comments template we create is a little tricky. It includes the original comments template imposed by the Wordpress theme and then uses jQuery to modify the comments section in-place:

<?php

if (file_exists(TEMPLATEPATH . '/comments.php'))
	include_once TEMPLATEPATH . '/comments.php';
elseif(file_exists(TEMPLATEPATH . '/includes/comments.php'))
	include_once TEMPLATEPATH . '/includes/comments.php';

	$current_user = wp_get_current_user();
?>

<script type="text/template" id="comment-ziggeo-template">
	<div class="comment-navigation">
		<ul class="comment-nav-menu">
			<li>
				<a id="comments-text-link">
					<span class="dashicons dashicons-text"></span>
					Text Comment
				</a>
			</li>
			<li>
				<a id="comments-video-link">
					<span class="dashicons dashicons-video-alt"></span>
					Video Comment
				</a>
			</li>
		</ul>
	</div>
	<div id="comments-text-container"></div>
	<div id="comments-video-container"></div>
</script>

<script type="text/template" id="ziggeo-recorder">
	<ziggeo
		ziggeo-width=480
		ziggeo-height=360
		ziggeo-limit=120
		ziggeo-form_accept="#commentform"
		ziggeo-tags="wordpress,<?= $current_user->user_login ?>"
	></ziggeo>
</script>

<script>
	jQuery("label[for='comment']").remove();
	jQuery(".comment-form-comment").before(jQuery("#comment-ziggeo-template").html());
	jQuery("#comments-text-container").append(jQuery(".comment-form-comment"));
	jQuery("#comments-text-container").append(jQuery(".form-allowed-tags"));
	jQuery("#comments-text-link").on("click", function () {
		jQuery("#comments-text-container").css("display", "");
		jQuery("#comments-video-container").css("display", "none");
		jQuery("#comments-video-container").html("");
		jQuery("#commenttype").val("text");
		jQuery("#comment").val("");
	});
	jQuery("#comments-video-link").on("click", function () {
		jQuery("#comments-video-container").css("display", "");
		jQuery("#comments-video-container").html(jQuery("#ziggeo-recorder").html());
		jQuery("#comments-text-container").css("display", "none");
		jQuery("#commenttype").val("video");
		jQuery("#comment").val("");
	});
	ZiggeoApi.Events.on("submitted", function (data) {
		jQuery("#comment").val("[zig" + "geo]" + data.video.token + "[/zig" + "geo]");
	});
</script>