Trending: These are the cities where Redfin and Zillow are directly buying and selling the most homes

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

Roots WordPress Starter ThemeGeekWire 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)

Advanced Custom Fields (ACF)Advanced Custom Fields (ACF) is a very handy WordPress plugin that gives you a GUI and API to easily interact with custom fields, developed by Elliott Condon out of Melbourne, Australia.

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.

FitVids.js

fitvids.jsIf 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.

jQuery.dfp.js

Doubleclick for Publishers (DFP)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.

Matt Cooper, a developer out of Auckland, created a jQuery implementation of DFP called jquery.dfp.js. Rolling the GPT tags into jQuery allows you to fetch ad units with one line of HTML. It also allows you to quickly insert ad code into the DOM dynamically, or take fallback actions when a particular ad does or doesn’t load. We ended up using this extensively to serve different ad units on mobile vs large websites, inserting the relevant add sizes via a simple check of the viewport width in javascript.

(Special thanks to Matt for a couple of assists along the way)

Image Sliders/Carousels

bxSliderTo 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.

We found some other useful sliders out there, but obviously couldn’t use them all. You may want to checkout Slick, WooThemes FlexSlider, or Soliloquy, which were all quite good in our tests.

DataTables

DataTablesIf you have pages where you need to render large datasets in a table format, you will need some javascript assistance from browsers for sorting and filtering. Allan Jardine, a web developer hailing from Fife, Scotland, has a great jQuery-based table plugin called DataTables that can help out.

You can see DataTables in action on the GeekWire 200 and Startup List where we use it for sorting, searching and filtering the results.

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!

Like what you're reading? Subscribe to GeekWire's free newsletters to catch every headline

Comments

Job Listings on GeekWork

Find more jobs on GeekWork. Employers, post a job here.