Hi,
Really, it is not important if it is the archive page or another one. We are testing now in the home page. What we have modified (just a little) is the “content.php” default template of the Twenty Sixteen theme.
1. Go to https://www.imaginauta.com/
2. Press “Show post” button
3. You will see that the first image is not showing, only the arrows
4. Press one arrow and the images will show
Our changes in the “content.php” file are the following:
1. Article tag, the style atribute.
2. Button tag (at the bottom)
<?php
/**
* The template part for displaying content
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
?>
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?> style=”display: none;”>
<header class=”entry-header”>
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<span class=”sticky-post”><?php _e( ‘Featured’, ‘twentysixteen’ ); ?></span>
<?php endif; ?>
<?php the_title( sprintf( ‘<h2 class=”entry-title”>‘, esc_url( get_permalink() ) ), ‘</h2>’ ); ?>
</header><!– .entry-header –>
<?php twentysixteen_excerpt(); ?>
<?php twentysixteen_post_thumbnail(); ?>
<div class=”entry-content”>
<?php
the_content(
sprintf(
/* translators: %s: Post title. */
__( ‘Continue reading<span class=”screen-reader-text”> “%s”</span>’, ‘twentysixteen’ ),
get_the_title()
)
);
wp_link_pages(
array(
‘before’ => ‘<div class=”page-links”><span class=”page-links-title”>’ . __( ‘Pages:’, ‘twentysixteen’ ) . ‘</span>’,
‘after’ => ‘</div>’,
‘link_before’ => ‘<span>’,
‘link_after’ => ‘</span>’,
‘pagelink’ => ‘<span class=”screen-reader-text”>’ . __( ‘Page’, ‘twentysixteen’ ) . ‘ </span>%’,
‘separator’ => ‘<span class=”screen-reader-text”>, </span>’,
)
);
?>
</div><!– .entry-content –>
<footer class=”entry-footer”>
<?php twentysixteen_entry_meta(); ?>
<?php
edit_post_link(
sprintf(
/* translators: %s: Post title. */
__( ‘Edit<span class=”screen-reader-text”> “%s”</span>’, ‘twentysixteen’ ),
get_the_title()
),
‘<span class=”edit-link”>’,
‘</span>’
);
?>
</footer><!– .entry-footer –>
</article><!– #post-<?php the_ID(); ?> –>
<button type=”button” onclick=”document.getElementById(‘post-<?php the_ID(); ?>’).style.display = ‘block'”>Show post</button>