Now that you have installed WordPress and know how to install WordPress plugins, it’s time to learn the basics of a WordPress theme! Themes hold the files that tell the browser what to display and how it should look. If you remember from this post, PHP gets turned into HTML and that tells the browser what to display. In coding language PHP = “get”. CSS tells the browser how the html you have coded should look.
WordPress comes pre-installed with three themes, including the latest default theme, Twenty Fifteen. Let’s take a look at the files in the Twenty Fifteen theme and see what they do. Don’t worry if all of this is very confusing now!
index.php – Displays your main blog page. Includes PHP calls for all of the files that control how your main blog page is displayed. Includes code for your main blog pagination.
header.php – The header file essentially sets up the page and includes PHP calls to “get” the CSS files for the theme, the blog information and title from your WordPress options, and your header image. It also calls WordPress itself from your server and includes the opening html for the body of your page. There can be much more included in here (and we’ll get to that when we talk about more complex coding).
footer.php – “Closes” your page in the browser. Calls the WordPress footer. Also typically includes any credits, copyright info, etc that you want to display.
single.php – Displays a single post. Includes PHP calls for all of the other page elements that you display on a single post type. The post type’s content is called in content-[POST-TYPE].php.
content.php – Displays the content of a WordPress post with the “standard” post format, including its title and body. The author bio is called in author-bio.php.
author-bio.php – Displays information about the post’s author. Pulls from the WordPress user information fields.
content-link.php – Displays the content of a WordPress post with a “link” post format, including its title and body.
content-none.php – This file is called when a user performs an action where no results are found, including searches with no results.
page.php – Displays the framework for a WordPress page and includes PHP calls for all of the other page elements that you want to display on that WordPress page. This file usually looks a lot like single.php, but typically does not include a call to the comments template. The page content is called in content-page.php.
content-page.php – Displays the content of a WordPress page, including its title and body.
comments.php – Displays and formats the comments for a post. This file is typically only called from single.php.
archive.php – Displays category, tag, taxonomy, and date archives. Includes PHP calls for all of the other page elements that you display on your archive page.
404.php – If someone is searching for something on your site and goes to a permalink that doesn’t exist, they will see this 404 page. Includes PHP calls for all of the other page elements that you display on your 404 page.
functions.php – A super-important file that you don’t want to edit until you know what you’re doing. functions.php basically performs like a plugin, and any PHP code in this file will be executed when you call the function from your other template files.
image.php – Displays a single image attachment and includes PHP calls for all of the other page elements that you display on a single image.
search.php – Displays the framework for search results and includes PHP calls for all of the other page elements that you want to display on the search results. Typically looks quite a bit like archive.php. The search results content is called in content-search.php.
content-search.php – Displays the content of a WordPress post when it appears in search results, including its title and body.
sidebar.php – Displays the sidebar widgets that you have defined; if no widgets are defined, displays a default sidebar.
back-compat.php – Contains functions to help with the theme running on WordPress versions before 4.1.
customizer.php – Contains the functionality that allows for customizations to the Twenty Fifteen theme (under Appearance » Customize).
custom-header.php – Contains the functionality that allows for a custom header in the Twenty Fifteen theme (under Appearance » Header).
style.css – a theme’s stylesheet is where the CSS for a theme is held. Themes can have one or many stylesheets. CSS is pretty complicated, so for right now know that each little section of CSS is called a selector, and selectors control how whatever is inside them is displayed.
rtl.css – If you are publishing in a language that reads right to left, this stylesheet will be used.
Let’s look at an example and maybe this will start to make more sense. Remember single.php? It’s the file that displays your single post page. We’ll use a common single.php format, with the content on the left and sidebar on the right.
single.php is going to start by doing a PHP call for header.php. Remember, the header.php has already called in all of your stylesheets and WordPress itself.
<?php get_header(); ?>
Each section of your page is styled using CSS selectors inside either <div> or <span> tags. Think of a <div> tag as a section of your page and a <span> tag as a portion of a section. Div tags (“divs”) can either be IDs (noted with a #) or classes (noted with a .). IDs are meant to be used once on a page, while classes are intended for items to used multiple times. Divs are opened with <div> and closed with </div>. The header.php file probably had several divs to display your header image, menu bar, etc. In single.php the main content area of your page is also enclosed in a div tag. Let’s call it “primary”. When you include a div or span tag in your php file, WordPress will look in your stylesheet for the div or span tag name and display the results using the CSS selectors assigned to that tag. Because we are calling a single post, the class of this primary div will be “content-area”. We’ll also tell the browser that this is the main content area.
<div id="primary" class="content-area"> <main id="main" class="site-main" role="main">
The template is then going to ask the WordPress database for the data from the post itself. This portion is referred to as “starting the loop”.
<?php while (have_posts()) : the_post(); ?>
Once it knows what the post is, the theme calls the appropriate content template file for the post’s format.
<?php get_template_part( 'content', get_post_format() ); ?>
If the post has no post format (let’s say it’s just a standard blog post), it will look to the file content.php. content.php lets the browser know that this is an article, with both header and content sections. The WordPress function the_title(); calls the post title and the WordPress function the_content(); calls the post content. To simplify:
<article> <header class="entry-header"> <?php the_title(); ?> </header> <div class="entry-content"> <?php the_content(); ?> </div> </article>
That’s pretty much it for content.php. Once content.php has finished its display, we return to single.php. single.php would next typically include a call to your comments.php file.
<?php comments_template(); ?>
Now we’ve “looped” through a complete post, so we’ll tell WordPress we are done.
<?php endwhile; ?> </main> </div><!-- closes .content-area #primary -->
Lastly, we’ll call the sidebar and the footer. Remember, the footer closes the page, so after the footer is called, single.php has done its job.
<?php get_sidebar(); ?>
<?php get_footer(); ?>
This is a lot to wrap your arms around, I know! But I hope it’s starting to make some sense, because we’re going to be talking a lot more about themes as we start to edit each of the theme files, make new theme files, and add in awesome new functionality!
Any questions so far?