This website is an example of how WordPress can be extended to integrate with other databases outside its own internal structure. Most of the content that you see is provided by CityGrid Media and is accessed through api calls. The categories, sidebars, theme, and page structure is provided by WordPress and Genesis. The architecture creates a shell that is easy to manage and extend. The shell also provides hooks for SEO.

When you link to a pdf document, you can control the size it opens at like this:

http://www.mysite.com/mypdfdoc.pdf#zoom=50

50 means open up the document at 50%. 100 would mean open up the document at 100%.

There is some inline javascript which is very dense. I am sure the code could be improved by moving the inline code elsewhere, but, at the time, I was pretty happy to just have this working. The inline code does not allow any formatting like tabs and line breaks, so it looks like a jungle of code!

SAMPLE CONTACT FORM 7 FORM WITH CALCULATED FIELDS USING EVENTS AND JAVASCRIPT
<!-- by Karla Leibowitz, 2011, www.karlakarla.com -->
<div style="margin-top:5px;background:#667700; color:white; ">
<strong> CAMPER FEES (Camper fees are based on ages as of the first day of each session.)

[text adults 4/ "0"]<strong> Enter # of Adults (19+) $725/pp </strong>
[text kids 4/ "0"]<strong> Enter # of campers Ages 6-18 $640/pp </strong>
[text youngandold 4/ "0"]<strong> Enter # of campers Ages 3-5 & SENIORS (over 65) $415/pp </strong>
[text babies 4/ "0"]<strong> Enter # of campers Ages 2 & Under (no charge)</strong>

<strong> HOUSING OPTIONS : SELECT AN OPTION FROM BELOW (required)
<em style="color:red; background:white;">Tent cabins and dorm rooms available on a first come, first served basis. </em></strong>
<input type="radio" name="housing" value="You are a group of 4 or 5 and request a tent cabin if available" onclick="this.form.hadj.value=0; this.form.hmul.value=1" />You are a group of 4 or 5 and request a tent cabin if available (no extra fee)
<input type="radio" name="housing"  value="You are a group of 3 or less and request a tent cabin. " onclick="this.form.hadj.value=360; this.form.hmul.value=1;"/>You are a group of 3 or less and request a tent cabin. Additional $360.00
<input type="radio" name="housing"  value="You have 6 or more people in one tent cabin. " onclick="this.form.hadj.value=0; this.form.hmul.value=.90" />You have 6 or more people in one tent cabin. 10% off
<input type="radio" name="housing"  value="Your group will be sharing a tent cabin with another family.  " onclick="this.form.hadj.value=0; this.form.hmul.value=.90"/>Your group will be sharing a tent cabin with another family.  Each family must have 2 or more. 10% off
---- Enter other family name here [text sharefamily]
<input type="radio" name="housing"  value="Your group will bring and sleep in a tent, an RV, or a car." onclick="this.form.hadj.value=0; this.form.hmul.value=.90"/>Your group will bring and sleep in a tent, an RV, or a car. 10% off
<input type="radio" name="housing" value="You have 2-3 in your group and you would like a dorm room " onclick="this.form.hadj.value=0; this.form.hmul.value=1" />You have 2-3 in your group and you would like a dorm room (no extra fee)
---- If no dorm room is available then I will
---- [checkbox nodormroom "Share tent cabin with another small group" "Stay in tent cabin with only your group ($360 fee added if necessary)"]

<strong> DONATIONS  </strong>
$[text fcsf 7/7 "0"] Please consider a tax-deductible donation to the Family Camp Scholarship Fund
$[text lpdf 7/7 "0"] Please consider a tax-deductible donation to the Lanier Pruitt Diversity Fund
<div style="background:paleGreen; color:black; padding:5px;margin-top:4px;">
Calculate your payments <strong>
<input type="button" value="Click here" style="background:blue; color:white; border: 2px black solid" onclick="this.form.adultcost.value=this.form.adults.value*725; this.form.kidcost.value=this.form.kids.value*640; this.form.yocost.value=this.form.youngandold.value*415;this.form.total.value=addcampers(this.form.adultcost.value, this.form.kidcost.value,this.form.yocost.value);this.form.totalwreg.value=addcampers(this.form.total.value, 50, 0); this.form.totalh.value=addcampers(this.form.totalwreg.value*this.form.hmul.value, this.form.hadj.value, 0);this.form.totalpay.value=addcampers(this.form.totalh.value, this.form.fcsf.value, this.form.lpdf.value);  this.form.deposit.value=addcampers(this.form.adults.value*100, this.form.kids.value*100,this.form.youngandold.value*100);this.form.deposit.value=addcampers(this.form.deposit.value,50,0);this.form.balancedue.value=addcampers(this.form.totalpay.value,this.form.deposit.value*-1,0);this.form.housingtype.value=housingval(); "> to see totals.
If you change camper numbers, housing option, or donations, then you must click to recalculate.
</strong>
$[text* total 5/] TOTAL CAMPER COST -- Breakdown $[text* adultcost 5/] adults $[text* kidcost 5/] youth $[text* yocost 5/] Junior and Senior
$[text* totalwreg 5/] WITH REGISTRATION FEE

