Skeleton

The basic templating of BioShip started as a fork of the Simple Skeleton Theme, which in turn was based upon the responsive Skeleton Boilerplate, but has grown well beyond that humble start into a strong bare-bones Parent Theme in it's own right.

Simple Skeleton is a WordPress starter Theme which brings this boilerplate (grid and styles) into Wordpress with some good theme functionality without getting too complex or overloaded, making it a fairly lightweight theme. BioShip has extended upon this foundation to put all the missing "bones" snd so-forth in place... to fill the missing gaps (eg. menus, sidebars, hooks, filters etc.) that weren't quite all there with the original Simple Skeleton - so you could say in comparison it now has a complete skeleton.

So of course, BioShip has all the basic stuff you'd expect from a theme want available in a theme but couldn't find in one place before - and much more which we'll get to shortly - including:

• Header Area - with optional Header Menu, Widget Area and extra HTML Area
• Navigation Bar - 'Superfish' Navigation Bar for Main Menus and Dropdown Submenus
• Flexible Sidebars - extensive single and dual sidebar options (see further down this page)
• Banner Areas - 5 Full Width Banner Area Positions readily available to use
• Page Navigation - Post and Archive Loop Navigation and Hybrid Breadcrumb Trail
• Thumbnail Display - Size, Single and Archive Display options for Featured Images
• Footer - 1-4 Auto-width Widget Areas, extra HTML Area, Footer Menu and Site Credits

Responsive Grid System

One of the best parts about the Skeleton Boilerplate is the way it gives you a responsive column-based mobile-friendly grid layout, which makes for a great CSS starting point for any responsive theme design. It's also well-known for it's clean-looking readable styling. Through Skeleton and now BioShip's vastly-improved grid, you can choose between a maximum default content width of 960px, 1140px or 1200px anything you like - and the sidebar and content columns magically scale to this grid, even if the browser window is resized, updated to use em values for proportions. Here's a sample of what the responsive grid can do...

BioShip has extended the basic Skeleton grid system further, by comparing and optimizing a number of existing grid boilerplates (ie. Skeleton, 960GS, Blueprint, Foundation, Bootstrap.) By combining these systems and calculating width rules dynamically, you can now use 12, 16, 20, or 24 columns - for both the template and within content areas - instead of being limited to a set number (dependent on the boilerplate used.) Plus for screen size support, it adds mobile breakpoint queries (at whatever and however many widths you like!) And for improved mobile support, it auto-hides sidebars and navigation (with expander buttons) on smaller screens.

This also means, no more need to use shortcodes to create a column-based layout for your content - you can just use the grid column classes in your content with <div> tags setting the number of columns.

Familiar with a different grid syntax? With the check of a box you can automatically add content grid compatibility classes for 960 Grid System or Blueprint grid boilerplates. Plus if you prefer, just turn on the loading of Foundation by Zurb to use the Foundation Grid (v5 or 6) instead. See the Grid System documentation for more details and usage examples.

Flexible Sidebar Layout

Unlike many themes which rely on restrictive page layouts (eg. 1c, 2c-r, 2c-l... look familiar?) - BioShip has introduced some unprecedented flexibility when it comes to the size and positioning of your site's primary and subsidiary sidebars. Whether you want single or double sidebars on any page (and in any context) - BioShip has you covered. You can also choose to have the same sidebars on pages and posts ('unified' option) or different ones for each ('dual' option)... You can also add a widget ares to the header and up to 4 footer widget areas. And of course extra sidebars for the search and archive page display. And (optionally) you can turn on extra sidebar contexts for the front page, home page, 404 page, and subarchive type pages (ie. categories/taxonomies/tags/author/date.)

Single Sidebar Examples

No Sidebar

Left-hand Sidebar

Right-hand Sidebar

