Posted 1 year ago #
I am looking to create pages that will hold 3 X 3 posts.
The posts should look like this:
Post Post Post
Post Post Post
Post Post Post
I understand that I need to put some float code in my CSS.
Can someone provide me with the code I need and explain where I need to put it??
one of many possibilities:
http://www.transformationpowertools.com/wordpress/easy-coding-for-wordpress-posts-in-3-columns
Posted 1 year ago #
Thanks so much!
I hate to sound like an idiot, but where do I put the two sets of codes?
I am looking to create pages that will hold 3 X 3 posts.
you probably need to create a page template:
http://codex.wordpress.org/Pages#Page_Templates
this could in its easiest form be a copy of index.php or single.php (depending on your theme) where you add the neccessary code at the top, and replace the existing loop with the first part of the code.
the second part (the styles) should be added to style.css of your theme.
you will probably need to add more details to the styles.
it will be easier to suggest more details when knowing which theme you are working with.
a link to your site might also help.
Posted 1 year ago #
My site is http://www.beautyblossom.biz.
I'm using Manolya template. I have made 3 posts to use as testers which you will see on the page.
Here's the Loop code of the index.php:
[next time, please use the pastebin for any code longer than 10 lines. for any direct posted code, please mark the code using the 'code' button.]
<div id="content">
<?php if(is_home()) { include (TEMPLATEPATH . '/featured.php'); } ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2 class="title"><a>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h2>
<div class="postdate"> <?php the_time('F jS, Y') ?>
<?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" />
<?php edit_post_link('Edit', '', ''); } ?></div>
<
div class="entry">
<?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array('class' => 'alignleft post_thumbnail')); } ?>
<?php the_content(''); ?>
<div class="readmorecontent">
<a>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Read More ยป</a>
</div>
</div>
</div><!--/post-<?php the_ID(); ?>-->
<?php endwhile; ?>obviously, if you edit index.php, this might effect other pages as well such as archives, etc.
try and edit this section:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">using the idea of my link, change it to:
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $first = ($count%3 == 0) ? 'first' : ''; $count++; ?>
<div <?php post_class($first) ?> id="post-<?php the_ID(); ?>">and add to style.css (example only, needs to be fine-tuned):
.post.first { float:left; clear:left; width: 30%; margin-left: 0; }
.post float:left; width: 30%; margin-left: 3%; }http://codex.wordpress.org/Function_Reference/post_class
http://php.net/manual/en/language.operators.comparison.php
This topic has been closed to new replies.