[text* housingtype 60/]
$[text* totalh 5/] WITH HOUSING ADJUSTMENTS  (
<input style="border:none;background:transparent; text-align:center" type="text" name="hadj" size="2" readonly="readonly"> surcharge
<input style="border:none;background:transparent;text-align:center;" type="text" name="hmul" size="2" readonly="readonly"> multiplier )

$[text* totalpay 7/7] TOTAL PAYMENT DUE INCLUDING DONATIONS

MINIMUM INITIAL DEPOSIT DUE WITH REGISTRATION FORM*
Amount: $[text* deposit 7/7]   (Includes registration fee and $100 per camper)

BALANCE DUE BY JUNE 1, 2011  $[text* balancedue 7/7]
</div>
<div style="background: #FFA500; margin-top:4px; padding:5px; color:black;">

[submit "Send"]
</div>

Here is the javascript code that you would need to install in a script section of your web page to complete this example.

function  addcampers(one, two, three) {
sum=eval(one)+eval(two)+eval(three)
return sum
}
function housingval() {
for (i=0;i<document.forms[0].housing.length;i++) {
   if (document.forms[0].housing[i].checked) {
       user_input = document.forms[0].housing[i].value;
   }
}

return user_input
}

We looked at how to go about restyling a website created with the 2010 theme by editing the stylesheet.  To accomplish this training we covered:

• How to use Firebug with Firefox.
• How to make a childtheme.
• CSS rules and syntax.
• How CSS integrates with HTML.
• The internal structure of a WordPress site.
• How WordPress renders a site.
• As an added bonus, we covered how to style a theme from photoshop artwork.

I managed a WordPress website for a summer camp, and at one point they requested an online registration form. I chose Contact Form 7, a popular plug-in available through the WordPress plug-in library. The application uses shortcode like hooks and AJAX to build a form and then mail the form inputs to the website owner (or whereever). Multiple email addressees can be designated so I could send a copy of the form to both the registrar and the registrant.

The Contact Form 7 product is widely used, and a companion product, Contact Form 7 to Database Extension has been developed separately. This plugin captures the form inputs into a table that can then be exported in a variety of formats including CSV for Excel and as HTML. The user can delete records from the database, so that subsequent exports are of fresh data only. For the camp office, this is a very useful administrative feature.

Once I started building my form, I found that I could manage the styles via stylesheet and inline CSS and I could add html tags directly into the form template. With the integrated HTML, I could enclose blocks of fields inside divs or spans and set borders, colored backgrounds, special fonts, padding etc. Explanatory text could be highlighted, italicized or set to bold.

My camp colleagues were duly impressed and then asked for another feature: could I calculate the cost, rather than having the camper do it? I searched and searched online for a solution. But found none.

So here is how I was able to add javascript to my contact form 7 project, and to calculate fields in the contact form 7 form.

Contact Form 7 fields look like this:

[text myfieldname]

Different types of form inputs (radio buttons, textareas, checkboxes) are also supported. There are additional arguments you can add inside the square brackets including an id, a class, a field length, and a default value.

But you cannot add an event.

Here is a simple example of what an HTML tag with an event with some javascript would look like

<input name="fieldname" type="text" onchange="alert('wow')" />

Since I can include HTML in my form template, I can drop this tag into my form and voila! I have javascript in my form. I can reference javascript functions that are installed in the header of my theme, so more ambitious functions are possible.

Easy peasy! Yes, but, the database and the email will not see “fieldname” because it exists outside the syntax the AJAX program is expecting. Boo hoo.

You have to use a button to get information into the fields that contact form 7 sees.
Here is an example:
(note many of my examples include carriage return inside tags, but do not do that on the contact form, or the pre-processor will break up your HTML)

<input type="button" value="Click Here"
onclick="this.form.field2.value=this.form.field1.value*100; this.form.field3.value=
add(this.form.field2.value, this.form.field1.value)" />

Enter a starting number: [text field1 “0”]
Adjustments: 1.  [text field2]  2. [text field3]

——————————————–
You can replace

[text field1 “0”]

with

<input name="field1" type="text" value="0" />

if you need to, and you would be able to reference field1 in your javascript, but it would not go into the database or into the email.

Any functions you need should be added to your header, either in header.php or through some mechanism in your theme.

The full text of the code I created is here.

To see the presentations click here.