Do you really need a Child Theme?

Click here to load reader

  • date post

    18-Jan-2017
  • Category

    Internet

  • view

    441
  • download

    1

Embed Size (px)

Transcript of Do you really need a Child Theme?

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Do you reallyneed a Child Theme?

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Bego Mario GardeHappy WordPress user since 7 yearsModerator in German support forumsGeneral Translation Editor

    and this is my first WordCamp session!

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Some general assumptionsDon't hack WordPress Core. Never.

    Reasons: Updates overwrite your changes Your site gets unmaintainableDifficult to provide support

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Some general assumptionsDon't hack WordPress Themes.

    Reasons: Updates overwrite your changes Your theme gets unmaintainableDifficult to provide support

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    The obvious solutionCreate a Child Theme!

    Reason: Updates don't overwrite your changes.

    Changes are easy to spot.

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    The obvious solutionCreate a Child Theme!

    Reason: Updates don't overwrite your changes.

    Changes are easy to spot. Well, sort of.

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    .php .js .css

    Child Theme

    What about security issues?.php .js .css

    Parent Theme

    .phpWe copy templates of a Parent Theme into the Child Theme and tweak them as needed.

    But what, if the Parent Theme had a bug or even security issues?

    The Child Theme Dilemma, T. Landsiedel http://bit.ly/1SWpJFZ

    http://bit.ly/1SWpJFZ

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    .php .js .css

    Child Theme

    What about security issues?

    .php

    .js .css

    Parent Theme

    .phpWe copy templates of a Parent Theme into the Child Theme and tweak them as needed.

    But what, if the Parent Theme had a bug or even security issues?

    The Child Theme Dilemma, T. Landsiedel http://bit.ly/1SWpJFZ

    http://bit.ly/1SWpJFZ

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    .php .js .css

    Child Theme

    What about security issues?

    .php

    .js .css

    Parent Theme

    .phpWhile the Parent Theme gets fixed by the theme developer,

    the Child Theme keeps the bug.(worst case: you don't even notice)

    The Child Theme Dilemma, T. Landsiedel http://bit.ly/1SWpJFZ

    http://bit.ly/1SWpJFZ

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    .php .js .css

    Child Theme

    What about security issues?

    .php

    .js .css

    Parent Theme

    .php.phpWhile the Parent Theme gets fixed by the theme developer,

    the Child Theme keeps the bug.(worst case: you don't even notice)

    The Child Theme Dilemma, T. Landsiedel http://bit.ly/1SWpJFZ

    http://bit.ly/1SWpJFZ

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    .php .js .css

    Child Theme

    Other issues?

    .php

    .js .css

    Parent Theme

    .php.phpTheme developers may change function and class names.

    Worst Case: Your website shows an error message. Only. (That's when your client calls!)

    The Child Theme Dilemma, T. Landsiedel http://bit.ly/1SWpJFZ

    http://bit.ly/1SWpJFZ

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Solution: Plugin Child Theme Check

    Plugin Child Theme Checkhttps://wordpress.org/plugins/child-theme-check/

    https://wordpress.org/plugins/child-theme-check/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Parent Theme

    Child Theme

    Plugin Child Theme Checkhttps://wordpress.org/plugins/child-theme-check/

    https://wordpress.org/plugins/child-theme-check/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Parent Theme

    Child Theme

    Plugin Child Theme Checkhttps://wordpress.org/plugins/child-theme-check/

    https://wordpress.org/plugins/child-theme-check/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Plugin Child Theme CheckGreat idea, great tool, but

    Theme Review Team not convinced about version numbers in templates

    Changes still hard to maintain

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    More sites, more Child ThemesThings get a little messy, if you create a new Child Themefor every new client.

    How do you manage all of them after two months? After two years?

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    So

    Do you reallyneed a Child Theme?

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Step 1Check your Theme Options. Really.

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Photo "Strawberries" by @veeterzy, CC-0https://unsplash.com/photos/OJJIaFZOeX4

  • WordCamp Antwerp 2016

    Bego Mario [email protected] https://wordpress.org/themes/twentysixteen

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Theme options generally provide you with more options, than you realize. Play with them. Use them.

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Step 2Plugins for Custom CSS

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Right Click Inspect Element Try any value Copy best result

    Developer Tools

    Chrome Developer Toolshttps://developer.chrome.com/devtools

    https://developer.chrome.com/devtools

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    .site-header { padding: 0; } .header-image { margin: 0 0 5em 0; img { width: 100%; height: auto; } }

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Support for SASS Add-on or Replacement Revisions Disables on syntax errors

    Jetpack

    Plugin Jetpackhttps://wordpress.org/plugins/jetpack/

    https://wordpress.org/plugins/jetpack/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    One Trick Pony Easy and reliable No revisions No support for SASS

    Simple Custom CSS

    Plugin Simple Custom CSShttps://wordpress.org/plugins/simple-custom-css/

    https://wordpress.org/plugins/simple-custom-css/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Need to style individual pages? No Problem! WordPress adds the right body Class

    body Class

    WP Codex: Function Reference/body classhttp://bit.ly/1seFLBw

    http://bit.ly/1seFLBw

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Need to style individual pages? No Problem! WordPress adds the right body Class

    body Class

    WP Codex: Function Reference/body classhttp://bit.ly/1seFLBw

    http://bit.ly/1seFLBw

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Step 3Add your own functions

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Additional editor to add any function for front or back end Functions can be exported Error handling

    Code Snippets

    Plugin Code Snippetshttps://wordpress.org/plugins/code-snippets/

    https://wordpress.org/plugins/code-snippets/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Replace pluggable functions

    Code Snippets

    if ( ! function_exists( 'twentysixteen_fonts_url' ) ) :

    Plugin Code Snippetshttps://wordpress.org/plugins/code-snippets/

    https://wordpress.org/plugins/code-snippets/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Replace pluggable functions

    Code Snippets

    if ( ! function_exists( 'twentysixteen_fonts_url' ) ) :

    Plugin Code Snippetshttps://wordpress.org/plugins/code-snippets/

    https://wordpress.org/plugins/code-snippets/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Error handling

    Plugin Code Snippetshttps://wordpress.org/plugins/code-snippets/

    https://wordpress.org/plugins/code-snippets/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Error handling

    Plugin Code Snippetshttps://wordpress.org/plugins/code-snippets/

    https://wordpress.org/plugins/code-snippets/

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Plugin Code Snippetshttps://wordpress.org/plugins/code-snippets/

    Hooks to the rescue

    Need to add a custom field? You don't need custom templates.

    https://wordpress.org/plugins/code-snippets/

  • Bego Mario [email protected]

    add_filter( 'the_content', 'append_cf_location' );

    function append_cf_location( $content ) { $location = get_field( 'location' ); $out = $content . 'Location: ' . $location . '' ;

    return $out; }

    WordCamp Antwerp 2016

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Step 4Create Shortcodes for your own PHP

  • Bego Mario [email protected]

    add_shortcode( 'portfolio', 'get_portfolio' ); function get_portfolio() { $portfolios = new WP_Query( 'post_type=portfolio' ); if ( $portfolios->have_posts() ) { while ( $portfolios->have_posts() ) { $portfolios->the_post(); $out .= get_the_title(); } } return $out; wp_reset_postdata(); }

    WordCamp Antwerp 2016

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Step 5Bring your own JavaScript

  • WordCamp Antwerp 2016

    Bego Mario [email protected]

    Loads frameworks Error handling Revisions

    Custom JavaScript Edito