Title: HTML Output
Last modified: August 30, 2016

---

# HTML Output

 *  [okose1](https://wordpress.org/support/users/okose1/)
 * (@okose1)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/html-output-3/)
 * Great Plugin!
 * However, I’ve had to modify the plugin directly in order to style the HTML output.
 * Can you add CSS classes to your HTML tags so that we can style the index easily?
 * Here’s an [index page](http://www.arabelleskinsense.co.uk/scents-library/) i’m
   working on. I don’t want to lose any changes I’ve made but if this feature can
   be added that would be great :D.
 * Thanks
 * [https://wordpress.org/plugins/post-index/](https://wordpress.org/plugins/post-index/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [iTux](https://wordpress.org/support/users/itux/)
 * (@itux)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/html-output-3/#post-6381195)
 * Hey there,
 * sure, as there a no classes yet, we can use yours. Which tags did you annotate?
 * Best wishes
    Thomas
 *  Thread Starter [okose1](https://wordpress.org/support/users/okose1/)
 * (@okose1)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/html-output-3/#post-6381213)
 * The tags I added classes to were:
 * p.pi-filter {}
    .pi-filter a {} .pi-column h4 {} .pi-column {} .pi-column ul 
   li {}
 *     ```
       /**
       	 * writes the index to stdout.
       	 *
       	 * @param int $maxColumns determines the amount of columns
       	 */
       	function printItem($item, $itemCount, $categoryName, $maxColumns, $showLetter, $headerTag = 'h4') {
       		echo '<p>';
       		$categoryId = uniqid();
   
       		if(!empty($this->pageDescription)) {
       			echo str_replace( '${Category}'
       							, $categoryName
       							, str_replace( '${PostCount}'
       										 , $this->getPostLabel($itemCount)
       										 , $this->pageDescription
       										 )
       							);
   
       			if($itemCount > 0)
       				echo '<hr />';
       		}
   
       		if($itemCount > 0)
       		{
       			echo '<p class="pi-filter">' . __(' ', 'post-index') . ' ';
   
       			$groups = array_keys($item);
       			$countOfGroups = count($groups);
   
       			for($i = 0; $i < $countOfGroups; $i++) {
       				echo '<a href="#letter_' . $categoryId . '_' . $groups[$i] . '">' . $groups[$i] . '</a>';
       				if($i < ($countOfGroups-1)) {
       					echo ' ';
       				}
       				echo ' ';
       			}
   
       			echo '</p>' . "\n";
   
       			$itemCountPerGroup = 2;							// used for the calculation of items per column.
       			$maxPostsPerColumn = floor(($countOfGroups * $itemCountPerGroup + $itemCount) / $maxColumns);
       			$columnPercentage = (100 / $maxColumns) - 2;  	// 2 is a offset needed for the padding.
   
       			if($maxColumns > 1) {
       				// start first column
       				echo '<div class="pi-column" style="float: left; width: ' . $columnPercentage . '%; padding: 5px;">';
       			}
   
       			$currentItemsPerColumn = 0;		// contains the amount of posts of the current column.
       			$currentColumn = 1;				// indicates the current column.
   
       			foreach($item as $index => $posts)
       			{
       				$currentItemsPerColumn += $itemCountPerGroup;
   
       				if($showLetter) {
                           echo '<a name="letter_' . $categoryId . '_' . $index .'"></a><'. $headerTag .'>' . $index;
   
                           if($this->showGroupCount == 1) {
                               echo ' <small>(' . count($posts) . ')</small>';
                           }
   
                           echo  '</'.$headerTag.'>' . "\n";
       				}
   
       				echo '<ul>'."\n";
       				foreach($posts as $post)
       				{
       					echo '<li><a href="' . $post['permalink'] . '">' . $post['title'] . '</a>';
       					if(!is_null($post['author'])) {
       						/* translators: a book 'by {author}' */
       						echo ' ' . sprintf(__('by %s', 'post-index'), $post['author']);
       					}
   
       					$linkList = $post['linkList'];
       					if(count($linkList) > 0)
       					{
       						echo '<br /><div style="font-size: smaller;">';
   
       						for($i = 0; $i < count($linkList); $i++)
       						{
       							$link = $linkList[$i];
       							echo $this->getSeparator($i, count($linkList), $this->infoSeparator);
       							echo '<a href="' . $link['url'] . '" target="_blank">' . $link['name'] . '</a>';
       						}
       						echo '</div>';
       					}
       					echo '</li>'."\n";
   
       					$currentItemsPerColumn++;
       				}
       				echo '</ul>';
   
       				// check a column break only on complete groups...
       				if($maxColumns > 1 && $currentItemsPerColumn >= $maxPostsPerColumn) {
       					$currentItemsPerColumn = 0;
       					$currentColumn++;
       					if($currentColumn < $maxColumns) {
       						echo '</div><div class="pi-column" style="float: left; width: ' . $columnPercentage . '%; padding: 5px;">';
       					} else {
       						echo '</div><div class="pi-column" style="float: left; width: ' . $columnPercentage . '%; padding: 5px;">';
       					}
       				}
       			}
   
       			if($maxColumns > 1) {
       				echo '</div><div style="clear: both;"></div>';
       			}
       		}
       		echo '</p>';
       	}
       }
       ?>
       ```
   
 * Hope this helps.
 * Thanks for a great plugin!
 *  Plugin Author [iTux](https://wordpress.org/support/users/itux/)
 * (@itux)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/html-output-3/#post-6381247)
 * Thanks for sharing, I’ll add it to the dev version today or tomorrow. The next
   update is scheduled for September.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘HTML Output’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/post-index.svg)
 * [Post Index](https://wordpress.org/plugins/post-index/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/post-index/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/post-index/)
 * [Active Topics](https://wordpress.org/support/plugin/post-index/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/post-index/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/post-index/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [iTux](https://wordpress.org/support/users/itux/)
 * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/html-output-3/#post-6381247)
 * Status: not resolved