How to create a page and display only the posts with a specific custom field value?

Question

I would like to create a page (let's name it "Facebook") where i will display only the posts that has the custom field: "Facebook" and specifically the custom field value: "Yes".

P.S. 1. I would like to include the theme's header, slider, footer, sidebars etc. 2. I use Advanced Custom Fields plugin

<?php get_header(); ?>
<div class="content-wrap">
<div class="content">
    <?php tie_breadcrumbs() ?>

    <?php if ( ! have_posts() ) : ?>
        <div id="post-0" class="post not-found post-listing">
            <h1 class="post-title"><?php _e( 'Not Found', 'tie' ); ?></h1>
            <div class="entry">
                <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'tie' ); ?></p>
                <?php get_search_form(); ?>
            </div>
        </div>
    <?php endif; ?>

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <?php $get_meta = get_post_custom($post->ID);  ?>
    <?php //Above Post Banner
    if( empty( $get_meta["tie_hide_above"][0] ) ){
        if( !empty( $get_meta["tie_banner_above"][0] ) ) echo '<div class="ads-post">' .htmlspecialchars_decode($get_meta["tie_banner_above"][0]) .'</div>';
        else tie_banner('banner_above' , '<div class="ads-post">' , '</div>' );
    }
    ?>

    <article class="post-listing post">
        <?php tie_include( 'post-head' ); // Get Post Head template ?>
        <div class="post-inner">
            <div class="clear"></div>
            <div class="entry">
                <?php the_content(); ?>
                <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'tie' ), 'after' => '</div>' ) ); ?>

                <?php edit_post_link( __( 'Edit', 'tie' ), '<span class="edit-link">', '</span>' ); ?>
            </div><!-- .entry /-->  

        </div><!-- .post-inner -->
    </article><!-- .post-listing -->
    <?php endwhile; ?>

    <?php //Below Post Banner
    if( empty( $get_meta["tie_hide_below"][0] ) ){
        if( !empty( $get_meta["tie_banner_below"][0] ) ) echo '<div class="ads-post">' .htmlspecialchars_decode($get_meta["tie_banner_below"][0]) .'</div>';
        else tie_banner('banner_below' , '<div class="ads-post">' , '</div>' );
    }
    ?>

    <?php comments_template( '', true ); ?>
</div><!-- .content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Answer 1

Duplicate your page.php template, name the duplicate page-facebook.php, give it a template name:

/*
Template Name: My Facebook Meta Key Page
*/

More information here: http://codex.wordpress.org/Page_Templates

To get the right posts with get_posts use something like this:

<?php
$args = array(
    'post_type' => 'post',
    'meta_query' => array(
        array(
            'key' => 'facebook',
            'value' => 'yes',
        )
    )
 );
$fbposts = get_posts( $args );

foreach($fbposts as $post) : setup_postdata($post); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
<?php endforeach; ?>

More information here: http://codex.wordpress.org/Template_Tags/get_posts

Of course you can do it with WP_Query like GhostToast suggested, it is pretty similar, take a look here: http://codex.wordpress.org/Class_Reference/WP_Query

Get the posts with WP_Query like this:

<?php
$args = array(
    'post_type' => 'post',
    'meta_query' => array(
        array(
            'key' => 'facebook',
            'value' => 'yes',
        )
    )
 );
$fbposts = new WP_Query( $args );

if ( $fbposts->have_posts() ) {
  while ( $fbposts->have_posts() ) {
  $fbposts->the_post();
      echo '<h2><a href="'. the_permalink() .'">'. the_title() .'</a></h2>';
      echo the_content();
  }
} else {

}
wp_reset_postdata(); 
?>

Answer 2

You're going to need to learn how to create a custom page template and use a meta_query. To ensure your new page template includes all the other elements you want, I would suggest starting by copying a template file (such as page.php) that works the way you want to already (as far as structure and includes). You're going to gut the loop section and write your own wp_query.

Welcome to the empowering side of WordPress!

Edit:

This is a modified version of the code you provided. Realize that you should, as @ngsonst suggested, you will want to save this as another file, such as facebook-page.php. You will then create a new page from the WordPress backend and assign it to this Template, which is named at the top of the file.

<?php
/****
Template Name: Facebook Page
****/

get_header(); ?>
<div class="content-wrap">
<div class="content">
    <?php tie_breadcrumbs();

    // define parameters for which posts we want
    $args = array(
        'post_type' => 'post',
        'meta_query' => array(
            array(
            'key' => 'facebook',
            'value' => 'yes',
            )
        )
    );

    // create new instance of wp_query, the object which loops through posts
    $loop = new wp_query($args);

    // as long as it has posts, set current post up and do all of the following
    while($loop->have_posts()): $loop->the_post();

        $get_meta = get_post_custom($post->ID);
        //Above Post Banner
        if( empty( $get_meta["tie_hide_above"][0] ) ){
            if( !empty( $get_meta["tie_banner_above"][0] ) ) echo '<div class="ads-post">' .htmlspecialchars_decode($get_meta["tie_banner_above"][0]) .'</div>';
            else tie_banner('banner_above' , '<div class="ads-post">' , '</div>' );
        }
        ?>
        <article class="post-listing post">
            <?php tie_include( 'post-head' ); // Get Post Head template ?>
            <div class="post-inner">
                <div class="clear"></div>
                <div class="entry">
                    <?php 
                    // get title as permalink
                    echo '<h2><a href="'. get_permalink() .'">'. get_the_title() .'</a></h2>';
                    // get content
                    the_content();
                    wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'tie' ), 'after' => '</div>' ) ); 

                    edit_post_link( __( 'Edit', 'tie' ), '<span class="edit-link">', '</span>' ); ?>
                </div><!-- .entry /-->  

            </div><!-- .post-inner -->
        </article><!-- .post-listing -->

    <?php
    // end our loop
    endwhile; 

    //Below Post Banner
    if( empty( $get_meta["tie_hide_below"][0] ) ){
        if( !empty( $get_meta["tie_banner_below"][0] ) ) echo '<div class="ads-post">' .htmlspecialchars_decode($get_meta["tie_banner_below"][0]) .'</div>';
        else tie_banner('banner_below' , '<div class="ads-post">' , '</div>' );
    }


    comments_template( '', true ); ?>
</div><!-- .content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Realize that I have no idea what the tie_breadcrumbs stuff is, and have no way of knowing if it will work with this. You could easily gut all those parts, but wanted to leave that for you to discover. Let us know how this works out.