Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Anatomy and Architecture of a WordPress Theme

2,508 views

Published on

Published in: Technology
  • Be the first to comment

Anatomy and Architecture of a WordPress Theme

  1. 1. ANATOMY AND ARCHITECTURE OF A THEME The pieces and the puzzle Julie Kuehl
  2. 2. WordPress Themes WHERE TO FIND THEM wordpress.org/themes/ WHERE TO PUT THEM yoursite/wp-content/themes/
  3. 3. Anatomy of a WordPress page
  4. 4. Files Needed • Minimum • index.php • style.css
  5. 5. Files Needed • Minimum • index.php • style.css • But seriously • header.php • footer.php • sidebar.php • functions.php • screenshot.png
  6. 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. 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. 8. The Template Hierarchy
  9. 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. 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. 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. 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. 13. Screenshot.png • Screenshot.png • 880x660 pixels
  14. 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. 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. 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. 17. Julie Kuehl • @juliekuehl • www.juliekuehl.com • (it’s pronounced “keel” but I’m good with “cool” too  ) • http://www.slideshare.net/JulieKuehl

×