How can I add some posts in the homepage and have a blog page as well?

Question

I am building my own - custom - theme in WP. In my index.php, I have many static contents ( Don't know how to convert them into dynamic fields in WP yet, but I will learn this later ).

The issue is that I want to display a number of posts in the homepage 2 posts and below them a link to redirect the user to a blog page which displays the whole posts.

I searched a lot and I found a solution which is not doing what I want, it was about setting a static front-page and set the blog page as the Posts page under settings then reading.

After doing so, the whole static content - that was in my index.php doesn't appear on the homepage anymore and the homepage becomes an empty page and the whole content went to the blog page, which made me CRAZY!!

All I want to do; is to keep my static content and 2 of my most recent posts in the homepage and create a blog page which contains the whole posts.

Hope to find a solution for this Without Plugins.

Answer 1

This is going to be a detailed answer to my problem to help anyone who might face the same problem, it will cover everything in steps for a WordPress newbie, like me! :D

As mentioned in my Question, my problem is that I want to display 2 posts in my index.php and make a separate blog page contains the whole posts.

The Most Detailed Solution:

1) Go to your index.php and use the normal posts loop:

<?php
    // The Loop
    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post(); 
            //
            // Post Content here
            //
        } // end while
    } // end if
?>

2) From WP Dashboard, go to Settings then Reading and change the Blog pages show at most value to 2 posts Or whatever number of posts you want.

Now, we've done the first step and show only a specific number of posts in our index.php, let's continue the steps to display the whole posts in our blog page.

3) Create a PHP Page called page-blog.php.

Notice: if you don't have a page.php you have to create it, for more information about how to create a custom PHP Page, I recommend @Adam's answer here.

4) Go to your WP Dashboard and create a new page called blog.

5) In your page-blog.php you need to add this snippet:

// Posts Query
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 6, 'paged' => $paged );
query_posts($args);

// The Loop
if ( have_posts() ) {
        while ( have_posts() ) {
            the_post(); 
            //
            // Post Content here
            //
        } // end while
} else {
    echo "Sorry, There is no posts to be displayed";
} // end if
?>

Notice: We used the same loop as we did before in index.php, only the new 2 lines of codes which above the loop is the new different thing here in our page-blog.php page

6) I set the posts_per_page to 6 because it is my blog page and I want to display more posts there. Set its value to whatever number you want, it depends on you

7) BOOM, it works and you did what you wanted, just like me!!

This problem seemed VERY COMPLICATED for me, but when I searched and read more information about this, I found that it is a VERY EASY to solve problem, and I hope this answer help you if you faced it!

Answer 2

Add This Snippet Code into your front-page.php or wherever you want to show 2 posts recently published.And Also a Blog Page Link to navigate the user to all blog posts..

 $the_query = new WP_Query( array( 'post_type' => 'post',
                          'posts_per_page' => 2,
                          'orderby' => 'publish_date',
                          'order' => 'DESC'
                        )
                    );
 if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
the_title();
    the_excerpt();
        the_author();
        // add whatever you want
   endwhile;
   wp_reset_postdata();
   echo 'See All Blog Posts Here : <a href='.site_url("blog").'>All Blog Posts</a>';
   else :
   esc_html_e( 'Sorry, no posts yet published.' );
   endif;
?>