Styling Categories using Images

  • Resolved displayname

    (@displayname)


    16 years, 3 months ago

    First of all, thank you for looking at this post. I basically want to render all the categories on my home page (instead of posts) and style them with an image, category title, and the category link. This is something similar to what I’m looking for:

    <?php
foreach((get_the_category('child_of=16')) as $category) {
    echo '<div class="item"><div class="background"></div>';
    echo '<a href="https://example.com/?cat=' . $category->cat_ID . '"> ';
    echo '<img src="https://example.com/images/' . $category->cat_ID . '.jpg" alt="' . $category->cat_name . '" />';
    echo '</a>';
    echo '<div class="content">';
    echo '<h2>';
    echo '<a href="https://example.com/?cat=' . $category->cat_ID . '"> ';
    echo $category->cat_name . ' ';
    echo '</a>';
    echo '</h2>';
    echo '</div></div>';
}
?>

    Excuse me for all the echos, but I’m a beginner in php and wanted to take everything step by step. The only problem with the code above is that it has to be inside the Loop so it will only render categories of that post. But I want to render ALL the child categories of ID 16.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter displayname

    (@displayname)

    I’ve created a secondary code that might work better:

    <?php
$category = wp_list_categories('style=none&echo=0&child_of=16&depth=1&title_li=');
$category = preg_replace('/(<a[^>]*>)/','<div class="item"><div class="background"></div><a href="https://example.com/?cat=' . $category_id . '"><img src="https://example.com/images/cat/' . $category_id  . '.jpg" alt="' . $category->cat_name . '" /></a><div class="content"><h2><a href="https://example.com/?cat=' . $category_id . '">',$category);
$category = str_replace('</a><br />', '</a></h2></div></div>', $category);
echo $category;
?>

    The problem with this is that $category_id doesn’t work and the link would then end up to be https://example.com/?cat=. You can see that I’m missing an ID at the end. I’ve also tried $category_id->cat_ID and various other stuff just because I don’t know php and I’m trying things. Please help.

    Thread Starter displayname

    (@displayname)

    bump

    I’m in the same boat as you, displayname. buddha trance has been kind enough to help me figure out how to display only one category on my main page, but I’m still puzzled as to how I can display all the categories as tabs that a user can click to view.

    I’m about to try your secondary code, but have you had any success with the_category(', ')?

    It would be helpful if you included a link to your blog and/or mentioned what theme you are using. It matters.

    Thread Starter displayname

    (@displayname)

    Ok. I figured it out. Using the second code I posted, I got the id by:

    $wp_query->get_queried_object_id()

    that should work.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling Categories using Images’ is closed to new replies.