How Wordpress Themes Actually Work - infographic

[Adam Dicker]

With all the WordPress theme frameworks that arose over the past few years, you'd almost forget what a normal WordPress theme looks like. Almost, because Yoast has got your back and we're about to remind you! Check out our anatomy of a WordPress theme infographic:





For reference, here is the copy in the infographic:

Anatomy of a WordPress theme
The cheatsheet for how your blog works

wordpress themes are made up of a folder of template files, each of which controls a specific piece of your theme. Parts of your site that remain static no matter what page you're on are controlled by header, sidebar and footer files. You can hack these files so they detect what page you are on and serve different content accordingly, such as display different navigation on posts than on pages; however it is most common for these sections to look the same throughout the site.
■header.php
Global file that displays headers and navigation. Also contains HTML code.
■The Loop
The display of contents of the main area of your site are controlled by individual WordPress theme template files using what's called "the loop".
■sidebar.php
Sidebar display is controlled in this file. Multiple sidebars can be set up in functions.php, and contents of sidebar widgets are set up from the WordPress wp-admin panel.
■footer.php
Contains instructions for global footer and closes HTML tags.

index.php - home

The index file controls what the homepage of your WordPress theme looks like. By default it is a loop that queries and then displays the most recent blog posts, with a link in the bottom to view previous posts.

Alternately, you can specify in wp-admin -> settings -> reading to have the home page be a page you created yourself in WordPress. In that case, you specify a different page/URL for the regular blog posts to appear on, and that page is generated by index.php.

single.php - individual posts

The display of individual posts in your WordPress theme is controlled by a little file called single.php. It contains a loop that queries just one post and displays it.

You can specify if you want sidebars (and which you want), if you want it to look different than the other pages on the site.

page.php - individual pages

Page.php controls what pages look like. You can choose to eliminate sidebars or other elements, add other unique elements for pages alone.

WordPress also allows you to create different page templates within your WordPress theme for different types of pages. To create a page template, simply copy page.php, rename it to whatever you want, then add this code to the top:


/*
Template Name: YourPageNameHere
*/
?>

archive.php, category.php, tag.php - archives

You can control the look and feel of different archives using template files also. If there is no archive file, the archives will look like index.php; however you can create an archive.php to override that. If you create a file called category.php, it will override archive.php for categories only. If you create a tag.php, you can override it for tag archives only.

The Loop

The loop is perhaps the most powerful part of your WordPress theme. It starts with a query (which determines which posts or pages to grab), and ends with a PHP "endwhile" statement. Everything in between is up to you. You can specify the output of titles, post content, metadata, custom fields and commenting all within the loop and each element is output for each post or page until the query is done. You can set up multiple loops and queries on a single page; for example: on a single.php you could have the loop showing the entire content of a single post, with a loop outputting just titles and thumbnails for related posts below it.
■Query post or page
■Start Loop
■the_title (outputs the title of the post)
■the_excerpt (outputs the post excerpt)
■the_content (outputs the full post content)
■the_category (outputs the post categories)
■the_author (outputs the post author)
■the_date (outputs the post date)
■other tags (there is a variety of other tags you can use in the loop)
■endwhile;
■Exit the loop

Background files of a WordPress theme

In order for a WordPress theme to work, it needs a few essential background files. These files can be modified to your needs and can quite powerfully affect the custom look and functionality of your site.

comments.php

This controls the output of comments, which can be included in the loop if you desire comments on your theme. Comments.php can be overriden by plugins such as Disqus, which then take over comment functionality on your blog.

functions.php

Functions.php allows you to put your own custom PHP code in order to modify core elements of your theme. It is often used to specify multiple sidebars, change the number of characters in the excerpt or add custom admin panel options for wp-admin.

style.css

This is the main CSS stylesheet for your theme. It also contains text at the top which tells WordPress what the name of your WordPress theme is, who the author is and what the URL of your site is.

This infographic was created in collaboration with the artists of CreditLoan.com.
http://yoast.com/wordpress-theme-anatomy/

[RTM.net]

Great resource and a must see for anyone using WordPress - and if there are domain investors not working with WP yet; you should be!

Thanks for sharing it...

Rob

[Zoobar]

...

A good read. Thanks!

[Gerry]

WOO HOO!

Adam going to create his own sites???

[Adam Dicker]

Adam going to create his own sites???

I have done about 20 so far, here are a few to look at limo.ca , liberationtreatment.com, gout.ca, planets.net.

Many more coming as I completely abandon parking.

-=DCG=-

[RTM.net]

Many more coming as I completely abandon parking.

-=DCG=-

Amen to that - even the sloppiest microsite built on WP and monetized through direct CPA / CPC agreements will outperform parking... at least in my experience.

Rob

[Bill Roy]

Adam glad you have given up on parking, I think more and more will do so.

I presently favour Joomla! over WordPress so I would like to ask if you have tried Joomla!, and if so what was the determining factors that made you decide on WP?

[Gerry]

planets.net.

-=DCG=-

I remember you posting a site or lander done a few years back.

Seriously...planets.net (or the .com) is one of my alltime favorite domains.

Staggering potential not only as an educational site but also for the psychic, soothsayers, horoscope, science, tides, and so on.

[RustyK]

I have done about 20 so far, here are a few to look at limo.ca , liberationtreatment.com, gout.ca, planets.net.

Many more coming as I completely abandon parking.

-=DCG=-

Don't forget to optimize for mobile.

Great read. Thanks for sharing Adam.

[eeedc]

While I love WP, I never did like the big standard default headers such as, "Joe's Website," which take up the top space with a drawing, which is repeated on evey page. IMHO, use a smaller header or one that has advertisments in it, such as the top of this forum.

[Chappy]

Thanks Adam.

I've used wordpress for a while. Love the free Mystique theme from Digital Nature.

[ddaybofb]

I think i might making my domain into websites like gout.ca, i know wordpress but where did get the ebook from to use?

[Adam Dicker]

I think i might making my domain into websites like gout.ca, i know wordpress but where did get the ebook from to use?

I will teach you how step by step with pictures even

[MichaelJ137]

I will teach you how step by step with pictures even

Where are you going to do this? DNFCollege? If so, I want in!!! Ive been waiting for a nice WP tutorial from a veteran.....

[mamatha]

Thanks for sharing this information, WordPress developer and all-around web geek Joost de Valk has just graced the Internet with a highly useful infographic. For a medium that leans toward the amusing, infographics can occasionally be enlightening or even helpful for later.

[hostnametoip]

Great thank for sharing informations

[Anthony Ng]

While I love WP, I never did like the big standard default headers such as, "Joe's Website," which take up the top space with a drawing, which is repeated on evey page. IMHO, use a smaller header or one that has advertisments in it, such as the top of this forum.

Twenty Eleven (the default 3.2 theme made out of Duster also by Automattic) may not have the best look, but if you ask me, Default (or Kubrick) is by far the ugliest. But then perhaps the point is to encourage us to download and/or develop more themes. LOL! Seriously, I care more about its functionality, like if a theme is responsive (to mobile), and not clumsily written with excessively more files than necessary. In many cases, I actually tweak to incorporate e.g. the 960 grid system into a boilerplate theme like Toolbox.

[dorissmith]

Hay, that is a helpful information.....

[DrewryMedia]

would you happen to have an official website, whereas you offer these word press themes along with others for free?

[Anthony Ng]

would you happen to have an official website, whereas you offer these word press themes along with others for free?

http://wordpress.org/extend/themes/