View Single Post
Old January 20th, 2011, 03:08 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
Join Date: Feb 2008
Posts: 16,902
Default Create a multi-column listing of your categories.

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() {
    if (
$total_cats get_option('dfr_total_categories'))
$total_cats $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM ".$wpdb->prefix."dfr_shop_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);
$total_cats get_option('dfr_total_categories');

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:
dfr_delete_total_categories_count() {

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:
HTML 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="[]" title="[]">[]</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']
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: