Getting Started Two

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.

Tutorials Two

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.

Starting Theme

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 (1889)

Next Sections for New Participants Only

Local Install

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.

Child Themes

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.

Style.css

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.

Functions.php

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.

Template Files

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.

Template Parts

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.

Theme Upgrades

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.

Copying Code

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.

We use the FireFox browser and a very good addon called Firebug for development. We will be referring to Firebug throughout the tutorials.

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.

Notices

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.

Membership

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.

3 thoughts on “Getting Started Two

  1. Pingback: Menu Images |

  2. Pingback: Options Page | | Digital RaindropsDigital Raindrops

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Blog

Read More

Posted in Tutorials 2010 Two

The first in this series of tutorials is adding images to the Main Menu, we looked about and found a menu that suited our theme, the stylesheets elements however do not match our theme, so we needed to rename some … Continue reading

Read More