CODEWITHSUNDEEP
phpcsswordpress
Techuser
Techuser

Reputation: 125

How to display first post in different format on wordpress page?

I would like my first post to be differently styled and positioned above the current posts. I only like to get first post on the top in custom styled design, and the rest post below just as they already are. Top post width will be 1188px. I would be really glad if anybody knows how to do that. thank you.

Here is the picture what I want, first picture shows the current situation and the next picture shows what I want to achieve.

picture one picture two

My current php entries are here:

<?php get_header(); ?>
<!-- Begin Content -->
<div id="content-a">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="imgdiv"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image() ?>" width="250"></a></div>
<div class="p-heading"><h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12"><?php $totalcomments = get_comments_number(); echo $totalcomments; ?></div>

</div>

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link('Naslednja stran') ?></div>
<div class="alignright"><?php previous_posts_link('Prejšnja stran') ?></div>
<div class="clear"></div>
</div>

    <?php else : ?>

</div>
<div id="content">

<div class="post">
<div class="p-heading"><h1 class="center">Ni najdeno</h1></div>
<div class="p-content"><p class="center">Oprostite, ampak iščete nekaj kar ni tukaj.</p>
</div>
</div>
    <?php endif; ?>

         </div>

<!-- End Content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Upvotes: 0

Views: 517

Answers (1)

Exprator
Exprator

Reputation: 27513

<?php $i=1; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ($i == 1){

// here do the custom look you want to give to 1st post, i am sorry i dont know html
<div class="post">
<div class="imgdiv"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image() ?>" width="250"></a></div>
<div class="p-heading"><h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12"><?php $totalcomments = get_comments_number(); echo $totalcomments; ?></div>

</div>
<?php } else { ?>

<div class="post">
<div class="imgdiv"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image() ?>" width="250"></a></div>
<div class="p-heading"><h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12"><?php $totalcomments = get_comments_number(); echo $totalcomments; ?></div>

</div>
<?php } $i++; ?>
<?php endwhile; ?>

Upvotes: 1

Related Questions