anatomy and architecture of a wordpress theme
Post on 08-Sep-2014
299 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related