Complete and flexible blogging platform for ProcessWire

Render Categories

This method renderCategories() enables you to output your Blog's Categories and their related Blog's Posts. The method can be called from any of your ProcessWire pages. Currently, it will only show Posts that have been categorised, i.e. there is no category for 'uncategoriesed' Blog Posts. This may change in the future.

 * Render a list of categories, optionally showing a few posts from each.
 * @access public
 * @param PageArray $categories
 * @param int $showNumPosts Number of posts to show from each category (default=0)
 * @return $out string
 public function renderCategories(PageArray $categories, $showNumPosts = 0)

The method takes two arguments, $categories and $showNumPosts.

The first argument $categories is required and has to be a PageArray. Internally, the method renderCategories() will use a find, group and return a list of Blog Posts ordered according to their categories.

The second argument $showNumPosts has to be an integer and defaults to zero if it is not declared. This means 'show all' Posts in each Blog Category. Since the number of Posts returned might be very high, it is recommended to provide a value that will return a reasonable amount of Posts from a particular category. 

In the example code below, we pass the PageArray made up of child pages of the Blog Categories page as the first argument $categories to renderCategories(). The code is somewhat verbose to clarify what's going on. Since this code would most likely be used in your Blog Categories template file, we could have just passed the first argument as $page->children.

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

//number of posts to list per category
$limit = 3;

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

//Render list of categories showing a maximum of 3 posts titles per category
//children = the individual category pages
echo $blog->renderCategories($categories->children, $limit);

This image shows an example styled output of the above renderCategories() call.

renderCategories() HTML output

Here's example HTML output from renderCategories().

<!-- here we see two category groups -->
<!-- 1st category group = 'Amazing' -->
<div class="category">
 <h3><a href="/pwtests/blog/categories/amazing/">Amazing</a></h3>
 <span class="num-posts">4 posts<a class="rss" href="/pwtests/blog/categories/amazing/rss">RSS</a></span>
 <ul class="category-posts posts-group">
  <li><a href="/pwtests/blog/posts/a-story-about-a-man/">A story about a man</a></li>
  <li><a href="/pwtests/blog/posts/yosemite-national-park/">Yosemite National Park</a></li>
  <li><a href="/pwtests/blog/posts/prius/">Prius</a></li>
  <li><a class="more" href="/pwtests/blog/categories/amazing/">View More</a></li>
<!-- 2nd category group = 'Best in Class' -->
<div class="category">
 <h3><a href="/pwtests/blog/categories/best-in-class/">Best in Class</a></h3>
 <span class="num-posts">6 posts<a class="rss" href="/pwtests/blog/categories/best-in-class/rss">RSS</a></span>
 <ul class="category-posts posts-group">
  <li><a href="/pwtests/blog/posts/my-cool-blog/">My cool blog</a></li>
  <li><a href="/pwtests/blog/posts/imagine/">Imagine</a></li>
  <li><a href="/pwtests/blog/posts/yosemite-national-park/">Yosemite National Park</a></li>
  <li><a class="more" href="/pwtests/blog/categories/best-in-class/">View More</a></li>
<!--etc, etc, for more category groups -->

renderCategories() CSS

Below is the CSS attributes from renderCategories() output.

div.category {}
span.num-posts {}
a.rss {}
ul.category-posts, ul.posts-group {}
a.more {} /*this is for the 'view more' posts in this category link*/


In this lesson we have looked at the method renderCategories($categories, $showNumPosts = 0). The method allows us to output grouped lists of Blog Posts ordered according to their categories.