For this series of tutorials we need to have a local WordPress setup, this will enable easy deployment of the theme files, this series will be added to over a few weeks, rather than one big set of files we are changing to a more gentle step by step approach.
We hope that by the end of this series we would have learnt how to create child themes, create template pages with different layouts, add a second menu navigation bar, add a slideshows likesmooth slider, work with post images, and create two and three column templates.
We will not be releasing the support files for this series, the idea is that we work together in creating our templates, if you get stuck we will answer your emails, and send a the file you are stuck on.
The code below has been corrected at line 10 where we have added back this string */
If you find any bugs please use the email icon at the bottom of any page.
Before we can create template and template parts we need a local environment to work with, if you are a windows user there are a few single click installs, we use a WAMP install on our windows computers.
We will not go into installing WAMP as there is a lot of tutorials out there, we recommend the tutorial on Buds Tech Shed, just follow the instructions and setup a local database and then we can get started on this series of tutorials.
So first lets discuss why we are using a child theme and what it is and does, our starting child theme will be just a folder in the wp-content themes folder, just one file and an image, the file is style.css and contains only a few lines, when we activate the theme we will have an exact replica of the WordPress twenty ten theme, this theme inherits every file from the parents folder without us needing to transfer a single file.
If we only want to re-style the theme then we do not need any other files just the style.css, we would use this to override the parents themes styles, with our own styles or new custom styles, and we will be adding new styles for our second menu.
We might want to add or override some functions, as an example in the twenty ten theme there is one menu theme location, in our child theme we will be adding a second menu location, we will create a functions.php in our child themes folder and add our code to manage the second menu bar.
These will unleash the power of the child theme and are exactly what the child theme is for, we will be doing the following, to change the look of our pages and parts we do not need to write a new file or edit the parent themes files.
As an example we will just copy and paste the header.php from the parent themes folder to the child themes folder, then open the child themes header.php and make our changes, and WordPress will then use the file from the child and ignore the parent file with the same name.
A new very powerful feature in WordPress version 3 is the function get_template_part(), this is similar to file_include() and we will use this in our navigation tutorial to inject the second menu into our theme.
When the Twenty Ten theme was updated recently there were many developers who did not rename the themes folder and lost all the changes they had made to the Twenty Ten theme.
We will have been smart and will have preserved our original parent theme files, when the twenty ten theme has another release our changes will not be overwritten or affected, we can then look to see if the our copied files were updated in the parent (twenty ten) and decide if to take the changes across.
Creating a Child Themes
That is enough information for now, it will all become clearer as we work through, if you have your local environment we can now create our child theme.
Navigate to your WordPress install \wp-content\themes\ create a new folder ‘twentyten-templates’ so you have \wp-content\themes\twentyten-templates\
To navigate (windows) to the folder use Windows Explorer, you can find this with a right mouse click over the start button (xp) or windows logo, in the bottom left hand corner of your screen.
We need a colored syntax highlighted text editor, this will help us understand the code as different colors mean different things, a good free text editor is NotePad++ , we use the $35 editor EditPlus
With your favourite editor create a file called style.css in the new folder and we will add some lines for our child theme, change the link values to your own and add your own tags.
/* Theme Name: Twenty Ten Templates Theme URI: http://digitalraindrops.net/ Description: A WordPress 3 child theme from Digital Raindrops. Author: David Cox of Digital Raindrops Author URI: http://digitalraindrops.net/ Template: twentyten Version: V1.1.1 Tags: black, blue, white,two-columns, two-menus, dynamic-footer */ @import url('../twentyten/style.css');
We need an image so for now we will just copy the Twenty Ten image screenshot.png from the themes folder to our new folder, and that is it we have created our child theme, open the WordPress admin and activate our new child theme.
We have found the best way to copy and paste the code in the post is to hover over the code in the top right hand corner, then use the view code option [<>] in the small menu strip, this will open a new window with the clean code, right mouse, select all and copy the content, then paste this code into your editor.
if you are not familiar with firebug it is worth installing, when viewing any website in FireFox we can explore the page elements and styles.
If you are adding any of the features we are exploring here to a different theme, Firebug will help you identify where to add the code examples.
Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.
All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples. All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of some themes and files is restricted to site supporters.
You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.
This website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.