WordPress.org

Forums

[resolved] List Categories (with images) on multiple columns (3 posts)

  1. avatarstuff
    Member
    Posted 2 years ago #

    Hello!
    Hope someone could answer my pretty complicated question.

    I have a page with a custom template in which I display all the categories in a list, with images.

    For images associated with each category, I have used this plugin:
    http://wordpress.org/extend/plugins/categories-images/

    To display the categories with images I have this code in the template:

    <?php
    $args=array(
      'orderby' => 'name',
      'order' => 'ASC',
       'exclude' => '54',
    )
    ?>
     <?php foreach (get_categories( $args ) as $cat) : ?>
    <h3><a href="<?php echo get_category_link($cat->term_id); ?>"><?php echo $cat->cat_name; ?></a></h3>
    <a href="<?php echo get_category_link($cat->term_id); ?>"><img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" /></a>
     <?php endforeach; ?>

    The result can be found here: http://bit.ly/Wxwsck and works great.
    But I would rather have the categories listed as a grid or as multiple columns. Can anyone advice on how to update my existing code for this?

    Thanks!

  2. Michael
    Forum Moderator
    Posted 2 years ago #

    possibly wrap a span or div aroung each category output and style that with a fixed width and a float:left;

    <?php
    $args=array(
      'orderby' => 'name',
      'order' => 'ASC',
       'exclude' => '54',
    )
    ?>
     <?php foreach (get_categories( $args ) as $cat) : ?>
    <span class="grid"><h3><a href="<?php echo get_category_link($cat->term_id); ?>"><?php echo $cat->cat_name; ?></a></h3>
    <a href="<?php echo get_category_link($cat->term_id); ?>"><img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" /></a></span>
     <?php endforeach; ?>

    add these new styles to style.css of your theme:

    span.grid {
    width: 170px;
    display: block;
    float: left;
    margin-right: 14px;
    height: 180px;
    margin-bottom: 20px;
    overflow:hidden;
    }
  3. avatarstuff
    Member
    Posted 2 years ago #

    Thank you, worked like a charm :)

Topic Closed

This topic has been closed to new replies.

About this Topic