Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Wordpress Category Grid with images WordPress

  • SOLVED

Im looking for someone to make me a Wordpress page that will take all active categories from a specific parent, and lay them out in 2 column.

Each category will need to have the title showing and an image for each category (Another plugin such as Category Images II can be used for this)

This needs to be dynamic, so categories get added and removed automatically

Each category needs to be formated as so with the image and title linkable to the category:


<div class="articles-post">
<div class="articles-posttitlebox">TITLE_HERE</div>
IMAGE_HERE
</div>

Answers (4)

2011-05-15

AdamGold answers:


<?php
$sub_categories = get_categories(array('child_of' => X));
$i = 0;
?>
<div style="float: left">
<?php
foreach( $sub_categories as $category ) {
?>
<div class="articles-post">
<div class="articles-posttitlebox"><a href=<?php echo get_category_link( $category->term_id ); ?>" title="<?php echo sprintf( __( "View all posts in %s" ), $category->name ); ?>><?php echo $category->name; ?></a></div>
IMAGE_HERE
</div>
<?php
$i++;
}
?>
</div>
<div style="float:left">
<?php
foreach( $sub_categories as $category ) {
if( $i > Y ) {
?>
<div class="articles-post">
<div class="articles-posttitlebox"><a href=<?php echo get_category_link( $category->term_id ); ?>" title="<?php echo sprintf( __( "View all posts in %s" ), $category->name ); ?>><?php echo $category->name; ?></a></div>
IMAGE_HERE
</div>
<?php
}
}
?>
</div>

X is the number of the parent category.
Y is the number of categories you want in a column.

About the image, didn't really understand. Did you already install the plugin?


Evostance comments:

Ah this seems to be a better way.

I have already installed the plugin, so its just a matter of incorporating the plugin to show the images

http://wordpress.org/extend/plugins/category-images-ii/other_notes/


Evostance comments:

Also, the above code doesn't show any categories.

Just so that you're aware. The CSS for my HTML is

