Datafeedr Support Forums

Datafeedr Support Forums (http://www.datafeedr.com/forums/index.php)
-   Tips, Tricks & Tutorials (http://www.datafeedr.com/forums/forumdisplay.php?f=66)
-   -   Create a multi-column listing of your categories. (http://www.datafeedr.com/forums/showthread.php?t=3730)

Eric January 20th, 2011 03:08 PM

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

#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="[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 January 26th, 2011 08:54 PM

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

I used the following code:
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:

Code:

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 March 17th, 2011 02:53 PM

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 March 17th, 2011 03:53 PM

Hi

Yes, I think this will work for your purposes.

Eric

isler45 March 20th, 2011 12:48 AM

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 March 20th, 2011 08:28 AM

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

isler45 March 20th, 2011 10:43 AM

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 March 20th, 2011 11:35 AM

Hi

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

Eric

macfink March 26th, 2011 04:15 PM

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

Eric March 26th, 2011 05:23 PM

Quote:

Originally Posted by macfink (Post 19323)
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 September 1st, 2012 01:43 PM

Quote:

Originally Posted by isler45 (Post 19016)
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 September 1st, 2012 01:45 PM

That could prove to be even more difficult! :eek:

tcsar757 October 23rd, 2012 10:03 PM

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 October 24th, 2012 08:10 AM

Hi

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

Eric

tcsar757 October 24th, 2012 06:28 PM

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


All times are GMT -5. The time now is 04:24 AM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.