Breaking Down a WordPress Theme

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!

PHP files control what is displayed

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.

CSS files control how things look

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.

English, please?

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.

<div id=”content”>

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.

<div class=”post_header”>

<?php the_title(); ?>

</div>

Now that you have displayed the title, you want the content.  You probably have some styling for this, let’s call it “entry”.

<div class=”entry”>

<?php the_content(); ?>

</div>

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; ?>

</div>

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?

9 responses to Breaking Down a WordPress Theme
  1. This is a great tutorial! Can't wait for pt2! >> RT @amiatEAD:Let's start talking about WordPress themes: http://bit.ly/bAZnxd

  2. Thanks for this! There are a few things I’ve been struggling with and this post clears things up.

  3. Brit writes... {April 1, 2010 at 8:04 pm}

    This is why I love the guys at my office. They make it so easy for me to understand, and fix something if I can’t.

    Great post, Ami!
    .-= Brit´s last blog post: diy invites with a doily =-.

  4. Jenna writes... {April 5, 2010 at 12:57 am}

    Ami this series is just amazing. Wish I weren’t so lazy, otherwise I’d actually go in and make some much needed changes based on your tips :)

  5. Having discovered this blog today through your Engage10 recap, my take on the detailed blog on WP themes is this… do what you do best, outsource the rest.

    In a former life, I have a Computer Science degree and have done my fair share of coding, but pretty quickly I worked out that, as time is money, I only wanted to take developing my WordPress blog myself just so far.

    Instead, I invested a) in the Thesis Theme (which does a lot of the behind the scenes for you), and b) some time from a friendly web developer to tweak the theme for me.

    Sure, I still did much of it myself, and I have learned how to integrate plugins here and there, but I have not taken the time to become expert in PHP etc. If it gets too tricky, I hire an expert.

    Hey, at one stage I used to do all my own car servicing, but now I pay to have this done, and will keep doing it as long as a) I can earn a higher rate for my time than the motor mechanic, and b) I don’t really, really love servicing cars.

    Just another opinion !
    .-= Tom McCallum´s last blog post: Ideas from a Luxury Wedding Summit =-.

    • Ami writes... {June 14, 2010 at 7:48 pm}

      hi tom! thank you so much for stopping by edit and post. edit and post is a business, blogging, and wordpress resource site so you will find several posts on coding and theme development, in addition to business-related posts like my engage recap.

      thanks for taking the time to share your thoughts!

  6. [url=http://films-474.1gb-888.info/acai-berry-diet-facts_52.html]Acai berry diet facts[/url]
    [url=http://hplg-glamur.1gb-888.info/taxidermy-school-online_676.html]Taxidermy school online[/url]
    [url=http://qezf-613.1gb-888.info/]Download college textbooks online[/url]
    [url=http://mitg.1gb-888.info/make-money-modeling-online_219.html]Make money modeling online[/url]
    [url=http://class.1gb-888.info/electronic-cigarette-joye_1033.html]Electronic cigarette joye[/url]
    [url=http://class-porn.1gb-888.info/perfume-outlets_794.html]Perfume outlets[/url]
    [url=http://woomen-ubnj.1gb-888.info/mothers-car-rental-deals_759.html]Mothers car rental deals[/url]
    [url=http://popka-pregnant.1gb-888.info/]Free government money[/url]
    [url=http://tape-423.1gb-888.info/cosmetic-dentistry-and-atlanta_804.html]Cosmetic dentistry and atlanta[/url]
    [url=http://heedtqko.octopis.com/nina-mercedez-porn-galleries.html]Nina mercedez porn galleries[/url]
    [url=http://jksfiazm.uv.ro/stevie-porn_pl.html]Stevie porn star texas[/url]
    [url=http://xdduzpcw.uv.ro/page-53.html]Nasty mexican nude free porn[/url]
    [url=http://ochswypd.octopis.com/blog-youtube-porn.html]Youtube porn free full length movies[/url]
    [url=http://umtppsgd.uv.ro/blog-mother-and.html]Mother and pt granddaughter porn[/url]
    [url=http://gtcyzuim.uv.ro/tag-momens-privits.html]Momens privits porn[/url]
    [url=http://fuoqryhl.xhost.ro/]Full lenth free porn movies – portal porn video[/url]
    [url=http://cptayvtv.octopis.com/tag-watch-hintia.html]Watch hintia porn on line[/url]
    [url=http://wbpxxzlr.marte.ro/page-80.html]Free porn car[/url]
    [url=http://spzppznm.xhost.ro/tag-lactation-free.html]Lactation free porn[/url]
    [url=http://kxmfpnqt.sapte.ro/internet-porn-brain-cash.html]Internet porn brain cash[/url]
    [url=http://cpdzydsl.marte.ro/tag-old-men.html]Old men fucking young girls porn[/url]
    [url=http://zuwmqcrj.trei.ro/blog-free-lebian.html]Free lebian ipod porn[/url]
    [url=http://ujewemhm.trei.ro/]Vampirefreaks porn – site sex tube[/url]
    [url=http://rcaagbfc.octopis.com/free-porn-and-boys.html]Free porn and boys[/url]
    [url=http://orstcfae.octopis.com/post-541.html]Hip hop porn videos[/url]
    [url=http://pdginqck.uv.ro/]Aimee porn free – mature girls film[/url]
    [url=http://nzcgubnr.octopis.com/blog-big-dick.html]Big dick trannie porn[/url]
    [url=http://lbmrwqnm.uv.ro/tag-extreme-lesbian.html]Extreme lesbian free porn[/url]

  7. I found your blog site on google and verify a few of your early posts. Proceed to maintain up the excellent operate. I just additional up your RSS feed to my MSN News Reader. Searching for forward to reading more from you afterward!…

  8. Hello, this is great. The “behind the scenes” of my WordPress theme was very confusing and you really simplified it. Thanks!

leave a comment