category & tag lists in sidebar [ by shortcode ]

Category:

Suppose we have a sidebar list of category which has custom bullet styles.

<ul class="list-group text-justify">
	<li class="list-group-item category-list"><a href=""><i class="fa fa-forward"></i> Web Design</a></li>
	<li class="list-group-item category-list"><a href=""><i class="fa fa-forward"></i> Branding</a></li>
	<li class="list-group-item category-list"><a href=""><i class="fa fa-forward"></i> Marketing</a></li>
	<li class="list-group-item category-list"><a href=""><i class="fa fa-forward"></i> Animation</a></li>
	<li class="list-group-item category-list"><a href=""><i class="fa fa-forward"></i> Graphics Design</a></li>
	<li class="list-group-item category-list"><a href=""><i class="fa fa-forward"></i> Mobile Apps</a></li>
</ul>

This is not achievable via wp default category widget. We can make a shortcode to do this

/* Shortcode for special format for categories */

function category_viewer($atts, $content=null){
	ob_start();
	$params = shortcode_atts( array(
		"num" => 5
	), $atts);
?>

<ul class="list-group text-justify">

	
<?php

	$args = array(
				'orderby' => 'name',
				'parent' => 0
			);

	$categories = get_categories( $args );

	foreach ( $categories as $category ) {
		$str = '<li class="list-group-item category-list"><a href="';
		$str .= get_category_link( $category->term_id ) ;
		$str .= '"><i class="fa fa-forward"></i> ';
		$str .= $category->name;
		$str .= '</a></li>';

		echo $str;
	}

?>

</ul>	
	
<?php
$rtn = ob_get_clean();
return $rtn;
}
add_shortcode("category", "category_viewer");

 

Tags:

This is a custom formatted tag list to be displayed at sidebar.

<ul class="list-inline tags-list-inline text-justify">
	<li class="list-group-item tags-list"><a href="">Apps,</a></li>
	<li class="list-group-item tags-list"><a href="">Design,</a></li>
	<li class="list-group-item tags-list"><a href="">web,</a></li>
	<li class="list-group-item tags-list"><a href="">Animation,</a></li>
	<li class="list-group-item tags-list"><a href="">Portfolio,</a></li>
	<li class="list-group-item tags-list"><a href="">Mobile,</a></li>
	<li class="list-group-item tags-list"><a href="">Marketing,</a></li>
	<li class="list-group-item tags-list"><a href="">Theme,</a></li>
	<li class="list-group-item tags-list"><a href="">UI/UX,</a></li>
	<li class="list-group-item tags-list"><a href="">Wordpress,</a></li>
</ul>

We will use same format as for category. We will get tags by “get_tags( $args)” and then extract each tags permalink by “get_tag_link( $tag->term_id )” and tag name by “$tag->name”

/* Shortcode for special format for Tags */

function shortcode_tags($atts, $content="null"){
	ob_start();
	$params = shortcode_atts(array(
		"num" => 10
	), $atts);
?>

<ul class="list-inline tags-list-inline text-justify">

<?php 

$args = array(
		'orderby' => 'name',
		'parent' => 0,
		'number' => $params['num']
		);

	$tags = get_tags( $args );

	foreach ( $tags as $tag ) {
		$str = '<li class="list-group-item tags-list"><a href="';
		$str .= get_tag_link( $tag->term_id ) ;
		$str .= '">';
		$str .= $tag->name;
		$str .= ',</a></li>';

		echo $str;
	}


?>

</ul>

<?php
$rtn = ob_get_clean();
return $rtn;
}
add_shortcode("tags", "shortcode_tags");