Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

How do you add a blog to static homepage in WordPress?

Hey guys,

I'm setting up a business website using WordPress and am unsure how to have both a dedicated blog page (/blog) as well as show recent blog posts on the homepage (/index).

I'm using a custom theme that I've designed and currently my homepage is just a page in WordPress that I've marked as homepage in Customizer. I'm also wanting to add "Upcoming Events" to the home page using The Events Calendar PRO plugin (not sure if relevant).

Do I need to create 2 "home.php" pages? how should I go about this?

Thanks in advance!

6 Answers

Couple of issues with the code -

$args = array( 'post_type' = 'post', 'posts_per_page' => 4 ); $query = new WP_Query( $args ); ?>

if ( have_posts() ) : while ( have_posts() ) : the_post(); ?

should be

$args = array( 'post_type' => 'post', 'posts_per_page' => 4 ); $query = new WP_Query( $args ); ?>

if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?

you need to use the new query object you created with WP_Query.

Give that a go.

You can create a "front-page.php" file and code it to have your loop in there to show your recent blog posts - you can set another page as your blog page in the settings.

Thanks!

So if I create a front-page.php and write the loop in that file - do I put all of my homepage content in that PHP file? or do I manage it through the Pages section in admin?

If you could give me a little Step 1/2/3/4/5, that'd be AMAZING! :)

No worries.

1) Create a home page and a blog page in the backend 2) In Settings > Reading choose the page you just created as the Home Page and the blog page as the `blog Post page. 3) The blog posts page will automatically show all "Posts" 4) Create a "front-page.php" based on the index.php file but create your own loop with "new WP_Query($args)" - you can limit the recent posts by using something like...

$args = array( 'post_type' => 'post', 'posts_per_page' => 3 ); $query = new WP_Query( $args );

(see https://codex.wordpress.org/Class_Reference/WP_Query) - Edit the rest of the page as needed if you have any layout changes. 5) Then use your loop on this new query 6) The homepage of your site should now show recent posts based on the above query.

You can add content from the backend too by adding the "the_content()" function which will use the homepage content.

Hope this helps :)

Hey,

Thanks for that!

I've got the template installed and it's showing up on the website (http://www.chatstasmania.org.au/homepage-test). I've created the blog stream using the syntax I used for the "home.php" file, which runs my "Blog" page on the website without any issues.

However, problems I'm having are:

  • Latest Blog stream is only showing the homepage-test page? .... Not the blog posts?
  • Heaps of CSS is out (not such a big issue)

My frontpage.php looks like this:


<?php /* Template Name: Front Page */ ?>

<?php get_header(); ?>

*** HTML/CSS Static Content ***

<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 4 ); $query = new WP_Query( $args ); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="second-right-item"> <?php if( get_the_post_thumbnail() ) : ?> <div class="second-right-image"> <?php the_post_thumbnail('large'); ?> </div> <?php endif; ?> <div class="second-right-text"> <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h4> <p class="second-right-date"><?php the_time('l, j F Y'); ?></p> <p><?php echo strip_tags( get_the_excerpt() ); ?></p> </div> <div class="second-right-text-link"> <a href="<?php the_permalink(); ?>">Read Article>></a> </div> </div>

<?php endwhile; else : ?> <p><?php _e( 'Sorry, no pages found.' ); ?></p>
<?php endif; ?>

*** HTML/CSS Static Content ***

<?php get_footer(); ?>


laurent xenard
laurent xenard
30 Points

Hello Mace !

I'm trying to do the same thing you did on your website (showing blog posts on the home page) and I'm having the same trouble you did: Latest Blog stream is only showing the home page? .... Not the blog posts? How did you solve this problem ?

Thanks

YEAH!!!!! :)

Some of my CSS has been thrown out, but I should be able to fix that fairly easily.

Many Thanks Paul!