![Page 1: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/1.jpg)
ANATOMY AND ARCHITECTURE OF A THEMEThe pieces and the puzzle
Julie Kuehl
![Page 2: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/2.jpg)
WordPress Themes
WHERE TO FIND THEM
wordpress.org/themes/
WHERE TO PUT THEM
yoursite/wp-content/themes/
![Page 3: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/3.jpg)
Anatomy of a WordPress page
![Page 4: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/4.jpg)
Files Needed
• Minimum• index.php• style.css
![Page 5: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/5.jpg)
Files Needed
• Minimum• index.php• style.css
• But seriously• header.php• footer.php• sidebar.php• functions.php• screenshot.png
![Page 6: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/6.jpg)
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
![Page 7: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/7.jpg)
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
![Page 8: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/8.jpg)
The Template Hierarchy
![Page 9: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/9.jpg)
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(); ?>
![Page 10: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/10.jpg)
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*/
![Page 11: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/11.jpg)
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.*/
![Page 12: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/12.jpg)
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*/
![Page 13: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/13.jpg)
Screenshot.png• Screenshot.png• 880x660 pixels
![Page 14: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/14.jpg)
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
![Page 15: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/15.jpg)
So…• index.php• style.css• /css/
• mobile.css• print.css
• /js/• slider.js• images.js
• /img/• twitter.png• facebook.png• envelope.png• phone.png
![Page 16: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/16.jpg)
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.
![Page 17: Anatomy and Architecture of a WordPress Theme](https://reader033.vdocuments.us/reader033/viewer/2022061106/540d7eeb8d7f728d7e8b4983/html5/thumbnails/17.jpg)
Julie Kuehl
• @juliekuehl• www.juliekuehl.com• (it’s pronounced “keel” but I’m good with “cool” too )
• http://www.slideshare.net/JulieKuehl