Render Tags

The method renderTags() as the name suggests, will output an alphanumerical list of Tags used by Posts in your Blog.

<?php
 /**
 * Render a list of tags.
 *
 * Each of the tags has a numPosts property containing the number of posts used by the tag.
 * Also renders an alphabetical jumplist of tags.
 * As seen on the frontend page: /blog/tags/
 *
 * @access public
 * @param PageArray $tags
 * @return string $jump . $out
 *
 */
 public function renderTags(PageArray $tags)

renderTags() accepts only one argument, $tags. This must be a PageArray. Internally, the method will find and return list all Tags in your Blog whether they are in use or not. The method also outputs an alphanumerical jumplist at the very top of the list to enable users to easily navigate to a specific Tag group as well as a count of the number of Posts using that Tag (see image below).

The code below shows how to call this method.

<?php
//first we call MarkupBlog
$blog = $modules->get('MarkupBlog');

//get the tags page. 
$tags = $pages->get('/blog/tags/');

//Render list of tags and their related posts
//children = the individual tag pages
echo $blog->renderTags($tags->children);

This image shows a styled example output of renderTags().

renderTags() HTML output

Here's example HTML output of renderTags().

<!-- jumplinks-->
<p class="jumplinks">
 <a href="./#letter_1">1</a>
 <a href="./#letter_A">A</a>
 <a href="./#letter_B">B</a>
 <a href="./#letter_C">C</a>
 <a href="./#letter_F">F</a>
 <a href="./#letter_G">G</a>
 <a href="./#letter_H">H</a>
 <a href="./#letter_M">M</a>
 <a href="./#letter_O">O</a>
 <a href="./#letter_P">P</a>
 <a href="./#letter_S">S</a>
 <a href="./#letter_T">T</a>
 <a href="./#letter_W">W</a>
</p>

<!-- alphanumerically grouped list of tags -->
<h3 id="letter_1">1</h3>
<ul class="tags posts-group">
 <li><a href="/pwtests/blog/tags/1-hit-wonder/">1 Hit Wonder</a><span class="num-posts">1 post</span></li>
</ul>

<h3 id="letter_A">A</h3>
<ul class="tags posts-group">
<li><a href="/pwtests/blog/tags/australia/">Australia</a><span class="num-posts">1 post</span></li>
</ul>

<h3 id="letter_B">B</h3>
<ul class="tags posts-group">
 <li><a href="/pwtests/blog/tags/bestsellers/">Bestsellers</a><span class="num-posts">2 posts</span></li>
 <li><a href="/pwtests/blog/tags/big-stage/">Big Stage</a><span class="num-posts">1 post</span></li>
 <li><a href="/pwtests/blog/tags/bonkers/">Bonkers</a><span class="num-posts">0 posts</span></li>
</ul>

<h3 id="letter_C">C</h3>
<ul class="tags posts-group">
 <li><a href="/pwtests/blog/tags/cars/">Cars</a><span class="num-posts">1 post</span></li>
 <li><a href="/pwtests/blog/tags/cool/">Cool</a><span class="num-posts">1 post</span></li>
</ul>

<h3 id="letter_F">F</h3>
<ul class="tags posts-group">
 <li><a href="/pwtests/blog/tags/fast/">Fast</a><span class="num-posts">1 post</span></li>
 <li><a href="/pwtests/blog/tags/football/">Football</a><span class="num-posts">1 post</span></li>
 <li><a href="/pwtests/blog/tags/forests/">Forests</a><span class="num-posts">2 posts</span></li>
</ul>
<!-- etc., etc -->

renderTags() CSS

The typical CSS attributes of the renderTags() HTML output is shown below in the order in which they will be output (hence repetition in some places) in the HTML.

p.jumplinks {} /*for the jumplinks*/
h3#letter_1 {}
ul.tags, ul.posts-group {}
span.num-posts {}
h3#letter_A {}
ul.tags, ul.posts-group {}
span.num-posts {}
h3#letter_B {}
ul.tags, ul.posts-group {}
span.num-posts {}
span.num-posts {}
span.num-posts {}
h3#letter_C {}
ul.tags, ul.posts-group {}
span.num-posts {}
span.num-posts {}
h3#letter_F {}
/*etc for other letters as applicable*/

Summary

Using the method renderTags($tags), we can output an alphanumerically grouped listing of Tags available in our Blog. Although the method can be called in any Page on your site, it makes more sense to use it on your Blog's Tags Page.

« Render Categories

Render Authors »