Link new php page wordpress

Question

I'm trying to use bootstrap tabs in my index.php theme to show diferent content in the main page theme. I've implemented the tabs in index.php and create new page called popular-post.php linked in the tab Popular.

But when I click in the link to show popular content I get

Fatal error: Call to undefined function get_header() in

This is the code of my index.php

    <?php get_header(); ?>
    <div class="row" id="content">
        <div class="col-sm-8 col-md-8 col-lg-8" id="primary">
        <ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="<?php bloginfo('template_directory'); ?>/popular-post.php">Popular</a></li>
  <li><a href="#">Recientes</a></li>
</ul>



        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php
                /* Include the Post-Format-specific template for the content.
                * If you want to overload this in a child theme then include a file
                * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                */
                get_template_part( 'content', get_post_format() );
            ?>

        <?php endwhile;?> 
            <?php /* Pagnavi plugin support */ wp_pagenavi(); ?>

        <?php else: ?>  

            <?php get_template_part( 'no-results', 'index' ); ?>

        <?php endif; ?>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4" id="secondary">
        <?php get_sidebar(); ?> 
        </div>
    </div><!--/content-->

        <?php get_footer(); ?>

An this is the code of popular-post.php

<?php
/*
Template Name: Popular Posts
*/
?>
<?php get_header(); ?>
    <div class="row" id="content">
        <div class="col-sm-8 col-md-8 col-lg-8" id="primary">
        <ul class="nav nav-tabs">
  <li><a href="<?php bloginfo('template_directory'); ?>">Home</a></li>
  <li class="active"><a href="#">Popular</a></li>
  <li><a href="#">Recientes</a></li>
</ul>

<ul class="popular_posts">
        <?php $pc = new WP_Query('orderby=comment_count&#038;posts_per_page=10'); 

        while ($pc->have_posts()) : $pc->the_post(); ?>
            <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            <p>Posted by <strong><?php the_author() ?></strong> with <?php comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?></p></li>
        <?php endwhile; ?>
    </ul>

        </div>
        <div class="col-sm-4 col-md-4 col-lg-4" id="secondary">
        <?php get_sidebar(); ?> 
        </div>
    </div><!--/content-->

        <?php get_footer(); ?>

Thanks in advance

Answer 1

You can't link to a theme file directly like: <a href="<?php bloginfo('template_directory'); ?>/popular-post.php">Popular</a>.
This is an invalid URL: http://example.com/wp-content/themes/YOUR-THEME/any-theme-file.php.

Create a new page, "Popular Posts", select the template (your file already has a Page Template header. Take note of the page ID (in the URL). And link like:

<a href="<?php echo get_permalink( THE-ID-OF-YOUR-PAGE ); ?>">Popular</a>

This produces a valid URL: http://example.com/popular-posts/, which is a piece of your content (a page), that uses the defined page template file.

To get the page ID by its title use get_page_by_title:

$the_page = get_page_by_title('popular-posts');
echo '<a href="' . get_permalink($the_page->ID) . '">Popular</a>';

Reading about the Template Hierarchy will also help.