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 two weeks, rather than one big set of files since we are changing to a more gentle step-by-step approach.
We hope that by the end of this series you would have learned: 1: how to create other template pages with different layouts, 2: add images to the menu, 3: add a different header section, 4: add a different slideshow, 5: introduce an options page, 6: add social media and 7: add a wide footer with links.
We are releasing the support files for this series at each stage. The idea is still that we work together in creating our templates. If you get stuck, you will have the working examples in the support files. These will also have images and other assets.
The second series of tutorials will be 10 sessions, each sesssion should be easy to complete in less than an hour, the understanding of what each session does will depend on your knowledge of the various code languages.
You must have access to the themes directory so a local install is preferred. If you are working with a live hosted test website then ftp is a must as you will need to transfer files and image assets.
If you have not created the files for Part One, or just want to be sure you have missed nothing, you can now download the starting theme from here. These are the files we will be working with for the next two weeks.
Download: Tutorial 2 Starting Theme (1295)
Next Sections for New Participants Only
Before we can create our theme, we need a local environment to work with. If you are new to the tutorials and 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 since there are a lot of tutorials out there. We recommend the tutorial on Buds Tech Shed. Just follow the instructions and setup a local database. Then we can get started on this series of tutorials.
So first let’s 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 yet 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. For example, in the twenty ten theme there is one menu theme location; in our child theme we will be adding a second menu location, 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 we’ll open the child themes header.php and make our changes. 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.
How We Created the Child Themes
Navigated to our 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 our favorite editor, we created a file called style.css in the new folder and we added some lines for our child theme, changed the link values to our own and added our 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 needed an image so for now we just copied the Twenty Ten image screenshot.png from the themes folder to our new folder. That is it. We will create 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 using this program.
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.
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://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.
Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.