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.

Childthemes ottawa-word camp-1919


Published on

What is a child theme? Why do I need one and how do I create one?
We will also cover the bits knowledge you need to get started customizing your theme

Published in: Education
  • My friend sent me a link to to tis site. This awesome company. They wrote my entire research paper for me, and it turned out brilliantly. I highly recommend this service to anyone in my shoes. ⇒ ⇐.
    Are you sure you want to  Yes  No
    Your message goes here
  • My brother found Custom Writing Service ⇒ ⇐ and ordered a couple of works. Their customer service is outstanding, never left a query unanswered.
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Childthemes ottawa-word camp-1919

  2. 2. @meSenior Full Stack WordPress Developer Plugin author of Author Avatars List, Site Verification tool and Matador Jobs Slides @
  3. 3. Why do you need this?
  4. 4. No theme will fit all sites
  5. 5. You can’t apply an update to a theme without losing your changes
  6. 6. Creating whole themes is hard
  7. 7. Child themes are easy
  8. 8. You can use framework themes to save effort!
  9. 9. You can brand a theme for your client
  10. 10. How do you do this?
  11. 11. The code you need /* Theme Name: You Company Theme. Theme URI: Author: Paul Bearne Template: twentyeleven Author URI: Description: This is the special theme I created just for your company’s website. Version: 1.0 License: GNU General Public License License URI: license.txt Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible- width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image- header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready */ @import url('../twentyeleven/style.css');
  12. 12. How to install it Save as style.css In a new folder called "theme-name" ... for example: " YourCompanyTheme" Create a zip of the folder - (this zip needs a subfolder with the style.css in it ) Upload it.
  13. 13. Or FTP it Upload it to the Themes folder in a new folder which follows to show the theme folder as: YourCompanyTheme
  14. 14. Add a thumbnail Upload an image screenshot.png
  15. 15. Replacing template files Copy just the files from the parent theme that you need to change to your child folder and edit them. WordPress looks in the child folder first and loads the file if found.
  16. 16. functions.php WordPress will load BOTH function.php files - child function.php then the parent function.php. So you only need to add the extra/replacement functions. Example: <?php add_action( 'after_setup_theme', 'CompanyNameTheme_setup' ); if ( ! function_exists( 'CompanyNameTheme_setup' ) ): /** * Sets up theme defaults and registers support for various WordPress features. */ function CompanyNameTheme_setup() { // The default header text color define( 'HEADER_TEXTCOLOR', 'fff' ); // By leaving empty, we allow for random image rotation. define( 'HEADER_IMAGE', '' ); } endif; // CompanyNameTheme setup
  17. 17. Page Templates Custom layout for pages Good for Coming soon Landing pages Galleries etc. <?php /* Template Name: Homepage */ ?>
  18. 18. Getting the code URL and File locations Parent theme : get_template_directory() get_template_directory_uri() Child theme : get_stylesheet_directory() get_stylesheet_directory_uri() <img src="<?php echo get_stylesheet_directory_uri() ?>/images/at.png" alt="" width="" height="" /> Plugin : plugins_url( '/js/my_query.js', __FILE__ )
  19. 19. Some more advanced concepts Actions and filters Template hierarchy Custom post types Escaping and validation
  20. 20. Template Hierarchy If your blog is at and a visitor clicks on a link to a category page like then WordPress looks for a template file in the current Theme's directory that matches the category's ID. If the category's ID is 4, WordPress looks for a template file named category-4.php. If it is missing, WordPress next looks for a generic category template file, category.php. If this file does not exist either, WordPress looks for a generic archive template, archive.php. If it is missing as well, WordPress falls back on the main Theme template file, index.php.
  21. 21. Template Hierarchy The order Wordpress load its template files
  22. 22. Filter : add add_filter(‘fliter_name’, ‘function_to_run’); Function function_to_run( $var ){ $var .= ‘hello Toronto’; return $var; }
  23. 23. Action : add add_action( ‘action_name’, ‘function_to_run’ ); Function function_to_run( $var = null ){ if( null === $var ){ echo ‘hello world’; }else{ echo esc_html( $var ); } }
  24. 24. Filter : use $text = apply_filters (‘fliter_name’, ‘hello world’);
  25. 25. Action : use do_action( ‘action_name’ );
  26. 26. Escaping and validation absint( $int ) wp_kses($string, $allowedhtml, $protocols); esc_html( $text ) esc_attr( $text ) esc_js( $text ) esc_url( $url, (array) $protocols = null ) sanitize_email() sanitize_file_name() sanitize_html_class() sanitize_key() sanitize_mime_type() sanitize_option() sanitize_sql_orderby() sanitize_text_field() sanitize_title_for_query() sanitize_title_with_dashes() sanitize_user() sanitize_meta() sanitize_term() sanitize_term_field() The golden rule: The last thing you do is escape, the first thing you do is validate!
  27. 27. Custom post types The main logical data object in WordPress The standard types are : post, page, media add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'acme_product', array( 'labels' => array( 'name' => __( 'Products' ), 'singular_name' => __( 'Product' ) ), 'public' => true, 'has_archive' => true, ) ); }
  28. 28. Custom metadata The data linked to a post object Hide the metadata from admin by starting the id with an “_” Get the data for you theme with get_post_meta( $id, $key, true )
  29. 29. wp_query // The Query $the_query = new WP_Query( $args ); // The Loop if ( $the_query->have_posts() ) { echo '<ul>'; while ( $the_query->have_posts() ) { $the_query->the_post(); echo '<li>' . get_the_title() . '</li>'; } echo '</ul>'; } else { // no posts found } /* Restore original Post Data */ wp_reset_postdata();
  30. 30. wp_query : args $query = new WP_Query( 'post_type=page' ); $args = array( 'post_type' => array( 'post', 'page', 'movie', 'book' ) ); $query = new WP_Query( $args ); $args = array( 'post_type' => 'post', 'tax_query' => array( 'relation' => 'AND', array( 'taxonomy' => 'movie_genre', 'field' => 'slug', 'terms' => array( 'action', 'comedy' ), ), array( 'taxonomy' => 'actor', 'field' => 'id', 'terms' => array( 103, 115, 206 ), 'operator' => 'NOT IN', ), ), ); $query = new WP_Query( $args );
  31. 31. Questions? @pbearne