BioShip takes a unique approach to subsidiary sidebar positioning, so that regardless of whether your primary sidebar is left or right, the subsidiary one can be either opposite to it, or internal to it, or external to it. Combined with sidebar width column selection, this provides for the most flexible dual sidebar layout possible, so you are no longer limited in how your sidebars are setup (leaving behind the need for preset layout options.)

SubSidebar Layout Examples

Left-hand Sidebar Subsidebar Opposite		Left-hand Sidebar Subsidebar Internal		Left-hand Sidebar Subsidebar External
Right-hand Sidebar Subsidebar Opposite		Right-hand Sidebar Subsidebar Internal		Right-hand Sidebar Subsidebar External

Want even finer grained control? No problem. You can replace any of the contextual sidebar templates to call custom sidebars in your Child Theme, and/or use the in-built sidebar filters to override any of the templates (or their widths or positions etc.) on a conditional basis - for example, setting up specific sidebars for Custom Post Types. You can also override the display of sidebars on a per-post or per-page basis via the Theme Options metabox on the post writing screen. See the Sidebar Guide documentation for more details.

Content Sidebars

Another extension you can add to your layout areas is using the Content Sidebars Plugin. I have made this extension available as a separate plugin so that it can be used with any other Theme, but the default settings are in place and ready-to-go for BioShip. It adds extra sidebars for use above and below the content area, via shortcodes, a login sidebar and logged in user sidebar fallback options. It also has in-post sidebars available for use with auto-spaced contextual advertising blocks. Truly the easiest way to expand your marketing, navigation and call-to-action options.

Marrow - Giving the Skeleton a Hybrid Core

After some looking around at the available frameworks and libraries out there, one real standout is Justin Tadlock's Hybrid Core, a lightweight extension library for Wordpress theme functions that includes cool things like improvements to the Template Hierarchy, integrated HTML5 and Schema.Org markup, and an Advanced Page Loop... plus a number of other awesome improvements!

The advantage of BioShip in it's implementation of Hybrid Core is that in sticking with it's modular approach, loading the Hybrid Core library is entirely optional - as are all the included Hybrid extensions. Use what you want and turn the others off. Or don't load it at all - it certainly does work better with it though!

Another framework with real potential is Foundation by Zurb. Although I haven't had time to really build much with it myself as I've been too busy coding this theme, as I can see the potential is there, I have found the time to include Foundation loading in BioShip as an optional feature. So if you already love Foundation, you can just turn it on in a few clicks (oh and conditionally load any of the Foundation elements you like!)

But that's not all that's been built-in. In my looking around I found a lot of other great extensions that have been integrated into BioShip. Big Thankyous go out to the authors that made these features possible! Theme framework and plugin integrations include:

• WP Subtitle Plugin integration - supported and included in template loop
• Theme My Login Plugin Integration - improved template hierarchy, with image button and logo options
• Open Graph Protocol Framework - built in defaults for Open Graph meta settings
• AJAX Load More - pre-configured repeater template for infinite scrolling

For more information on available extensions and integrations, and some further plugin recommendations, see the Extensions page.

Muscle

BioShip was partly inspired by this page on StackExchange: Best Collection of Code for your Theme functions.php. A really good start to adding both some missing and extra functionality to Wordpress - and nicely voted on to create a roughly prioritized list of what to include. (Sidenote: similar page regarding .htaccess)

A growing selection of these functions have been incorporated into the BioShip Theme Framework, and are activated or made customizable via the in-built Options Framework (see the Muscle tab of your Theme Options page.) To add even more flexibility, each of these added functions are pluggable functions (as are all the Skeleton functions for that matter) so that you can override or customize any of them simply by declaring alternate functions of the same name in your Child Theme's functions.php without causing conflicts. (see the Child Theme documentation for more details.)

Having these theme-related functions in-built into the theme cuts down on the need for lots of those small plugins just to "do the little things" like adding custom CSS etc.

Clear Theme Territory

