Custom Home Page Template with Loop

Hello!

So as I am continuing my journey of learning Beans, I've decided to try and create a custom homepage but have run into new things perplexing me.

Due to the fact that I wanted to make the homepage somewhat complicated I thought it would be cleanest and easiest for it to have a separate document outside of the functions.php file (otherwise, if in the functions.php file it would not only get long, but it would be a massive amount of items tacked onto the 'beans_header_after_markup'.)

The goal for the homepage is to have:

[header]

[full-width slider]

[full-width container holding static content]

[a mini loop (separate of the blog posts page) containing just the latest 6 posts with the featured image and title, nothing else.]

[one final section holding static content]

[footer]

The problem that is tripping me up is how to display the latest few posts. I could see building a function in the functions.php file then calling it into the template file, but I've been unsuccessful in getting that to work (it tells me "Fatal error: Call to undefined function" despite having it in the functions file.) I've also tried calling the loop directly into the template, but nothing gets displayed.

What would be the suggested best method to accomplish this task? And would it be better to have this all in the functions file instead of it's own template page? Any help would be greatly appreciated.

Hi Caroline,

Sorry for the late reply, I was very busy over christmas and wanted to give you a proper answer.

You should try to move as much stuff as possible away from your functions.php to keep it as clean as possible. Here is an example home template I put together for you. To make sure it applies to your home page, add this file (it must be named as home.php) to your child theme and set your Admin->Settings->Reading->Front page displays option to Your latest posts.

Refer to the inline comments in the template which should be self explanitory. Let me know if anything isn't clear 😉

Happy coding,

Hi Thierry,

Wow, thank you so much! This is all so very helpful and interesting stuff to examine. Sorry for all my questions as I'm slowly learning how to do all of this. I'm grateful for all of your generous help and patience.

With this, is it correct to assume that for the full blog page I'll need to create a separate template page?

Thank you! Caroline

Hi Caroline,

The home.php template is for the blog index page which is the WordPress default landing page. If you want your website to have a custom home page (on top of the blog index page), then the template should be named front-page.php. You will find all the necessary information to create a custom blog index page and custom home page in this article.

Happy coding,

Hello Thierry,

So I applied the code you gave and now am stuck at a new problem: how to get the posts in the loop section to show in a grid.

I altered the code for the loop to display them in blocks with the post thumbnail on top and the text below the thumbnail, both also being linked to their respective articles. I also added the uikit classes to display them in a three column grid. Unfortunately, some of uikit doesn't seem to be working. They display in a grid, however it's ignoring something (or possibly multiple things). It initially displays them all as "width: 33.33%" and in blocks stacked on top of each other. So I added a class just for the blocks to make them "display: inline-block." However, now they display two to a row and ignore any attempts to adjust the gutters or space between blocks.

I could just remove the uk-width-medium-1-3 and do it manually, however then I run into the problem of making them all equal width and displaying evenly within each row. Or, put another way since that may be confusing: I am not sure how I can add a :last selector onto the third block of each row so that I can target it specifically to adjust the margins on it.

So, here's the code used:

// Main Page Mini Loop Grid Displaying the Six Most Recent Posts
beans_modify_action_callback( 'beans_loop_template', 'mini_latest_posts');
function mini_latest_posts(){
    global $post; $articles = new WP_Query( array('posts_per_page' => 6) );
    while ($articles -> have_posts()) : $articles -> the_post(); ?>
            <div class="uk-width-medium-1-3 uk-width-1-1 uk-grid-large post-wrap" data-uk-grid-match>
                <div class="post-block uk-grid-match">
                    <div class="post-thumb">
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"> <?php the_post_thumbnail(); ?></a>
          </div> <!-- close post-thumb -->
          <div class="post-title">
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"> <h3 class="home-post-title"><?php the_title(); ?></h3> </a> 
          </div> <!-- close post-title -->
        </div> <!-- close post-block -->
            </div>
            <?php endwhile; ?>
      <?php
}

And the only css I've added:

.post-wrap{
  margin: 0px;
  padding: 0px;
 display: inline-block;
}

.post-block{
  background-color: blue;
 margin: 0px;
  padding: 0px;
}

.post-thumb{
  background-color: #f1f1f1;
  width: 150px;
 height: 240px;
  margin: auto;
}

.post-title{
  margin: 5px 0px 0px;
  text-align: center;
}

Additionally, here is a wireframe showing roughly what my goal is.

One final note: I have read this page and this discussion on adjusting the thumbnail sizes however I'm unsure how how to apply it to this code (It would be useful/helpful to be able to crop and resize the images in the code rather than just doing a clunkly resizing in the CSS). Any advice on that front would be greatly appreciated. I understand and would be able to do it the "Wordpress way" as Jozi said, but I'm unfortunately unclear on how to do it the "Beans way."

Again, thank you so much for your help. I've got a great learning curve to overcome!

Hi Calorine,

You are missing the grid wrapping div. Add before the while loop and close it with after the endwhile.

Regarding your image sizes, what size would you like your images to be and for which breackpoints?

Thanks,

Hello Thierry,

I tried adding the wrapping div, but it still won't show up inline on it's own.

For the featured image sizes on the front page only, I'd like them to be 150 x 240. As a side note, I know that client-side resizing is generally frowned upon, but is there any way to add additional default image sizes to wordpress? I tried the "wordpress way" but it seemed to completely ignore it.

Thank you so much.

Hey Caroline,

Let's get the grid sorted before we move onto the images. Could you post a link to the page or your code with the grid wrap so that I can take a look and test it?

Thanks,