This document provides an overview of WordPress templates and how they work. It explains that templates contain PHP code and CSS that retrieve content from the WordPress database and style it for display. Common templates include index.php, style.css, header.php, footer.php and others. Template tags in the PHP code allow content to be selectively displayed. The document provides examples of how different pages and post types are displayed using these templates and tags.

1. #wpcbus
www.wpohio.com
Follow @wpohio
TONIGHT’S SPEAKER
@angiemeeker
WWW.ANGIEMEEKERDESIGNS.COM
Get on the internet here using username/password: dtc_guest

2. DISSECTING
WORDPRESS
THEME AND PAGE
TEMPLATES

3. WHY?
Form and function
are two different,
but related
things.

4. IF WORDPRESS THREW UP.
wp-admin
wp-content The wp-config.php file
contains a roadmap to your
MySQL database.
wp-includes
other files
including
wp-
wp-config.php
.htaccess
index.php

5. Inside wp-config.php is
WordPress’ roadmap for
connecting to MySQL
database

6. define (‘DB_INFORMATION’)
When installing WordPress yourself manually,
you have to enter these values after creating a MySQL database.
When using a one-click install through a hosting company,
they create the database and fill in these values for you.

7. WHAT’S IS IN THE DATABASE?
Tables of all of your stuff.
http://codex.wordpress.org/Database_Description
wp_commentmeta Meta information per comment
wp_comments Comments
wp_links Information related to the Links feature
wp_options Options set under Administration>Settings
wp_postmeta Meta information per post
wp_posts Posts, Pages, Navigation Menu Items
wp_terms Categories and Tags
wp_term_relationships Association of posts with categories, link categories
wp_term_taxonomy Description of taxonomy (category, link, tag)
wp_usermeta Meta information per user
wp_users List of users

8. CLEANING UP.
With WordPress connected to your MySQL database,
we’ll use PHP to retrieve that information through
directions specific to the page viewed on your site.
These PHP directions for each page template,
along with the CSS to style those directions,
make up your WordPress theme.

9. WHERE
TO FIND
YOUR
THEMES
IN YOUR
WP
INSTALL
wp-
wp-content/themes

10. meetup
WHERE
wp-admin TO FIND
wp-content
YOUR
themes THEMES
twentytwelve IN YOUR
plugins
WP
wp-includes
INSTALL
other files

11. twentytwelve
ALL
THEMES
index.php
MUST
style.css
INCLUDE
AT
LEAST
THESE
FILES

12. .css
s tyle
/*
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/
Description: The 2012 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width
License:
License URI:
General comments (optional).
*/
YOUR CSS GOES HERE.

13. php
ex.
ind
<?php get_header();
(have_posts
have_posts())
if (have_posts()) :
(have_posts
have_posts())
while (have_posts()) :
the_post();
the_post();
the_content();
the_content();
endwhile;
endwhile;
endif;
endif;
get_footer(); ?>

14. php
ex.
ind
My Site Name
Site Description
Page One
Page Two
The full content of my first post would be
here.
The full content of my second post would
be here.
Footer Stuff

15. php
ex.
ind
header
first post
second post
footer

16. HOW DO
YOU GET
FROM
THAT TO
THIS?

17. GET THERE
USING TEMPLATES &
TEMPLATE TAGS & this we’re barely covering tonight.
CSS. this we’re not covering at all.
http://codex.wordpress.org/Stepping_Into_Templates
http://codex.wordpress.org/Stepping_Into_Template_Tags

18. twentytwelve
MOST
OFTEN,
index.php page.php
THEMES
style.css comments.php
INCLUDE
header.php functions.php
sidebar.php
THESE,
home.php
footer.php front-page.php
TOO.
single.php
archive.php
category.php
tag.php

19. index.php MOST
OFTEN,
One template to THEMES
rule them all. INCLUDE
THESE,
style.css TOO.
Defines the style of the
HTML elements of your
site

20. home.php MOST
OFTEN,
Default front page THEMES
(which by default INCLUDE
shows latest posts). THESE,
TOO.
If you use a static page
as your front page,
this template is used for
your “Posts Page.”

21. front-page.php MOST
OFTEN,
If you use a static page THEMES
as your front page, INCLUDE
this is the template used. THESE,
TOO.

22. single.php MOST
OFTEN,
Displays a single post. THEMES
INCLUDE
THESE,
TOO.

23. page.php MOST
OFTEN,
Displays a single page. THEMES
INCLUDE
THESE,
TOO.

24. header.php MOST
OFTEN,
Add a call to wp_head().
<?php wp_head(); ?>
THEMES
Plugins use this action hook to add their own scripts,
stylesheets, and other functionality.
INCLUDE
Include a call to the nav menu
THESE,
<?php wp_nav_menu(); ?> TOO.

25. footer.php MOST
OFTEN,
Should include a call to THEMES
the footer before the INCLUDE
closing body tags: THESE,
<?php wp_footer(); ?>
TOO.
</body>
</html>
(Bad themes don’t have this,
and curse the world because of it).

26. comments.php MOST
OFTEN,
Used to display the THEMES
comments template. INCLUDE
THESE,
TOO.

27. sidebar.php MOST
OFTEN,
Used to display a sidebar THEMES
and its widgetized areas INCLUDE
THESE,
TOO.

28. functions.php MOST
OFTEN,
Enable features such as THEMES
Sidebars INCLUDE
Navigation Menus THESE,
Post Thumbnails
TOO.
Post Formats
Custom Headers
Custom Backgrounds
Additional Widget Are

29. archive.php MOST
OFTEN,
Used when a category, THEMES
author, or date is queried. INCLUDE
THESE,
Will be overidden if a
TOO.
category.php, author.php
or date.php template is
available.

30. category.php MOST
OFTEN,
Used to display a THEMES
category archive. INCLUDE
THESE,
TOO.

31. tag.php MOST
OFTEN,
Used to display a tag THEMES
archive. INCLUDE
THESE,
TOO.
date.php
Used to display a date
archive (year, month,
week, date).

32. This was only an intro.
The Loop leads to…
Multiple loops…
Templates lead to…
Custom templates…
Template tags lead to…
Conditional tags…

33. Angie Meeker
@angiemeeker
angie@angiemeekerdesigns.com
614.353.0633
Download sample files:
http://goo.gl/IFzhz