Creating WordPress Theme Faster, Smarter & Without Swearing

5,551 views
5,403 views

Published on

Published in: Technology
2 Comments
1 Like
Statistics
Notes
  • Yep, this is what I'm mentioning on slides 32-34 :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for posting these. Child themes are really useful. Note that @import shouldn't be used in production as it is a known performance problem. So instead of having the child theme do an @import, I think it should instead wp_enqueue_style() the parent's stylesheet and then enqueue any additional stylesheets that the child theme needs. Maybe this is what you said when you mentioned wp_enqueue_style()
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,551
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Creating WordPress Theme Faster, Smarter & Without Swearing

  1. 1. HOW TO MAKE WORDPRESSTHEMES FASTER, SMARTER & WITHOUT SWEARING MARCIN WOLAK
  2. 2. START
  3. 3. CLIENT
  4. 4. GRAPHIC
  5. 5. HTML CODER
  6. 6. WP DEVELOPER
  7. 7. GRAPHIC + CODER +WP DEVELOPER
  8. 8. GRAPHIC Δ CODER ΔWP DEVELOPER
  9. 9. WP START
  10. 10. HOW MANY FILES YOU NEED?
  11. 11. THE SIMPLEST THEME INCLUDES ONLYA STYLE.CSS FILE, PLUS IMAGES, IF ANY. (WORDPRESS CODEX)
  12. 12. THE SIMPLEST THEME POSSIBLE IS A CHILD THEME WHICHINCLUDES ONLY A STYLE.CSS FILE, PLUS ANY IMAGES. THIS IS POSSIBLE BECAUSE IT ISA CHILD OF ANOTHER THEME WHICH ACTS AS ITS PARENT. (WORDPRESS CODEX - CURRENT)
  13. 13. HOW MANY FILES YOU NEED?
  14. 14. STYLE.CSSINDEX.PHP
  15. 15. TEMPLATE HIERARCHY
  16. 16. CHILD THEME• /WP-CONTENT/THEMES/• WP-ADMIN• STYLE.CSS*• FUNCTIONS.PHP + OTHER TEMPLATE FILES• FOLDERS WITH MEDIA, JS, CSS ETC.
  17. 17. STYLE.CSS1: /*2: Theme Name: Child Theme Name3: Theme URI: Child Theme URI4: Description: Our description of theme5: Author: Authors name6: Author URI: Authors website7: Template: twentyeleven8: Version: 1.010: General comments/License Statement if any.11: */
  18. 18. STYLE.CSS1: /*2: Theme Name: Child Theme Name3: Theme URI: Child Theme URI4: Description: Our description of theme5: Author: Authors name6: Author URI: Authors website7: Template: twentyeleven8: Version: 1.010: General comments/License Statement if any.11: */
  19. 19. STYLE.CSS1: /*2: Theme Name: Child Theme Name3: Theme URI: Child Theme URI4: Description: Our description of theme5: Author: Authors name6: Author URI: Authors website7: Template: thematic8: Version: 1.010: General comments/License Statement if any.11: */12:13: @import url(‘../thematic/style.css’);
  20. 20. STYLE.CSS1: /*2: Theme Name: Child Theme Name3: Theme URI: Child Theme URI4: Description: Our description of theme5: Author: Authors name6: Author URI: Authors website7: Template: thematic8: Version: 1.010: General comments/License Statement if any.11: */12:13: @import url(‘../thematic/style.css’);1415: body { background-color: cyan; }
  21. 21. FUNCTIONS.PHP CHILD1: <?php2: function theme_special_nav() {3: // Do something.4: }5: ?>
  22. 22. FUNCTIONS.PHP PARENT1: <?php2: if (!function_exists(theme_special_nav)) {3: function theme_special_nav() {4: // Do something.5: }6: }7: ?>
  23. 23. RTL.CSS TAG.PHP INDEX.PHP TAXONOMY.PHP COMMENTS.PHP AUTHOR.PHP FRONT-PAGE.PHP DATE.PHP HOME.PHP ARCHIVE.PHP SINGLE.PHP SEARCH.PHPSINGLE-<POST-TYPE>.PHP ATTACHMENT.PHP PAGE.PHP IMAGE.PHP CATEGORY.PHP 404.PHP
  24. 24. MODULES
  25. 25. STYLE.CSS
  26. 26. FUNCTIONS.PHP1: <?php2:3: function childtheme_create_stylesheet() {4: $templatedir = get_bloginfo(template_directory); //parent folder5: $stylesheetdir = get_bloginfo(stylesheet_directory); //child folder6: ?>7: <link rel="stylesheet" type="text/css" href="<?php echo $templatedir?>/library/styles/reset.css" />8: <link rel="stylesheet" type="text/css" href="<?php echo $templatedir?>/library/styles/typography.css" />…20: <?php21: }22: add_filter(thematic_create_stylesheet, childtheme_create_stylesheet);23: ?>
  27. 27. FUNCTIONS.PHP1: <?php2: /** register with hook wp_print_styles */3: add_action(wp_print_styles, add_my_stylesheet);4:5: /* * Enqueue style-file, if it exists. */6: function add_my_stylesheet() {7: //Parent theme style8: $parentStyleUrl = get_template_directory_uri().‘/style.css’;9: if ( file_exists($myStyleFile) ) {10: wp_register_style(‘parentStyleUrl, $parentStyleUrl );11: wp_enqueue_style(‘parentStyleUrl);12: }13: //Child theme style14: $childStyleUrl = get_stylesheet_directory_uri().‘/style.css’;15: if ( file_exists($ childStyleUrl ) ) {16: wp_register_style(childStyleUrl, $childStyleUrl );17: wp_enqueue_style( ‘childStyleUrl);18: }19: }20: ?>
  28. 28. WP MINIFYCSS: WP_ENQUEUE_STYLEJS: WP_ENQUEUE_SCRIPT
  29. 29. WHEN IS IT GOOD?
  30. 30. FRAMEWORK
  31. 31. DRY & DIE
  32. 32. PAGE.PHP1: <?php2: /*3: * Page template4: */5: get_header();6:7: //Sub Menu Part8: get_template_part(‘submenu’); // gets submenu.php file9:10: //Standard loop for page11: get_template_part(‘content’, ‘page’); // gets content-page.php file12:13: //Latest News14: get_template_part(‘news’); // gets news.php file15:16: get_footer();17:18: ?>
  33. 33. REMEMBER
  34. 34. USE TECHNOLOGY1:2: <a href=‘<?php echo get_permalink(39) ?>’>3: <?php echo get_the_title(39) ?>4: </a>5:
  35. 35. ABUSE TECHNOLOGY1:2: <a href=‘<?php echo get_permalink(39) ?>’>3: <?php echo get_the_title(39) ?>4: </a>5:
  36. 36. USE TECHNOLOGY1: <?php2: get_header(); // header.phg3: get_header(‘single’); // header-single.php4:5: get_sidebar(); // sidebar.php6: get_sidebar(‘left’); // sidebar-left.php7:8: get_template_part( loop, index );9: // wp-content/themes/child/loop-index.php10: // wp-content/themes/child/loop.php11: // wp-content/themes/parent/loop-index.php12: // wp-content/themes/parent/loop.php13:14: get_footer(); // footer.php15: get_footer(‘category’); // footer-category.php16:17: load_template(TEMPLATEPATH . /template-name.php);18:19: locate_template($template_names, $load);20:21: include(get_query_template(‘404)); //404.php22: include(get_404_template()); //404.php23:24: ?>
  37. 37. CLIENT ≠CODER
  38. 38. WYSiWYG
  39. 39. WYSiWTF
  40. 40. THANK YOU! MARCIN WOLAK WWW.MARCINWOLAK.PLKONTAKT@MARCINWOLAK.PL

×