Creating WordPress ChildThemes - Philly Tech Week 2012

Creating Custom Child Themes for WordPress

(aka Making WordPress pretty without breaking it)

Presented by: Tracy Levesque, co-owner of YIKES, Inc. yikesinc.com [email protected] @yikesinc @liljimmi

mailto:[email protected]

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Who I amWho I am

GeekI can wrap my head

around most geeky concepts

DesignerI use bitmap and vector

editing programs every day

Front-EndDeveloper

I use HTML and CSSto make websites

look nice. I usea text editor andFTP to do this.

WordPressEvangelical

I love myself some WordPress and developmost of my sites on it


A ProgrammerI can understand

enough PHP to bedangerous, but I

can't write it.

A Database ExpertI can make my way through

PHPMyAdmin, but that'sabout it.

A Sys AdminYou lost me at

chmod.

A MimeI am not a

professional mime,just an ironic mime.



Who I am notWho I am not




What I can do




What do all of thesesites have in common?




They are all child themesof Twentyten or Twentyeleven

What do all of thesesites have in common?


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



Why use a Child Theme?


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.



So how do you customize thelook-and-feel of a WordPress?




How it Works

Your child theme's 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.




Let's get started!Where your theme files go

Each theme has its own folder inside /wp-content/themes

Create a folder foryour child theme in/wp-content/themes




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]Template: twentyelevenVersion: 1*/

@import url("../twentyeleven/style.css");

The parent theme's folder

The code that loads the parent theme's CSS file




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 theme's folder.




Upload and activateUpload your child theme folder, containing your 2 files, to /wp-content/themes Then go check out Appearance > Themes in your WordPress admin.




Upload and activate

Your child theme is now listed under “Available Themes.” Hit activate and you will be in business.




Where we are at

The 2 files now in your child theme illustrate how a child theme's files effect the parent's files – they either modify and add functionality to its identically named file, or completely overwrites it.




Let's make some style changes Behold, our child theme...not very exciting.




Let's 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.”




Let's make some style changes Add your own styles for #page to style.css that will override and add to the twentyeleven's 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...




Let's make some style changes Ta-da!




Let's 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);

}




Let's make some style changes Ooooh!




Let's 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);

}




Let's make some style changes Boxy!




Editing template filesIf 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.




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


http://yoast.com/wordpress-theme-anatomy/

http://codex.wordpress.org/images/thumb/1/18/Template_Hierarchy.png/750px-Template_Hierarchy.png

Let's 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 generatesThe WordPress credit



Let's make some template changes Credit gone




Gettin' fancy with template tagsTemplate 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


http://codex.wordpress.org/Function_Reference/the_date

http://codex.wordpress.org/Function_Reference/get_bloginfo

http://codex.wordpress.org/Function_Reference/wp_list_pages

http://codex.wordpress.org/Function_Reference

http://codex.wordpress.org/Conditional_Tags

Gettin' fancy with template tagsAdd 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>

<?phpif(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>



Gettin' fancy with template tagsVoilà!




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.




What your template file needsFirst, 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


Let's make a new templateCreating 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(); ?>



Let's make a new templateAlso, 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;}




Let's make a new templateNow kittens shows up on the Template drop-down.




Let's make a new templateKittens!


Modifying functionalityfunctions.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.



Let's change the header image sizeAdd 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 ) );

?>




Let's change the header image sizeGo to Appearance > Header and you will see the width and height are changed.

Go to




Let's change the header image sizeFront-end:




Where we are at now

Now our child theme is modifying files, overwriting files and adding files to our parent theme.




What about other parent themes?

You don't have to use Twentyeleven or Twentyten as your parent theme, there are some other great starter themes that people have built for WordPress:


http://html5reset.org/#wordpress

https://github.com/drewsymo/Foundation#readme

http://demos.simplethemes.com/skeleton/

http://www.rootstheme.com/

http://themble.com/bones/

http://starkerstheme.com/

http://www.twentytenfive.com/



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.


http://wp-snippets.com/

http://www.wpmods.com/

http://codex.wordpress.org/Function_Reference

http://codex.wordpress.org/Stepping_Into_Templates

http://codex.wordpress.org/Theme_Development%20



Question Time

?




Thank you!Slides: slideshare.net/thetracyl

Files: github.com/thetracyl


Creating WordPress ChildThemes - Philly Tech Week 2012

Technology

Transcript of Creating WordPress ChildThemes - Philly Tech Week 2012