The document discusses the anatomy and architecture of a WordPress theme. It outlines the minimum files needed to create a theme, including index.php and style.css. It also lists common additional template files like header.php, footer.php, and sidebar.php. The document explains where themes can be found and installed on WordPress sites. It provides an example of the code needed in index.php and style.css. Finally, it discusses using folders to organize CSS, JavaScript, and image files that may be included in a theme.

1. ANATOMY AND
ARCHITECTURE OF A
THEME
The pieces and the puzzle
Julie Kuehl

2. WordPress Themes
WHERE TO FIND THEM
wordpress.org/themes/
WHERE TO PUT THEM
yoursite/wp-content/themes/

3. Anatomy of a WordPress page

4. Files Needed
• Minimum
• index.php
• style.css

5. Files Needed
• Minimum
• index.php
• style.css
• But seriously
• header.php
• footer.php
• sidebar.php
• functions.php
• screenshot.png

6. Files Needed
• Minimum
• index.php
• style.css
• But seriously
• header.php
• footer.php
• sidebar.php
• functions.php
• screenshot.png
• And really
• single.php
• page.php
• archive.php
• category.php
• tag.php
• comments.php

7. Files Needed
• Minimum
• index.php
• style.css
• But seriously
• header.php
• footer.php
• sidebar.php
• functions.php
• screenshot.png
• And really
• single.php
• page.php
• archive.php
• category.php
• tag.php
• comments.php
• Plus
• 404.php
• search.php
• front-page.php

8. The Template Hierarchy

9. Index.php (minimum)
<?php get_header(); ?>
<section id="content" role="main">
<?php if ( have_posts() ) : while
( have_posts() ) : the_post(); ?>
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

10. Style.css (minimum)
/*
Theme Name: Insert name here.
Theme URI: The theme's URI. (optional)
Description: Brief description of theme.
Version: 1.0
Author: Julie Kuehl
Author URI: http://www.juliekuehl.com
*/

11. Style.css
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats,
each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color
scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great
on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width,
custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-
support, sticky-post, translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

12. Style.css (minimum)
/*
Theme Name: Insert name here.
Theme URI: The theme's URI. (optional)
Description: Brief description of theme.
Version: 1.0
Author: Julie Kuehl
Author URI: http://www.juliekuehl.com
*/

13. Screenshot.png
• Screenshot.png
• 880x660 pixels

14. Folders
• It’s common (best?) practice to include folders n your
theme as well
• /css/
• Used for additional css files such as mobile.css or print.css
• /js/
• Used for JavaScript scripts
• /img/
• Used for icons, backgrounds, and other images intrinsic to the
theme (can be overridden by images in the /uploads/ folder(s) )
• /languages/
• A place for translation files

15. So…
• index.php
• style.css
• /css/
• mobile.css
• print.css
• /js/
• slider.js
• images.js
• /img/
• twitter.png
• facebook.png
• envelope.png
• phone.png

16. Now Don’t Go Crazy
• “Looking at a site built by a ‘WordPress Developer.’ 25
page templates – including one for each media
breakpoint” -- @ci_chrisford
No.
Just no.

17. Julie Kuehl
• @juliekuehl
• www.juliekuehl.com
• (it’s pronounced “keel” but I’m good with “cool” too  )
• http://www.slideshare.net/JulieKuehl