WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] The three most recent posts in different div's, how? (26 posts)

  1. Marijn Bent
    Member
    Posted 1 year ago #

    Hello everybody,

    I work at the following project:
    http://cl.ly/image/1e1X271T0k3P

    I want the three most recent post all in different div's. How can I do this? The first one is easy:

    <div id="firstfield">
    <ul>
    <?php
    global $post;
    $args = array( 'numberposts' => 1, 'offset'=> 1 );
    $myposts = get_posts( $args );
    foreach( $myposts as $post ) :	setup_postdata($post); ?>
    	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    	<li><?php $excerpt = get_the_excerpt( $deprecated ) ?></li>
    <?php endforeach; ?>
    </ul>

    Right?

    Regards,
    Marijn

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    You need to be adding the <div> within the foreach loop.
    You can't wrap a <div> outside an <li> element within a <ul> element.

  3. esmi
    Forum Moderator
    Posted 1 year ago #

    <?php $args = array( 'posts_per_page' => 3 );
    $myposts = get_posts( $args );
    foreach( $myposts as $post ) :	setup_postdata($post); ?>
    <div <?php post_class();?> id="post-<?php the_ID();?>">
    <ul>
    <?php
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <li><?php $excerpt = get_the_excerpt( $deprecated ) ?></li>
    </ul>
    </div>
    <?php endforeach; ?>
  4. Marijn Bent
    Member
    Posted 1 year ago #

    Thanks Esmi, although if I paste this piece of code in the <div id="firstfield">, will the other two post go to the <div id="secondfield"> and <div id="thirdfield">?

  5. esmi
    Forum Moderator
    Posted 1 year ago #

    Forget your previous divs. The code above will generate unique ids and classes for each of the posts.

  6. Marijn Bent
    Member
    Posted 1 year ago #

    Beautiful! Yet, it doesn't work right now.

    I took the orginal page code (I use the _S theme):

    <?php
    /**
     * The template for displaying all pages.
     *
     * This is the template that displays all pages by default.
     * Please note that this is the WordPress construct of pages
     * and that other 'pages' on your WordPress site will use a
     * different template.
     *
     * @package Jong Gooiland
     * @since Jong Gooiland 1.0
     */
    
    get_header(); ?>
    
    		<div id="primary" class="content-area">
    			<div id="content" class="site-content" role="main">
    
    				<?php while ( have_posts() ) : the_post(); ?>
    
    					<?php get_template_part( 'content', 'page' ); ?>
    
    					<?php comments_template( '', true ); ?>
    
    				<?php endwhile; // end of the loop. ?>
    
    			</div><!-- #content .site-content -->
    		</div><!-- #primary .content-area -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    And made a page template based on the code above:

    <?php
    /*
    Template Name: Voorpagina
     */
    
    get_header(); ?>
    
    		<div id="primary" class="content-area">
    			<div id="content" class="site-content" role="main">
    
    <?php $args = array( 'posts_per_page' => 3 );
    $myposts = get_posts( $args );
    foreach( $myposts as $post ) :	setup_postdata($post); ?>
    <div <?php post_class();?> id="post-<?php the_ID();?>">
    <ul>
    <?php
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <li><?php $excerpt = get_the_excerpt( $deprecated ) ?></li>
    </ul>
    </div>
    <?php endforeach; ?>
    
    			</div><!-- #content .site-content -->
    		</div><!-- #primary .content-area -->
    
    <?php get_footer(); ?>

    The page where the template is activated won't work. Do you see the problem?

    I appreciate your help very much!

  7. esmi
    Forum Moderator
    Posted 1 year ago #

    Ah - now as this is going to be the main query/loop in the template, you have to use a slightly different approach. get_posts() is reserved for secondary queries/loops - which is what I assumed this was. Try replacing:

    <?php $args = array( 'posts_per_page' => 3 );
    $myposts = get_posts( $args );
    foreach( $myposts as $post ) :	setup_postdata($post); ?>
    <div <?php post_class();?> id="post-<?php the_ID();?>">
    <ul>
    <?php
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <li><?php $excerpt = get_the_excerpt( $deprecated ) ?></li>
    </ul>
    </div>
    <?php endforeach; ?>

    with:

    <?php query_posts( $query_string . '&posts_per_page=3' );
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div <?php post_class();?> id="post-<?php the_ID();?>">
    <ul>
    <?php
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <li><?php $excerpt = get_the_excerpt( $deprecated ) ?></li>
    </ul>
    </div>
    <?php endwhile;?>
    <?php endif;?>
  8. Marijn Bent
    Member
    Posted 1 year ago #

    Sorry for the confusion and thanks for the quick fix!

    I did the things you sad, but it won't work. I still get the error. I don't know or the following image will help, although maybe it does.
    http://cl.ly/image/1u16131v0h0i

  9. esmi
    Forum Moderator
    Posted 1 year ago #

    Can you translate that for me? Do you have access to your site's error logs for a more precise error report?

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    A slight error on line 1, Esmi

    <?php query_posts( $query_string . '&posts_per_page=3' );
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    Edit:
    Missing PHP closing tag

  11. esmi
    Forum Moderator
    Posted 1 year ago #

    Um - I'm not seeing it. (Ok - it's late here).

  12. esmi
    Forum Moderator
    Posted 1 year ago #

    Ah! Got it! It should be:

    <?php query_posts( $query_string . '&posts_per_page=3' );
    if (have_posts()) : while (have_posts()) : the_post(); ?>
  13. Marijn Bent
    Member
    Posted 1 year ago #

    I have implemented te fix, but get the same error over an over again.

    It says: "An unexpected condition was encountered while the server was attempting to fulfill the request"

    The header and footer work in the 'normal' template as expected, so there isn't the error.

    Thanks!

  14. esmi
    Forum Moderator
    Posted 1 year ago #

    Do you have access to your site's error logs for a more precise error report?

  15. Marijn Bent
    Member
    Posted 1 year ago #

    I will look for it!

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    Could be an error here, Esmi;

    <ul>
    <?php
    <li>

    Excerpted from;

    <?php query_posts( $query_string . '&posts_per_page=3' );
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div <?php post_class();?> id="post-<?php the_ID();?>">
    <ul>
    <?php
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <li><?php $excerpt = get_the_excerpt( $deprecated ) ?></li>

    Unnecessary opening PHP element on line 5?

  17. Marijn Bent
    Member
    Posted 1 year ago #

    Yeaah! It works now! Both of you thanks for the great help!

  18. esmi
    Forum Moderator
    Posted 1 year ago #

    Glad we all managed to get there in the end. :-)

  19. Marijn Bent
    Member
    Posted 1 year ago #

    Just a couple of last questions :-);
    The excerpt won't show up. There is a empty line under the permalink. Is there a little fix for that?
    Further, the most important one, which styles can I use to style the box around it? The post-id will change if you have a new post. Can't I use post_on_page1 or something to style it :)?

    Thanks!

  20. esmi
    Forum Moderator
    Posted 1 year ago #

    The excerpt won't show up.

    Change <li><?php $excerpt = get_the_excerpt( $deprecated ) ?></li> to <li><?php the_excerpt();?></li>

    Can't I use post_on_page1 or something to style it :)?

    <?php query_posts( $query_string . '&posts_per_page=3' );
    if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div <?php post_class();?> id="post-<?php the_ID();?>">

    to:

    <?php query_posts( $query_string . '&posts_per_page=3' );
    $c = 0;
    if (have_posts()) : while (have_posts()) : the_post();
    $c++;
    $class = ' post-num-' . $c;?>
    <div <?php post_class( $class );?> id="post-<?php the_ID();?>">

    That should add 'post-num-1`, 'post-num-2' etc to the classes on the enclosing div.

  21. Marijn Bent
    Member
    Posted 1 year ago #

    Thanks, works exactly how you describe. But how can I style it now like this image:
    http://cl.ly/image/1e1X271T0k3P?

    I thought that I, if the code above describe how many post I want and how I mention them, the following code display the post so I could place them were I want.

    <div class="post-num-1">
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    	<ul>
    	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    	<li><?php the_excerpt();?></li>
    	</ul>
    </div>
    
    <div class="post-num-2">
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    	<ul>
    	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    	<li><?php the_excerpt();?></li>
    	</ul>
    </div>
    
    <div class="post-num-3">
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    	<ul>
    	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    	<li><?php the_excerpt();?></li>
    	</ul>
    </div>

    Or have you an other solution?

  22. esmi
    Forum Moderator
    Posted 1 year ago #

    You cam still place each posts where you want it using CSS - .post-num-1 etc

  23. Marijn Bent
    Member
    Posted 1 year ago #

    I tried it, but i get the following problem:

    .post-num-1 {
    	background-color: #FFF;
    	float:left;
    	width: 65%;
    	margin-left:40px;
    }
    
    .post-num-2 {
    	background-color: #FFF;
    	width: 40%;
    	float: left;
    }
    
    .post-num-3 {
    	background-color: #FFF;
    	width: 40%;
    	float:left;
    }
    
    .staticcustomfield {
    	width:25%;
    	height:50px;
    	background:#FFF;
    	float:right;
    }

    Basic CSS to have all the elements on the right place. What I get:
    http://cl.ly/image/2M2G0r203u3x

    The footer is between the field now, and if I look in 'Inspect element' from Chrome:
    http://cl.ly/image/0b1l1Z3g2h0c

    The content-area (and also the site-main) haven't a height, but I cant set it to xx pixels because it isn't dynamic.

  24. esmi
    Forum Moderator
    Posted 1 year ago #

    CSS without the context of the site that it's being used in is really rather meaningless. But what you are obviously dealing with now is a pure CSS issue - not a WordPress one. Try a dedicated CSS resource such as http://www.css-discuss.org/

  25. Marijn Bent
    Member
    Posted 1 year ago #

    Thanks, I will look at it!

  26. Marijn Bent
    Member
    Posted 1 year ago #

    Hi,

    I discovered the error. The following code works:

    .post-num-1 {
    	background: white;
    	float: left;
    	width: 70%
    }
    
    .post-num-2 {
    	background: white;
    
    }
    
    .post-num-3 {
    	background: white;
    }
    
    .staticcustomfield {
    	background: white;
    	float: right;
    	width: 30%;
    }

    But the post-num-2 and 3 are wrong placed. If I give them a width, it goes wrong. Can you help me with this last thing?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags