How do you print an entire post into a page (wordpress) - php

Question

Hi I've made a custom post type 'work_fields' that calls in information from yet another custom post type 'members' into the post, and now I'm trying to make a PAGE TEMPLATE that shows a list of the titles of custom post type 'work_fields', and when you click a title, the whole post('work_fields') will show up on a div called 'single-post-container' below the titles. right now I've got everything working fine, but I want to display a post in the div 'single-post-container' when the page loads. (as of now, just the titles of the posts are displayed and there is nothing in the div). How do I get the div to display the most recent post of custom post type 'work_fields' on page load? This is the code for the custom page template.
<div class="row">
<div class="small-12 medium-10 large-offset-1 columns">
<h2><?php the_title(); ?></h2>
</div>
</div>
<div class="row halfsection">
<div class="small-12 medium-10 large-offset-1 columns">
<div class="category_container">
<?php
$args = array('post_type' => 'work_fields',);
$query = new WP_Query( $args );
?>
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<p class="category_item"><a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></p>
<?php endwhile; endif; ?>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-10 large-offset-1 columns">
<hr>
</div>
</div>
<div id="single-post-container">
//THIS IS WHERE THE POST CONTENTS SHOWS BUT I WANT THE MOST RECENT POST TO BE HERE ON PAGE LOAD, BEFORE I CLICK ANY OTHER POST//
</div>
Thank you! Your help is much appreciated!

Answer 1

Just use the WP_query twice by getting recent posts in the arguments,
$args2 = array('post_type' => 'work_fields', 'orderby' => 'ID', 'order'=> 'DESC' , 'posts_per_page' => 5);
$query2 = new WP_Query( $args2 );
?><div id="single-post-container"><?php
// The Loop
if ( $query2->have_posts() ) {
echo '<ul>';
while ( $query2->have_posts() ) {
$query2->the_post();
echo '<li>' . get_the_content() . '</li>';
}
echo '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
}
?></div><?php
Put the div outside loop. It will show the content of recent 5 posts.

Answer 2

If everything above the div single-post-container is working fine then for this specific div you can load most recent post by using code below. Be sure to reset previous post data using wp_reset_postdata()
Codex Documentation. https://codex.wordpress.org/Function_Reference/wp_get_recent_posts
<?php
$args = array(
'numberposts' => 1,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'work_fields',
'post_status' => 'publish',
'suppress_filters' => true
);
$recent_posts = wp_get_recent_posts( $args, ARRAY_A );
?>

Answer 3

So I just recreated the post type markup on my page. I'm sure there's a better way to do this but for times sake I had to at least make it work. I also tried using a jquery onclick function and just click the first title after everything loads, but there was an error that just kept pushing all of the titles so I pretty much gave up.
here's the code
<div class="row">
<div class="small-12 medium-10 large-offset-1 columns">
<h2><?php the_title(); ?></h2>
</div>
</div>
<div class="row halfsection">
<div class="small-12 medium-10 large-offset-1 columns">
<div class="category_container">
<?php
$args = array(
'post_type' => 'work_fields',
);
$query = new WP_Query( $args );
?>
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<p class="category_item"><a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></p>
<?php endwhile; endif; ?>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-10 large-offset-1 columns">
<hr>
</div>
</div>
<div id="single-post-container">
<?php
$args2 = array(
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'work_fields',
'post_status' => 'publish',
'posts_per_page' => 1,
);
$query2 = new WP_Query( $args2 );
if ( $query2->have_posts() ) : ?>
<?php $post = get_post($_POST['id']); ?>
<div id="single-post post-<?php the_ID(); ?>">
<?php while ( $query2->have_posts() ) : $query2->the_post(); ?>
<div class="row section">
<div class="small-12 medium-7 large-offset-1 columns">
<h2><?php the_title(); ?></h2>
<h3>소개</h3>
<p class="halfsection"><?php the_field('work_fields_intro'); ?></p>
<h3>주요서비스</h3>
<p class="halfsection"><?php the_field('work_fields_service'); ?></p>
<h3>주요실적</h3>
<p class="halfsection"><?php the_field('work_fields_accomplishment'); ?></p>
</div>
<?php endwhile; endif; ?>
<div class="small-6 medium-3 large-2 columns large-offset-1 end">
<?php
$posts = get_field('team_member');
if( $posts ): ?>
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<div class="member_container halfsection">
<div class="member"><?php the_post_thumbnail(); ?></div>
<p class="member_name"><?php the_title(); ?></p>
<ul class="members_info">
<li><?php the_field('members_position'); ?></li>
<li><?php the_field('members_e-mail'); ?></li>
<li><?php the_field('members_phone'); ?></li>
</ul>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>