ANATOMY AND ARCHITECTURE OF A THEMEThe pieces and the puzzle

Julie Kuehl

WordPress Themes

WHERE TO FIND THEM

wordpress.org/themes/

WHERE TO PUT THEM

yoursite/wp-content/themes/

Anatomy of a WordPress page

Files Needed

• Minimum• index.php• style.css

Files Needed

• Minimum• index.php• style.css

• But seriously• header.php• footer.php• sidebar.php• functions.php• screenshot.png

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

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

The Template Hierarchy

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

Style.css (minimum)

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

Style.css/*Theme Name: Twenty ThirteenTheme URI: http://wordpress.org/themes/twentythirteenAuthor: the WordPress teamAuthor 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.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: 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-readyText 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.*/

Style.css (minimum)

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

Screenshot.png• Screenshot.png• 880x660 pixels

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

So…• index.php• style.css• /css/

• mobile.css• print.css

• /js/• slider.js• images.js

• /img/• twitter.png• facebook.png• envelope.png• phone.png

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.

Julie Kuehl

• @juliekuehl• www.juliekuehl.com• (it’s pronounced “keel” but I’m good with “cool” too )

• http://www.slideshare.net/JulieKuehl