Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Tips, Tricks & Tutorials
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
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() {
    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
  #2  
Old January 26th, 2011, 08:54 PM
ayorofrance ayorofrance is offline
 
Join Date: Sep 2010
Posts: 430
Default

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...
__________________
WordPress Security - Is your WordPress secure? Get our FREE checklist and find out.

Easy-Email - Access ALL your email accounts with one login & synchronize automatically on all your computers.
  #3  
Old March 17th, 2011, 02:53 PM
isler45 isler45 is offline
 
Join Date: Apr 2010
Posts: 29
Default

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?

Last edited by isler45 : March 17th, 2011 at 03:01 PM.
  #4  
Old March 17th, 2011, 03:53 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

Yes, I think this will work for your purposes.

Eric
  #5  
Old March 20th, 2011, 12:48 AM
isler45 isler45 is offline
 
Join Date: Apr 2010
Posts: 29
Default

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?
  #6  
Old March 20th, 2011, 08:28 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Try just setting the "Maximum tree depth" to 1.
  #7  
Old March 20th, 2011, 10:43 AM
isler45 isler45 is offline
 
Join Date: Apr 2010
Posts: 29
Default

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)
  #8  
Old September 1st, 2012, 01:43 PM
ddinnov ddinnov is offline
 
Join Date: Aug 2012
Posts: 13
Default

Quote:
Originally Posted by isler45 View Post
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?
  #9  
Old March 20th, 2011, 11:35 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

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

Eric
  #10  
Old March 26th, 2011, 04:15 PM
macfink macfink is offline
 
Join Date: Feb 2011
Posts: 685
Default

Eric can adpat this techique to get a dynamically generated list of brands?
  #11  
Old March 26th, 2011, 05:23 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by macfink View Post
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.
  #12  
Old September 1st, 2012, 01:45 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

That could prove to be even more difficult!
  #13  
Old October 23rd, 2012, 10:03 PM
tcsar757 tcsar757 is offline
 
Join Date: Dec 2010
Posts: 47
Default

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
  #14  
Old October 24th, 2012, 08:10 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

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

Eric
  #15  
Old October 24th, 2012, 06:28 PM
tcsar757 tcsar757 is offline
 
Join Date: Dec 2010
Posts: 47
Default

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


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -5. The time now is 03:53 AM.


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