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
[code language="php"]
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");
[/code]
Next, you need to include your token in the header of your website.
[code language="php"]
function ziggeo_script_header() {
echo "<script>ZiggeoApi.token = 'INSERT_TOKEN_HERE';</script>\n";
}
add_action('wp_head', "ziggeo_script_header");
[/code]
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:
[code language="php"]
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);
}
[/code]
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:
[code language="php"]
function ziggeo_comment_template($comment_template) {
return dirname(__FILE__) . "/templates/comments_template.php";
}
add_filter("comments_template", "ziggeo_comment_template");
[/code]
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:
[code language="php"]
<?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>
[/code]