It also should be noted BioShip intentionally does NOT include features that are not "theme territory", such as commonly included content features that should be left to plugins, or other theme-unrelated features or functionality. This is for a number of complex reasons I won't get into in detail here, the main one being so you can switch themes without breaking your site! Some prominent examples are:

• Page Builders - a complete horror story if you ever switch themes - these should be plugins only!
• Sliders or Carousels - a content feature worth seriously reconsidering ever using anyway
• Parallax - scrolling animation effects seem like they fit in a theme but again - content feature plugin
• Social Media - there are a plethora of plugins available for anything social media related
• Custom Post Types - these should not be defined in a theme but rather fully supported by it
• Portfolios - again these are a Custom Post Type that should be handled by a theme-independent plugin
• Shortcodes - there are already many good shortcode plugins available for content formatting

Again these are just common examples you find in many themes that could cause you a lot of unnecessary hassle, especially if you ever find yourself in the position of wanting to change from an outdated, lazily coded or badly supported theme. Yes it happens A LOT. It doesn't mean template support for some of these features could not be included in a theme - quite the contrary - but none of them need to rely on a theme and it is actually bad practice to make them do so (feel free to disagree with that opinion, but it's been my repeat experience. If you are a theme author, for the love of sanity why not simply bundle plugins you don't have to drop the features? End rant.)

Anyway, moving on to what is included...

Powerful Theme Supports

BioShip comes with some backend powerful functions and theme supports to make it even more customizable and able to suit a wide variety of project needs, with specific attention payed to handling different combinations of conditions...

• Custom Post Type Support - Intelligent Templates handle any Custom Post Type display
• Post Format Support - toggle template display support of any Post Format
• Entry Meta - Full Entry Header and Entry Footer Meta display replacement tags for Posts/Pages
  (note: you can also define alternative entry meta values for Custom Post Types via filters)

• Widget Shortcodes - use Shortcodes in Widgets (also optionally in Widget Titles)
• Discreet Text Widget - most super useful widget, especially when used with shortcodes
• Title Tag- use the new title-tag support or the old wp_title method
• SubTitle Support - optional integrated support for subtitles using WP Subtitle plugin

Tendons - Customizable Hooks and Filters

Yes that's right, still stretching the anatomy metaphor for all it's worth..! Since tendons are what hold the muscle and bone together - in this case the functionality and the layout - this means deeply integrated (and sometimes complex) coding to allow for custom function, file and template overrides. It also means making all the theme's layout action hooks and conditional value filters available for advanced customization.

Pluggable Functions

But it doesn't stop there, if you want to use your own custom implementation of any particular theme function, effort has been put in to make every theme function "pluggable" (overrideable)... Simply declare your alternate function (using the same function name) in your Child Theme's function.php file and it will be used instead automatically - and without fatal error conflicts. See the Child Theme documentation for more details.

File Hierarchy

BioShip uses it's own extended file hierarchy, so that you can replace any Javascript or CSS Stylesheet - or PHP Template - or other theme file with your own customized one simply by placing it in your Child Theme directory (or matching subdirectory.) BioShip will give priority to the Child Theme file and use it instead. (Bold claim: you simply will not find this handled so extensively in any other theme.) This makes any custom modifications (and fixes!) super easy to implement - and without the risk of losing anything in parent theme updates. See the File Hierarchy documentation for more details.

Template Hierarchy

Similarly, all post and page templates (including headers, sidebars and footers) are handled within BioShip by the extended Hybrid template hierarchy (with further improvements), allowing you to override any of those as you see fit also. It also allows you to add custom templates for different conditions such as for any Custom Post Type or Post Format - or combination of the two. (Note: to prevent potential conflicts, whether you activate the main Hybrid Core or not, the advanced Hybrid template hierarchy is still used.) See the Template Hiearchy documentation for more details.

Layout Hooks

