0

I'm not exactly sure how to put this but I'm going to try. let me know if you need more/better details.

I have a blog listing page using home.php and a blog post page using single.php.

both of these have 1 custom field applied that is an image field that places a background image for the banner of the page. Also the title field.

on the single posts page, when I set a background image for the post using the custom field it works. the page's banner has the appropriate background image, and the title is correct.

On the listing page though, even though the page I have set in the reading settings to host the blog listing page has the title and background image fields set to something specific, it does 1 of two things:

  1. if I do not set the loop around the banner and only around the set of code repeated for each blog post, the title and background image of the listing page use the most recent post for that page (i.e. 9 posts per page, 18 posts total so two pages. these fields take the most recent from each page).

  2. If I set the loop around the banner, reset the loop, then loop around the blog code, it displays the list of blogs just fine, but it repeats the banner for each blog and each banner displays the background image and title for each blog on that page (i.e. 9 blogs on listing page, 9 banners).

Short of hard coding the banner and title I am at a loss as to how to separate the banner to work out of the loop and pull in the data set on my blog page.

here is the website: http://idorigin.info/blog/

Here is my code for the home.php:

    <?php
    /*
    Template Name: Blog Listing Page Template
    */
    ?>

<?php get_header(); ?>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
 <?php include 'banner.php'; ?>

    <?php endwhile; else : ?>
        <p><?php _e( 'Sorry, no posts found.' ); ?> </p>
    <?php endif; 

wp_reset_query();

?>
<section class="blog">  
    <div class="blog_list">
        <div class="page_center medium">
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 
            <div class="blog_item">
                <div class="page_center">
                            <a class="blog_item_img" style="background: url('<?php the_post_thumbnail_url(); ?>') center center no-repeat;" href="<?php the_permalink(); ?>">

                    </a>
                    <div class="blog_item_info">
                        <div class="blog_item_date-topics">
                            <?php the_time('M d, Y'); ?> | <?php the_category(', '); ?>
                        </div>
                        <div class="blog_item_title">
                            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        </div>
                        <a class="orange_button" href="<?php the_permalink(); ?>">Read More</a>
                    </div>
                </div>
            </div>

        <?php endwhile; else : ?>
                <p><?php _e( 'Sorry, no posts found.' ); ?> </p>
        <?php endif; ?>

        </div>

        <div class="pagination">

        <?php 
            $prev_page = get_previous_posts_page_link();
            $next_page = get_next_posts_page_link();
        ?>
        <?php if( $prev_page ) { ?>

            <a class="previous-list" href="<?php echo esc_url( $prev_page ); ?>">Previous</span>

        <?php } else { ?>

            <span class="previous-list">Previous</span>

        <?php } ?>

             | 

        <?php if ( $next_page ) {?>

            <a class="next-list" href="<?php echo esc_url( $next_page ); ?>">Next</a>

        <?php } else { ?>

            <span class="next-list">Next</span>

        <?php } ?>

        </div>

    </div>
</section>

<?php get_footer(); ?>

banner.php file:

<section class="page_banner inner_banner" style="background: url(<?php echo get_post_meta( $post_id , 'banner_image', true )  ?>) center center no-repeat;">
    <div class="overlay">
        <div class="page_center large">
        <?php $blog_title = get_the_title( get_option('page_for_posts', true) ); ?>
            <h1><?php echo $blog_title; ?></h1>
            <p><?php the_field('header_tag_line'); ?></p>
        </div>
    </div>
</section>
  • I am bit unclear on what you want to do? On blog listing page do you want to show only one banner from custom field of home page? Or you want blog post listing with each post showing it's own image from the custom field? Also can you please share the code for banner.php file? – Prasad Nevase Dec 22 '16 at 12:23
  • I would like to have the image and the title I set on the blog page to show on the listing, not the image and title from any of the actual blog posts. – JSum Dec 22 '16 at 12:25
  • Remove the loop around banner.php file as well as the banner.php include statement. And simply use <?php echo '<img src="'. get_post_meta( $post_id , 'custom_field_name_for_image', true ) . '" alt="Blog" />'; ?> This will show the image on blog listing page. Let me know how it goes and then we will check for showing the title on that image. – Prasad Nevase Dec 22 '16 at 12:38
  • I feel like this is close. I updated my question to include the banner.php file with my version of your suggestion. The image needs to be set as the background images (inline styling) of the banner. as I have it above the image is now blank. I removed what you suggested and pasted the banner code directly into the template. – JSum Dec 22 '16 at 14:07
  • using: <?php $blog_title = get_the_title( get_option('page_for_posts', true) ); ?><h1><?php echo $blog_title; ?></h1> made the title work. now just hung up on the acf field for the background image. – JSum Dec 22 '16 at 14:13
0

I have two issues above that are related.

  1. php the_title() is outputting the most recent blog post title on the blog list page within my banner (or creating a banner for each blog title on the list page depending on the described circumstance).

  2. My advanced custom field used to insert an img url into the background attr of some inline styling is acting the same.

From what I have gathered, both of these issues are caused because the index (blog list) page does not have a $page_id or something to that effect. This make since because it isn't technically a page I guess.

for the blog title I used:

<?php $blog_title = get_the_title( get_option('page_for_posts', true) ); ?>
<h1><?php echo $blog_title; ?></h1>

This retrieved the title for the page_for_posts

As far as using an advanced custom field (or regular custom field?) on the index page, same issue but different solution:

<?php 
$page_id = ( 'page' == get_option( 'show_on_front' ) ? get_option( 'page_for_posts' ) : get_the_ID );
?>

and then

<section class="page_banner inner_banner" style="background: url(<?php the_field('banner_image', $page_id); ?>) center center no-repeat;">

And this worked.

I feel kind of foolish trying to explain something I only slightly understand so if someone could make this more understandable I will choose your answer as correct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.