Loading posts (and custom posts) on homepage

Is that covered in the code provided by @poonam9?

I think this might be a little too advanced for me, so maybe I’m getting ahead of myself a little!

I get what you’re saying about the custom post types. If I create a Custom Post and ‘view’ it. I can see part of the URL is /html5-blank/. So I created a page called “Case Studies” and edited the URL to match that and it seems to work. Is that the way you meant me to do it?

Do Custom Post Types use the same loop as the default post type? If so, I guess I’ll need to duplicate that php file and set the Custom Post Type to use that instead?

Using the code I pasted:

<?php
    $latest_blog_posts = new WP_Query( array( 'posts_per_page' => 3 ) );
    if ( $latest_blog_posts->have_posts() ) : while ( $latest_blog_posts->have_posts() ) : $latest_blog_posts->the_post();

        get_template_part('loop');

    endwhile; endif;
?>

It does display 3 posts on front-page.php but all 3 posts are called “Home”, have the same date and all link to the Homepage. I guess this is because it’s a query, within a query. Is there a way to adjust my loop.php so this works using the code above or something similar?

The only way I managed to get the 3 latest posts to display on the homepage was to copy and paste the code from loop.php onto front-page.php. That worked …but I guess it’s not ideal to maintaining two lots of code in different locations that essentially do the same thing/are the same thing?

Unless this is the only way it can be achieved?

Ok, this is the solution I’ve ended up using. It seems to work but I’d appreciate any pointing out flaws if they see any…

I amended my loop.php so the wrapping if/else statement was removed. This left loop.php looking like this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <!-- post thumbnail -->
    <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="h-entry__image-link">
            <?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?>
        </a>
    <?php endif; ?>
    <!-- /post thumbnail -->

    <!-- post title -->
    <h2 class="p-name">
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </h2>
    <!-- /post title -->

    <!-- post details -->
    <time datetime="<?php the_time('Y-m-j'); ?>" class="dt-published"><?php the_time('jS F Y'); ?></time>
    <!-- /post details -->

    <?php html5wp_summary('html5wp_index'); // Build your custom callback length in functions.php ?>

    <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="arrow-link">Read the full article</a></p>

    <?php edit_post_link(); ?>

</article>

The part this was removed was this:

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

   [ARTICLE CODE WAS IN HERE]

<?php endwhile; ?>

<?php else: ?>

    <!-- article -->
    <article>
        <h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
    </article>
    <!-- /article -->

<?php endif; ?>

This allowed me to use the following code on the homepage to pull in the latest 3 posts:

<div class="h-feed featured-blog">
	<?php
	    $args = array(
		    'posts_per_page'    => 3,
		    'post_type'     => 'post',  //choose post type here
		    'order' => 'DESC',
		);
		// query
		$the_query = new WP_Query( $args );
		
		
		if( $the_query->have_posts() ):
		    while( $the_query->have_posts() ) : $the_query->the_post();
		        get_template_part('loop');
		    endwhile; 
		else :
		
		endif;
	?>
</div>

This gets the posts working on the homepage (front-page.php) great. I had to wrap the code in the parent div markup. This mightn’t be ideal on other sites but it actually works quite well for me here as I need to be able to add different classes on the blog/home page.

The big issue with this was that only 1 post was displayed on the blog page as the code loading it looked like this:

<?php get_template_part('loop'); ?>

I amended this by wrapping the if/else statement around the get_template_part so it now looks like this:

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

<?php get_template_part('loop'); ?>

<?php endwhile; ?>

<?php else: ?>

	<!-- article -->
	<article>
		<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
	</article>
	
	<!-- /article -->
	
<?php endif; ?>

<?php get_template_part('pagination'); ?>

That all seems to work. I was even able to use the same code for my Custom Post Type changing 'post_type' => 'post' to 'post_type' => 'custom-post-name' to pull those posts onto the homepage.

I’ve not checked if the pagination still works and what happens when 10+ posts are on the page but can anyone see any problems with what I’ve done?

Thanks again for all your help and time giving me information on this. I still don’t fully understand but at least we’re getting there haha!

Great!

No the pagination wouldn’t go on the homepage, just on the Post and Custom Post index pages. Thankfully I added 10+ Posts to both and the pagination automatically appeared when I included <?php get_template_part('pagination'); ?> on both pages!

To reset everything, do you mean put wp_reset_postdata() before the closing PHP tag? So…

<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class('h-entry'); ?>>

	<!-- post thumbnail -->
	<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="h-entry__image-link">
			<?php the_post_thumbnail(array(120,120),array('class' => 'your-class-name')); // Declare pixel size you need inside the array ?>
		</a>
	<?php endif; ?>
	<!-- /post thumbnail -->

	<!-- post title -->
	<h2 class="p-name">
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
	</h2>
	<!-- /post title -->

	<!-- post details -->
	<time datetime="<?php the_time('Y-m-j'); ?>" class="dt-published"><?php the_time('jS F Y'); ?></time>
	<!-- /post details -->

	<?php html5wp_summary('html5wp_index'); // Build your custom callback length in functions.php ?>
	
	<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="arrow-link">Read the full article</a></p>

	<?php edit_post_link(); ?>
	
	 <!--  Restore original Post Data -->
	wp_reset_postdata();

</article>

Or do you mean on the page the loop is pulled into like…

<div class="h-feed featured-projects">
	<?php
	    $args = array(
		    'posts_per_page'    => 3,
		    'post_type'     => 'html5-blank',  //choose post type here
		    'order' => 'DESC',
		);
		// query
		$the_query = new WP_Query( $args );
		
		
		if( $the_query->have_posts() ):
		    while( $the_query->have_posts() ) : $the_query->the_post();
		        get_template_part('loop-html5-blank');
		    endwhile; 
		else :
		
		endif;
		
		<!--  Restore original Post Data -->
		wp_reset_postdata();

	?>
</div>

Thanks for all the help, made real progress. All I need to do now is find out how I can add a generic class to the UL elements in the sidebar so I can style them. Worried targeting .widget > ul might style lists in other widgets that aren’t categories/sub-pages/archives etc.

Great, I managed to add wp_reset_postdata(); like in the (2nd) example I gave above.

However, I found it a bit difficult on pages where the code appears like this:

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

<?php get_template_part('loop'); ?>

<?php endwhile; ?>
<?php else: ?>
	<!-- article -->
	<article>
		<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
	</article>
	<!-- /article -->
<?php endif; ?>

<?php get_template_part('pagination'); ?>

Does that mean I need to include the code like <?php wp_reset_postdata(); ?> but just after <?php get_template_part('loop'); ?>? Or is there a better place to put it?

I noticed my parent theme had the following code in it’s functions.php:

if (function_exists('register_sidebar'))
{
    // Define Sidebar Widget Area 1
    register_sidebar(array(
        'name' => __('Widget Area 1', 'html5blank'),
        'description' => __('Description for this widget-area...', 'html5blank'),
        'id' => 'widget-area-1',
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));

    // Define Sidebar Widget Area 2
    register_sidebar(array(
        'name' => __('Widget Area 2', 'html5blank'),
        'description' => __('Description for this widget-area...', 'html5blank'),
        'id' => 'widget-area-2',
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

I thought about amending the before_widget bit to read:

'before_widget' => '<div id="%1$s" class="%2$s side-nav">',

Which seemed to add the class ok, I just wanted to check that will just target the navigation/category lists before proceeding?

Thanks again! 🙂