Creating WordPress ChildThemes - Philly Tech Week 2012

Creating Custom ChildThemes for WordPress (aka Making WordPress pretty without breaking it) Presented by: Tracy Levesque, co-owner of YIKES, Inc. yikesinc.com tracy@yikesinc.com @yikesinc @liljimmi

Who I am Geek Designer I can wrap my head I use bitmap and vector around most editing programs every day geeky concepts Front-End DeveloperI use HTML and CSS WordPress to make websites Evangelical look nice. I use I love myself some a text editor and WordPress and develop FTP to do this. most of my sites on it Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Who I am not A Programmer A Database Expert I can understand I can make my way through enough PHP to be PHPMyAdmin, but thats dangerous, but I about it. cant write it. A Mime I am not a A Sys Admin professional mime, You lost me at just an ironic mime. chmod. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What I can do Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What do all of these sites have in common? Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What do all of these sites have in common? They are all child themes of Twentyten or Twentyeleven Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Why use a Child Theme? WordPress Development Rule #1 Never EVER touch WordPress core code. EVER! This means do not edit: ● Wordpress core files ● Plugin files ● Theme files Why? ● Stuff gets broken ● Other plugins and themes may not work with your hacks ● Updates wipe out your changes Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

So how do you customize the look-and-feel of a WordPress? You create your own theme that is a “child” of another theme (in this presentation the parent theme will be WordPress 3.3.2 default theme, Twentyeleven). ➔ Your child theme overrides the design elements you want changed and otherwise falls back to the parent. ➔ Your child theme can also modify or add functionality to the parent theme. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

How it Works Your child themes folder is a safe land where you can add css and php files without causing any permanent damage. If you break something you can just hit undo or remove your file. All parent theme files will remain intact. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets get started! Where your theme files go Each theme has its own folder inside /wp-content/themes Create a folder for your child theme in /wp-content/themes Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What your theme needs In order for your child theme to work it needs 2 things (really 1 thing, but 2 is cooler) Thing #1 – a style.css file The CSS file tells WordPress to load the parent theme after your theme. /* Theme Name: [Your Theme Name] Theme URI: [Your URL] Description: The custom theme for [Your Theme Name] using the parent theme Twentyeleven. Author: [You] Author URI: [Your URL] The parent themes folder Template: twentyeleven Version: 1 */ The code that loads the @import url("../twentyeleven/style.css"); parent themes CSS file Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What your theme needs Thing #2 – a screenshot This is the thumbnail image that shows up under Appearance > Themes in the WordPress admin. You can find the screenshot image file, screenshot.png, in /wp-content/themes/twentyeleven Open the file in your favorite bitmap editor, turn it into your own screenshot and save it into your child themes folder. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Upload and activate Upload your child theme folder, containing your 2 files, to /wp-content/themes Then go check out Appearance > Themes in your WordPress admin. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Upload and activate Your child theme is now listed under “Available Themes.” Hit activate and you will be in business. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Where we are at The 2 files now in your child theme illustrate how a child themes files effect the parents files – they either modify and add functionality to its identically named file, or completely overwrites it. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Behold, our child theme...not very exciting. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Add some CSS3 rounded corners and shadows to the overall template Inspecting the page in firebug shows the overall container for the site is an ID named “#page.” Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Add your own styles for #page to style.css that will override and add to the twentyelevens styles. /* =Structure -------------------------------------------------------------- */ #page { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, .2); box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, .2); } Upload style.css to your child theme folder then refresh the site... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Ta-da! Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Get rid of the annoying top border, change the title fonts and menu background color. /* =Header -------------------------------------------------------------- */ #branding { border-top: 0px; } #site-title a { font-family: Georgia, Serif; font-size: 40px; } /* =Menu -------------------------------------------------------------- */ #access { background: -moz-linear-gradient(#612260, #40003f) repeat scroll 0 0 transparent; background: -o-linear-gradient(#612260, #40003f); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#612260), to(#40003f)); background: -webkit-linear-gradient(#612260, #40003f); } Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Ooooh! Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Style the sidebar widgets /* =Widget Areas -------------------------------------------------------------- */ #secondary .widget { border: 1px solid #612260; padding: 20px; -webkit-box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, .2); box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, .2); } Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Boxy! Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Editing template files If you look in the twentyeleven folder you can see all the template files that make up the theme. The template files control how your site looks and displays information. You can create your own versions of these files in your child theme. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

