WordPress.org

1. wp-rory
   Member
   Posted 4 months ago #

   Hi all,

   I was just wondering if anybody had any idea how to go about laying out a template so that posts are displayed in a tabular, grid-style fashion on the designated posts page, and/or categories/archives/search results pages, instead of the standard vertical list fashion?

   I would really like to have the posts laid out in a grid with each 'grid square' (maybe three columns and three rows of them) having the main post picture in a thumbnail and the hyperlinked title of the post underneath. Unfortunately, I don't really know enough PHP to make it a reality. So I was just wondering if anybody could offer any pointers?

   Many thanks,

   All the best,

   Rory. :)

2. mercime
   Member
   Posted 4 months ago #

   That would involve more of HTML/CSS than PHP. You should add a div wrap around the results and style them to float left and add right and bottom margins. e.g.
   - in archive.php, right after start of loop (if have post stuff)
   

   <div class="new-wrapper">
   <h2><a href="the permalink stuff do not copy this"><?php the_title(); ?></a>
   //etc etc
   </div> <!-- closing div of new-wrapper -->

   - in your theme's style.css, you add the following declaration
   .new-wrapper { float: left; width: 200px; height: 200px; margin: 0px 20px 20px 0px; }
   change width, height, margin values as you like.

3. wp-rory
   Member
   Posted 4 months ago #

   Hi mercime,

   Thanks a lot for your suggestion. It all looks good and surprisingly simple! My only question is do I have to declare individual post permalinks in the a href= section you put there? Is there any way to have WordPress simply display all posts in the category, the relevant search results, most recent or whatever (is this what's called the WordPress loop?). I didn't want to have to manually declare the indidvidual posts I want displayed.

   Many thanks again,

   Rory. :)

4. mjshozda
   Member
   Posted 4 months ago #

   Check out a theme called Magazine Basic. It has a grid format. You could probably hack his style sheet to figure out how it's done.

   Check out my site at http://www.desertdogjournal.com for an example. There is also an option for three across.

   Template shows the first image as a thumbnail, title is hyperlink, and includes an excerpt or first part of the text. Sounds like just what you want. Template has php files for each option so you just need to find where the call out is in the CSS and copy that into your template.

5. wp-rory
   Member
   Posted 4 months ago #

   Hi mjshozda,

   Thanks very much for your suggestion. I will try it out.

   I would still like to hear from mercime if still there...

   Many thanks,

   Rory. :)

6. mercime
   Member
   Posted 4 months ago #

   Hi wp-rory, the general format for this grid depending on the markup - this is an example, add markups in your template file and add declarations in style.css as you want it
   

   <div class="new-wrapper">
   <h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
   <p>By <?php the_author_posts_link(); ?>, <?php the_time('F j, Y'); ?></p>
   <p><?php the_excerpt(); ?></p>
   <?php comments_popup_link('Post a comment', 'One comment', '% comments', '', 'Comments off'); ?>
   </div> <!-- closing div of new-wrapper -->

7. wp-rory
   Member
   Posted 4 months ago #

   mercime, it works a treat!

   Thanks so much!

   My next task is to put a picture in, but I should be able to do that now things are set up.

   Thanks again and all the best,

   Rory. :)

8. michelletripp
   Member
   Posted 4 months ago #

   Hi mercime,

   I'm amazed at your simple explanation. It worked perfectly the first time around. I wish everyone would answer questions so clearly and not assume readers already know where the code belongs.

   Any chance you can help me with the code (and specific placement in relation to your previous code) to create a colored box in my style sheet to go under the post that's now sitting in the new wrapper you showed us how to create? Also, any extra code you could provide that shows how to set padding in the colored box around the post (and how to make the color of that specific post text white) would be AWESOME.

   Thanks!!

   Michelle

9. michelletripp
   Member
   Posted 4 months ago #

   Mercime,

   I just figured out the background code. For anyone who's curious, I added: background:#000000; padding:20px; in front of the style sheet code Mercime originally provided. It looks like this now:

   \\
   .new-wrapper {background:#424242; padding:20px; float: left; width: 600px; height: 323px; margin: 0px 20px 20px 0px; }
   \\

   Can I get help to the next level? I'm trying to figure out the code (and specific placement in relation to Mercime's previous code) to create a three-column section (for three side-by-side posts) within the body of the page that sits below the wrapper you just showed us how to create? I want the category name in red at the top of each column, with a small photo sitting above each of the three post excerpts (with "read more" at the bottom of each. Does this involve both the style sheet and the index.php? If you can show how to do that, it would be AWESOME.

   If you have the extra time and can also show how to call a specific category for each of those columns, that would be cool, too. You do such a great job of explaining!

10. mybenson
    Member
    Posted 3 months ago #

    mjshozda,

    I have been scouring the internet for a week looking for exactly the 3-column format on your site! Thank you so much for posting that link. I'm borrowing your HTML and CSS and modifying it for my site, but I'm 90% clueless when it comes to PHP. Any help on that front? Thanks :)

11. trickynek
    Member
    Posted 1 month ago #

    works great...i knew there was a simple answer...thanks mercime!

Reply

You must log in to post.