Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Introduction to
Child Themes
MEL CHOYCE & KELLY DWAN
@MELCHOYCE • @RYELLE
NERDSUMMIT • SEPT 2014
Kelly Dwan
WORDPRESS DEVELOPER
Mel Choyce
DESIGN ENGINEER AT AUTOMATTIC
setup
what’s a
child theme?
What is a child theme?
A Child Theme is a theme that overrides and adds
elements to another theme (the “Parent” theme)
wit...
why?
1. If you update your theme, you won’t lose
your changes
2. You have greater control over your theme,
without having ...
an example
WordPress themes
[finder]
Creating a
child theme
create a new folder in
wp-content/themes/
create style.css
[editor]
add a screenshot
In the WordPress admin,
go to Appearance > Themes
activate your child theme
Adding CSS
[editor]
Templates
Basic Theme
• style.css
• index.php
• (screenshot.png)
Templates
header.php
content
footer.php
index.php
Overriding a file
• Copy header.php from twentythirteen
• Paste into our child theme
• Open file in text editor
• Copy lines...
Page Templates
• You can set pages to use different templates if your theme or
child theme has other page templates availab...
Page with no sidebar
• Copy page.php from twentythirteen
• Paste into our child theme *
• Rename to template-no-sidebar.ph...
Template Hierarchy
http://codex.wordpress.org/images/1/18/
Template_Hierarchy.png
Functionality
Themes are…
• style.css for appearance
• templates (php files) for layout/HTML/displaying your content
• functions.php for ...
functions.php
• Theme setup function
• Define any navigation menus
• add_theme_support
• post formats, featured images, cus...
Featured Images
add_theme_support( 'post-thumbnails' );
// width, height, crop mode
set_post_thumbnail_size( 604, 270, tru...
More resources
Next Steps
• http://make.wordpress.org/docs/theme-developer-handbook/

Currently in progress, but pretty far along.
• Watc...
News
Theme Specific
http://themeshaper.com/
General WP News
http://wptavern.com/

http://wordpress.org/news/

http://www.sm...
Child Themeable
WP Default themes (also Twenty Eleven, Twenty Twelve)
http://themehybrid.com/themes
http://wordpress.org/t...
Theme Frameworks
Thematic
Genesis by StudioPress (paid)
Starter Themes
_s
Roots
Bones
Child Theme Generators
• Plugin: One-Click Child Theme
• WP CLI: wp scaffold child-theme
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
Próxima SlideShare
Cargando en…5
×

Intro to WordPress Child Themes (NERDS Sept 2014)

So you've been playing around with WordPress. You feel like you've really gotten the hang it. However, you're starting to run into limitations with how much you can customize your site. The next step toward creating an entirely custom WordPress site is to create a child theme. A child theme is a theme which is based on another theme (the "parent theme"), and can override and/or add to the look and functionality of the parent theme.

This session is for: people who have made an HTML/CSS website, used WordPress, and run into customization limitations

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Intro to WordPress Child Themes (NERDS Sept 2014)

  1. 1. Introduction to Child Themes MEL CHOYCE & KELLY DWAN @MELCHOYCE • @RYELLE NERDSUMMIT • SEPT 2014
  2. 2. Kelly Dwan WORDPRESS DEVELOPER
  3. 3. Mel Choyce DESIGN ENGINEER AT AUTOMATTIC
  4. 4. setup
  5. 5. what’s a child theme?
  6. 6. What is a child theme? A Child Theme is a theme that overrides and adds elements to another theme (the “Parent” theme) without touching any of the Parent theme’s code. When the parent theme is updated, your changes will be preserved.
  7. 7. why? 1. If you update your theme, you won’t lose your changes 2. You have greater control over your theme, without having to create one from scratch 3. It’s a great way to learn the basics of WordPress theming
  8. 8. an example
  9. 9. WordPress themes
  10. 10. [finder]
  11. 11. Creating a child theme
  12. 12. create a new folder in wp-content/themes/
  13. 13. create style.css
  14. 14. [editor]
  15. 15. add a screenshot
  16. 16. In the WordPress admin, go to Appearance > Themes activate your child theme
  17. 17. Adding CSS
  18. 18. [editor]
  19. 19. Templates
  20. 20. Basic Theme • style.css • index.php • (screenshot.png)
  21. 21. Templates header.php content footer.php index.php
  22. 22. Overriding a file • Copy header.php from twentythirteen • Paste into our child theme • Open file in text editor • Copy lines from <div id="navbar" class=“navbar"> 
 to </div><!-- #navbar —> • Move to above <a class="home-link" … • Save & view your site Goal: Move Main Navigation to above the page title a file
  23. 23. Page Templates • You can set pages to use different templates if your theme or child theme has other page templates available no templates available
  24. 24. Page with no sidebar • Copy page.php from twentythirteen • Paste into our child theme * • Rename to template-no-sidebar.php • Add Template Name: No Sidebar to the header comment * • Open in text editor, remove <?php get_sidebar(); ?> • View a page- if there’s no visible sidebar, add widgets to Secondary Widget Area. • Edit the page, choose template from the dropdown. • Update page & view new template.
  25. 25. Template Hierarchy http://codex.wordpress.org/images/1/18/ Template_Hierarchy.png
  26. 26. Functionality
  27. 27. Themes are… • style.css for appearance • templates (php files) for layout/HTML/displaying your content • functions.php for any functionality in your theme
  28. 28. functions.php • Theme setup function • Define any navigation menus • add_theme_support • post formats, featured images, custom header, custom background, and more • Set up widget areas • $content_width
  29. 29. Featured Images add_theme_support( 'post-thumbnails' ); // width, height, crop mode set_post_thumbnail_size( 604, 270, true ); Regenerate Thumbnails
  30. 30. More resources
  31. 31. Next Steps • http://make.wordpress.org/docs/theme-developer-handbook/
 Currently in progress, but pretty far along. • Watch other people! • Use your browser’s dev tools to see how something’s done • Check out themes you like, try to read the code • http://make.wordpress.org/themes/
  32. 32. News Theme Specific http://themeshaper.com/ General WP News http://wptavern.com/
 http://wordpress.org/news/
 http://www.smashingmagazine.com/category/wordpress/
 http://www.poststat.us/
  33. 33. Child Themeable WP Default themes (also Twenty Eleven, Twenty Twelve) http://themehybrid.com/themes http://wordpress.org/themes/responsive http://wordpress.org/themes/oxygen http://wordpress.org/themes/vantage Good Theme developers (to see themes, click Themes): http://profiles.wordpress.org/automattic
 http://profiles.wordpress.org/anlino
  34. 34. Theme Frameworks Thematic Genesis by StudioPress (paid) Starter Themes _s Roots Bones
  35. 35. Child Theme Generators • Plugin: One-Click Child Theme • WP CLI: wp scaffold child-theme

×