Question

I need to add HTML to the Category names within my WordPress theme, so that I can define the name as an icon (via the Twitter bootstrap).

Example code as follows:

<a href="link">
<i class="icon-briefcase"></i>
</a>

This would present the Category name as a linked icon.

Is there any way to do this. I’ve searched endlessly and the only WordPress plugins I can find allow HTML to be added to the Category description only.

Thanks in advance.

Answer 1

I think what you’re trying to do you can easily solve like this:

<?php 
foreach((get_the_category()) as $category) { 
    echo '<a href="link">';
    echo '<i class="icon-briefcase">' . $category->cat_name . '</i>';
    echo '</a>'; 
} 
?>

This will make all the category names appear like linked icons, like you said. If you want each name to have a different icon you can of course add a conditional statement to render different HTML based on the category name or ID.

EDIT:

Because you want to use the Twitter Bootstrap, you need to assign css classes to the links in order to the display the icon. There are two ways you can do this. One of ’em being that you could name your categories the same as the icons. For example, a category named ‘briefcase’, would render a link with the class ‘icon-briefcase’. The code:

<?php 
    // Iterate through the available categories
    foreach((get_the_category()) as $category) { 
        echo '<a href="link">'; // Display a link
        echo '<i class="icon-' . $category->cat_name . '">' . $category->cat_name . '</i>'; // Create the <li>
        echo '</a>';
    } 
    ?>

The second way, and I think a bit better for content purposes (more freedom for choice of cat names), would be to use a conditional statement in the code to assign icons to certain categories. For example:

<?php 
        // Iterate through the available categories
        foreach((get_the_category()) as $category) {
            // First define a default css name class to use
            $iconclass = 'icon-default';
            // Then using an if statement, assign a new css class name to the variable based on the name of the category
            if($category->cat_name == 'Travel') { $iconclass = 'icon-briefcase'; } 

            echo '<a href="link">'; // Display a link
            echo '<i class="'. $iconclass . '">' . $category->cat_name . '</i>'; // Create the <li>
            echo '</a>';
        } 
        ?>

I hope this is clear enough.