learning wordpress workshop

I love Wyoming!

— we will check out the file folders in the cpanel

— refresher on firebug for firefox

— we will begin learning how to create a child theme for own own personal adaptation of the wordpress themes….

===================

Ok… first things first…

1.  Lets take a look at our Cpanel!! — Go ahead and log in … and together we will look where the files are ….

2.  There are 3 main folders:

WP- Admin == back end stuff … what is that?

WP – Content == themes… like the one will create (adapter)

WP- Includes == the stuff for the front end

3.  Without closing your Cpanel, make a new browser window or tab and log into your front end panel (via an internet browser like safari/firefox/etc.) and log into your WordPress Site … do you know how to find it?  do you remember your passwords? Make sure to place it in a place you can always get to it….

4.  Notice how the folders in the theme folder are also provided under your selections on the back end….

– Go ahead and switch the themes and look at the changes…  How are the themes designed (For example:  Header, Sidebar, Footer, Body, etc?

——————————————————————————————–

Ok… cool… now we have an idea about the relationship to the cpanel and front end…. do we?

5.  Next step…. lets download the plugin of firebug to our browsers if you have not done that already…

http://getfirebug.com/

— can someone come up to the front and show us how firebug works?

——————————————————————————————

6.  We are going to use firebug in order to bring code from our wordpress theme/site, change it and build a new theme… OUR OWN THEME!!  Alright!!  — Otherwise known as a child theme… Why is it called a childtheme?

– First lets go to our cpanel again… go to our themes folder… and create a new folder…

– I created Adapter

7.  Now go inside Adapter … and page called: style.css

8.  On that page… we are going to begin typing a comment area that identifies our theme

/*
Theme Name: Adapter
Theme URI: http://www.justinhoffman.net
Description: A child theme of Twenty Ten
Author: justin
Author URI: http://www.justinhoffman.net
Template: twentyten
Version: 1.0

*/

9.   Next we are going to add a link to the twenty ten theme:

@import url(../twentyten/style.css);

10.  Now we can use firebug … go to our previous wordpress site …take some of the code and add updates to the previous theme… for example I chose to change the  Menu

/* Menu 
————————-  */

#access {
background:#580000 ;
}

#access a {
color: #888888;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}

11.  You can keep doing this to change all sorts of different parts of the site…  go ahead and try yourselves… Feel free to go to the Adapter folder on the buyadoo server and take the code from the style.css or you can take the entire file…

====ASSIGNMENT / IN CLASS LABORATORY =========================

How to do it?  Make a new folder in the cpanel …

— link that folder when you create the style.css  file …

— and change your theme to see the result…

1. use this example of wordpress to find code to change…

2. change it yourself with your impressive html skills …

3. or use this link here which is a basic example of the twenty ten theme that we are modifying….

===========================================================

HOMEWORK:  Remember… yes you will be graded on participating in the activity … but don’t worry about the appearance… worry more about playing around with learning about design implementations…

===========================================================

 

something to say …  something to say …  something to say …  GO THUNDERBIRDS!!