The Starting Point: index.php

All themes begin with index.php. It’s a short file, but it triggers everything:

<?php
get_header(); // Gets the header from header.php

$elastic_layout = elastic_get('layout'); // Gets the layout
$elastic_layout->run();	// Runs the layout

get_footer(); // Gets the footer from footer.php
?>

Not What You’d Expect: header.php and footer.php

get_header(); // Gets the header from header.php
// . . .
get_footer(); // Gets the footer from footer.php

header.php and footer.php have no impact on the visual page.
The header and footer that appear on your page will be created using modules.

So what do header.php and footer.php do?

header.php creates the head element, calls wp_head() and opens the body element.
footer.php calls wp_footer() and closes the body and html elements.

Note: If you wish to include any JavaScript or CSS in your theme, we recommend you use the wp_enqueue_script() and wp_enqueue_style() functions, respectively.

The Layout: custom/layout.php

$elastic_layout = elastic_get('layout'); // Gets the layout

The layout tells Elastic which modules it should create and is located in custom/layout.php. A sample layout looks like this:

<?php
$layout = new Group("container", array(
	new Header(), // Automatically named "header"
	new Group("body", array(
		new Content(), // Automatically named "content"
		new Sidebar("primary-widgets"),
		new Sidebar("secondary-widgets"),
	)),
	new Sidebar("footer"),
));
?>

This would create a layout with a header, a content module, two sidebars and a widgetized footer (a sidebar named “footer”). The layout must set the $layout variable equal to the layout.

Executing the Layout

$elastic_layout->run();	// Runs the layout

This last line tells the layout to generate the contents of the body tag. In the next section, we’ll learn how Elastic turns $layout into a readable page, and how to customize our WordPress posts and pages.