Theme Wrangling 101

405 views

Published on

WordPress Theme Wrangling 101

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
405
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Theme Wrangling 101

  1. 1. mikey arce Happiness Engineer @automattic @mikeyarce mikeyarce.com
  2. 2. THEME WRANGLING 101 GETTING STARTED
 WITH WORDPRESS THEMES
  3. 3. A B C What are Themes? Advanced Usage Using Themes D Basic Customizing
  4. 4. A What are Themes?
  5. 5. What are Themes? WordPress stores and serves your content ! Plugins extend functionalities by adding features ! Themes determine the look of your site by adding styles and templates
  6. 6. Same Site, different themes
  7. 7. Theme: Twenty Twelve
  8. 8. Theme: BaseWP
  9. 9. Theme: GovPress
  10. 10. Theme: Hueman
  11. 11. WordPress.org vs WordPress.com
  12. 12. .com .org Over 300 Free and Premium Themes ! Secure, never break your site, WordPress always up to date ! Can’t add your own themes ! wordpress.com/themes You can install your own themes, free or Premium ! You do your own maintenance. ! Themes can be insecure ! Unlimited options
  13. 13. B USING THEMES
  14. 14. Installing a Theme
  15. 15. DEMO
  16. 16. C BASIC CUSTOMIZING
  17. 17. Customize your Themes CSS Customization ! Child Theming
  18. 18. CSS Customization Add a stylesheet, don’t change the theme’s default. ! custom.css ! Use a Custom CSS Plugin (like Jetpack)
  19. 19. DEMO
  20. 20. Child Themes Easy way to develop a theme without breaking it ! Means you can always update the Parent theme without worrying about breaking your customizations ! You can make many themes based on one theme
  21. 21. Child Themes function twentytwelve_child_enqueue_child() { wp_register_style( 'twentytwelve', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'twentytwelve-child', get_stylesheet_uri(), array( 'twentytwelve' ) ); } add_action( 'wp_enqueue_scripts', 'twentytwelve_child_enqueue_child' ); Enqueue, dont @import
  22. 22. Child Themes For more information, go to: ! http://codex.wordpress.org/Child_Themes
  23. 23. D ADVANCED USAGE
  24. 24. How WordPress works MySQL Database WordPress Your Site
  25. 25. Customize your Themes Custom Templates ! Custom Themes
  26. 26. Anatomy of a Theme HEADER CONTENT SIDEBAR FOOTER
  27. 27. Anatomy of a Theme header.php index.php sidebar.php footer.php
  28. 28. Anatomy of a Theme header.php index.php sidebar.php footer.php sidebar.php
  29. 29. Anatomy of a Theme header.php index.php sidebar.php footer.php
  30. 30. Custom Templates
  31. 31. Custom Templates /** * Template Name: My Custom Template */
  32. 32. Template Hierarchy
  33. 33. Template Hierarchy Site Front Page > front.php Page > Page Template > $custom.php > page-$slug.php > page_$id.php > page.php Posts > home.php ! >> index.php
  34. 34. Anatomy of a Theme header.php front.php sidebar.php footer.php
  35. 35. Anatomy of a Theme custom-home.php footer.php
  36. 36. Custom Themes
  37. 37. Custom Themes style.css index.php
  38. 38. Custom Themes 404.php archive.php category.php comments.php content- quote.php content- page.php content.php footer.php header.php image.php index.php rtl.css screenshot.png search.php single.php style.css tag.php
  39. 39. Custom Themes style.css
  40. 40. _s Starter Theme underscores.me
  41. 41. Enqueue it all wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/ slider.css',false,'1.1','all'); ! wp_enqueue_script( 'script', get_template_directory_uri() . '/js/ script.js', array ( 'jquery' ), 1.1, true);
  42. 42. The Loop <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; else: ?> <?php _e('Sorry, no posts matched your criteria.'); ?> <?php endif; ?>
  43. 43. Customizing the Loop <?php $children = wp_list_pages('title_li=&child_of='.$post- >ID.'&echo=0'); if ($children) { ?> <ul> <?php echo $children; ?> </ul> <?php } ?>
  44. 44. E BONUS ROUND
  45. 45. Choosing Themes Free or Premium?
  46. 46. Choosing Themes Don’t choose “All in one” Themes
  47. 47. Choosing Themes Does the theme get updates?
  48. 48. Choosing Themes Is it supported? Documented?
  49. 49. Choosing Themes Is it from a *reputable* developer or shop?
  50. 50. Choosing Themes Think about what happens if you switch themes
  51. 51. Choosing Themes StudioPress WooThemes CreativeMarket Themeforest Organic Themes Array Elegant Themes The Theme Foundry
  52. 52. Further Reading https://make.wordpress.org/docs/ theme-developer-handbook/ ! Treehouse, Lynda.com
  53. 53. EH Q & EH

×