intro to wordpress child themes (nerds sept 2014)
Post on 27-Jul-2015
128 Views
Preview:
TRANSCRIPT
Introduction to Child Themes
MEL CHOYCE & KELLY DWAN @MELCHOYCE • @RYELLE NERDSUMMIT • SEPT 2014
Kelly DwanWORDPRESS DEVELOPER
Mel ChoyceDESIGN 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) without touching any of the Parent theme’s code. When the parent theme is updated, your changes will be preserved.
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
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 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
Page Templates
• You can set pages to use different templates if your theme or child theme has other page templates available
no templates available
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.
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 any functionality in your theme
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
Featured Imagesadd_theme_support( 'post-thumbnails' );
// width, height, crop mode set_post_thumbnail_size( 604, 270, true );
Regenerate Thumbnails
More resources
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/
NewsTheme Specific
http://themeshaper.com/
General WP News
http://wptavern.com/ http://wordpress.org/news/ http://www.smashingmagazine.com/category/wordpress/ http://www.poststat.us/
Child ThemeableWP 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/automattichttp://profiles.wordpress.org/anlino
Theme FrameworksThematic
Genesis by StudioPress (paid)
Starter Themes_s
Roots
Bones
Child Theme Generators
• Plugin: One-Click Child Theme
• WP CLI: wp scaffold child-theme
top related