Create a multi-column listing of your categories.

[Eric]

In this tip, I will explain how to make a multi-column listing of your categories. This is useful for embedding in your website's footer or on a 404 page.

It will involve a lot of PHP so if you are already feeling squeamish , it might not be for you.

The first step is to open up your theme's functions.php file. This can usually be found here: ~/wp-content/themes/YOUR-THEME/functions.php. If it's not there, ask your theme developer because all themes are different.

Add the following 3 snippets of code to the functions.php file:

1. This function returns the total number of categories in your store.

PHP Code:

function dfr_get_total_number_of_categories() {
    global $wpdb;
    if ($total_cats = get_option('dfr_total_categories'))
        return $total_cats;
    $total_cats = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM ".$wpdb->prefix."dfr_shop_cats"));
    add_option('dfr_total_categories', $total_cats);
    return $total_cats;
} 


2. This function determines how many categories should be placed in each column based on the number of columns and the total number of categories.

PHP Code:

function dfr_number_of_categories_per_column($col='col3') {
    $columns = substr($col, -1);
    dfr_get_total_number_of_categories();
    $total_cats = get_option('dfr_total_categories');
    return ceil(($total_cats/$columns));
} 


3. The last function deletes the stored value of total cats from the database so each time the category list is rendered, we get an accurate total count.

PHP Code:

add_action('shutdown', 'dfr_delete_total_categories_count');
function dfr_delete_total_categories_count() {
    delete_option('dfr_total_categories');
} 


Now log into the Factory and go into your store.

Open the Custom CSS page and paste the following CSS code into the textarea.

#cats_in_cols .modwrp {padding:0;margin:0;border:0;float:left;}
#cats_in_cols .col1 {width:99.9%;}
#cats_in_cols .col2 {width:49.9%;}
#cats_in_cols .col3 {width:33.3%;}
#cats_in_cols .col4 {width:24.9%;}
#cats_in_cols .col5 {width:19.9%;}
#cats_in_cols .modwrp .modcont {margin:0 10px 10px 0px;padding:5px;}

Now go into VIEWS > CUSTOM VIEWS > Add a new view.

Name the new view: cats_in_cols.
Check the "Don't use layout for this view" checkbox.
Add cats_in_cols to the Custom CSS ID field.

Your view should be configured like this:



Drag a "Category list" module into the module area.

Click the template icon for the "Category list" module and paste in the following code:

<?php global $dfr_category_data_count; ?>
<div class="modwrp col3">
[category.list before='' after='' id='catcols']
	<?php global $dfr_category_data_count; $dfr_category_data_count++; ?>
	
	<a href="[category.link]" title="[category.name]">[category.name]</a><br />
	
	<?php if ($dfr_category_data_count % dfr_number_of_categories_per_column('col3') == 0) { ?>
		</div><div class="modwrp col3">
	<?php } ?>
	[category.repeat id='catcols']
[/category.list]
</div>

By default, that is set to display your category list in 3 columns. You can choose to display your category list in 1, 2, 3, 4 or 5 columns. If you want to display your store category list in 5 columns, change all three occurrences of col3 to col5.

Save the module changes.

If you are embedding your category columns into the footer of your blog, you will need to open your theme's footer.php file (or whatever file handles rendering the bottom of your blog pages) and paste in the following code wherever you want the category list to appear:

PHP Code:

<?php echo datafeedr_tag('cats_in_cols'); ?>

If you want to render the new category list somewhere in your store, you can simply call the same tag from within a Text module. Or you could also use [DFR:cats_in_cols] from within your text module or a blog post, too.

Update your store.

That's it.

Multi-column lists are NOT easy in any case, that's why this is not actually a proper html list. For further reading, I recommend this: http://www.alistapart.com/articles/multicolumnlists/

Eric

[ayorofrance]

In the end I decided to just list the categories separated by a dash...

I used the following code:

<h2>Our shop categories are:</h2>
<br>
<!-- Category List -->
[category.list id='list1']
  <?php if ($nn > 1) { echo '- '; } ?>
      <a href="[category.link]" title="[category.name]">[category.name]</a>
[/category.list]
<!-- /Category List -->

Which results in something like this:

Our shop categories are:

Category 1 - Category 2 - Category 3

I've set the category list module to show Parents only and 1 level deep, so this will only list the top level categories...

[isler45]

On my site http://www.phoneandtabletcases.com I want the next 4 company logos (htc, dell, etc) to appear next to the ones that are already there instead of below them. Do I need to follow the directions in this thread for that?

[Eric]

Hi

Yes, I think this will work for your purposes.

Eric

[isler45]

I am having some trouble getting this to work right. By default it seems like it is working. Then when I change the Category list in cats_in_cols to show only parent categories nothing shows up. Any ideas?

[Eric]

Try just setting the "Maximum tree depth" to 1.

[isler45]

I seem to be having much better luck editing the default template 6 in the category list module.

[category.list id='dfcatcol3' before='<div class="cl">' after='</div>']
<div class="cell col3">
<div class="bdr">
<br />
<div class="catdesc"><a href="[category.link]" <img src="[category.thumbnail]" alt="[category.name]"></a></div>
[category.list id='dfcatcol3' before='<ul>' after='</ul>']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
[category.repeat id='dfcatcol3']
</li>
[/category.list]
</div>
</div>
[/category.list]

I really only know some basic html so I don't know what I am doing lol. I feel like its almost perfect. Is there a simple way to center images from top to bottom using this method?

Any help from anyone would be appreciated.

http://www.phoneandtabletcases.com (There you can see how the nokia and kyocer logos are a bit off, and I guess I need a smaller apple logo)

[Eric]

Hi

To get the images more vertically centered, you should probably remove the extra <br /> tag.

Eric

[macfink]

Eric can adpat this techique to get a dynamically generated list of brands?

[Eric]

Originally Posted by macfink

Eric can adpat this techique to get a dynamically generated list of brands?

Well... right now, there is no way (without writing your own MySQL code) to dynamically generate a list of brands. You have to manually generate that list. And if you are manually generating a list of brands, it's relatively easy (much easier than this tutorial) to make a multi-column list of any data by following the original tutorial I linked to.

[ddinnov]

Originally Posted by isler45

I seem to be having much better luck editing the default template 6 in the category list module.

[category.list id='dfcatcol3' before='<div class="cl">' after='</div>']
<div class="cell col3">
<div class="bdr">
<br />
<div class="catdesc"><a href="[category.link]" <img src="[category.thumbnail]" alt="[category.name]"></a></div>
[category.list id='dfcatcol3' before='<ul>' after='</ul>']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
[category.repeat id='dfcatcol3']
</li>
[/category.list]
</div>
</div>
[/category.list]

I really only know some basic html so I don't know what I am doing lol. I feel like its almost perfect. Is there a simple way to center images from top to bottom using this method?

Any help from anyone would be appreciated.

http://www.phoneandtabletcases.com (There you can see how the nokia and kyocer logos are a bit off, and I guess I need a smaller apple logo)

This is very cool - is there an easy way to get the columns into a table?

[Eric]

That could prove to be even more difficult!

[tcsar757]

Lookin for a little help if possible.I am running a child theme and cant get this to work i think because i need to do a add_action to the function.Would you know what i need to put into it.Any help highly appreciated .
Example from functions.php = add_action("after_setup_theme", "suffu_scion_theme_setup", 15);

Thanks

[Eric]

Hi

I really don't know about that. I would ask the theme developer as it seems theme specific.

Eric

[tcsar757]

ok thanks thought it was just a php action ,I dont know much about it.