We love WordPress. It’s our favorite tool to create professional looking class websites.
Last week, we were helping one of our colleagues set up her class website for kindergarten. One of the things that she wanted was to a little box at the top of her website where she could post important information for parents and little reminders of things to do.
The great thing about WordPress is that there are hundreds of attractive themes out there to choose from. (Heck, there are over 1400 themes to choose from in the official WordPress.org theme directory.) Chances are, you can find a theme that you like.
[stextbox id=”warning” caption=”WordPress Warning! (Expand for more information)”]WordPress Warning!
If your class website is on WordPress.com, or Edublogs.org, then your choices will be limited to whatever themes that they have already installed for you. In order to install your own themes, you’ll need to run a self hosted WordPress website. (Or, if you’re a teacher on our Educircles network, drop us a note here with a link to your favorite theme from the WordPress theme directory, and we’ll look into installing it for you.)
When we told another colleague about all the things that WordPress had to offer, he was a bit surprised because he had only seen the themes already pre-installed on his Edublogs.org account. He had an iPad, so we explained it in terms of things he knew.
- Using a WordPress.com or Edublogs.org account is like borrowing or renting an iPad from a friend. It’s still an iPad, but you’re limited to the apps that your friend has installed for you (even though there are millions of other apps available from the iTunes Store.) Assuming your friend won’t let you install whatever apps you want, your options are either 1) to buy your own iPad, or 2) to find a friend that will let you install the apps that you want.
- To bring this analogy back your classroom website, if you want to install any theme or plug-in (WordPress app) that you want, then you need to either run your own (self hosted) WordPress site, or find a friend that lets you install the theme or plug-in that you want. (At Educircles, we run a private network of classroom websites for teachers. For security reasons, we won’t give you the power to install your own theme or plug-in, but if you put in a support request, we’re pretty reasonable about installing new themes – and plug-ins, depending on which plug-in.)[/stextbox]
Our kindergarten colleague used WordPress for her class website last year. She used the 2010 Weaver theme which is a great theme that offers a lot of customization options, including a special sidebar for widgets just above the post.
(That’s how she was able to initially put an information box for her parents about classroom supplies or important paperwork that needed to be returned.) This year, she’s using a different theme that didn’t offer a sidebar below the main title – so we needed to find another way to make her information for parents stand out.
[stextbox id=”info”]A sidebar is that narrow, vertical menu bar that you see on the right side of websites (including ours). You can fill it with useful information, links to posts, ads, or other things. These little boxes of information are called widgets.
Usually you find sidebars on the side of websites, but you can also find them horizontally at the top or bottom of websites as well.[/stextbox]
Unfortunately, the theme which this teacher chose this year (third style) didn’t have a sidebar horizontally at the top of the webpage, so we decide to get creative and to make a generic welcome post stick to the top of her blog. We planned to put our welcome and information messages inside of this sticky post.
- How to create a message box using HTML and CSS code
- How to create a message box on your class website using a WordPress plugin
How to create a message box using HTML and CSS code
With a little bit of HTML and CSS knowledge, we were able to create a message box inside a regular WordPress post following Janko Jovanovic’s instructions here.
Jovanovic’s trick to get message boxes for different message types is very cool. So cool that after working on the kindergarten website, we thought about writing a simple plug-in that would allow other teachers on our Educircles network to create similar message boxes.
And this is why we love WordPress. Someone had already created a message text box WordPress plug-in and published it to the plug-in directory.
How to create a message box on your class website using a WordPress plugin
Special Text Boxes is a neat little WordPress plugin that lets you create pretty little colorful information boxes that you can put anywhere inside of your post. We’ve included a few examples of what you can do with this plugin inside of this post that you’re reading:
- The orange message about WordPress that you can click to expand is an example of a warning special text box
- The blue lightbulb message about sidebars is an example of an info special text box.
If your class blog is a self hosted WordPress account, then you can install the special text boxes WordPress plug-in without any problems.
If you’re a teacher who has set up an Educircles network with us for your class websites or, online literature circles, then this plug-in has already been activated for you. All you need to do now is include some short codes when you’re writing your posts:
For example, if you want a simple text box, this short-code
[stextbox id="alert"] Type your important message to parents here [/stextbox]
will look like this when visitors see your class website:
[stextbox id=”alert”] Type your important message to parents here [/stextbox]
If you want a “captioned text box”,
[stextbox id="alert" caption="Important Message Title"] Type your important message to parents here [/stextbox]
will look like this:
[stextbox id=”alert” caption=”Important Message Title”] Type your important message to parents here [/stextbox]
There are other types of special text boxes.
- For example, instead of typing “alert”, you could also create other different types of text boxes: info, download, grey, black, warning, and custom.
- If you go to Settings > Special Text Boxes, you can customize how your information boxes look. You can create a custom box where you can change the colors and add your own icon image.
- You can also set it up so that your caption information box can expand or collapse and even set it up so that when the page first loads, the caption box is closed until your parents click on the message. (That’s what we did with our orange warning box on the site.)
How do you tell your parents and students about important information on your website?
This post was written using Dragon NaturallySpeaking 11.5 Premium Wireless
Here are some of the word errors made by Dragon NaturallySpeaking 11.5:
Here are some of the punctuation / capitalization errors made by Dragon NaturallySpeaking 11.5:
We are compensated for our reviews. Click here for details. |
The special textboxes used above look fine on an iPad. (One of our colleagues was complaining about how he couldn’t see his website on his iPad because his website had some flash.)
We’re able to expand and collapse the WordPress warning textbox using Safari on our iPad2 without any problem.
You could use the special textboxes on your class website if you were creating textbook style expository texts.
For example, if your students were writing about volcanoes, they could use the special textboxes to add additional anecdotal information that didn’t relate directly to the their topic. That’s kinda cool.