.articles-post {width:100%; height:200px; border:#3a5897 thick solid; margin-bottom:10px; }
.articles-posttitlebox {width:100%; height:40px; background-color:#3a5897; }


Evostance comments:

And I need it to structure the categories left to right

So, Category 1 in the left column, category 2 in the right column, category 3 in the left column, category 4 in the right column etc


AdamGold comments:

try this code:

<?php
$args=array(
'child_of' => X,
);
$sub_categories = get_categories($args);

$i = 1;
foreach( $sub_categories as $category ) {

?>

<div class="articles-post" style="float:left">

<div class="articles-posttitlebox"><a href=<?php echo get_category_link( $category->term_id ); ?>" title="<?php echo sprintf( __( "View all posts in %s" ), $category->name ); ?>><?php echo $category->name; ?></a></div>
<?php ciii_category_images( 'category_ids=' . $category->cat_ID ); ?>
</div>

<?php
if( $i == 2 ) {
?>
<div style="clear:both"></div>
<?php
$i = 1;
}
$i++;

}

?>


Evostance comments:

This only shows 1 column. It doesnt split it into 2


AdamGold comments:

Yup, my bad. Should be:
$args=array(

'child_of' => X,

);

$sub_categories = get_categories($args);



$i = 0;

foreach( $sub_categories as $category ) {



?>



<div class="articles-post" style="float:left">



<div class="articles-posttitlebox"><a href=<?php echo get_category_link( $category->term_id ); ?>" title="<?php echo sprintf( __( "View all posts in %s" ), $category->name ); ?>><?php echo $category->name; ?></a></div>

<?php ciii_category_images( 'category_ids=' . $category->cat_ID ); ?>

</div>



<?php

if( $i == 2 ) {

?>

<div style="clear:both"></div>

<?php

$i = 0;

}

$i++;



}



?>


Evostance comments:

That still only produces one column


AdamGold comments:

Use the first code and try to get rid of the CSS you posted above. If it helps, I will post the modified CSS you should have.

2011-05-16

Just Me answers:

@Denzel, you may feel like a hotshot coz you are on top of the list of experts but you are way out of line here.

The question was perfectly clear. No need to be rude. You misread it, misinterpreted it, went along coding, ended up with the wrong thing. Nothing Evostance could have prevented.

With answers like that you are harming the forum.

2011-05-16

Denzel Chia answers:

Hi,

Please use the below codes.
I had tested and proof to be working.
Just put the results in an array container and print it out in two columns according to array numbers.

The explanation is in the comments,

<?php
$catcon = array(); //this is for containing the results first.
//get the sub categories of parent
//change number child_of=32 to your parent category number
//hide_empty=0 means show empty categories, change to 1 to hide empty categories
$categories= get_categories('child_of=32&hide_empty=0');
foreach ($categories as $category) {
$cat['nicename'] = $category->category_nicename;
$cat['name'] = $category->cat_name;
$cat['id'] = $category->cat_ID;
array_push($catcon,$cat); //put results into $catcon
}

$col1_start = 0; //start of column 1 array count, do not change this.
$col1_end = 2; // end of column 1 array count, change this accordingly.
$col2_start = 2; //start of column 2 array count, must be same as column 1 end count
$col2_end = 4; // end of column 1 array count.

//print column 1
echo "<div id='column_1' style='float:left;margin-right:50px;'>";
echo "<h1>Column 1</h1>";
for($i = $col1_start; $i<$col1_end; $i++){
?>
<div class="articles-post">
<div class="articles-posttitlebox">
<?php echo $catcon[$i]['name']; ?>
</div>

<?php
if(function_exists('ciii_category_images')):
ciii_category_images( 'category_ids='.$catcon[$i]['id']);
endif;
?>

</div>
<?php
}
echo "</div>";


//print column 2
echo "<div id='column_2' style='float:left;'>";
echo "<h2>Column 2</h2>";
for($j = $col2_start; $j<$col2_end; $j++){
?>
<div class="articles-post">
<div class="articles-posttitlebox">
<?php echo $catcon[$j]['name']; ?>
</div>

<?php
if(function_exists('ciii_category_images')):
ciii_category_images( 'category_ids='.$catcon[$j]['id']);
endif;
?>

</div>
<?php
}
echo "</div>";
?>


You need to change child_of=32 to your parent category id.

You need to change the $col1_start, $col1_end, $col2_start, $col2_end, numbers accordingly,
so as to produce the correct amount of sub categories.

for example if totai sub categories is 10,
then $col1_start = 0, $col1_end = 6, $col2_start = 6, $col2_end = 11

Hope you understand.

Thanks.
Denzel


Denzel Chia comments:

Hi,

Please use this version instead,

I had added automatic calculations for the two columns.
just need to change the child_of=32 to your parent category ID.


<?php
$catcon = array(); //this is for containing the results first.
//get the sub categories of parent
//change number child_of=32 to your parent category number
//hide_empty=0 means show empty categories, change to 1 to hide empty categories
$categories= get_categories('child_of=32&hide_empty=0');
foreach ($categories as $category) {
$cat['nicename'] = $category->category_nicename;
$cat['name'] = $category->cat_name;
$cat['id'] = $category->cat_ID;
array_push($catcon,$cat); //put results into $catcon
}

$total = count($categories);
$col1_start = 0;
$col1_end = ($total/2);
$col2_start = $col1_end;
$col2_end = $total+1;

//print column 1
echo "<div id='column_1' style='float:left;margin-right:50px;'>";
echo "<h1>Column 1</h1>";
for($i = $col1_start; $i<$col1_end; $i++){
?>
<div class="articles-post">
<div class="articles-posttitlebox">
<?php echo $catcon[$i]['name']; ?>
</div>

<?php
if(function_exists('ciii_category_images')):
ciii_category_images( 'category_ids='.$catcon[$i]['id']);
endif;
?>

</div>
<?php
}
echo "</div>";


//print column 2
echo "<div id='column_2' style='float:left;'>";
echo "<h2>Column 2</h2>";
for($j = $col2_start; $j<$col2_end; $j++){
?>
<div class="articles-post">
<div class="articles-posttitlebox">
<?php echo $catcon[$j]['name']; ?>
</div>

<?php
if(function_exists('ciii_category_images')):
ciii_category_images( 'category_ids='.$catcon[$j]['id']);
endif;
?>

</div>
<?php
}
echo "</div>";
?>


Thanks.
Denzel


Evostance comments:

Thanks but this needs to be 100% automatic as they end user won't be able to go in and start modifying code if they add more categories


Denzel Chia comments:

Hi,

<blockquote>Thanks but this needs to be 100% automatic as they end user won't be able to go in and start modifying code if they add more categories</blockquote>

<strong>
Are you trying to be funny here? Did you mention anything about this in your question? What you ask is for a Wordpress page that will take all active categories from a specific parent, and lay them out in 2 column. At the most, I will code you a page template with the answer I provide.
</strong>

<strong>If you are trying to get an answer with admin option to control the parent category id, than you should say that at the very beginning of your question! And I will not waste my time answering this question! Because for a miserable $20, you are not going to get a solution with admin option interface!</strong>

<strong>I had already provided you a working solution for this 'Question" and any expert here can test my script to proof that it is working!</strong>

<strong>
Let me tell you this, no point changing your question, or ask for a refund, because I will contest against it.
</strong>

Thank you for wasting my time!


Evostance comments:

<blockquote>This needs to be dynamic, so categories get added and removed automatically</blockquote>

Thank you for your ignorance


Evostance comments:

No need to be so rude.
This has made sense across other websites, all you need to do is ask for clarification.

If I was going to do it manually, i would just add them


Denzel Chia comments:

<blockquote>
This needs to be dynamic, so categories get added and removed automatically
</blockquote>

For your information, PHP is a dynamic programming language, if you don't know please read this wiki page http://en.wikipedia.org/wiki/Dynamic_programming_language
Anything written with PHP is dynamic. You said this needs to be dynamic, and yes PHP is dynamic.

If you add sub-categories in your WordPress Admin to the parent category, according to my script it will automatically be added to the columns! There is no need to modify any code right?

So did I provide you with a wrong answer? Am I ignorant? You can say I am rude, but you cannot say I am ignorant. I am rude because I am angry at the fact that I feel taken for a ride because your question does not state that it needs to be handled by users.

<blockquote>
This has made sense across other websites, all you need to do is ask for clarification.
</blockquote>

Well, this does not make any sense for this website. Here you ask a question, we provide an answer for this question. Anything not written within the question will not be considered.
<strong>You ask for "A", we give you "A". We do not ask you whether you need "B" or not.</strong> We do not ask for clarification. <strong>You need to provide a detail question.</strong> In case you did not realize that this site is not the same as any other "forum", so please don't assume that it makes sense to withhold information.

<strong>This is a paid question site with a fix price, we only answer what is written in the question, other than that you can post a new paid question. If you are paying us by hourly rate, which is not how this site works, you can by all means, clarify anything you want at any point of time.

What you are doing here is what we call scope creep, understand?</strong>

Again, thanks for wasting my time.


Denzel Chia comments:

@Just Me,

I don't feel like a hotshot, I worked my way up there, which took me months to do that.
It may seem perfectly clear to you, but it is not at all clear to me.
I do provide good answer, and I am normally very polite in this site.
If you are interested to know, you can read my previous answers.

I admit that I am rude this time round, but I am just expressing my views.

<blockquote>
With answers like that you are harming the forum.
</blockquote>

I don't think I will harm this site, this may "harm" my reputation, but certainly not this site, I represent myself as an individual, I don't represent you or any other person here.

Thanks for your lecture.

2011-05-16

Lawrence Krubner answers:

I'd ask that everyone on this website address one another using a respectful tone. Where there are disagreements regarding the prize offered, those should be discussed in a civil tone.