The Main Index For Building Your Web Page Output In WordPress

There is expanded coverage for this topic on pp. 456 – 466 of the 2017 WordPress All-In-One For Dummies.

Every WP theme needs a minimum of two files: style.css and the main index file known as index.php.

When someone loads your WP site, index.php is the first file WordPress loads. So everything starts with you index.php.

The first thing the index.php file does is call in the Header template (meaning that it integrates the information in the header.php file into the page that the index.php builds.

We call in a template file using a function or template tag:

<?php get_header( ); ?>

The index.php calls in, meaning includes in building the web page, three other files:

get_template_part( ‘featured-content’ ); and later                                        get_template_part( ‘content’, get_post_format() );

get_sidebar ( ); pulls in the sidebar template into your page

get_footer ( ); pulls in the footer template.


Here is the index file for the 2014 theme:

* The main template file
* This is the most generic template file in a WordPress theme and one
* of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query,
* e.g., it puts together the home page when no home.php file exists.
* @link
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0

get_header(); ?>

<div id=”main-content” class=”main-content”>

if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( ‘featured-content’ );

<div id=”primary” class=”content-area”>
<div id=”content” class=”site-content” role=”main”>

if ( have_posts() ) :
// Start the Loop.
while ( have_posts() ) : the_post();

* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
get_template_part( ‘content’, get_post_format() );

// Previous/next post navigation.

else :
// If no content, include the “No posts found” template.
get_template_part( ‘content’, ‘none’ );


</div><!– #content –>
</div><!– #primary –>
<?php get_sidebar( ‘content’ ); ?>
</div><!– #main-content –>



Here is the header.php file for the 2014 theme:

* The Header for our theme
* Displays all of the <head> section and everything up till <div id=”main”>
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
?><!DOCTYPE html>
<!–[if IE 7]>
<html class=”ie ie7″ <?php language_attributes(); ?>>
<!–[if IE 8]>
<html class=”ie ie8″ <?php language_attributes(); ?>>
<!–[if !(IE 7) & !(IE 8)]><!–>
<html <?php language_attributes(); ?>>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js”></script>
<?php wp_head(); ?>

<body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<?php if ( get_header_image() ) : ?>
<div id=”site-header”>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”>
<img src=”<?php header_image(); ?>” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>”>
<?php endif; ?>

<header id=”masthead” class=”site-header” role=”banner”>
<div class=”header-main”>
<h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>

<div class=”search-toggle”>
<a href=”#search-container” class=”screen-reader-text” aria-expanded=”false” aria-controls=”search-container”><?php _e( ‘Search’, ‘twentyfourteen’ ); ?></a>

<nav id=”primary-navigation” class=”site-navigation primary-navigation” role=”navigation”>
<button class=”menu-toggle”><?php _e( ‘Primary Menu’, ‘twentyfourteen’ ); ?></button>
<a class=”screen-reader-text skip-link” href=”#content”><?php _e( ‘Skip to content’, ‘twentyfourteen’ ); ?></a>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘menu_id’ => ‘primary-menu’ ) ); ?>

<div id=”search-container” class=”search-box-wrapper hide”>
<div class=”search-box”>
<?php get_search_form(); ?>
</header><!– #masthead –>

<div id=”main” class=”site-main”>

This entry was posted in Ecommerce, Open Source Software, Wordpress. Bookmark the permalink.