Search code examples
phpwordpresslaravelroots-sage

How to create a static front page with blog posts in Sage?


I am trying to create a static homepage custom template, with a structure like this:

  1. Hero
  2. Some images and texts
  3. [Blog Posts]
  4. Footer

The problem is my code showing posts with post type: page, instead of post type: post.

I use Sage (Roots.io)(Blade template engine), creating a template called template-home.blade.php. I've already tried to copy code from content.blade.php, and use it on my template-home.blade.php.

This is the code from content.blade.php that I use to get blog posts:


        <article @php post_class() @endphp>
            <header>
              <h2 class="entry-title"><a href="{{ get_permalink() }}">{!! get_the_title() !!}</a></h2>
              @include('partials/entry-meta')
            </header>
            <div class="entry-summary">
              @php the_excerpt() @endphp
            </div>
          </article>


Expected results: It should show all posts with post type: post. Like "Blog Post Title 1", "Blog Post Title 2", etc.

Current results: Copied code show posts with post type: page. Like "Home", "About", etc.


Please help. Thank you.


Solution

  • Solved with this following solution:

    1. Get the posts with Home Controller:

      public function blog_posts(){
          $posts_per_page = 4;
          $query_args = [
              'post_type'           => 'post',
              'post_status'         => 'publish',
          ];
      
          $blog = get_posts($query_args);
      
          return $blog;
      }
      

    1.1. Or get the posts with this code:

    $blog_posts = collect(get_posts([
        'post_type' => 'post',
        'posts_per_page' => 10,
    ]))->map(function ($post) {
        return (object) [
            'categories' => get_the_category($post),
            'title'      => get_the_title($post),
            'url'        => get_permalink($post),
            'date'       => get_the_date('M d, Y', $post),
            'excerpt'    => substr_replace(get_the_excerpt($post), "", -16),
            'image'      => get_the_post_thumbnail_url($post)
        ];
    });
    
    1. Call it from Home Template:

      {{ print_r($blog_posts) }}
      

    Example (rendering 4 columns of blog posts):

        {{-- Blogposts Loop --}}
        @foreach ($blog_posts as $key=>$post)
          @if ($key < 4)
            <div class="grid__item medium--one-half large--three-twelfths">
              <div class="blog-item">
                @if($post->image)
                  <a href="{{ $post->url }}">
                    <div class="blog-item__image" style="background-image: url({{ $post->image }})" title="{{ $post->title }}"></div>
                  </a>
                @else
                  <a href="{{ $post->url }}">
                    <div class="blog-item__image" style="background-color: #eee" title="{{ $post->title }}"></div>
                  </a>
                @endif
                <p class="blog-item__meta">
                  {{ $post->date }} /
                  @foreach ($post->categories as $category)
                    <a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>">
                      {{ $category->name.' ' }}
                    </a>
                  @endforeach
                </p>
                <h4 class="blog-item__title"><a href="{{ $post->url }}">{{ $post->title }}</a></h4>
                <div class="blog-item__excerpt">
                  @php echo $post->excerpt @endphp <a class="blog-item__excerpt-link" href="{{ $post->url }}">Read More...</a>
                </div>
              </div>
            </div>
          @endif
        @endforeach