Your SlideShare is downloading. ×
Theming 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Theming 101

2,720
views

Published on

The slides from Matt Wiebe's Wordcamp presentation on Theming 101

The slides from Matt Wiebe's Wordcamp presentation on Theming 101

Published in: Technology, Business

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,720
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Theming 101 Matt Wiebe @mattwiebe wp.mattwie.be Design Engineer Automattic / WordPress.com
  • 2. Theming 101 ★ What is a theme? ★ How do I make a theme? ★ How do I make an awesome theme?
  • 3. What is a Theme?
  • 4. What is a Theme? A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. — http://codex.wordpress.org/Themes
  • 5. What is a Theme? ★ A directory/folder of files in wp-content/themes
  • 6. What is a Theme? ★ A directory/folder of files in wp-content/themes ★ Two necessary files ★ style.css ★ index.php ★ the rest make sense as you go
  • 7. OK, How Do I Make a Theme?
  • 8. style.css /* Theme Name: Twenty Thirteen Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: Much longer than this ;) Version: 0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, ETC Text Domain: twentythirteen */
  • 9. style.css /* Theme Name: Twenty Thirteen Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: Much longer than this ;) Version: 0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, ETC Text Domain: twentythirteen */
  • 10. style.css /* Theme Name: Your Awesome Theme Name */ /* Actual CSS for your theme goes below */
  • 11. index.php <?php get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php if ( have_posts() ) : ?> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php twentythirteen_paging_nav(); ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
  • 12. index.php <?php get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php if ( have_posts() ) : ?> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php twentythirteen_paging_nav(); ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
  • 13. The Loop <?php while ( have_posts() ) : the_post(); ?> <?php // print out a post's HTML ?> <?php endwhile; ?>
  • 14. The Loop <?php while ( have_posts() ) : the_post(); ?> <article> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </article> <?php endwhile; ?>
  • 15. index.php <?php get_header(); // loads header.php ?> <?php while ( have_posts() ) : the_post(); ?> <article> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </article> <?php endwhile; ?> <?php get_footer(); // loads footer.php ?>
  • 16. header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_head(); ?> </head> <body>
  • 17. footer.php <?php wp_footer(); ?> </body> </html>
  • 18. STILL UGLY
  • 19. header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <link href="<?php bloginfo( 'stylesheet_url' ) ?>" rel="stylesheet" /> <?php wp_head(); ?> </head> <body>
  • 20. style.css /* Theme Name: WordCamp Winnipeg */ body { background-color: #333; color: #ddd; font-family: sans-serif; margin: 2em; line-height: 1.6; }
  • 21. LESS UGLY
  • 22. OK, Let's Use Those Other Files AKA the Template Hierarchy
  • 23. Template Hierarchy ★ Everything falls back to index.php eventually ★ Mostly easy to follow ★ single.php → Single post ★ page.php → Static page ★ category.php → Category archive ★ http://codex.wordpress.org/Template_Hierarchy
  • 24. </basics> <lessbasic>
  • 25. functions.php ★ Tiny, theme-specific plugin ★ Should only have things that are theme-specific ★ Telling WordPress what features you support and how you support them
  • 26. functions.php ★ add_theme_support() ★ post formats, background, header ★ http://codex.wordpress.org/add_theme_support
  • 27. functions.php ★ register_sidebar() ★ Should be register_widget_area() since not all widgets go in actual sidebars ★ As many as you want
  • 28. functions.php <?php register_sidebar( array( 'name' => 'Main Widget Area', 'id' => 'sidebar-1' ) );
  • 29. index.php <?php get_header(); // loads header.php ?> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <article><?php the_content(); ?></article> <?php endwhile; ?> <?php dynamic_sidebar( 'sidebar-1' ); ?> <?php get_footer(); // loads footer.php ?>
  • 30. functions.php <?php register_nav_menu( 'menu', 'Top Navigation Menu' );
  • 31. header.php <!DOCTYPE html> <html> <head> <?php wp_head(); ?> </head> <body> <?php wp_nav_menu( 'theme_location=menu' ); ?>
  • 32. OK, That's Still Really Ugly
  • 33. OK, That's Still Really Ugly Yes, it is.
  • 34. How Can I Make an Awesome WordPress Theme?
  • 35. Learn From the Best ★ _s → A starter theme from Automattic
  • 36. Learn From the Best ★ _s → A starter theme from Automattic ★ Embedded best practices
  • 37. Learn From the Best ★ _s → A starter theme from Automattic ★ Embedded best practices ★ http://underscores.me/
  • 38. Learn From the Best ★ Make a child theme ★ Build on a solid base without starting from scratch ★ The Twenty * themes are good for this
  • 39. Learn From the Best ★ Learn how some of the intro stuff I just taught you was lacking or just plain bad!
  • 40. Learn From the Best ★ http://codex.wordpress.org/Theme_Development ★ http://codex.wordpress.org/Template_Hierarchy ★ http://codex.wordpress.org/Template_Tags ★ http://codex.wordpress.org/Theme_Review ★ http://codepoet.com/ ★ http://themeshaper.com/
  • 41. Thanks! Matt Wiebe @mattwiebe wp.mattwie.be Design Engineer Automattic / WordPress.com

×