How do I know what to edit? The template filenames are pretty logical, but you can use these handy cheat sheets: ● Anatomy of a WordPress theme infographic ● Template file(s) WordPress uses when it displays a certain type of page? Quick overview of some template files: ● header.php – The global header for your site ● footer.php – The global footer for your site ● index.php – The posts (blog) page ● page.php – Static pages. ● sidebar.php – Your sidebar widget areas ● single.php – A single post Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some template changes Remove the WordPress credit from the footer. <div id="site-generator"> <?php do_action( twentyeleven_credits ); ?> <a href="<?php echo esc_url( __( http://wordpress.org/, twentyeleven ) ); ?>" title="<?php esc_attr_e( Semantic Personal Publishing Platform, twentyeleven ); ?>" rel="generator"><?php printf( __( Proudly powered by %s, twentyeleven ), WordPress ); ?></a> </div> </footer> </div> <?php wp_footer(); ?> </body> </html> Delete the code that generates The WordPress credit Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some template changes Credit gone Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Gettin fancy with template tags Template tags let you insert dynamic content into your templates. Include/function tags - Used to grab and display information or execute other template files ➔ <?php the_date(); ?> ➔ <?php echo home_url(); ?> ➔ <?php bloginfo(); ?> ➔ <?php wp_list_pages(); ?> ➔ Check out the WP Codex Function Reference Conditional tags - Used to grab and display content depending on what page it is and what conditions it matches. ➔ is_home() ➔ is_single() ➔ is_page() ➔ is_category() ➔ Check out the WP Codex Conditional Tags page Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Gettin fancy with template tags Add a copyright that automatically pulls the date and blog name and a credit to the home page. <div id="site-generator"> Copyright © <?php echo date(Y); ?> <a href="<?php echo home_url( / ); ?>" title="<?php echo esc_attr( get_bloginfo( name, display ) ); ?>" rel="home"><?php bloginfo( name ); ?></a> <?php if(is_front_page()){ echo "<span style=margin: 0 20px;>|</span><a href=http://www.yikesinc.com target=_blank title=YIKES, Inc. - Philadelphia Web design and development>Web design and development by YIKES, Inc.</a>"; } ?> </div> </footer> </div> Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Gettin fancy with template tags Voilà! Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Making your own templates Twentyeleven gives you 3 templates to choose from: Default, Showcase and Sidebar. You can make as many additional templates as you like. Templates you create will appear in the Template drop-down menu on the Page edit screen. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What your template file needs First, a name (this goes at the top of your file) <?php /* Template Name: [Type your template name here] */ ?> Second, at least these 2 include tags <?php get_header(); ?> <?php get_footer(); ?> Last, any other content and tags you want to add Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make a new template Creating a new template called Kittens. <?php /* Template Name: Kittens */ ?> <?php get_header(); ?> <div id="primary"> <div id="content" role="main"> <?php the_post(); ?> <?php get_template_part( content, page ); ?> <?php comments_template( , true ); ?> </div> </div> <br style="clear: both;"> <div id="kittens"></div> <?php get_footer(); ?> Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make a new template Also, create an ID #kittens in the style sheet and add the image “kittenbackground.jpg” to an “images” folder in the child theme. /* =Content -------------------------------------------------------------- */ #kittens {width: 1000px; background-image:url(images/kittenbackground.jpg); height: 170px;} Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make a new template Now kittens shows up on the Template drop-down. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make a new template Kittens! Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Modifying functionality functions.php controls the functionality of your theme. You can modify and add to this functionality in your child theme. You can do stuff like: ● Add custom post types ● Customize the  link ● Customize the admin ● Change the excerpt length ● Enable shortcodes in text widgets ● Change the size of the header image ● And much much more...really anything you can program. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets change the header image size Add a filter to your functions.php file that changes the height and width of your header images under Appearance > Header <?php // The height and width of your custom header. // Add a filter to twentyeleven_header_image_width and twentyeleven_header_image_height to change these values. define( HEADER_IMAGE_WIDTH, apply_filters( twentyeleven_header_image_width, 1000 ) ); define( HEADER_IMAGE_HEIGHT, apply_filters( twentyeleven_header_image_height, 200 ) ); ?> Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets change the header image size Go to Appearance > Header and you will see the width and height are changed. Go to Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets change the header image size Front-end: Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Where we are at now Now our child theme is modifying files, overwriting files and adding files to our parent theme. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What about other parent themes? You dont have to use Twentyeleven or Twentyten as your parent theme, there are some other great starter themes that people have built for WordPress: Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Where do you go from here? After getting the basics down the possibilities are really endless. There is a wealth of information and resources on the Internets. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Question Time ? Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Thank you! Slides: slideshare.net/thetracyl Files: github.com/thetracyl Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Creating WordPress ChildThemes - Philly Tech Week 2012

by YIKES, Inc.

Accessibility

Categories

Upload Details

Usage Rights

Statistics