First post full width, rest in 2 columns

  • n377i

    (@n377i)


    7 years ago

    Hello! I’m just creating a blog theme from scratch. On the frontpage I’d like to display the first post in full width, the title and date above the thumbnail and an excerpt underneath. The rest of the posts I want to display in two columns with the title, date and a shorter excerpt underneath the thumbnail.

    I tried https://perishablepress.com/multiple-loops-and-multiple-columns-with-wordpress/ this method and it looks good, but the problem is, it looks the same on every page. Also it’s very old, so I guess there is a better solution. Do you have one? 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years ago

    It’s wasteful and inefficient to make multiple queries when one will do. If you add a loop counter, you can alter HTML when the count reaches certain levels, all with one query. For example, lets say there are 11 posts per page. When count==0, do HTML for a large hero post. At count==1 start HTML for the first column. At count==6, close the first column HTML and start second column. At count==10 close the second column.

    The problem with multiple columns is the lengths are difficult to closely match, even with excerpts. One solution is to set post heights to a fixed value so any extra space is distributed among the posts. Or simply output all the posts in a grid format and use jQuery’s Masonry library to get them to nicely fit together.

    Any algorithm you decide upon is going to result in the same layout on every page. The only way to avoid that is to use a different algorithm for different pages.

    pacosilva

    (@pacosilva)

    6 years, 10 months ago

    Hi, I’ve done it with: nth-child. This is the code that I used in case it works for you.

    / ************************************************* **********
    ******************** BLOG ***************************** ****
    ************************************************** ********* /
    .container {
    width: 80%;
    margin: 0 auto;
    }

    article.blog {
    }
    h2.entry-title a {
    color: black;
    }
    .list-entries article: nth-child (1) {
    min-width: 100%! important;
    margin-top: .5rem;
    }
    .list-entries article: nth-child (1) img {
    padding: 1em 3em;
    margin: 1em;
    }
    .list-entries article: nth-child (2) {
    max-width: 33%! important;
    }
    .list-entries article: nth-child (2) img {
    min-width: 33%! important;
    }

    .list-entries article: nth-child (3) {
    min-width: 66%! important;
    }

    .list-entries article: nth-child (3) img {
    min-width: 66%! important;
    }

    .list-entries article: nth-child (4) {
    max-width: 66%! important;
    }
    .list-entries article: nth-child (5) {
    max-width: 33%! important;
    }
    article.blog {
    max-width: 49%;
    margin: 0 car;
    background-color: # 0073aa;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid # 000000;
    padding: .2rem;
    margin-bottom: .5rem;
    }

    • This reply was modified 6 years, 10 months ago by pacosilva. Reason: car x auto
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘First post full width, rest in 2 columns’ is closed to new replies.