School Websites

I recently updated the website for a school I work with so thought I’d share how it works so others can copy what I think are its nice features and hopefully I’ll get feedback to make it even better. Maybe take a quick look at the site before reading on:

We’ve had a WordPress website up since 2008 but its theme wasn’t particularly nice and when we looked at the analytics, we found that 40% of traffic is now mobile. I took it as an opportunity to find a responsive theme and brighten things up. After a quick Google search I found the Romangie theme and I started a child theme in my WordPress install, changed the colours to suit the school’s own and created a new page template for our homepage.

I’ve tried to make everything as functional as possible – almost everything on the homepage is a link – and keep with UX conventions. The school name links back to the homepage from every page. The school address is a link to Google Maps and the email address is naturally a mailto: hyperlink. When viewed on mobile, the phone number is clickable to call the school. I’ve also used some CSS – white-space: nowrap – to ensure the phone number never breaks onto two lines on narrower screens and the same with “Dublin 3”.

School Name and Contact

(I assume) these three pieces of information are what a significant number of parents are coming to the website to find so I’ve added the meta description tag so this information shows up in Google search results.

Google search result

The banner photos should be clickable to show the photos full size but that’s yet to make it to the top of the list! The main page template is afterwards just three widget containers.

The first column contains the Simple Google Calendar Widget and Simple Twitter Tweets plugins. The calendar widget is very heavily customised by me and I’ve yet to have the time to share my changes with the original author. To update the content, the principal or secretary just has to add the event to the shared Google Calendar.

Simple Google Calendar Widget

The title is a link to the full calendar page on the website which contains the school holidays as sent home at the beginning of the year and the full Google Calendar embedded below. In the homepage widget, if a calendar entry has a hyperlink as its description, the title links to that page, typically a notice that has gone home to parents. The dates are links to the individual Google Calendar entry so parents can quickly save it to their own calendar. When the website is viewed on mobile, a “Subscribe to Calendar” link appears.

Individual Calendar Entry

Simple Twitter Tweets does exactly as expected – it displays the school’s Twitter feed. One of its primary benefits is that the principal can easily use the Twitter app on her phone to update the website. It was also a good selling point to encourage the school to start using Twitter itself!

Simple Twitter Tweets

Again, I’ve done lots to customise it. The title links directly to Twitter and the timestamps link to the individual tweets. In this case, I’ve sent pull requests to the original author so hopefully all my changes will be included in the next version. It’s quite frustrating when updates come out for plugins I have customised because they will overwrite any changes I have made.

I’ve put a shortcut on the principal’s desktop and phone’s homescreen to which I figured is the quickest route to updating after dismissing a number of desktop clients that have too many features for our need.

Update Twitter

The second column contains the Category Posts widget, used three times, which we’re using to neatly display the most recent notices, newsletters and class blogs. I’ve made changes to the plugin to allow the option of showing the author’s name in the list; allow different date formats, e.g. the newsletters only need the month shown; turn the date into a hyperlink; and to allow selecting empty categories for the plugin, e.g. there’s a Book Club widget on the page ready for the first post. I’ve some pull requests for these accepted and some debated, hopefully they’ll all be accepted.

Category Posts Widget

For posts to appear in the correct section, they need to be categorised properly. This needs to be made a little easier for the teachers. WordPress, under Settings, Writing, allows a site-wide default category, but I have added the Default Category plugin so I can have teachers’ posts default to Class Blogs and the principal and secretary’s posts default to Notices.

The third column uses standard WordPress menus (configured under Appearance/Menus) but I needed the Better Menu Widget to get everything appear as I wanted, particularly around the booklists and agreement form links. This plugin also enabled setting the title to a link, which made sense in two of its three uses.

Better Menu Widget

The links in the third column are in a collapsed menu at the top of every other page, but for the homepage I was trying to make everything as easy to find as possible.

We also have Google Analytics in the footer so we can determine what links parents want to see (the calendar!). While there are plugins for setting this up, I just edited the theme’s footer.php file and copied and pasted in the JavaScript provided by Google. On a typical weekday the website gets around 30 visitors (there are just over 400 students in the school).

We have disabled comments across the entire site. For future posts this can be done under Settings, Discussion, unselect the Allow people to post comments on new articles option. For existing posts, under Posts, select all posts, choose Edit under Bulk Actions and toggle Comments to Do Not Allow. For the sake of appearance, I have edited the theme’s single.php to remove any mention of comments below each post.

I have effected single sign on for the teachers by hooking into our Google Apps for Education setup. We have Google Apps Directory Sync and Google Apps Password Sync on the domain controllers in our school so teachers can sign into Google using the same username and password they use for the school computers. Then I’ve used the Nextend Google Connect plugin for WordPress to allow account creation and login based on Google authentication. I’ve had to edit the plugin to only allow users from our school domain to sign up.

Nextend Google Connect

To improve the ease of writing posts, I’ve installed the Image Elevator plugin which allows pasting images directly into posts. In our case, the principal writes the newsletter in Word and to get the pictures into WordPress I previously had to save each image and upload them. Now it’s effortless!

I’ve also customised the 404 page to use Google Custom Search in an effort to find what the user was looking for.

Google Custom Search

While it’s taken a long time to get this far, there’s still more I’d like to do. One project in progress is to determine when the school photocopier has copied something >40 times and notify someone to ensure it gets added to the website. Eventually, I’d like the Newsletter section replaced with a Principal’s Blog which would then be the source for the printed newsletter’s content. In the past I looked into the Postie plugin to allow the principal post to the website by just sending an email. Unfortunately the plugin didn’t work on the hosting we were using at the time and I haven’t had time to revisit it. Teachers haven’t been overly fussed about writing a class blog. I’ve given them each printed instructions and a quick walkthrough at a staff meeting, but I think showing each teacher individually would increase the uptake.

I hope you found this useful. I’m curious to learn others’ tweaks to WordPress. I’m sure there are some other nice touches I could add to make this one better for parents and staff.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s