Getting Started

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.

UPDATE: This tutorial had a sytax error which was corrected 20th August 2010, early visitors following the tutorial may not have picked this up and the style sheet would not have been imported.

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.

Local Install

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.

Child Themes

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.

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, 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.

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

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.

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.

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 reffering 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.

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.

Notice

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.

Membership

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.

27 thoughts on “Getting Started

  1. David

    Normally I look at this sort of stuff and walk away because it presumes knowledge that I don’t have.

    It looks like if you keep your explanations as clear as this one, that I will actually succeed in not only following the instructions, but learning something that will be invaluable to me not only now but in the future.

    Working through it together is a grat idea

    2 comments:

    1) The screen shot in the last section – Coping Code (I preume that’s copying code) has overlapped the instructions.
    2) Could you start each tutorial with an explanation of what we will achieve by the end of it, and if possible / relevent provide a screen shot of the visual outcome as well as the code.

    Questions

    1) Will the tutoral be available permanently? (I am on holiday for the first 2 weeks in September and don’t want to miss out)

    2) Am I correct in thinking that this has nothing to do with Artisteer templates?

    3) Once we have completedthe course will we have enough knowledge to design any template in the future?

    4) Will following the course mean that we will be able to do what Artisteer does, but without using Aristeer?

    5) Is this the correct place to ask questions?

    6) Will there be a forum?

    I will have a go tomorrow and give an update.

    Paul

    • Good tutorials so far. It could be helpful to number the tutorials so first site landers will know that the tutorials are sequential. It isn’t obvious from the titles.

  2. Hi Paul,

    Q. 2) Could you start each tutorial with an explanation of what we will achieve by the end of it, and if possible / relevent provide a screen shot of the visual outcome as well as the code.

    A.2) We will add an overview to each section, there is a live website which we will use as “Proof of Concept”, this will be updated by the weekend.
    http://twentyten-templates.digitalraindrops.net/

    Questions

    Q. 1) Will the tutoral be available permanently? (I am on holiday for the first 2 weeks in September and don’t want to miss out)
    A.1) They will be online permanently, we have had some link problems this week as I had to change the permalinks for buddy press.

    Q.2) Am I correct in thinking that this has nothing to do with Artisteer templates?

    A.2) One of the reasons for breaking it down into small steps means that the code can be adapted to many themes including Artsiteer users themes, the main difference is the base theme is twenty ten and not an Artisteer theme.

    Q.3) Once we have completedthe course will we have enough knowledge to design any template in the future?

    A.3) Theme development can be as little or as much as you want, we hope to have enough tutorials to be able to tackle theme development to a reasonable level, tools to be competent but not expert.

    Q.4) Will following the course mean that we will be able to do what Artisteer does, but without using Aristeer?

    A.4) Artisteer is a theme generator and creates the graphics, we will be changing elements of the twenty ten theme, like the menu bar here, but we will not be dealing with page images like corners etc:, Artisteer is good at creating the graphics so we are not looking to be a replacement, if we can build enough interest we would consider creating a theme plugin to write the templates etc:

    Q.5) Is this the correct place to ask questions?

    A.5)For now it is fine to comment here.

    Q.6) Will there be a forum?

    A.6) We have BuddyPress groups and forums built into this website login and have a look, we will be creating a group specifically for the templates.

    P.S. it even has a chat room application so we can organise live discussions if we have the interest.

    David

  3. I get to here in Buds tutorial:

    Step 3: Set up wp-config.php

    You can create and edit the wp-config.php file manually but it’s much easier to let WordPress do it for you. Point your browser to ‘‘localhost/…….wp-admininstall.php” and you will see the next screen. Go ahead and create the configuration file…

    and all I get is a message saying that ‘localhost/…….wp-admininstall.php” does not exist

  4. Hi paul,
    Open wp-config-sample.php
    Add in your database information, you have created a database?

    Then save as wp-config.php

    Something like this:
    // ** MySQL settings – You can get this info from your web host ** //
    /** The name of the database for WordPress */
    define(‘DB_NAME’, ‘wp-version3’);

    /** MySQL database username */
    define(‘DB_USER’, ‘root’);

    /** MySQL database password */
    define(‘DB_PASSWORD’, ”);

    /** MySQL hostname */
    define(‘DB_HOST’, ‘localhost’);

    David

  5. David

    Thanks for trying, but I really don’t have enough background knowledge, and I will take up too much of your time

    I can see the data base but haven’t got a clue how to get to wp-config-sample.php

    Paul

  6. OK OK – I can hear the roars of laughter from here!

    In Bud’s tutorial, when he aid unzip the wordpress folder and copy it to your WWW folder, I created a folder on my desktop and called it WWW!!!!

    It’s also taken me about 45 minutes to figure out that in the above instructions where it says “Navigate to your WordPress install” , that I do that from my text editor. I’ve been in My Docs and other dark nook and crannies looking for anything that looked like the screen shot!

    David – Now you understand what I meant by not having much experience!!!

    Well at this rate I should complete this tutorial in about 24 more hours

  7. David

    I said I’d keep you informed on the “Dummy” approach to the tutorials progresses.

    Well I got there in the end – it took just under 5 hours!
    However I’ve just had another go on a different PC and starting from scratch, installing Wamp and following this tutorial took 33 minutes.

    The 3 stumbling blocks were
    1) Not knowing where the www file was in Bud’s tutorial
    2) Not knowing how to navigate to the wordpress install as per your tutorial
    3) (I can’t believe I’m even admitting this one) – Not realising what you meant by a text editor. (yes I did download an HTML editor and wondered what the hell it was !)

    I know you have to draw the line somewhere in having an expectation of peoples knowledge and ability, but I hope the above helps.

    Well I think I need some caffeine before looking at the next tutorial

  8. Hi Paul,
    The 3 stumbling blocks were
    1) Not knowing where the www file was in Bud’s tutorial
    1.A) Contact Bud on that one

    2) Not knowing how to navigate to the wordpress install as per your tutorial
    2.A) Note added to post

    3) (I can’t believe I’m even admitting this one) – Not realising what you meant by a text editor. (yes I did download an HTML editor and wondered what the hell it was !)
    3.A) Note Added to post

    Thanks for the feedback, I am sure it will help others 🙂

    David

  9. Ermm
    Not sure I’m getting this correctly:

    “open the WordPress admin and activate our child theme”

    How do I know if it is the child theme or the original twentyten I am opening?

  10. Ok – think I’ve got it – but got it wrong!
    localhost/wp-admin
    When I log in I can find the twentyten and the new theme!!!!! Hooray
    But
    There is no header image – Booooo

  11. David

    I have now worked through the first eight tutorials.
    I am so glad I persevered and got over the initial learning curve.
    This has been a fantastic experience for me. I am not only developing an amazingly versatile theme, but at the same time I am getting to grips with what is happening behind the scenes in php, css, and site structure.
    The tutorials are simple enough to follow, but they are also stretching and each one builds on the previous.
    I recommend that anyone reading this comment gets started, even if it seems daunting. The rewards far out way the braincell usage!!!!

    Thanks for your generosity in providing this course.

    Forever indebted

    Paul

  12. This looks very promising. The language is simple enough to follow and I’m not overloaded with information right off the bat. I have been tinkering with WordPress for a few weeks now and have tried a few other tutorials but eventually get in too deep and lose interest due to frustration.

    Thank you for that description/rationale of/for the child theme — I had heard the term but no one has explained.

    I followed all the instructions here and installed my first child theme but I notice that my updated site now has a home button and top navigation. Where did that come from? All we did is make a style sheet? I look in the Pages tab in the Admin area and there are no pages. Curious.

    Cheers,
    Brad

    • The whole themes is inherited from the parent, so everything that the twenty ten theme has our child theme will have.

      We can then create new styles, layouts and functions which will belong just to the child theme and override the parents.

  13. Hi,
    This looks great, I’m trying to follow along (this is all new to me) and I have a few questions, I’ve finished the first 2 pages of your tutorial, I’m up to the part to view the top menu live but it doesn’t work. My twenty ten theme states it only supports one menu not two? Am i doing something wrong? Also. I’d like to make sure i have the correct file structure, in my themes folder in my FTP site I made a new file named twenty-ten templates. In the twenty-ten templates folder I created and put the functions.php, header.php, navigation-2.php, screenshot.png, and styles.css. Is this the correct structure? The only other thing I can think of that I might of made a mistake on is when you say to locate the code and add

    Does this code go directly after the ?

    You’re help is very appreciated.
    Thanks,
    Justin

    • Hi Justin,
      If you visit the downloads page, left column there is a category ‘Tutorial 2’, download the ‘Tutorial 2 Starting Theme’.

      This is the theme from the first tutorial set, you will find all the working files in the download, so you can compare the placement of your code.

      HTH

      David

  14. Dear David,

    I’ve been working with wordpress since it’s inception, but unfortunately have not worked with child themes, and before I get started I like to know if the child themes can be used for other internal pages of the parent site. For example: We’re creating a membership site and inside the membership site will be a different navigation and layout and maybe even a header image and other functionality. Can child themes be used for this purpose. And can each page or sub pages of the membership site use different child themes.

    Thanks
    Tim

    • Hi Tim,
      A child theme will be applied to the whole website so you cannot have different child themes for each page, that could be done using template pages and template hierarchy.

      Then you could use the WordPress custom menu system and create additional locations and use a conditional statement to see if the user is logged in to load a members navigation menu.

      With a child theme you copy over only the files you want to edit, and create any new template pages in the child theme, if you are using a membership or forum plugin make sure it works ok with child themes. 

      If you think that you will need to do many changes then you have to decide if creating a child theme is the best route.

      When you say creating a membership site, if it is a sub domain then there are not many membership plugins that work well with (multi-site) sub domains, I tried that method and have ended up back to the membership at the primary domain level using Magic Members.

      HTH

      David

      • Dear David,

        So in essence a child theme is used to change the appearance and or functionality of the parent theme only? If this be the case, maybe I’m a bit confused, but why not just create a new theme?

        Thanks Tim

  15. Thanks so much for putting this tutorial together! I’m having trouble though, importing the style.css into my child theme. (ie it’s not). I’ve entered the code  @import url(‘../twentyten/style.css’); you suggest, I’ve confirmed that twentyten is on the same file directory level as my child theme, so the up one folder and down should work. I’ve also tried replacing the url with the complete url to the file — no luck. Do you have any idea what I’m missing?

    Thanks so much for your help!

Leave a Reply

Connections

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

Related Posts

Posted in Tutorials 2010

nav1.png

We have all seen the websites with a secondary menu at the top with the more boring page links, what we will do in this part is to create a secondary menu in our twenty ten child theme, lets stop … Continue reading

Read More