{"id":461,"date":"2009-09-22T08:40:23","date_gmt":"2009-09-22T15:40:23","guid":{"rendered":"http:\/\/www.shibashake.com\/wordpress-theme\/?p=461"},"modified":"2022-01-06T16:56:02","modified_gmt":"2022-01-07T00:56:02","slug":"display-wordpress-comments-in-a-static-web-page","status":"publish","type":"post","link":"https:\/\/shibashake.com\/wp\/display-wordpress-comments-in-a-static-web-page","title":{"rendered":"Display WordPress Comments in a Static Web Page"},"content":{"rendered":"<div  class='wp-caption frame6 alignright' style='width:306px' ><div class='shiba-outer shiba-gallery' ><div class='shiba-stage' style='width:280px'>\n<img loading=\"lazy\" alt=\"\" src=\"https:\/\/www.shibashake.com\/wp\/wp-content\/uploads\/2010\/03\/wordpress-comments4b.jpg\" width=\"280\" height=\"210\" \/>\n<div class='wp-caption-text shiba-caption'>Display WordPress Comments in a Static Web Page<\/div><\/div> <!-- End shiba-stage --><\/div><\/div>\n<p>Why would you want to link WordPress comments into a static web page?<\/p>\n<p>By linking your static web pages to WordPress comments, you get to utilize all of WordPress&#8217;s existing functionalities for moderating comments as well as for detecting spam comments. You also save yourself a lot of effort from writing all the backend functions for linking with a comment database, <a href=\"http:\/\/shibashake.com\/wordpress-theme\/wordpress-gravatars-use-your-own-default-avatar\">getting gravatar pictures<\/a>, and countless other comment operations that are provided for you through WordPress.<\/p>\n<p>To insert WordPress comments into your static web page, there are three key operations you must perform &#8211;<\/p>\n<ol>\n<li>Read comments from a WordPress page and deliver them to your static web page.<\/li>\n<li>Display the WordPress comments you received in your static web page.<\/li>\n<li>Provide an interface for users to post new WordPress comments from your static web page.<\/li>\n<\/ol>\n<p>In this article, we only focus on step 1 &#8211; reading comments from a WordPress page, packaging them up into an XML stream, and delivering that to your static web page so that they can be displayed. Steps 2 and 3 are described in detail in <a href=\"http:\/\/shibashake.com\/wordpress-theme\/spry-comment-box-code\">Spry Comment Box Code<\/a>.<\/p>\n<div class=\"alignspace\"><\/div>\n<h2>1. Load WordPress Function Library<\/h2>\n<p>First of all, load the WordPress function library into your PHP code. This requires that you have WordPress already installed at your server.<\/p>\n<p>The WordPress <strong>wp-load.php<\/strong> file is located at the root of your WordPress blog directory.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;?php\r\n\t\/\/ Load WordPress functions\r\n\trequire(&#039;wp-load.php&#039;); \r\n\r\n?&gt;\r\n<\/pre>\n<\/p>\n<div class=\"alignspace\"><\/div>\n<h2>2. Read WordPress Comments<\/h2>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n\/\/ Adapted from comments_template() in wp-includes\/comment-template.php\r\nfunction getWPcomments() {\r\n\r\nglobal $wp_query, $withcomments, $post, $wpdb, $id, $comment, $user_login, $user_ID, $user_identity;\r\n\r\n\t\/\/ Reading in WordPress comments into $comments array. \r\n\tif ( ! (is_single() || is_page() || $withcomments) )\r\n\t\treturn;\r\n\r\n\t$req = get_option(&#039;require_name_email&#039;);\r\n\t$commenter = wp_get_current_commenter();\r\n\textract($commenter, EXTR_SKIP);\r\n\r\n\t\/** @todo Use API instead of SELECTs. *\/\r\n\tif ( $user_ID) {\r\n\t\t$comments = $wpdb-&gt;get_results($wpdb-&gt;prepare(&quot;SELECT * FROM $wpdb-&gt;comments WHERE comment_post_ID = %d AND (comment_approved = &#039;1&#039; OR ( user_id = %d AND comment_approved = &#039;0&#039; ) )  ORDER BY comment_date&quot;, $post-&gt;ID, $user_ID));\r\n\t} else if ( empty($comment_author) ) {\r\n\t\t$comments = $wpdb-&gt;get_results($wpdb-&gt;prepare(&quot;SELECT * FROM $wpdb-&gt;comments WHERE comment_post_ID = %d AND comment_approved = &#039;1&#039; ORDER BY comment_date&quot;, $post-&gt;ID));\r\n\t} else {\r\n\t\t$comments = $wpdb-&gt;get_results($wpdb-&gt;prepare(&quot;SELECT * FROM $wpdb-&gt;comments WHERE comment_post_ID = %d AND ( comment_approved = &#039;1&#039; OR ( comment_author = %s AND comment_author_email = %s AND comment_approved = &#039;0&#039; ) ) ORDER BY comment_date&quot;, $post-&gt;ID, $comment_author, $comment_author_email));\r\n\t}\r\n\treturn $comments;\r\n}\r\n<\/pre>\n<\/p>\n<p>The above <i>getWPcomments()<\/i> function assumes that the WordPress post or page that we want to extract our comments from is pointed to by the global variable <b>$post<\/b>.This function will read all comments from <b>$post<\/b> and return the results in an array (<b>$comments<\/b>).<\/p>\n<p>Therefore, it is important that we first set the value of <b>$post<\/b>, and some of the other related global variables before running this function (shown below).<\/p>\n<p>Note that this <i>getWPcomments()<\/i> function is adapted from the <i>comments_template()<\/i> function in the WordPress file <b>wp-includes\/comment-template.php<\/b>.<\/p>\n<div class=\"alignspace\"><\/div>\n<h2>3. Get the WordPress Page to Process<\/h2>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n$post = get_page($_REQUEST[&quot;id&quot;]);\r\n$id = $post-&gt;ID;\r\n$withcomments = true; \r\n$comments = getWPcomments();\r\n<\/pre>\n<p>\nHere, we assume that the WordPress page ID that we want to process is passed to our PHP file through the external id parameter. For example &#8211;<\/p>\n<p><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">http:\/\/www.example.com\/example.php?id=107\r\n\r\nAlternatively, we can also access the WordPress page by title.\r\n\r\n\r\n\r\nIn this case,we would call our PHP file by passing it a title like so -\r\n\r\nhttp:\/\/www.example.com\/example.php?title=Test<\/pre>\n<\/p>\n<p>Now that we have retrieved our WordPress comments, we are ready to write them out in XML format.<\/p>\n<div class=\"alignspace\"><\/div>\n<h2>4. Write XML Stream<\/h2>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n$containerName = &quot;comment-set&quot;; $elementName = &quot;comment&quot;;\r\n\r\n\/\/ XML header\r\n$xml = &quot;&lt;?xml version=\\&quot;1.0\\&quot; encoding=\\&quot;utf-8\\&quot;?&gt;\\n&quot; . &quot;&lt;&quot; . $containerName . &quot;&gt;\\n&quot;;\r\n\r\n$xml = display_comments($xml, $elementName, $comments);\r\n\t\r\n\/\/ Close XML container\r\n$xml .= &quot;&lt;\/&quot; . $containerName . &quot;&gt;\\n&quot;;\r\n\r\nheader(&quot;Content-type: text\/xml&quot;);  \r\necho $xml;\r\n<\/pre>\n<p>\nIn line-4 we write out the XML encoding and XML container name. In line-6 we write out each of the comments contained within the $comments array.This is achieved through the display_comments function (shown below).<\/p>\n<p>In line-9 we close the XML container.<\/p>\n<p>Finally in lines-11 and 12 we write out the XML stream and pass it on to the requesting function.<\/p>\n<div class=\"alignspace\"><\/div>\n<h2>5. Display WordPress Comments Function<\/h2>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n\/* display_comments - Generates WordPress comments contained in $comments as XML elements. display_comments function is adapted from the WordPress file wp-content\/themes\/default\/comments.php.\r\n   *\/\r\nfunction display_comments($xml, $elementName, $comments) {\r\n\r\nif ($comments) :\r\n\r\n\t$commentcounter = 0;\r\n\tforeach ($comments as $comment) :\r\n\t\t$commentcounter++;\r\n\r\n\t\t$xml .= &quot;&lt;&quot; . $elementName . &quot;&gt;\\n&quot;;\r\n\t\t$xml .= &quot;&lt;id&gt;comment-&quot; . $comment-&gt;comment_ID . &quot;&lt;\/id&gt;\\n&quot;;\r\n\r\n\t\t$xml .= &quot;&lt;date&gt;&quot; . mysql2date( get_option(&#039;date_format&#039;), $comment-&gt;comment_date) . &quot;&lt;\/date&gt;\\n&quot;;  \r\n\r\n\t\t\r\n\t\t\/\/ Code fragment from get_comment_author_link() and get_comment_author() in wp-includes\/comment-template.php\r\n\t\t$xml .= &quot;&lt;cite&gt;&lt;![CDATA[&quot;;\r\n\t\t$url    = $comment-&gt;comment_author_url;\r\n\t\tif ( empty($comment-&gt;comment_author) )\r\n\t\t\t$author = &quot;Anonymous&quot;;\r\n\t\telse\r\n\t\t\t$author = $comment-&gt;comment_author;\r\n\t\tif ( empty( $url ) || &#039;http:\/\/&#039; == $url )\r\n\t\t\t$xml .= $author;\r\n\t\telse\r\n\t\t\t$xml .= &quot;&lt;a href=\\&quot;&quot; . $url . &quot;\\&quot; rel=\\&quot;nofollow\\&quot;&gt;&quot; . $author . &quot;&lt;\/a&gt;&quot;;\r\n\t\t$xml .= &quot;]]&gt;&lt;\/cite&gt;\\n&quot;;\t\r\n\r\n\t\t\r\n\t\tif(function_exists(&#039;get_avatar&#039;)) $xml .= &quot;&lt;avatarimg&gt;&lt;![CDATA[&quot; . get_avatar($comment-&gt;comment_author_email, &#039;45&#039;) . &quot;]]&gt;&lt;\/avatarimg&gt;\\n&quot;;\r\n\r\n\t\tif ($comment-&gt;comment_approved == &#039;0&#039;)\r\n\t\t\t$xml .= &quot;&lt;text&gt;Your comment is awaiting moderation.&lt;\/text&gt;\\n&quot;;\r\n\t\telse {\r\n\t\t\t$newComment = str_replace(chr(13), &#039;&lt;br \/&gt;&#039;, $comment-&gt;comment_content, $count);\r\n\t\t\t$xml .= &quot;&lt;text&gt;&lt;![CDATA[&quot; . $newComment . &quot;]]&gt;&lt;\/text&gt;\\n&quot;;\r\n\t\t}\r\n\t\t$xml .= &quot;&lt;\/&quot; . $elementName . &quot;&gt;\\n&quot;;\r\n\r\n\r\n\tendforeach; \/* end for each comment *\/\r\n\r\nelse : \/\/ this is displayed if there are no comments so far\r\n\r\n\tif (&#039;open&#039; == $post-&gt; comment_status) : \r\n\t\/\/ If comments are open, but there are no comments. \r\n\r\n\telse : \/\/ comments are closed \r\n\t\t$xml .= &quot;&lt;text&gt;&quot; . &quot;Comments are closed.&quot; . &quot;&lt;\/text&gt;\\n&quot;;\r\n\tendif;\r\nendif; \r\nreturn $xml;\r\n}\r\n<\/pre>\n<\/p>\n<h2>Example XML Stream Generated<\/h2>\n<p><pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;br \/&gt;\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;br \/&gt;\n&lt;comment-set&gt;&lt;br \/&gt;\n&lt;comment&gt;&lt;br \/&gt;\n&lt;id&gt;comment-1002&lt;\/id&gt;&lt;br \/&gt;\n&lt;date&gt;July 26, 2009&lt;\/date&gt;&lt;br \/&gt;\n&lt;cite&gt;&lt;![CDATA[Test]]&gt;&lt;\/cite&gt;&lt;br \/&gt;\n&lt;avatarimg&gt;&lt;![CDATA[&lt;img alt=&#039;&#039; src=&#039;http:\/\/www.gravatar.com\/avatar\/?d=monsterid&amp;s=45&#039; class=&#039;avatar avatar-45 avatar-default&#039; height=&#039;45&#039; width=&#039;45&#039; \/&gt;]]&gt;&lt;\/avatarimg&gt;&lt;br \/&gt;\n&lt;text&gt;&lt;![CDATA[Test Text]]&gt;&lt;\/text&gt;&lt;br \/&gt;\n&lt;\/comment&gt;&lt;br \/&gt;\n&lt;\/comment-set&gt;&lt;br \/&gt;\n<\/pre>\n<\/p>\n<div class=\"alignspace\"><\/div>\n<h2>We Are Done!<\/h2>\n<p>Now all we have to do is pass this XML stream on to the <a href=\"http:\/\/shibashake.com\/wordpress-theme\/spry-comment-box-code\">Spry comment box<\/a> within our static web page. Here is <a href=\"http:\/\/shibashake.com\/test-table.html\">an example<\/a> of what the finished product looks like. Feel free to leave me questions and comments if you should run into any errors.<\/p>\n<\/p>\n<div  class='wp-caption frame6 aligncenter' style='width:526px' ><div class='shiba-outer shiba-gallery' ><div class='shiba-stage' style='width:500px'>\n<img loading=\"lazy\" alt=\"\" src=\"https:\/\/www.shibashake.com\/wp\/wp-content\/uploads\/2022\/01\/wordpress-comments1.jpg\" class=\"alignnone\" width=\"520\" height=\"327\" \/>\n<div class='wp-caption-text shiba-caption'>Example screenshot of WordPress comments being displayed on a static web page.<\/div><\/div> <!-- End shiba-stage --><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Why would you want to link WordPress comments into a static web page? By linking your static web pages to WordPress comments, you get to utilize all of WordPress&#8217;s existing functionalities for moderating comments as well as for detecting spam comments. You also save yourself a lot of effort from writing all the backend functions [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3987,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[139],"tags":[163,164,161,165,162,166,573],"_links":{"self":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/461"}],"collection":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/comments?post=461"}],"version-history":[{"count":20,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/461\/revisions"}],"predecessor-version":[{"id":15508,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/461\/revisions\/15508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/media\/3987"}],"wp:attachment":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/media?parent=461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/categories?post=461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/tags?post=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}