WordPress › Support » Categories in Grid View on Page

justbishop
Member
Posted 2 years 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?
kiano.ro
Member
Posted 2 years 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
justbishop
Member
Posted 2 years 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.
kiano.ro
Member
Posted 2 years ago #

try to search for other themes that allows you to do what you want. you will find something...
justbishop
Member
Posted 2 years ago #

Thanks, but I need to use the theme I'm using :)
kiano.ro
Member
Posted 2 years ago #

well, good luck then:). Come back when you have modified it to show us your work.
justbishop
Member
Posted 2 years ago #

Thank you :)

Anyone else know if the wp_list_categories template tag can be made to do something like this?
MichaelH
Volunteer
Posted 2 years ago #

Not much to say here but add this:

http://www.google.com/search?q=wordpress+display+categories+in+columns
justbishop
Member
Posted 2 years 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 :/
MichaelH
Volunteer
Posted 2 years 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/
justbishop
Member
Posted 2 years 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??)
MichaelH
Volunteer
Posted 2 years 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.

justbishop
Member
Posted 2 years 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;
        }
}

justbishop
Member
Posted 2 years 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 :(

justbishop
Member
Posted 2 years 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>
```

MichaelH
Volunteer
Posted 2 years 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>

justbishop
Member
Posted 2 years 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!
MichaelH
Volunteer
Posted 2 years ago #

You are a PHP god.

Not true.
justbishop
Member
Posted 2 years 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?) :)
MichaelH
Volunteer
Posted 2 years ago #

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

Marking resolved.
justbishop
Member
Posted 2 years ago #

Well, thankyouthankyouthankyou!!
websta
Member
Posted 2 years ago #

I noticed in justbishop's linked source that this solution modifies classes.php and includes the warning:

"This method is risky as it can easily be deleted during a hasty WordPress upgrade and as such we do not recommend it. We are presenting this core alteration as a learning experience only."

I think a better upgrade-able solution may be to use the Multi Column Category List Plugin for WordPress located here. The plugin creates a grid view category list. Huzzah!

To include icons or images with categories in grid view, see the suggestion in the comments #86-7.

Crossing my fingers.
websta
Member
Posted 2 years ago #

And I also found this plugin, which appears to offer grid views of categories: http://www.thenappycat.com/2009/wordpress/categories/visual-categories-plugin/.
justbishop
Member
Posted 2 years ago #

I believe I used the second solution provided at the link I posted above, which was template file editing only. I can't remember exactly, but I did download a clean 2.9.1 version of classes.php just now and compare it to that of my own site that I'm using this modification on, and the lines in question were identical to one another :)

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] Categories in Grid View on Page (24 posts)

Topic Closed

About this Topic

Tags

Code is Poetry