Downloaded 24 times
More Related Content
Theming 101
- 1. Theming 101 Matt Wiebe @mattwiebe wp.mattwie.be DesignEngineer Automattic / WordPress.com
- 2. Theming 101 ★ Whatis a theme? ★ How do I make a theme? ★ How do I make an awesome theme?
- 3. What is aTheme?
- 13. What is aTheme? 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
- 14. What is aTheme? ★ A directory/folder of files in wp-content/themes
- 19. What is aTheme? ★ A directory/folder of files in wp-content/themes ★ Two necessary files ★ style.css ★ index.php ★ the rest make sense as you go
- 20. OK, How DoI Make a Theme?
- 21. style.css /* Theme Name: TwentyThirteen 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 */
- 22. style.css /* Theme Name: TwentyThirteen 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 */
- 23. style.css /* Theme Name: YourAwesome Theme Name */ /* Actual CSS for your theme goes below */
- 24. index.php <?php get_header(); ?> <divid="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(); ?>
- 25. index.php <?php get_header(); ?> <divid="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(); ?>
- 26. The Loop <?php while( have_posts() ) : the_post(); ?> <?php // print out a post's HTML ?> <?php endwhile; ?>
- 27. The Loop <?php while( have_posts() ) : the_post(); ?> <article> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </article> <?php endwhile; ?>
- 32. 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 ?>
- 33. header.php <!DOCTYPE html> <html> <head> <meta charset="<?phpbloginfo( 'charset' ); ?>" /> <?php wp_head(); ?> </head> <body>
- 34.
- 35.
- 36. header.php <!DOCTYPE html> <html> <head> <meta charset="<?phpbloginfo( 'charset' ); ?>" /> <link href="<?php bloginfo( 'stylesheet_url' ) ?>" rel="stylesheet" /> <?php wp_head(); ?> </head> <body>
- 37. style.css /* Theme Name: WordCampWinnipeg */ body { background-color: #333; color: #ddd; font-family: sans-serif; margin: 2em; line-height: 1.6; }
- 38.
- 39. OK, Let's Use ThoseOther Files AKA the Template Hierarchy
- 43. Template Hierarchy ★ Everythingfalls 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
- 44.
- 45. functions.php ★ Tiny, theme-specificplugin ★ Should only have things that are theme-specific ★ Telling WordPress what features you support and how you support them
- 46. functions.php ★ add_theme_support() ★ postformats, background, header ★ http://codex.wordpress.org/add_theme_support
- 47. functions.php ★ register_sidebar() ★ Shouldbe register_widget_area() since not all widgets go in actual sidebars ★ As many as you want
- 48. functions.php <?php register_sidebar( array( 'name' =>'Main Widget Area', 'id' => 'sidebar-1' ) );
- 49. 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 ?>
- 51. functions.php <?php register_nav_menu( 'menu', 'TopNavigation Menu' );
- 52. header.php <!DOCTYPE html> <html> <head> <?php wp_head();?> </head> <body> <?php wp_nav_menu( 'theme_location=menu' ); ?>
- 54.
- 55. OK, That's Still ReallyUgly Yes, it is.
- 56. How Can IMake an Awesome WordPress Theme?
- 57. Learn From theBest ★ _s → A starter theme from Automattic
- 59. Learn From theBest ★ _s → A starter theme from Automattic ★ Embedded best practices
- 60. Learn From theBest ★ _s → A starter theme from Automattic ★ Embedded best practices ★ http://underscores.me/
- 61. Learn From theBest ★ Make a child theme ★ Build on a solid base without starting from scratch ★ The Twenty * themes are good for this
- 62. Learn From theBest ★ Learn how some of the intro stuff I just taught you was lacking or just plain bad!
- 63. Learn From theBest ★ 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/
- 64.