If you’re a regular GeekWire reader, you probably noticed that the site got a whole new look this week. We are pretty excited about the change. We’ve finally introduced a mobile-friendly version of the site, and we swept through and gave everything a new, simplified look designed to highlight article content for our readers.
The project took us a couple of months, and through that process we came across a variety of plugins, scripts and other bits that were super helpful. It was actually fun to use open-source contributions from geeks around the world to craft the site. We wanted give a shout-out to some of the stuff we liked since it may be helpful to other web geeks like ourselves.
Roots Starter Theme
GeekWire runs on WordPress, and every WordPress install needs a theme. We chose Roots, a bare-bones theme based on the HTML5 Boilerplate. Roots is developed by Ben Word, an Austin, TX-based web developer.
To call Roots a theme is a bit of a misnomer. It is a minimal set of nicely-structured WordPress templates that is supposed to be a starting point to craft your own theme. If you’ve only worked with pre-baked commercial themes, you won’t find any of the styles and hooks that you’re accustomed to. It’s up to you to create your own.
A starter theme like Roots (or Underscores, which is another popular one) is not for the WordPress beginner. However, if you have a solid understanding of how the WordPress template system works, you’ll find these simple starter themes to be way more flexible and liberating compared to having to work within someone else’s framework.
If you’re looking for a grid system and a basic CSS framework, it comes with Bootstrap built in, though that can be removed pretty easily. It also was built to use Grunt and Bower. Grunt allows you to create a nifty build script to do stuff like compile LESS CSS, lint & minify JS/CSS and concatenate scripts into production-ready files. We’re also using Bower to manage and fetch all of the third-party scripts and plugins from GitHub.
Advanced Custom Fields (ACF)
WordPress postmeta fields give you a huge amount of flexibility to collect additional metadata for posts. Interacting with that metadata directly through the WordPress API can be cumbersome and error-prone, but ACF makes it a snap. It also dramatically reduces the amount of time it takes to create a custom meta box for data input by your users.
If your aiming for a responsive website but have loads of videos embedded from places like YouTube or Vimeo, you know that everything is going to be the wrong size for mobile browsers. Chris Coyier (Milwaukee) and Paravel (Austin) solve this problem with FitVids.js.
One line of jQuery that targets the containers that have video embeds and you’re all set with nicely responsive video sizes that maintain their aspect ratios.
GeekWire uses Google Doubleclick for Publishers (DFP) to serve ads throughout the site. DFP is very flexible but working with large amounts of GPT ad tags is verbose, to say the least. You’ve got to load the ad unit in the page header and then call the ad unit in the page text. If you’re trying to do this dynamically based on certain sections of your site, it can get pretty messy.
(Special thanks to Matt for a couple of assists along the way)
To say that there is a wide variety of image sliders and carousels out there is an understatement. Picking the right one is no easy task. Online reviews tend to be loaded with affiliate links and little critical thought around the quality of the sliders.
We ended up using a couple of different sliders on the new GeekWire. bxSlider is a responsive jQuery slider written by Steven Wanderski, a Chicago web developer. You’ll see that one in action at the top of the story pages on our desktop site.
We also replaced the lame photo gallery built into WordPress with Fotorama.io, built by Artem Polikarpov in Veliky Novgorod, Russia. You can see one of these galleries in action on our photo galleries from PAX last weekend.
Other Cool Stuff
Our new site also uses some WordPress staples like Wordpres SEO, Video SEO and News SEO from Yoast (Netherlands), The Events Calendar from Modern Tribe and Gravity Forms from Rocket Genius (Virginia Beach, VA).
We hope that you enjoy the new site and maybe find some of these suggestions useful for your own web development projects. We look forward to your feedback on how we can continue to improve GeekWire. Thanks for reading!