WordPress : Using Widgets To Customize Your Theme

This page supports guest lectures for Peg Achterman.

2012 Slideshare

Download the PPT file or view on Slideshare.net.

Themes being used by students

• Alyssa, Johnny, Megan K : Bueno
• Anu  : Ocean Mist
• Cadie : Dusk to Dawn
• Cole, Holly : Titan
• Danielle L  : Piano Black
• Danielle M, Sheidy  :  iTheme2
• David : Comet
• Janie, Jessica  : Fresh & Clean
• Emma, Jonathan : Chateau
• Gretchen : Auto-Focus
• Josh H, Megan M : Modularity Lite
• Josh N : Parament
• Josue : Wu Wei
• Katelyn : WPShower
• Mason : 2010
• Wilhelmina  : 2011

Lab (time permitting)

(1) Take a screenshot (print screen) one of your blog (may need more than one screenshot to capture top and bottom). Paste into a Word doc or PPT presentation.

(2) Log into your Dashboard : Settings -> General

• Modify the tag line and set time zone to Pacific (UTC -8 or Americas/Vancouver)
• Save settings change

(3) Navigate to Appearance-> Widgets

1. Take a screenshot of your dashboard widget area; may need to screen shots to capture top and bottom. This screenshot provides a record of the default settings.
2. Edit the widgets on your blog. At a minimum, you should have archives, categories and RSS links. Click “Save” after modifying or customizing a widget. Dragging a widget into a sidebar area automatically publishes the design change to your blog.

(4) Take two more screenshots of your blog and new widgets at the end of the lab. Paste into the Office Doc. Save with this file name: firstname_lastinitial_26jan2012.docx or pptx. Share the document with Peg.

 

 

2011 Slideshare 1

Download the PPT file or view on Slideshare.net.

Screencast

Themes being used by students

• Coraline : Paul
  The fourth most-popular theme at WordPress.com; Coraline supports seven widget areas (up to three in the sidebar and four in the footer); it has an optional full-width page template that removes the sidebar.
• MistyLook : Naomi
  The second most-popular theme at WordPress.com; right sidebar for widgets.
• Monotone : Jason S
  A photo blogging theme; it does not support widgets.
• Twenty Ten : Erika, Danae, Jason K, Ryan, Stedman, Tim
  The new default theme is the most popular theme at WordPress.com; it has two sidebar widget areas as well as four footer widget areas; it has an optional full-width page template that removes the sidebar.
• Wu Wei : Jenny
  A grid-based theme with one widget area in the footer.

Lab 1

Work in pairs:

• Erika, Paul
• Danae,  Jason K
• Naomi, Ryan
• Jason S,  Stedman
• Jenny, Tim

(1) Log into your dashboard and navigate to Appearance-> Widgets
(2) See how your dashboards are alike, different

Lab 2

(1) Decide if you want to change themes and, if so, do so, just make sure the theme supports widgets. (Jason S needs to change theme.)
(2) Take screenshots of your dashboard widget area and your blog (may need more than one screenshot to capture top and bottom). Paste “print screen” images into Word Doc with filename firstname_lastinitial_01feb2011.docx.
(3) Edit the widgets on your blog. At a minimum, make sure you have archives, categories and RSS links.
(4) Take a screenshot of your blog and new widgets at the end of the lab and paste into the Word Doc. Share the document with me and Peg.

Presentation 2

Download the PPT file

Lab 3 : Tweaking Design

(1) Dashboard : Settings -> General
Modify the tag line and set time zone to Pacific

(2)  Links : review, add course site

(3) Dashboard : Posts -> Categories
Change “uncategorized” to “miscellaneous”

1. Mouseover category name
2. Click edit
3. Revise name
4. Update

Same process to edit tags

Lab 4 : Using Text Widgets

Text file with code snippets on DropBox (right-click, save as TXT)

Facebook Badge

(1) Drag a Text Widget to a sidebar
(2) Log in to Facebook. Go to your Facebook Profile Badges page
(3) Pick a style, select “other”, copy code
(4) Paste code into Text Widget
(5) Save; Preview

Example code:

Twitter Badge

(1) Drag a Text Widget to a sidebar
(2) Download this image to your hard drive (right-click, save)
(3) Upload the image to your media gallery (WordPress tutorial)
(4) Copy the link url
(5) Create the image link
(6) Copy the Twitter URL
(7) Create the hyperlink
(8) Save; Preview

HTML tags: img src and href