WordPress – styling by category


Posted on 19th June, by admin in Tutorials. No Comments

I’ve spent the best part of this morning working out how to add a post’s category to its h2 tag’s class – which then allows me to do category-specific styling. Essentially I wanted each headline to be a different colour based on its category – simple result, slightly convoluted solution.

Anyways, it took a while so I thought I’d share it here to save others the hassle!

You first need to add the following to your functions.php file

<?php
function the_category_unlinked($separator = ‘ ‘) {
$categories = (array) get_the_category();

$thelist = ”;
foreach($categories as $category) {    // concate
$thelist .= $separator . $category->category_nicename;
}

echo $thelist;
}
?>

Basically this takes the results of the usual the_category() query – i.e. an unordered list – and strips out all the list formatting and presents the results as a nice list of the categories, with each category separated by a space.

You can then add this to your h2 (or whatever tag you want to style) class=”ADD HERE” in your index.php file (or wherever you need)

<?php the_category_unlinked(‘ ‘); ?>

This pulls the category info as formatted by the function you just wrote in the functions.php file – i.e. without any list formatting.

You then just need to add the relevant class styling info (e.g. .categoryname{some styling}) to your styles.css file and you’re good to go.

Hopefully this was useful.





Leave a Reply



A selection of posts

Google Analytics – things that I think are essential

There are a couple of things that I would say are really, really important to set up if you’re using Google Analytics and want...

Mobile doesn’t just mean smaller screens

The issue of the mobile web has been just that, an issue, for years now. In fact its been an issue for so long...

Technology

“Technology is not a selection of gadgets but a body of knowledge ” (Dan O’Hara, TEDx Manchester)