How to have multiple the_content() tags

I am designing a wordpress blog where you click on the title of the post and the content of the post opens up from the right side of the website. I was wondering if it was possible to have multiple the_content() tags in the post that referenced the first (newest), second, third, fourth etc. posts. Here is my code so far, the content would exist in the “project-single” div and the titles would appear in the “blog-post-title”:

index.php:

<?php get_header(); ?>

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

get_template_part( ‘content’, get_post_format() );

endwhile; endif;
?>

content.php

<div class=”blog-post”>
<ul id=”projects”>
<li>
<span class=”blog-post-title”><?php the_title(); ?></span><span class=”blog-post-meta”><?php the_date(); ?> by <a href=”#”><?php the_author(); ?></a></span>
</li>
</ul>
</div>
<div id=”project-single”>
<div class=”inner-single”>
<?php the_content(); ?>
</div>
</div>

<br><!– /.blog-post –>

javascript (for the animation of the content opening from right:

var singleSize = 45;
var open = false;
var newGlobalWidth = 100 – singleSize;

$(‘li’).click(function () {

if(!open) {
open = true;
openPage(this);
}else {
closePage(this);
}

});

function openPage(thus){
// console.log($(thus).data(‘project’));
$(‘#project-single’).toggle();
console.log(‘o’);
$(‘.inner-header’).animate({ padding: ‘0’});

$(‘.inner-global’).animate({width: newGlobalWidth + ‘%’ }, 500, function() {
$( “.inner-single” ).delay( 200 ).animate({ opacity: 1}, 200);
});

}

function closePage(thus){
$(‘#project-single’).toggle();
$( “.inner-single” ).css({ ‘opacity’: ‘0’});
$(‘.global’).animate({width: 100 + ‘%’ }, 200);
$(‘.inner-header’).animate({ padding: ‘0 15vw 1vw’});

open = false;
}

Thanks for your time and patience! I’m new to this but having fun learning!

Read more here:: How to have multiple the_content() tags

Leave a Reply

Your email address will not be published. Required fields are marked *