Templates and file structure

The templates in WP Rig work pretty much the same way WordPress templates have always worked. The only difference is they’re more modular than they have been previously.

index.php = single template for all views

Out of the box, WP Rig uses index.php as the single template file for all views, meaning whether you have a post or a page or an index page or an archive, it’s all powered by index.php. This is to make the starter theme as small as possible, and it gives you the option as the developer to choose how you want to extend it, rather than having to work with existing files.

<?php
/**
 * 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 https://codex.wordpress.org/Template_Hierarchy
 *
 * @package wp_rig
 */

namespace WP_Rig\WP_Rig;

get_header();

wp_rig()->print_styles( 'wp-rig-content' );

?>
	<main id="primary" class="site-main">
		<?php
		if ( have_posts() ) {

			get_template_part( 'template-parts/content/page_header' );

			while ( have_posts() ) {
				the_post();

				get_template_part( 'template-parts/content/entry', get_post_type() );
			}

			if ( ! is_singular() ) {
				get_template_part( 'template-parts/content/pagination' );
			}
		} else {
			get_template_part( 'template-parts/content/error' );
		}
		?>
	</main><!-- #primary -->
<?php
get_sidebar();
get_footer();

Looking at the actual index.php template file, you’ll see this is very much like any other WordPress template file (see code sample above). Off the top, we call get_header(); which gives us header.php. Then we call in the style sheet for the content style so that it appears right above the actual content it will style. Then we have a <main> element and we do the post loop where we check to see if there are any posts available.

If there are posts available, then we get the template part called page_header. So that displays just the header section of the page. Then we go and see while we have posts, go get the posts, and then run the template part called entry. And here we’d look for the current post type, and then we grab that template part and display it. Then, if this is not a singular post, meaning it’s an index of some sort, then we get the template part called pagination to display previous posts or newer posts at the bottom. And then finally, if something goes wrong or there are no posts, we can also get the template part for error. Then at the very bottom, we can call in sidebar.php and then footer.php just like any other WordPress theme.

Modular PHP within template-parts directory

What you see here is the main difference between this template and WordPress template files you may have worked with in the past or template files you’ll find in other themes: in WP Rig there are far more modules, or more pieces to this. That’s because WP Rig wants to make development as easy as possible for you. And breaking things apart like this helps you create dry code, without it being too complex.

So what’s really happening here is we use all these different template parts to focus in on specific functionality. You can see all these template parts in the folder that is aptly named template-parts. Here, we have template parts for content, that would be the main post or page content. We have template parts for the footer, that’s on the bottom of the page. And we have template parts for the header.

screenshot of code editor showing file structure of WP Rig, template-parts directory is circled (/wprig-master/template-parts/) with subdirectories: content, footer and header
Go to /template-parts/ to find PHP template parts that are pulled into index.php

If we go up to header first, you can see kind of how this works. So if I open up header.php, you’ll see header.php starts off like any header does. We use declare the doctype and set up the overall head section of the document. Then we set up the skip-link so that we skip down to the content for accessibility purposes, and then go into the actual header with a class site-header.

screenshot of header.php file with header element (class of site-header) and template parts within header: custom_header, branding, and navigation (location of header template parts: /template-parts/header/branding.php, etc.)
header.php pulls in branding, custom_header and navigation from PHP files in /template-parts/header/ directory

And here we have three components, custom_header, which displays the custom header image, branding, which displays the site title and tagline, and navigation, which is the main menu.

These three pieces are contained in three separate modules up here under template-parts and header. So custom_header.php displays the header image tag, branding.php displays the site-title and site-description (see screenshot below of branding.php), and navigation.php sets up the site-navigation.

screenshot of branding.php file where site-branding and site-description div elements are created (located in /wprig-master/template-parts/header/)
branding.php file creates branding HTML and is located in /template-files/header/

Now seeing this, you can also see why this has been modularized to this extent, because it means if you have a custom post type and you want to have a special navigation just for that custom post type, you can create a new navigation file here, make some slight alterations to the existing code, and then save it as a new file, and then call it in from a custom header file. Same thing with branding.php, same thing with custom_header.php, and everything else. So you don’t have to make changes to the file and then copy a bunch of stuff over, you’re only working on the specific component you’re looking for. This becomes even more clear when we look at content (/wprig-master/template-parts/content/).

screenshot of entry_content.php file in code editor (located in /wprig-master/template-parts/content/)
entry_content.php is shown (located in /wprig-master/template-parts/content/entry_content.php)

Here we can see entry-content.php, which is the file that generates the actual content of a post or page, only focuses on the entry-content and nothing else. So here, you have just the content and then links (page-links) if there are multiple pages to the content, and nothing else. Then you can place that in any order you want in relation to other pieces of content. And you can also focus in on this ONLY if you want to create a specific template for something else. This modularity is in place to make it easier for you to make custom templates, and also easier for you to find the code you’re looking for, any time you want to make a change.

More from this course: