For the 2012 Robotics Season, we decided to upgrade our website. We previously coded the website ourselves, but for ease of development and updating, we decided that using a content management system would better serve our needs. Our requirements were that it had to be cheap (preferably free), easy to use, and easy to customize. We investigated 3 potential content management systems: Drupal, Joomla, and WordPress. We decided to use WordPress as it met all of our requirements: it is open source and free, the backend is easy to use (even for those students who are just beginning with CSS and HTML), and it is fully customizable.

We began by installing WordPress locally using WAMP Server, as shown in this video.

This allowed us to get a prototype of our website up and running, without having to take down our old site or let the world see our new site until we were ready.

One nice thing about WordPress is that there are hundreds of free themes to choose from. After reviewing the themes, though, we decided to create our own child theme based on the Twenty Eleven dark theme that comes with WordPress. This allowed us to use the functionality of Twenty Eleven, but modify the CSS and PHP to customize our website.

WordPress is designed as a blogging platform, but we wanted to use it as a content management system. So, we decided to change some of the functionality:

• Removed most of the “meta data” that WordPress prints at the top of each post. We just left the date posted and the category.
• Changed the header image height to 150 pixels tall (also required a change in style.css.
• Added a right sidebar to single posts and pages.
• Added a function that changed the rel=”category tag” code in WordPress so that it would validate in HTML5.

You can view Highland Robotics Child Theme’s functions.php code here to see how we made those changes.

We also wanted to customize the look of our site by creating editing the cascading style sheet, or CSS.

• Create a radiused border for the content, body, sidebar widgets, and images.
• Widened the right sidebar and changed the style of the sidebar widgets.
• Changed the colors of the borders to match the theme.
• Changed the header image size (also requires a change in functions.php), changed the position of the search form in the header, and reduced the size of the site-title portion of the header, since we don’t use a site title.
• Removed all comments. (This can also be done with php, but we would have to do it for each page and post template).
• Removed borders from images in the class “wp-image-”, for instance, in posts and sidebar images.
• Edited the class “widget_twitter.timesince”, positioning the twitter feed times and and adding a border to the bottom of each tweet.
• Changed the menu bar style.

You can view Highland Robotics Child Theme’s style.css code here to see how we made those changes.

Finally, we created a custom header image and background using Adobe Photoshop.

Once we made these changes to our child theme, we were ready to switch our website from old to new. We were able to switch our url over to a new Go Daddy hosting plan. It was simple to install WordPress on the Go Daddy host using Simple Scripts.

The last thing to do was to upload our child theme (as a .zip file), header image, and background. We then got to work creating the content for our new website. Now, we can easily create new pages and posts, and add pictures and YouTube videos. We hope you enjoy our site!