Support » Fixing WordPress » Category Grid

Viewing 10 replies - 1 through 10 (of 10 total)
  • The columns can probably be created with the
    WP Post Columns plugin.

    To assign a category to the page which has the columns, use the Page Links To plugin.

    The WP Post Columns plugin doesn’t work.

    Also the Page Links To plugin is nice, but I don’t want to redirect it outside the wordpress frame work.

    OK. I think you will need to either find a theme that has a grid style template that you can adapt, or code one from scratch. I have installed the Zack-990 theme you are using, and will take a look to see how difficult it will be to modify it.

    As for the Page Links To plugin, it is ideal for having a page show a category. It will also link to almost anything else, but will certainly link a category to a page.

    Here is a code snippet derived from index.php that should give you a start with the 4 column page. Make a copy of your index.php to fourcolumn.php. Add in the lines at the top to identify it as a template. Replace the lines between <div id="home_content"> and <div class="archive_nav"> with these:

    <div id="home_content">
    
          <?php $paged = (intval(get_query_var('paged'))) ? intval(get_query_var('paged')) : 1;
          query_posts("cat=39&paged=$paged");
          if (have_posts()) : ?>
             <?php while (have_posts()) : the_post();
                if( ++$count > 4) $count = 1;
                if ($count == 1) echo '<div class="row">'; ?>
                   <div class="col-post">
                      <p><b><?php the_title(); ?></b></p>
                      <?php the_excerpt('More Photos'); ?>
                   </div>
                <?php if ($count == 4) echo '</div><!-- End row --><div class="clear"></div>'; ?>
            <?php endwhile; ?>
            <?php if ($count < 4) echo '</div><!-- End row --><div class="clear"></div>'; ?>
    
             <div class="archive_nav">

    Use your own category number in the query.

    Create a new page and assign this as the template. You will also need to add styles for col-post and row to style.css. The samples below should be a starting point:

    .row {
       width: 100%;
       margin: 2px;
    }
    
    .col-post {
       width: 22%;
       float: left;
       margin: 2px;
       border: 1px solid green;
       padding: 0 .7em 0 .7em;
       min-height: 150px;
       text-wrap: unrestricted;
       overflow: hidden;
    }

    Thanks for this code snippet. I created another post looking for just what you posted here. Here’s a link to a working result.

    http://www.bethelchurch.info/sermon-videos/

    @vtxyzzy You are awesome thanks for the start. Now how do I assign this code to just the All Spaces page?

    @amcreative Is there any special way you did the thumbnails for that page?

    1. Make a copy of your index.php to fourcolumn.php.
    2. Add in the lines at the top to identify it as a template.
      <?php
      /*
      Template Name: fourcolumn
      */?>
    3. Replace the lines between <div id=”home_content”> and <div class=”archive_nav”> with the ones above.
    4. In your All Spaces page, assign ‘fourcolumn’ as the template for the page.
    5. Add the .row and .col-post definitions to your style.css

    @kwibbles If you look down in the right hand corner of wordpress on a post you will see a heading “Post Thumbnail”. Right under there, you will see a link for “Set Thumbnail”. When that window opens up, upload your graphic and assign it as a thumbnail for your post.

    In your template where you want the thumbnail to appear, place the following code.
    <?php the_post_thumbnail(); ?>

    And that will give you a post thumbnail.

    As I posted the message I figured it out, thanks a lot vtxyzzy you’ve been a great help!

    You are welcome!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Category Grid’ is closed to new replies.