Using HTML within WordPress’ Category name field

1 Views

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:

Read More
<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.

Post Views: 1

Related posts

Leave a Reply

3 comments

  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.

  3. I just had a similar kind of requirement to add a big capital letter at the beginning on some category names, (but not others) in the same list. The easiest way I found of doing this was using CSS. This is what I ended up doing

    #projects-term-4 h5 a:before {
    content:'H';
    font-size:80px;
    display:block;
    margin-bottom:10px;
    color:white;
}

#projects-term-5 h5 a:before {
    content:'S';
    font-size:80px;
    display:block;
    margin-bottom:10px;
    color:white;
}

... etc

    You could probably impliment a very simple workaround using this method without knowing any php coding or installing any extra plugins. you’ll just need to inspect the html code of the generated page to get the class names and id’s you need.