WordPress.org

1. justbishop
   Member
   Posted 2 weeks ago #

   I've searched, but not found any code or plugin to do quite what I need, and no one else has asked for quite the same thing in the forums as far as I've seen.

   I want to display post categories in a grid-type view, with an image for each. I can do this by manually creating a page, creating a table, and manually uploading a photo to display as a thumbnail and be linked to a category's URL, but that's just annoying to have to deal with and I'd love to have Wordpress automatically do it for me!

   The following isn't a Wordpress-powered site, but it's the type of thing I'm looking for:

   http://hyenacart.com/thefancypansy/

   Also (if this IS doable), would it be possible to have the category image, when clicked, display it's subcategories (if it had any) on the resulting page in the same grid style, with main categories that have no subcats just displaying the post archive as usual?

2. kiano.ro
   Member
   Posted 2 weeks ago #

   does your theme allows you to do that? if your theme is not suposed to do that, you will not be able to do what you want without knowing php

3. justbishop
   Member
   Posted 2 weeks ago #

   No, that's not part of my theme, hence me asking. I was just assuming that there would be some sort of template tag that might be able to be rigged for this involving wp_list_categories.

4. kiano.ro
   Member
   Posted 2 weeks ago #

   try to search for other themes that allows you to do what you want. you will find something...

5. justbishop
   Member
   Posted 2 weeks ago #

   Thanks, but I need to use the theme I'm using :)

6. kiano.ro
   Member
   Posted 2 weeks ago #

   well, good luck then:). Come back when you have modified it to show us your work.

7. justbishop
   Member
   Posted 2 weeks ago #

   Thank you :)

   Anyone else know if the wp_list_categories template tag can be made to do something like this?

8. MichaelH
   moderator
   Posted 2 weeks ago #

   Not much to say here but add this:

   http://www.google.com/search?q=wordpress+display+categories+in+columns

9. justbishop
   Member
   Posted 2 weeks ago #

   Ah, I hadn't thought to use the term "columns", thanks :)

   Thanks for the Google, but unless I'm missing something (which is entirely possible), everything there is still about displaying categories as list items. I'd actually like to strip the list styling, add an image to represent each category, and display them 3 or 4 across :/

10. MichaelH
    moderator
    Posted 2 weeks ago #

    The issue is associating an image with a particular category.

    Some things to consider:

    http://www.google.com/search?q=wordpress+list+categories+with+images

    http://wordpress.org/extend/plugins/category-icons/

    http://wordpresshero.com/hacks/category-images-hack.html/

    http://www.doc4design.com/articles/wordpress-list-categories-next-to-descriptions/

11. justbishop
    Member
    Posted 2 weeks ago #

    Thanks again...I'll have to play with the Category Image(s) plugin later tonight to see what I can make of that. The rest of the info linked seems to be focused more on displaying an image that represents a category with a post (or do they mean any category that CONTAINS a post??)

12. MichaelH
    moderator
    Posted 2 weeks ago #

    seems to be focused more on displaying an image that represents a category with a post

    That's true, but will want to use get_categories instead of get_the_category.

13. justbishop
    Member
    Posted 2 weeks ago #

    Thanks for the help so far! I really do appreciate it :)

    I'm a php doofus, so please bear with me...THIS is looking like it may be the way to go, but I just want to make sure that I'm on the right track.

    So I'd just make a file called "my-hacks.php" and paste the following into it (and of course the template tag into my page template used to display the category grid)? I've made the "get_categories" change as well as the folder I'd like it to pull images from and the file extention (to jpg). Please advise if this is incorrect:

    function category_images($seperator = '', $image_type = 'jpg', $image_directory = '/wp-content/uploads/') {
        $categories = get_categories();
            $image_directory = preg_replace('|/+$|', '', $image_directory);
        if ('' == $seperator) {
                    echo '<span>';
                    foreach ($categories as $category) {
                            $category->cat_name = stripslashes($category->cat_name);
                            echo "<a href='" . get_category_link(0, $category->category_id, $category->category_nicename) . "' title='View all posts in $category->cat_name'><img src='$image_directory/$category->category_nicename.$image_type' alt='$category->cat_name' /></a>";
                    }
                    echo "\n</span>";
        } else {
                    $i = 0;
                    foreach ($categories as $category) {
                            $category->cat_name = stripslashes($category->cat_name);
                            if (0 < $i) echo $seperator . ' ';
                            echo "<a href='" . get_category_link(0, $category->category_id, $category->category_nicename) . "' title='View all posts in $category->cat_name'><img src='$image_directory/$category->category_nicename.$image_type' alt='$category->cat_name' /></a>";
                    }
                    ++$i;
            }
    }

