What’s My Page Again?: Build a Classroom or Professional Website

Create your own website using Google Sites, Weebly, or WordPress. Discover the strengths of each platform and learn how to adjust the layout, add content, and publish your website.

The purpose of this workshop is to give participants the skills necessary to create a professional or classroom website. The workshop will introduce participants to three website creation platforms, and will provide real-life examples of final sites.
The first half of the session will focus on basic skills, and introduce Google Sites, Weebly, and WordPress to participants. In the second half, participants will select a website creation platform and create their own website.

By owning your own website, you have control over every aspect. There is a low barrier to entry when using WordPress. Knowledge of HTML markup or MySQL databases is not necessary. By the end of the session, every participant will have their own .com website.

All participants will leave with a live educational website ready to be used. They will have skills, resources, and examples to continue developing their site.

1. Introduction to web design
2. Websites and the home-school connection

  • Communicate with families
  • Share student work: songs, videos, podcasts
  • Parents can subscribe via RSS
  • Daily/weekly reminders
  • Share documents

3. Google Sites overview

  • Creating the site
  • Choose a theme
  • Share
  • Pages
  • Editing a Page
  • Layout of a Page
  • Subpages
  • Announcements/Blog style
  • Insert Menu
  • Image
  • Form
  • Document
  • Calendar

4. Weebly overview: 10 minutes

  • Navigation Bar
  • Elements
  • Paragraph with title
  • Paragraph with picture
  • Picture only
  • Titles
  • Multiple columns
  • Design
  • Theme options
  • Design options
  • Pages
  • Add blog
  • Add pages
  • Create sub pages
  • Password protecting
  • Blog
  • Features
  • Posting
  • Manage
  • Comments
  • Sidebar

5. WordPress overview: 10 minutes

  • Posts
  • Pages
  • Media
  • Appearance
  • Themes
  • Plugins
  • Widgets
  • Menus
  • Advanced
  • Permalinks
  • Users
  • Writing settings
  • Uploading
  • FTP
  • HTML
  • Podcasting

6. Examples created by presenters

7. Create websites in three groups

  • Platform overview
  • Page creation
  • Post/blog creation
  • Theme customization
  • Platform resources

8. Publish websites


Say no to sidebars! (customize your WordPress pages)

custom drink

Typically, I blog about educational technology that the average teacher can understand. This, however, is some heavy lifting.

Here is an advanced trick for WordPress users. This is how I removed the sidebar from one specific page (titled forum) on my wordpress site. After much searching, I found that I needed to implement conditional formatting using php.

Here’s my problem:
I wanted one single wordpress page to not have a sidebar. I wanted it to take up the entire width of the page. Makes sense for a forum, right? Not so easy…

In the wordpress dashboard, navigate to Appearance > Editor > page.php.
On page.php, I changed:

[sourcecode language=”plain” light=”true”]<?php get_sidebar();; ?>[/sourcecode]


[sourcecode language=”plain” light=”true”]<?php if(!is_page(‘Forum’)) get_sidebar();; ?>[/sourcecode]

Here’s what that means:
Typically, wp displays the sidebar. That’s what we usually want. In this case, the exclamation point means “if it is not”. So, the php translation is, “If it’s not the Forum page, then show the sidebar.”

Perfect, so far. However, there was a blank space where the sidebar used to be. Another problem. The forum should be wider. This won’t happen, though, because my stylesheet says the page can only be 510 pixels wide.

So, I went to my stylesheet and created a div titled #widecolumn with a width of 100%.

Back on page.php, I changed the original div titled #contentleft to:

[sourcecode language=”plain”]<?php if(!is_page(‘Forum’)) { ?>
<div id="contentleft">
<?php } else { ?>
<div id="widecolumn">
<?php } ?>[/sourcecode]

Again, with the php translation: “If it’s not the Forum page, use the div #contentleft (with a width of 510 px). If it is the Forum page, use the #widecolumn div that you just made (with a width of 100%).