Eric Hersey Web Design and Development

Mobile Navigation Menu

Navigation Menu

Joomla CMS to WordPress Preschool Website

I know what it’s like trying to accomplish the simplest of tasks with three children in my house, let alone how difficult it must be to manage a website when you are also tasked with watching 20+ young humans. Spark Pre-school in Central Ohio asked if I could help.

Their old ‘web guy’ was retiring and they needed help managing their Joomla CMS. I took the call but knew we could create a better and more streamlined version of the site. We wanted online payments, online registrations, and just an easier way to add content and photos.

I went to the closet, pulled out my easel and finger-paints and got my hands dirty! Maybe not literally, but it did take some creative effort to get this website up and running.

Warm Handoff

I’m not out promoting myself in Westerville, Ohio – especially in 2016. I passed through Westerville a few times before, but never ‘eyed’ up the businesses for cold-calling. It was a pleasant surprise when my sister-in-law sent me a random text.

Would you be interested in being a webmaster?

– The very talented Abby Hersey

At the time, I was doing a little freelance here and there, but primarily working for one agency. I was slightly hesitant, only because I wasn’t sure who the client would be. When she told me it would be for her mother’s pre-school, I said ‘sure’.

Turns out that they were pleased with their current webmaster but he was retiring. He was hosting the site and at the end of the year, he was shutting it all down. They needed to move hosts – at minimum.

Moving Hosts but Staying with Joomla – for now.

We didn’t have a tremendous amount of time. After a discussion, there were some concerns about their current website. In time, we wanted to get off of the Joomla CMS and move it over to something a little more manageable. My suggestion (of course) was WordPress. Homepage (2015) using Joomla CMS Homepage (2015)

This was my first interaction with Joomla and I was a bit scared that I would break the site during the transfer. Transferring websites can sometimes be tricky – and that’s if you know the CMS up and down. I did some reading and some training on Joomla and figured we would give it a go.

Everything went off without a hitch and we had a new hosting plan. It was great that they had the email setup elsewhere (third party), so there was no additional hassle there. We were good for another school year.

Joomla Development to WordPress Development

Oh, did I mention that my wife had our third child during this process? Yeah – that can affect things. Working from home is great and joyous when you have children that don’t require feeding, burping, etc… Thankfully, Linda and Amy from Spark were awesome and understood the possible challenges.

Communication with Spark Preschool - A newborn.
Things can be a bit crazy when you have a brand new baby to take care of.

The major goals for the new website were:

  • Access to update pages and posts
  • Easy way to upload new photos
  • Smart Registration Form – Conditional Fields
  • Payment Options

Joomla made it a bit hard to post new photos and posts. I knew WordPress would be rather intuitive and I had a few ideas in mind for the Registration form.

Genesis Theme with Customization

I was a pretty serious pro at this point when it came to WordPress development. I was dangerous enough to update the Joomla site while creating the new website – but I couldn’t wait to move it over. My goal was always to learn more and more about WordPress. I discovered the Genesis Theme a few months prior.

Genesis is a framework used to speed up and help the developing process. I probably did 20+ hours of video training on the topic and felt this was the best fit for Spark Preschool. Their budget called for a customized theme, but not hand-built.

After finding the perfect theme (Education) – it was time to create a development site and start moving over information. As always, I start with the content. The goal was to make the site as user-friendly and information-rich as possible. I did a little bit of copy and paste but crafted most of the website copy from scratch.

Genesis Education Theme Screenshot
Education Pro Looks an awful lot like, right? Saved a lot of time and money for the client.

The theme only offered a few colors and that just wasn’t going to cut it. Spark Preschool was fun and colorful. I had to do some serious backend modifications.

Colors and Imagery

Spark Preschool sent me over one image of their logo. It was a letterhead and was enough for me to get the brand. A few tools later, I was able to find out a good mixture of colors for the headings, links, graphics, and general media on the website.

Spark Preschool Color Scheme
Fun colors for Spark Preschool.

These colors were perfect for highlighting different areas on the website. The lime green worked as a background color. Purple looked great in contrast to the green. We were making the Education theme Spark!.

There were a lot of pages and sections of the school handbook that would look pretty dull if we only used text. I scanned my stock photo subscription and found a series of png graphics that would work perfectly. With a few additional styles, this website was unique to Spark Preschool.

Using icons for Spark Preschool website
White Featured Images for each page looked great when mixed with the Spark Color Scheme.

Making the Website Smart with ACF

This is where we can get really nerdy. I’m not sure if Joomla has the equivalent of Advanced Custom Fields, but they should. I stumbled upon this plugin and it was a godsend. Advanced Custom Fields (plugin) allows the user to have more control over the page. As a developer, I can also use this to keep the styles on the page consistent and DRY (don’t repeat yourself).

It is common to have related links all over websites. This helps the user find information that might be pertinent to their browsing. It doesn’t make much sense for the developer or webmaster to manually type the same thing over and over. It makes far more sense to automatically pull in the information once. If you make a change to the page, it should then change in all locations on the website.

This was something I adopted for several places on the website. If you made a change in the Handbook section, it would change in all locations. This would help keep the information accurate.

Registration and Tracking

Registration was a major focus for the new website. Previously, there was not a great way to keep the records of the registering students. With the WordPress site, we ensured that we could track and export all of the forms at any time. Using a few sophisticated plugins, we made sure that we had all the functionality we needed without having to manually write a bunch of code.

Most of the labor was put into making the form with conditional statements. Based on your selection, you are asked for additional information. Planning out a good form takes time and organization. After studying the previous Joomla form, I put together a better (user-friendly) option.

Registration form for Spark Preschool
Color-coded and intuitive, the registration form has helped the users and owners. (Also, those deer are not part of the design. Look up Dashlane and you will understand.)

Launch and Updates

Since I was going to be their webmaster, I wasn’t obligated to show them every little thing you could do with the website. I also wasn’t going to be available 24/7 – so they needed to know how to add images, make updates, and do the basics. I provided them with a basic tutorial for all of their major concerns.

Spark Preschool WordPress Tutorial
The best part about WordPress and maybe the main reason why I prefer over Joomla – access to easy training.

Final Thoughts – Joomla to WordPress

Joomla was something new and I was glad to have a client using a different CMS. Although I only made some updates, I learned enough to be dangerous. Moving to WordPress was a great move for the client. It was an easy transition and much easier for the client and the developer (me) to maintain.

Spark Preschool
has been added to the cart. View Cart