Featured Project: MIO Nonprofit Corporation

I recently finished a WordPress website project for MIO Nonprofit Corporation. They provide public education about the benefits of broadband in Washington state. The main focus of the website is to share information by posting featured stories, blogging, and linking to social media.

To keep costs down I used an existing theme, Link, from Theme Forest and customized it to compliment the Move It Online LLC website. The theme uses HTML5, some CSS3 elements, and incorporates Nivo Slider and Timthumb.

Original Link Theme

Original Link Theme

MIO Nonprofit Corporation website

MIO Nonprofit Corporation website


The original theme is pretty dark and MIO was going for a very simple, clean look. So, I lightened it up quite a bit and got rid of most of the gradients and backgrounds.

I kept the main structure of the website and a lot of the functionality, but I changed some key pieces.


Changes

Recent Posts -> Information categories

In the original theme, the Recent Posts section just pulled in the most recent posts from the entire blog. Instead, MIO wanted to use this section to highlight four key Information sections of the website: Light the Fiber, Speed Matters, Before & After Broadband, and Benefits of Broadband. I pulled out the original code but kept the image thumbnail functionality. Then I added custom descriptions and linked the heading, image, and “Read more” to each category’s post/article listing.

Separate Blog page

MIO wanted to have three very distinct sections of articles/posts: the Information categories separate from the Communications: Past, Present, & Future section and the blog, which would have more of an editorial feel. I created a separate theme template and page to show only the blog posts. Currently, it is showing blog posts and articles from the Information categories until they have enough blog posts to display on their own. Having a separate page for the blog sounds simpler than it is. The current “Home” page is the blog as far as WordPress is concerned. If you try to configure it otherwise, of course, it breaks everything! So I created a page of posts using a tutorial from #! code as a guide.

Other Changes

I removed the top navigation bar, added social media icons to the navigation, moved the search field from the top navigation to the main navigation bar, and removed some of the widget functionality in the footer. I added Twitter and Facebook feeds to the sidebar on the post/article pages and used Widget Logic to keep the About Us sidebar widgets confined to the About Us pages.

Before/After Slider

One of the key articles on the MIO Nonprofit Corporation website is on the Tulalip Tribe’s success with broadband. It includes a before and after slider to show aerial photos of how broadband increased business growth and development, similar to the one the New York Times used to show the effects of the tsunami disaster in Japan. The before/after slider from Catch My Fame is an easy to set up, lightweight jQuery script.

Snapshots

Click an image to see a larger snapshot of the website.

MIO Nonprofit Navigation & Nivo Slider MIO Nonprofit: Information MIO Nonprofit Communications About MIO Nonprofit MIO Nonprofit Blog Tulalip Before/After

Visit MIO Nonprofit Corporation to view the full website and to learn more about broadband in Washington.

Tags: , , , , , , ,