By far the most common question that I have received from ya’ll since starting Edit and Post is “How do I make my blog look the way I want?”. Now that you have installed WordPress and know how to install WordPress plugins, it’s time to start learning about themes.
Themes hold 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 installed with several themes, including the Default theme. Let’s take a look at the files in the Default 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.
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 lots 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 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.
comments.php – Displays the comments for a post. This file is typically only called from single.php.
archive.php – Displays category, tag, and date archives, as well as any other kind of archive you might have on your site due to some advanced coding. 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.
archives.php – Displays a list of your archives by month and subject. Includes PHP calls for all of the other page elements that you display on your archives page.
comments-popup.php – If you want comments to display in a popup window, this file will be used to control what is displayed in that window.
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 here will be executed when you call the function from your other template files.
image.php – Displays a single image and includes PHP calls for all of the other page elements that you display on a single image.
links.php – Displays your blogroll links. Includes PHP calls for all of the other page elements that you display on your blogroll links page.
page.php – Displays 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.
search.php – Displays search results and includes PHP calls for all of the other page elements that you want to display on the search results.
sidebar.php – Displays the sidebar widgets that you have defined; if no widgets are defined, displays a default sidebar.
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 div, and div tags 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.
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 div tags. The header.php file probably had several div tags to display your header image, menu bar, etc. In single.php the main content of your page is also enclosed in a div tag. Let’s call it “content”. When you include a div tag in your php file, WordPress will look in your stylesheet for the div tag name and display the results using the CSS assigned to that tag.
Then it is going to ask the WordPress database for the data from the post itself. This is an if statement in PHP, because if no post exists you want to include a message saying that no post exists.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Once it knows what the post is, you’ll want to format it accordingly. So perhaps you have a div tag for your post header that you surround the post title with. Because that is the only thing you want to format as a “title”, you will then close the div tag.
<?php the_title(); ?>
Now that you have displayed the title, you want the content. You probably have some styling for this, let’s call it “entry”.
<?php the_content(); ?>
Then you want to include your comments.php file.
<?php comments_template(); ?>
Now let’s close the if statement from above and tell WordPress what to display if no post exists, and once that is done we are done with the “content” so we will close the div.
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
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 include(TEMPLATEPATH . ‘/sidebar.php’); ?>
<?php get_footer(); ?>
This is a lot to wrap your arms around 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?