Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes
1. Wordpress Child Theming An Introduction to Wordpress Theme Development with Wordpress Child Themes MohamadAgusSya’banCode Name: AbanNestaFront-end Web Designer at PT. Jerbee IndonesiaWeblog – http://www.aban.web.id Image courtesy of beginnerbaby.com
2. Are you a WordPress site developer wanting to significantly cut your development time by using your own WordPress Theme Framework?
4. How much time do you have? Image courtesy of gkjwpacitan.wordpress.com
5. How complex is your wordpress theme design? Image courtesy of sxc.hu
6. How bad is your boss? :p Image courtesy of chickenstrip.wordpress.com
7. So, you need something that could help you to develop sites faster, has strong foundation and scalable Image courtesy of internetrentalmachines.com
8. Let’s do “Child-theming”! The smart way to modify wordpress themes Image courtesy of best-family-photography-tips.com
9. What is Child Theme, anyway? A small subset of template files that allow you to make changes and customizations to any WordPress parent theme without altering the parent theme’s coding.
10. First, let’s take a tour… http://www.psdthemes.com Design by: PSD Themes Parent theme: Thematic http://www.wpcharity.com Design by: M.Zamroni Parent theme: Twentyten http://thesisthemehq.com Design by: Thesis Them HQ Parent theme: Thesis
11. Find it useful? Well, you have to first find a Mate. Twentyten Thematic Thesis, Sandbox Arthemia etc. Image courtesy of cecep.web.id
12. How to pick a good Parent theme* • Don’t just look at the design. • Check to see if the X-HTML & CSS mark-up validates according to W3C standards. • Is there a forum or structured system for support or bug reporting? • Make sure that you fully understand how a Parent theme works before building a Child theme with it. *Thx to Allan Cole (http://www.allancole.com) Image courtesy of sxc.hu
13. Now what? You will need wedding rings, right? Or some flowers is way better. In this case, few things you need to make a child theme… Image courtesy of sxc.hu
14. Necessary FTP access to your site (sites on wordpress.com don’t offer this) and an FTP client. A text/code editor (like the Windows Notepad, but preferably better). Your chosen parent theme, ofc.
15. Directory Structure public_html wp-content themes (directory where all themes are) parent theme (directory of our parent theme) childtheme(directory of our child theme; can be named anything) style.css (required file in a child theme; must be named style.css) Image courtesy of diamond.ac.uk
16. Requirement A Parent theme (your chosen theme). A Stylesheetstyles.css An images folder (images) * A Functions file functions.php * Re-Write templates header.php * A Screenshot screenshot.png * * Optional
17. Stylesheet Setting /* Theme Name: Child Theme Name Theme URI: http://your-theme-download.com Description: Child theme for the Twenty Ten theme Version: 1.0 Author: Your name here Author URI: http://your-url.com Template: twentyten Tags: 2 columns, fixed width, etc */ @import url("../twentyten/style.css"); /* Insert your custom css styles below */ Image courtesy of laughingsquid.com
18. Note that… There must be no other CSS rules above the @import rule. If you put other rules above it, it will be invalidated and the stylesheet of the parent will not be imported.
19. And also… If there are two declarations conflict, while they are equal in everything, they are different in this: The parent’s comes from an imported stylesheet, while the child’s is in the stylesheet itself. So, The child wins! Image courtesy themommytimes.com
20. Goodies You really made it all the way down here? Resources: Codex: Child Themes http://codex.wordpress.org/Child_Themes How To Modify WordPress Themes The Smart Way http://themeshaper.com/modify-wordpress-themes/ How to make a child theme for WordPress: A pictorial introduction for beginners http://op111.net/53/ Image courtesy christopher-scott.com