WordPress.org

1. jonssondesign
   Member
   Posted 6 months ago #

   Hi everyone!

   I'm trying to develope my one wordpress theme, and i can't figure out how i should do to make some posts on the home page bigger than the rest.

   Lets say that i want to display 15 posts on the home page.

   The latest post should be big. Something like, 550px in width, and 300px in height.

   Then i want to make post nr 2 to 4 like 550px and 200px..

   And finaly, i want the rest of the posts (10 posts) in the size 550x100px.

   Is this possible? And, can someone help me?

   Best regards,
   Fredrik Jonsson

2. jonssondesign
   Member
   Posted 6 months ago #

   Anybody?

3. mrwweb
   Member
   Posted 6 months ago #

   I've never had to do something quite like that before (beyond modifying just the first post, where I used this technique).

   This depends on whether you want to change only the look or the actually output of these (e.g. are you showing thumbnails and an expert in only some of the posts).

   If you're using the same content and just changing the styles, I would probably use the :nth-child CSS selector. As an example:
   

   .post {width: 550px; height:100px;} /* the default height */
   
   .post:first-child { height:300px; } /* overrides height of first article */
   
   .post:nth-child(2),.post:nth-child(3),.post:nth-child(4) { height:200px; } /* overrides height of articles 2-4 */

   If you actually need to modify the output, I would probably use query_posts (and the offset parameter) to run three loops based off the main home page query and then alter the content and classes of each to allow CSS styling of the different sections.

   Good luck!

4. jonssondesign
   Member
   Posted 6 months ago #

   @mrwweb Well, i think what you explaned will work.. I will try this and come back to confirm it!

   Thank you!

Reply

You must log in to post.