Support » Fixing WordPress » 4 posts on homepage, all with different backgrounds

  • Resolved emzdesign


    Hi everyone

    Thanks in advance for your help.

    I want to pull the latest 4 posts to the homepage, but I want each one to have a different background image.

    Now, I don’t want to use custom fields for this as this is going to be a blog for multiple users and I want each image to be different but something I control.

    Is there a way in the query to pull out the latest 4 posts but have each one with a different background image?


Viewing 10 replies - 1 through 10 (of 10 total)
  • Will the 4 posts always be from four different users, or will this be random? If there are always the same user, you could possibly use a div class with 4 loops.

    For another possible way based on author take a look at Conditional_Tags: An_Author_Page

    And then do something with CSS classes in combination with PHP in your index.php.


    start loop
    if (is_author(1)) {
    $background_image = background image 1
    } elseif (is_author(2)) {
    $background_image = background image 2
    <div class="frontpage_post <? echo $background_image">post text</div>
    end loop

    Edit: Link List of Authors might work better for you.


    Thanks for the response. Unfortunately they are always going to be by different users as well.

    I appreciate your time though πŸ™‚



    Forum Moderator

    simply add a counter to the loop; and use it to give each post’s div a unique css id. use that to control the backgrounds using css.

    obviously depends on what you mean with:

    I want each image to be different but something I control

    Basically what I meant was if I were to use custom fields I’d have to depend on the users adding their own image all the time.

    I just want 4 images that are there all the time that aren’t controlled by custom fields or what category/author etc. is.

    I’m not sure what you mean by adding a counter to the loop. Are there any examples of this anywhere?


    How about using the post ID then? This is a unique value. You should be able read the post ID from the URL (unless your using pretty URLs), or the admin backend without having to open the post itself.

    So pseudocode:

    if (ID = '234') {
    $background_image = background image 1
    } elseif (ID = '500') {
    $background_image = background image 2
    start loop
    <div class="frontpage_post <? echo $background_image">post text</div>
    end loop

    So are these 4 posts the regular posts that you’d ordinarily see on the home page, or are they additional to other content you have displayed on the home page?

    If you don’t concern about cross-browser support (IE and older versions of good browsers), then you may try css:

    .post:nth-of-type(1){ … }
    .post:nth-of-type(2){ … }
    .post:nth-of-type(3){ … }
    .post:nth-of-type(4){ … }

    You don’t necessary need CSS selectors, a simple PHP counter and some basic conditional statements will be fine..

    Once i know the answer to my above query i’ll provide an example.


    Thanks for the responses.

    Basically, these 4 posts will be the very latest posts that were written on the site, so they will always change and will always be by different users, different categories etc.

    Hope this helps?

    Thanks πŸ™‚

    So you’re just letting the regular query run on that page? No custom query or query_posts? Just the standard loop?

    Assuming that’s true for the moment, you’ll have a line like this..

    while( have_posts() ) : the_post();

    Update that to..

    $i = 0;
    while( have_posts() ) : the_post(); $i++;

    Then look for the appropriate element you want to change the styling on..

    For example, let’s assume it looks like this for the moment..

    <div class="<?php post_class() ?>">


    <div class="post">

    All you need to do is factor in the counter..

    <div class="mainclass back-<?php echo $i; ?>">

    Which would then produce two classes for each element..

    .mainclass {
         do all CSS except the background image here
         so, stuff like padding, border, width, etc.. (this will apply to all of the posts)


    .back-1 {
      /* the first element background properties */
    .back-2 {
      /* the second element background properties */
    .back-3 {
      /* the third element background properties */
    .back-4 {
      /* the forth element background properties */

    If you’d like a more tailored example, post your template code into a pastebin and post the link back, i’ll help you implement the code.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘4 posts on homepage, all with different backgrounds’ is closed to new replies.