Landing page with blog posts

Viewing 3 posts - 1 through 3 (of 3 total)
  • #21395
    gsallman
    Participant

    I’ve created a Child theme with a new ‘Landing Page’ page template to enable me to put text and images at the top of a page, and then have the blog posts shown below. That’s great, except… There’s some javascript (I presume) that positions the blog posts to stack them nicely and it doesn’t activate/work on my template page. How can I get my blog posts to stack nicely like they do on the home page?

    Example test page: http://breakfastinamerica.me/this-is-a-landing-page/

    Landing Page Template Code

    <?php
    /*
    Template Name: Landing Page
    */?>
    <?php get_header(); ?>
    	<section id="container">
    		<div id="Pagetext" <?php pinboard_content_class(); ?>>
    			<?php if( have_posts() ) : the_post(); ?>
    				<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    					<div class="entry">
    						<div class="entry-content">
    							<?php the_content(); ?>
    							<div class="clear"></div>
    						</div><!-- .entry-content -->
    					</div><!-- .entry -->
    				</article><!-- .post -->
             	</section><!-- #Pagetext -->
    		
    		<?php // START OF LOOP CODE ?>
    
    		<section id="content" <?php pinboard_content_class(); ?>>
    			<?php $args = array( 'posts_per_page' => get_option( 'posts_per_page' ), 'paged' => max( 1, get_query_var( 'paged' ) ) ); ?>
    			<?php if( pinboard_get_option( 'blog_exclude_portfolio' ) ) : ?>
    				<?php $args['cat'] = '-' . pinboard_get_option( 'portfolio_cat' ); ?>
    			<?php endif; ?>
    			<?php global $wp_query, $wp_the_query; ?>
    			<?php $wp_query = new WP_Query( $args ); ?>
    			<?php if( $wp_query->have_posts() ) : ?>
    				<div class="entries">
    					<?php while( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
    						<?php get_template_part( 'content', get_post_format() ); ?>
    					<?php endwhile; ?>
    				</div><!-- .entries -->
    				<?php pinboard_posts_nav(); ?>
    			<?php else : ?>
    				<?php pinboard_404(); ?>
    			<?php endif; ?>
             
    		<?php // END OF LOOP CODE ?>
    
    			<?php else : ?>
    				<?php pinboard_404(); ?>
    			<?php endif; ?>
    		</section><!-- #content -->
    		<?php if( ( 'no-sidebars' != pinboard_get_option( 'layout' ) ) && ( 'full-width' != pinboard_get_option( 'layout' ) ) ) : ?>
    			<?php get_sidebar(); ?>
    		<?php endif; ?>
    		<div class="clear"></div>
    	</div><!-- #container -->
    <?php get_footer(); ?>

    Many, many, thanks for any help with this as my wife uses this theme on her website too, and she really wants this feature.

    #21397
    gsallman
    Participant

    I spotted and fixed a couple of obvious bugs in the above code. To no avail unfortunately. The posts still don’t neatly stack. πŸ™

    Bugs:

    Line 17: Should be </div><!– #Pagetext –>
    Line 49: Should be </section><!– #container –>

    #21551
    gsallman
    Participant

    For anyone else looking for this feature, I have a solution but it involves re-purposing the theme’s existing blog page templates.

    I’ve spent a lot of hours trying to get this to work with my own page template, but I’ve not been able to successfully ‘fix’ the javascript which uses the template filenames to invoke the masonry effect.

    Here’s some example code for the ‘blog, full width’ page template.

    1. Copy the file template-blog-full-width.php to your child theme.

    2. Replace the code with the following:

    <?php
    /*
    Template Name: Blog, Full Width
    
    Edited to take the current page text and post it above the blog posts.
    
    */
    ?>
    <?php get_header(); ?>
    
    	<div id="container">
    
                    <?php // Additional code to include the current page text on the first page only ?>
    		<?php if( !is_paged() ): //Remove this if statement and corresponding endif if you want the page content on the top of every paginated blog page. ?> 
    		<div id="Pagetext">
    				<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    					<div class="entry">
    						<div class="entry-content">
    							<?php the_content(); ?>
    							<div class="clear"></div>
    						</div><!-- .entry-content -->
    					</div><!-- .entry -->
    				</article><!-- .post -->
             	</div><!-- #Pagetext -->
    		<?php endif; ?>
    		<?php // End of additional code ?>
    
    		<section id="content" class="column onecol">
    			<?php $args = array( 'posts_per_page' => get_option( 'posts_per_page' ), 'paged' => max( 1, get_query_var( 'paged' ) ) ); ?>
    			<?php if( pinboard_get_option( 'blog_exclude_portfolio' ) ) : ?>
    				<?php $args['cat'] = '-' . pinboard_get_option( 'portfolio_cat' ); ?>
    			<?php endif; ?>
    			<?php global $wp_query, $wp_the_query; ?>
    			<?php $wp_query = new WP_Query( $args ); ?>
    			<?php if( $wp_query->have_posts() ) : ?>
    				<div class="entries">
    					<?php while( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
    						<?php get_template_part( 'content', get_post_format() ); ?>
    					<?php endwhile; ?>
    				</div><!-- .entries -->
    				<?php pinboard_posts_nav(); ?>
    			<?php else : ?>
    				<?php pinboard_404(); ?>
    			<?php endif; ?>
    			<?php wp_reset_postdata(); ?>
    			<?php $wp_query = $wp_the_query; ?>
    		</section><!-- #content -->
    		<div class="clear"></div>
    	</div><!-- #container -->
    <?php get_footer(); ?>

    3. Create a new page with the ‘Blog, Full Page’ template. Any text or code you put in the page will be inserted at the top of the page before the blog posts. I’ll leave my test page online. Currently, I just have a heading and a Revolution slider running at the top of the page. I prefer this to the theme’s in-built slider which relies on sticky posts. You can see the test page here: http://breakfastinamerica.me/this-is-a-landing-page/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.