logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$20
Wordpress Category Grid with images

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>

This question has been answered.

Evostance | 05/15/11 at 1:42pm Edit


(4) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    05/15/11
    2:08pm
    AdamGold says:


    <?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?

    • 05/15/11 2:10pm

      Evostance says:

      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/

    • 05/15/11 2:16pm

      Evostance says:

      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; }

    • 05/15/11 2:27pm

      Evostance says:

      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

    • 05/15/11 2:59pm

      AdamGold says:

      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++;

      }

      ?>

    • 05/15/11 3:10pm

      Evostance says:

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

    • 05/15/11 3:12pm

      AdamGold says:

      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++;



      }



      ?>

    • 05/15/11 3:18pm

      Evostance says:

      That still only produces one column

    • 05/15/11 3:21pm

      AdamGold says:

      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.

  • avatar
    Last edited:
    05/16/11
    3:26am
    Denzel Chia says:

    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

    Previous versions of this answer: 05/16/11 at 3:26am

    • 05/16/11 3:35am

      Denzel Chia says:

      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

    • 05/16/11 6:28am

      Evostance says:

      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

    • 05/16/11 8:01am

      Denzel Chia says:

      Hi,

      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



      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.


      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!

      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!


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


      Thank you for wasting my time!

    • 05/16/11 8:15am

      Evostance says:

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


      Thank you for your ignorance

    • 05/16/11 8:19am

      Evostance says:

      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

    • 05/16/11 11:15am

      Denzel Chia says:


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


      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.


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


      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.
      You ask for "A", we give you "A". We do not ask you whether you need "B" or not. We do not ask for clarification. You need to provide a detail question. 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.

      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?


      Again, thanks for wasting my time.

    • 05/16/11 12:17pm

      Denzel Chia says:

      @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.


      With answers like that you are harming the forum.


      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.

  • avatar
    Last edited:
    05/16/11
    11:49am
    Just Me says:

    @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.

  • avatar
    Last edited:
    05/16/11
    12:22pm
    Lawrence Krubner says:

    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.

This question has expired.



AdamGold, AdamGold had additional discourse to offer.

Evostance voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.