How WordPress Templates Work
How WordPress Templates Work
A WP template is a single php doc that determines what certain pages look like. WP has naming conventions for these files. If you go to Admin > Appearance > Editor, you can see a list of the templates for your theme, click to view them, and edit them right from there!
The Template Hierarchy
http://wphierarchy.com/ is a great resource. It reads from left to right. Let’s say you have a single page, which you’d see on the left. WP then figures out if its a post page, or a static page. If it’s static, it would then see if we’re using a custom template or a default one. From there, the page used depends if there’s one of the orange ones, and if not it will use page.php. If there’s no page.php, it will use the main fallback page index.php. Notice the fallbacks go from specific (one of the orange ones) to generic (page.php) to the most generic (index.php).
In theory, you could build a template with just an index.php file, though you probably won’t do that.
Common WP Template Code
The Loop is a php statement in WP that cycles through the content for the given page. From that, there is also WP Query, a customization you add to the loop that lets you pass in parameters to search for more specific things, like posts of a certain type or author.
The get_template_part function is used to include files, rather than the normal include(). It accepts the slug of the file you’re looking for, and you can comma separate the second part of it. For example loop-index.php would be get_template_part(“loop”, “index”);
You’ll often see the format content-something.php, for custom post types, which can then be included within other pages.
Walkthrough of Example Site
We’ve installed a theme from them, and set up pages for home, contact, about, blog and services. Then we went to Appearance > Customize and set it to a static home page with home as the page, and the posts page set to blog. We’ll customize our menu to show those pages. Then, we’ll add some widgets.
Core WordPress Theme Files
style.css
Contains the main css for the theme, and the meta data for it in a comment at the top. If you want to make a child theme, which is recommended if you’re customizing one, make sure to import the styles from the parent. If you’re adding css or js from somewhere else though, use the functions.php method discussed in my other blog post.
index.php
This is the default back up template for all other files. So, you should keep this fairly generic. Here’s a good example of one, that basically just pulls in the title and content.
The only thing you might want to add is an else block if there’s no content.
header.php
This is the file called by the get_header() function. In the title you’ll usually use the_title() and get_bloginfo(), or use an SEO plugin to do this for you. wp_head() lets WP and plugins hook in and put links and other head elements here. Remember that you load up your css and js via functions.php.
The body_class function is usually used on the opening body tag, and adds helpful classes.
The main nav is also here as well, using wp_nav_menu().
footer.php
The file brought in by get_footer();. Here you close out all your markup from the header.php file, along with your footer code. wp_footer() lets WP and plugins add stuff here, like js file links.
sidebar.php
This file gets called by get_sidebar(). It’s most common use is to dispay widget info, and have a conditional to display a message if widgets are not set. You can also hardcode things here that the user doesn’t need to access or edit.
You can call this a few different ways. get_sidebar takes a parameter which is a slug, so get_sidebar( “blog” ) would look for a file names sidebar-blog.php rather than sidebar.php. You can actually also do this for headers and footers, though that is much less common.
Having different sidebar files means you’ll have different widget areas to add to in your Appearance > Widgets section.
Homepage Templates in WordPress
Homepage Templates in WordPress
WP uses a different template for the home page depending on if you’re using a static page or blog posts. If you’re using the static option, you’ll use front-page.php for that, and home.php controls what the blog listing page looks like. If you don’t use the static option, then home.php gets used for the home page, and front-page.php is not used. If you’re making a theme for public release, be sure to make both.
If you don’t have a front-page.php, and you choose to use a static home page, WP will use the page.php file as the home page template. If you don’t have a home.php, and choose to display blog posts on the home page, WP will use the index.php template.
front-page.php
You can choose what home page to use under Appearance > Customize > Static front page. We’ll set it to our Home page. Now, if we go to our front-page.php file and make changes, we’ll see them on the home page.
If we don’t have a front-page.php file, it will use page.php instead. You can see that in the hierarchy below. If there was no page.php, it would use index.php.
home.php
To test this, first add a couple blog posts. Then, go back to Appearance > Customize > Static front page and choose the last few posts option. Now, if front-page.php is gone, it will use home.php. Notice in the hierarchy above, both types start with front-page, you then choose the type and it goes accordingly.
If both front-page.php and home.php were gone, it’d use index.php.
Note: This lesson was very unclear and may be incorrect.
Page and Post Templates in WordPress
Static Page Template Files
By default, page.php controls pages. To get more specific with it, you can have a page with an id specific to that page. For example, if we look at our about page we can see that in the query string it has the post equal to 7. If we make a file page-7.php, it will use that template over page.php.
Another way is use the name of the page, aka as the slug. So, for the about us page, we’d write page-about-us.php. Note that the one with the slug will be used before the one with the id.
Another way is to create a custom template by adding a comment at the top with Template Name: the name of the template. If you make a file this way, when you edit a page, on the right you’ll see this as an option on the right under Template. Note that this will come before the slug and id page templates.
Single Post and Post Format Tempaltes
We’ll start by setting it to a static home page, with the page as home. Now, go to the blog page, which is using the home.php file, and click on a post. Single post pages use the single.php template. Looking in the template, you can see for a single post it checks if it’s an attachment, custom, or blog post, in this case blog, then checks for a single-post.php file, then for a single.php file. Right now, it’s going to single.php.
Note that you can’t do the custom types for pages with the slugs and ids for posts.
The Comment Template
This contains all the code and markup used to make the comment form on the site. Remember that the fields it displays change depending on whether or not you’re signed into WP. Normally the default code here is pretty good, but if you want to make your own, start by copying a default WP template like twentyfourteen.
Post Formats
Post formats help describe what the post is about, or what type of content it is using. Examples include video, audio, chat, etc. The get_post_format is often used in the loop, and will echo out the post format selected for that post. This can then be used inside of the get_template_part function.
So if the post format was status, WP would then go look for a file named content-status.php, and if it couldn’t find it, would fallback to the next template in the hierarchy.
Note that to use these, in your functions.php file you must add_theme_support for them, and specify which ones you want to use.
Now, when you go to add a post you’ll find the option to select the format on the right hand side.
Kyle's Awesome Awful Websites 