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.
HOW TO MAKE WORDPRESSTHEMES FASTER, SMARTER &   WITHOUT SWEARING        MARCIN WOLAK
START
CLIENT
GRAPHIC
HTML CODER
WP DEVELOPER
GRAPHIC     +   CODER     +WP DEVELOPER
GRAPHIC     Δ   CODER    ΔWP DEVELOPER
WP START
HOW MANY FILES  YOU NEED?
THE SIMPLEST THEME INCLUDES ONLYA STYLE.CSS FILE, PLUS IMAGES, IF ANY.      (WORDPRESS CODEX)
THE SIMPLEST THEME POSSIBLE IS A          CHILD THEME                          WHICHINCLUDES ONLY A STYLE.CSS FILE,       ...
HOW MANY FILES  YOU NEED?
STYLE.CSSINDEX.PHP
TEMPLATE HIERARCHY
CHILD THEME•   /WP-CONTENT/THEMES/•   WP-ADMIN•   STYLE.CSS*•   FUNCTIONS.PHP + OTHER TEMPLATE FILES•   FOLDERS WITH MEDIA...
STYLE.CSS1:    /*2:    Theme Name: Child Theme Name3:    Theme URI: Child Theme URI4:    Description: Our description of t...
STYLE.CSS1:    /*2:    Theme Name: Child Theme Name3:    Theme URI: Child Theme URI4:    Description: Our description of t...
STYLE.CSS1:    /*2:    Theme Name: Child Theme Name3:    Theme URI: Child Theme URI4:    Description: Our description of t...
STYLE.CSS1:    /*2:    Theme Name: Child Theme Name3:    Theme URI: Child Theme URI4:    Description: Our description of t...
FUNCTIONS.PHP                           CHILD1: <?php2:     function theme_special_nav() {3:            // Do something.4:...
FUNCTIONS.PHP                          PARENT1: <?php2:     if (!function_exists(theme_special_nav)) {3:            functi...
RTL.CSS   TAG.PHP              INDEX.PHP    TAXONOMY.PHP         COMMENTS.PHP      AUTHOR.PHP        FRONT-PAGE.PHP     DA...
MODULES
STYLE.CSS
FUNCTIONS.PHP1: <?php2:3: function childtheme_create_stylesheet() {4:        $templatedir = get_bloginfo(template_director...
FUNCTIONS.PHP1: <?php2:       /** register with hook wp_print_styles */3:       add_action(wp_print_styles, add_my_stylesh...
WP MINIFYCSS: WP_ENQUEUE_STYLEJS: WP_ENQUEUE_SCRIPT
WHEN IS IT GOOD?
FRAMEWORK
DRY & DIE
PAGE.PHP1:    <?php2:    /*3:    * Page template4:    */5:    get_header();6:7:    //Sub Menu Part8:    get_template_part(...
REMEMBER
USE TECHNOLOGY1:2:   <a href=‘<?php echo get_permalink(39) ?>’>3:             <?php echo get_the_title(39) ?>4:   </a>5:
ABUSE TECHNOLOGY1:2:   <a href=‘<?php echo get_permalink(39) ?>’>3:             <?php echo get_the_title(39) ?>4:   </a>5:
USE TECHNOLOGY1: <?php2:       get_header();                           // header.phg3:       get_header(‘single’);        ...
CLIENT  ≠CODER
WYSiWYG
WYSiWTF
THANK YOU!     MARCIN WOLAK  WWW.MARCINWOLAK.PLKONTAKT@MARCINWOLAK.PL
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
Upcoming SlideShare
Loading in …5
×

Creating WordPress Theme Faster, Smarter & Without Swearing

5,861 views

Published on

Published in: Technology
  • 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

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

×