Having sufficient layout action hooks allows designers and developers to easily add page content or new page elements exactly where they are wanted. This means above or below any page element, and/or within specific page contexts such as a single page/post or an archive type. Or want to switch things around a bit? You can also reorder any of the existing page element positions as desired through in-built position filters. See the Layout Hooks documentation for more details.

Value Filters

On a similar note, having conditional value filters in place allows for even more intricate customization for developers without having to completely hack a theme or reinvent the wheel. I have put a LOT of filters in BioShip, with provided examples for each filter, letting you override or tweak just about any option within the theme on a conditional basis. Basically you can change anything for any possible page. 🙂 See the Value Filters documentation for more details.

And at the same time, since all the default presets already work well already from the outset (having been tested extensively on numerous sites (both my own and for client's)... if you like you can just leave all the extra complexities alone and leaves things "as is" to focus your attention on your design or writing instead.

Skin

Easy theme skinning is where BioShip shines. By implementing best standard practices in a number of generally ignored or glossed-over theme specifications, it helps you to cut down your design time and allow you to focus on sorting out the tricky bits. By providing simple style options for all the common base elements, you can quickly have the "base coat" laid for your new site design - within minutes not hours. Here's a compressed list of the basic styling options:

• Background and Header

• Body Background Image support (with common background styling options)
• Header Background Image support (with automatic height setting)
• and Header Logo Image support (with optional scale on window resizing)
• Main Navigation font and colour options (with optional auto-spacing)

• Simple Styles

• Layout Areas Background Colour selection for all major sections
• Text and Background colour selection for all default Form Inputs
• Colour Picker and Styling options for Links (and hover links
• Gradient Colour Picker and Font options for Buttons (and hover buttons)
• Optionally apply button styles to Comments, Woocommerce and any CSS Selectors

• Custom CSS

• Dynamic Custom CSS (with placeholder replacement values available)
• Optionally load a custom.css file as a preferred or additional method
• Optional Dynamic Admin CSS for tweaking your backend admin display
• CSS and JS Cache Busting options - for performance or development needs
• Option to Combine Core Stylesheets for additional performance

• Fonts

• Full Typography and Colour options available for all areas and headings
• A selection of pre-optimized Web Font Stacks for cross-platform Typography
• All Heading and Title Fonts selections are auto-loaded via the Google Font API
• Load any additional Custom Fonts simply by entering the font name

• Icons

• Favicon default pptions, supporting all major default sizes
• Windows 8 Tile Icon and default Apple Touch icon size
• optional precomposed Apple Touch Icon sizes support
• optional Apple Startup Image sizes support
• Add URL/Upload as user default Gravatar option
• New - set a default Open Graph image

Also, check out the Demo tab to see examples of what can be achieved using minimal customizations to create diverse skin variations that provide for a clean and fast-loading overall site design.

Intermediate to Advanced Styling

Using the Dynamic Custom CSS Area (now with a handy Quicksave button) in combination with a browser inspect element development console, you can easily add to your base coat of simple styles and modify them to your desire. You can also use it in combination with the WordPress Customizer Live Preview to see the results of your new style rules in real-time. 🙂

And of course if you're really serious about your design styling needs, you will want to get an advanced live CSS editor such as CSS Hero. If you already own a copy, you'll be happy to know that BioShip comes Hero Ready (with a pre-configured CSS selector file.) If not, check it out as it's probably the best thing you can add to your design toolbox:

Cosmetics - Patching the cross-browser issues

Let's face it, the elephant in the room when it comes to cross-browser compatibility is Internet Explorer, especially backwards compatibility with older versions which are still in common use "in the wild" of the internet. But of course there are plenty of other potential cross-browser issues (especially since Safari may become the new IE), so having some Javascript and Polyfills to handle most of them and bring things up to a more level playing field is generally a good idea..!

With this in mind, BioShip comes pre-loaded with many of these extras, saving you time writing (or hiring someone to write!) a lot more complex styling and media queries just to get your site to behave or display the same (well, let's face it, almost the same) in different browsers:

• Normalize.css - Cross-browser reset to normalize stylesheets before custom styling (with option to use reset.css)
• Formalize - better cross-browser default form element styling
• PrefixFree - lets you use only unprefixed CSS properties everywhere
• HTML5 Shiv - enables use of HTML5 sectioning elements in legacy IE
• IE8 DOM Fix - Document Object Model fixes for IE8
• Selectivizr.js - Helps fix CSS3 Selectors for IE6-IE8
• Flexibility - CSS Flexbox polyfill for IE8+9
• Respond.js or MediaQueries.js - Polyfills to help fix CSS3 Media Queries for older browsers
• NWWatcher - a Javascript CSS3 Selector and Matcher
• NWEvent - better events: handlers, listeners and delegates
• Fastclick.js - Polyfill to remove click delays on browsers with touch UIs
• Mousewheel.js - jQuery plugin that adds cross-browser mouse wheel support
• PIE.htc - usable in stylesheets for even greater IE style compatibility
• border-radius.htc - usable in stylesheets for those lovely rounded corners in IE
• Modernizr - cross-browser support testing suite for conditional scripting

Since having these support mechanisms already in place can save you hours of fixing cross-browser design issues and coding complex media queries yourself, this is exactly why they come pre-loaded in the BioShip Theme Framework (as I just don't have time for it myself.) And of course you can pick and choose which of these you want to load via the Theme Options page to optimize performance as needed. (And plus it will automatically add ie classes to the <HTML> tag in case you need to target CSS-specific fixes.)

Demo

Just so you don't judge a framework by it's cover (this info site), here's a showcase of some of what can be achieved by skinning your theme using the BioShip Theme Framework, allowing you to produce a wide variety of designs with ease... "Blank Canvas" Demo (loaded with theme test data)

 

Please keep in mind that this is intended to showcase the flexibility of the framework, not my artistic design skills in particular. My coding skills are far better than my page styling skills - simply because I have spent much more time coding than styling, and the same is reflected in some of these sites.

If you want a real idea of what can be done just using CSS styling then you should probably visit CSS Zen Garden, where the exact same basic page layout and content has been styled in the most beautiful and amazing ways by different artists. Some truly incredible work there, and it gives a good idea of what can be achieved if you aren't so distracted by theme and plugin coding like me. 😉

More examples online soon..! (a number of sites with pre-existing themes have conversions on the cards...)

Where to from here?!

Download BioShip and try it out. It likes you and wants to be your friend. Hopefully you will like it back and be friends.

Oh yeah, I almost forgot to mention, it will also fix all your personal problems and bake you delicious cakes to serve them to you in bed in the morning. (Ok alright alright, guess it can't do that. This is the internet so ya gotta make at least one wild claim don't ya?)

Okay got it, but how do I..?

Hopefully the answer to your unfinished query is in the detailed Documentation, so try there first, especially if you want to do a preview-install on a live site. 😉

Got more Questions? Want more Answers?

Righto, check out the Frequently Asked Questions page, where I will attempt to read your mind by presupposing and guessing what you might ask me in a static one-sided format, while possibly being mildly entertaining at the same time. Or not.

Lost? Confused? Have Issues? Need Support?

Okay, first try clicking this link.

After you have stopped laughing, head over to the Development page and drop me a line... (well, this will of course change once I get the support forum up... update: it's up just not open yet... sooooon.)

(If you were "offended" by the link, please don't contact me as you don't need my help, you just plain and simple take things too seriously and just need to stop it and lighten up.)

Okay, just one more question...?

Yes, you in the back, what's that? Was I on crack when I wrote this last introduction page? Hahaha no, but after 10-12 hours coding every day for over a month you'd be a bit delirious too, so cut me some slack eh. I think it's funny so it'll probably stay up like this... Anyways, enjoy BioShip!