Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm wondering how I can output all of the categories, with different markup depending on the category.

I have a page where at the top some years are listed (the years will be the categories, each year a separate category), each of these years are radio inputs, when the user clicks a year the content below is styled appropriately based on year.

See static version here: http://thecompanyireland.com/draft/index1.html

For the dynamic, wordpress-driven version I'll need to change the outputted html for each category. Is this possible?

Here's the current (static) html:

<input id="type-1" name="s1" type="radio" class="type-1">
<label for="type-1" class="label-1"> 2010 </label>

<input id="type-3" name="s1" type="radio" class="type-3">
<label for="type-3" class="label-3"> 2011 <span>.</span> </label>

<input id="type-4" name="s1" type="radio" class="type-4">
<label for="type-4" class="label-4"> 2012 <span>.</span> </label>

<input id="type-5" name="s1" type="radio" class="type-5">
<label for="type-5" class="label-5"> 2013 <span>.</span> </label>

<input id="type-all" name="s1" type="radio" class="type-all" checked="checked">
<label for="type-all" class="label-all">ALL <span>.</span></label>

<div class="clear"></div>

<ul id="photos" class="items">
<li class="cat-4"><a href="single2.html"><img src="images/11.jpg"></a></li><!--
--><li class="cat-1"><a href="single2.html"><img src="images/22.jpg"></a></li><!--
--><li class="cat-5"><a href="single2.html"><img src="images/33.jpg"></a></li><!--
--><li class="cat-3"><a href="single2.html"><img src="images/44.jpg"></a></li><!--
--><li class="cat-5"><a href="single2.html"><img src="images/55.jpg"></a></li><!--
--><li class="cat-1"><a href="single2.html"><img src="images/66.jpg"></a></li><!--
--><li class="cat-5"><a href="single2.html"><img src="images/77.jpg"></a></li><!--
--><li class="cat-4"><a href="single2.html"><img src="images/88.jpg"></a></li><!--
--><li class="cat-3"><a href="single2.html"><img src="images/99.jpg"></a></li><!--
--><li class="cat-5"><a href="single2.html"><img src="images/110.jpg"></a></li><!--
--><li class="cat-4"><a href="single2.html"><img src="images/111.jpg"></a></li><!--
--><li class="cat-4"><a href="single2.html"><img src="images/112.jpg"></a></li><!--
--><li class="cat-5"><a href="single2.html"><img src="images/113.jpg"></a></li><!--
--><li class="cat-3"><a href="single2.html"><img src="images/114.jpg"></a></li>
share|improve this question
I can't answer your question but maybe this would work instead. mintthemes.com/isotope-for-wordpress –  epilektric Sep 6 '13 at 1:57

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.