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

46 views

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
  • Be the first to comment

  • Be the first to like this

Childthemes ottawa-word camp-1919

  1. 1. Child Themes AND WHAT ELSE YOU NEED TO KNOW TO START EDITING YOUR THEME
  2. 2. @meSenior Full Stack WordPress Developer Plugin author of Author Avatars List http://wordpress.org/plugins/author-avatars/, Site Verification tool http://wordpress.org/plugins/wp-site-verification-tool/ and Matador Jobs https://matadorjobs.com Slides @ http://www.slideshare.net/pbearne
  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: http://bearne.ca Author: Paul Bearne Template: twentyeleven Author URI: http://bearne.ca/ 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 - newTheme.zip (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 http://example.com/blog/ and a visitor clicks on a link to a category page like http://example.com/blog/category/your-cat/ 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. http://codex.wordpress.org/Template_Hierarchy
  21. 21. Template Hierarchy The order Wordpress load its template files http://codex.wordpress.org/Template_Hierarchy
  22. 22. Filter : add add_filter(‘fliter_name’, ‘function_to_run’); Function function_to_run( $var ){ $var .= ‘hello Toronto’; return $var; } http://codex.wordpress.org/Plugin_API#Filters
  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 ); } } http://codex.wordpress.org/Plugin_API#Actions
  24. 24. Filter : use $text = apply_filters (‘fliter_name’, ‘hello world’); http://codex.wordpress.org/Function_Reference/apply_filters
  25. 25. Action : use do_action( ‘action_name’ ); http://codex.wordpress.org/Function_Reference/do_action
  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() http://codex.wordpress.org/Data_Validation 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 http://codex.wordpress.org/Post_Types 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 ) https://developer.wordpress.org/reference/functions/get_post_meta/
  29. 29. wp_query http://codex.wordpress.org/Class_Reference/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 ); http://codex.wordpress.org/Class_Reference/WP_Query $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 Paul@Bearne.ca https://Bearne.ca

×