14. justbishop
    Member
    Posted 2 weeks ago #

    Ok, here's what I put in a file I created called "my-hacks.php" and uploaded to my root WP folder (are the php open/close tags right??):

    <?php
    
    function category_images($seperator = '', $image_type = 'jpg', $image_directory = '/wp-content/uploads/') {
        $categories = get_categories();
            $image_directory = preg_replace('|/+$|', '', $image_directory);
        if ('' == $seperator) {
                    echo '<span>';
                    foreach ($categories as $category) {
                            $category->cat_name = stripslashes($category->cat_name);
                            echo "<a href='" . get_category_link(0, $category->category_id, $category->category_nicename) . "' title='View all posts in $category->cat_name'><img src='$image_directory/$category->category_nicename.$image_type' alt='$category->cat_name' /></a>";
                    }
                    echo "\n</span>";
        } else {
                    $i = 0;
                    foreach ($categories as $category) {
                            $category->cat_name = stripslashes($category->cat_name);
                            if (0 < $i) echo $seperator . ' ';
                            echo "<a href='" . get_category_link(0, $category->category_id, $category->category_nicename) . "' title='View all posts in $category->cat_name'><img src='$image_directory/$category->category_nicename.$image_type' alt='$category->cat_name' /></a>";
                    }
                    ++$i;
            }
    }
    
    ?>

    And here's the template tag I added to a new page template:

    <?php
    category_images(' ');  ?>

    And here's the error it gives me:

    "Fatal error: Call to undefined function category_images() in /home/*******/public_html/knitsandwhatknot/wp-content/themes/fixed-blix/shop.php on line 21"

    I'm lost :(

15. justbishop
    Member
    Posted 2 weeks ago #

    Nevermind, I did it using THIS link instead!! I've got my categories auto-displaying with scaled down category representative pix! I know it's silly but I'm pretty d*mn proud of myself :D

    And thanks again for the help, MichaelH!!

    However, I have a new issue...I want a grid display, 4 columns across and a dynamic amount of rows, depending on how many categories are added in the future. I figured a straight HTML table would be the way to go here (rather than a ton of complicated CSS), but am REALLY lost on how to get the code to only display 4 cells across and then add a new row. Right now I've got 5 test categories set up, and they're all displaying on the same row together. Here's my template code for retrieving the categories. I know it's silly and wrong, but I just don't know where to go from here:

    <table border="0" width="100%">
    
    <?php $categories = get_categories('hide_empty=0');
    echo '<tr>';
    foreach ($categories as $cat) {
    echo "<td width=\"25%\" align=\"center\"><a href=\"" . get_category_link( $cat->term_id ) . "\"><div class=\"description\"><img src=\"wp-content/uploads/". $cat->description .".jpg\" width=\"100px\"></div>" . $cat->cat_name . "</a></td>";
    }
    echo '<tr>';
    ?>
    
    </table>

16. MichaelH
    moderator
    Posted 2 weeks ago #

    Use the modulus (%) operator:
    

    <table border="0" width="100%">
    
    <?php $categories = get_categories('hide_empty=0');
    echo '<tr>';
    $count=0;
    foreach ($categories as $cat) {
    echo "<td width=\"25%\" align=\"center\"><a href=\"" . get_category_link( $cat->term_id ) . "\"><div class=\"description\"><img src=\"wp-content/uploads/". $cat->description .".jpg\" width=\"100px\"></div>" . $cat->cat_name . "</a></td>";
    $count++;
    if ($count % 4 == 0)
    {
    echo '<tr>';
    }
    }
    echo '<tr>';
    
    ?>
    
    </table>

17. justbishop
    Member
    Posted 2 weeks ago #

    You are a PHP god.

    *bows down to*

    I'm doing this for a client site, but it's a trade for custom cloth diapers, or I'd Paypal you part of the money, lol!

18. MichaelH
    moderator
    Posted 2 weeks ago #

    You are a PHP god.

    Not true.

19. justbishop
    Member
    Posted 2 weeks ago #

    Well, compared to me, yes! Seriously, though...I have about $5 in my Paypal account. It's yours if you'd like it (hey, it'll almost buy you lunch at McD's, right?) :)

20. MichaelH
    moderator
    Posted 2 weeks ago #

    Appreciate the gesture, but your thanks is the better, and appropriate, compensation!

    Marking resolved.

21. justbishop
    Member
    Posted 2 weeks ago #

    Well, thankyouthankyouthankyou!!

Reply

You must log in to post.