Even though BioShip has a lot to it, getting started with BioShip is actually easy. ';
$vhtml .= 'The main thing to remember is you do not need to setup and use every single feature! ';
$vhtml .= 'For the majority of projects the default settings for many of the options are great. ';
$vhtml .= 'So the fastest way to get started is to leave them alone and focus on your design.
';
$vhtml .= 'Practically speaking, this means customizing the Skin layer settings mostly, and ';
$vhtml .= 'adjusting some Skeleton layer sidebar settings if you need to modify your sidebars. ';
$vhtml .= 'Most of the Skeleton and all of the Muscle layer settings can be left for later.';
$vhtml .= '
';
$vhtml .= 'And if and when you are ready to delve deeper, complete documentation is available below. ';
$vhtml .= 'I hope you enjoy using BioShip and welcome any feedback or improvements.';
$vhtml .= '
';
if ($vwrap) {$vhtml .= bioship_docs_wrap_close();}
return $vhtml;
}
// ------------
// INSTALLATION
// ------------
function bioship_docs_install_guide($vwrap) {
if ($vwrap) {$vdoclinks = bioship_docs_links(true); $vhtml = bioship_docs_wrap_open().'".PHP_EOL;
}
elseif ( ($voption['type'] == 'heading') && ($voption['id'] != $vlayer) ) {
$vlayer = $voption['id'];
$vhtml .= "
".PHP_EOL;
} elseif ( (isset($voption['hidden'])) && ($voption['hidden']) ) {
if ($vlayer != 'hidden') {
$vlayer = 'hidden';
$vhtml .= "
".PHP_EOL;
}
}
// Heading Output
// --------------
if ($voption['type'] == 'heading') {
if ($vsection != '') {$vhtml .= '
';}
$vsection = strtolower($voption['name']);
$vhtml .= "
Base Template Files | /wp-content/bioship/ |
| header.php | Default Header Template |
| index.php | Default Index Template |
| loop-index.php | Default Loop Template |
| footer.php | Default Footer Template |
| |
| There are several ways to change the loop, header and footer template that is used... |
| First you can make an unchanged copy of index.php (eg. page.php or archive.php) |
| and this will automatically load loop/page.php or loop-page.php (you could manually change it too.) |
| This will work for more specific templates too, eg. taxonomy-term.php would auto-load loop-taxonomy-term.php |
| |
Loop Templates |
| loop/{string}.php | loop-{string}.php | [Value Filter:string] skeleton_loop_template (no default) |
| loop/{filename}.php | loop-{filename}.php | matches base template filename eg. home.php -> loop-home.php |
| loop/{pagecontext}.php | loop-{pagecontext}.php | frontpage, home, 404, search |
| loop/{archivecontext}.php | loop-{archivecontext}.php | [archive only] category, taxonomy, tag, author, date, archive (fallback) |
| loop/{post-type}.php | loop-{post-type}.php | [singular only] {post-type} |
| loop/index.php | loop-index.php | Default Loop Template |
| Hierarchy | Array Filter | [Value Filter:array] skeleton_loop_templates |
| |
Header Templates |
| header/{string}.php | header-{string}.php | [Value Filter:string] skeleton_header_template (no default) |
| header/{filename}.php | header-{filename}.php | matches base template filename, eg. home.php -> header-home.php |
| header/{pagecontext}.php | header-{pagecontext}.php | frontpage, home, 404, search |
| header/{archivecontext}.php | header-{archivecontext}.php | [archive only] category, taxonomy, tag, author, date, archive (fallback) |
| header/{pagecontext}.php | header-{pagecontext}.php | [singular only] {post-type} |
| header/index.php | header-index.php | Default Header Template |
| Hierarchy | Array Filter | [Value Filter:array] skeleton_header_templates |
| |
Footer Templates |
| footer/{string}.php | footer-{string}.php | [Value Filter:string]skeleton_footer_template (no default) |
| footer/{filename}.php | footer-{filename}.php | matches base template filename, eg. home.php -> header-home.php |
| footer/{pagecontext}.php | footer-{pagecontext}.php | frontpage, home, 404, search |
| footer/{archivecontext}.php | footer-{archivecontext}.php | [archive only] category, taxonomy, tag, author, date, archive (fallback) |
| footer/{post-type}.php | footer-{post-type}.php | [singular only] {post-type} |
| footer/index.php | footer-index.php | Default Footer Template |
| Hierarchy | Array Filter | [Value Filter:array] skeleton_footer_templates |
| |
| The Content Template Hierarchy handles all different templates for Custom Post Types and Post Formats. |
| In other words, if a specific matching template is not found, it falls back to the first one that is found. |
| Note: For consistency, the Hybrid content template hierarchy whether full Hybrid Core is activated or not. |
| |
Content Template Hierarchy |
| content/attachment-{mimetype}.php | content-attachment-{mimetype}.php | if is_attachment() |
| content/{posttype}-{postformat}.php | content-{posttype}-{postformat}.php | combination of post type and post format |
| content/{postformat}.php | content-{postformat}.php | aside, audio, chat, image, gallery, link, quote, status, video |
| content/{posttype}.php | content-{posttype}.php | post, page or other custom post type |
| content.php | content/content.php | Default Content Template |
| Hierarchy | Array Filter | [Value Filter:array] hybrid_content_hierarchy |
| Directory | String Filter | [Value Filter:string] skeleton_content_template_directory |
| |
| If you wish to use a split hieararchy you can optionally create and use an /archive/ template directory also. |
| Again, this hierarchy falls back to the Content Template Hierarchy after, which handles all page conditions. |
| |
Archive Template Hierarchy (optional) |
| archive/attachment-{mimetype}.php | optional template directory | if is_attachment() |
| archive/{posttype}-{postformat}.php | optional template directory | combination of post type and post format |
| archive/{postformat}.php | optional template directory | aside, audio, chat, image, gallery, link, quote, status, video |
| archive/{posttype}.php | optional template directory | post, page or other custom post type |
| archive/content.php | optional template directory | Archive Content Template |
| Directory | String Filter | [Value Filter:string] skeleton_archive_template_directory |
| |
";
$vhtml .= "Other Content Templates | /wp-content/bioship/content/ |
| author-bio.php | Default Author Bio Template |
| loop-nav.php | Default Loop Navigation Template |
| loop-meta.php | Default Loop Meta Template |
| error.php | Default Error Page Template |
| |
Comments Template Hierarchy | /wp-content/bioship/content/ |
| comments-{posttype}-{postformat}.php | [not implemented yet] |
| comments-{postformat}.php | [not implemented yet] |
| comments-{posttype}.php | Custom Post Type Comments Template |
| comments.php | Default Main Comments Template |
| comments-nav.php | Default Comments Navigation Template |
| comments-error.php | Default Comments Error Template |
| |
Sidebar Template Hierarchy | /wp-content/bioship/sidebar/ |
Sidebar and SubSidebar Templates are available by default for all sidebar contexts.
see the BioShip Sidebar Guide for more detailed information. |
| |
Third Party Templates | /wp-content/bioship/templates/ |
| /templates/ajax-load-more/ | AJAX Load More Repeater Template | copy/paste into Repeater Template field |
| /templates/theme-my-login/ | Theme My Login Templates | modified for Theme Integration |
| /templates/woocommerce/ | Alternative WooCommerce Templates | can be used instead of the default /woocommerce/ |
| /templates/skeleton/ | Legacy Skeleton Templates | for reference only [deprecated] |
| |
";
if ($vwrap) {$vhtml .= bioship_docs_wrap_close();}
return $vhtml;
}
// ======
// LAYOUT
// ======
// -------------
// SIDEBAR GUIDE
// -------------
function bioship_docs_sidebar_guide($vwrap) {
if ($vwrap) {$vdoclinks = bioship_docs_links(true); $vhtml = bioship_docs_wrap_open().'';}
// $vhtml .= "Well, you're here early aren't you? Please check back soon...";
$vhtml .= "The BioShip Grid System is built primarily upon the Skeleton Boilerplate grid system.
";
$vhtml .= "It also incorporates some aspects of other grid systems such as 960GS and Blueprint.
";
$vhtml .= "
Main Layout Grid
";
$vhtml .= "The main BioShip theme display template is based upon columns with
em based unit widths.
";
$vhtml .= "This means the grid scales flexibly and well according to browser zoom and base font size.
";
$vhtml .= "The main #wrap container contains the header, footer, sidebars and content area.
";
$vhtml .= "All of the main grid display is worked out automatically based on your theme settings.
";
$vhtml .= "It is worth remembering that sidebar, subsidebar and content column widths of any page
";
$vhtml .= "should add to the total grid columns set in your theme settings (the default is sixteen.)
";
$vhtml .= "
Content Grid
";
$vhtml .= "Within the page #content area, there is an optional content grid available that uses
% based widths.
";
$vhtml .= "The number of grid columns can be set in theme settings for the
container class (default twentyfour.)
";
$vhtml .= "Alternatively you can set an explicit number of grid columns using a specific container class of:
";
$vhtml .= "
container_12,
container_16,
container_20, or
container_24";
$vhtml .= "
Device Width Breakpoints
";
$vhtml .= "Both the Main Layout Grid and Content Grid reponsively resize according to device screen width.
";
$vhtml .= "The default device breakpoints are 320px, 480px, 640px, 768px, 960px, 1140px and 1200px.
";
$vhtml .= "You can change the number and value of these breakpoints via the theme options screen.
";
$vhtml .= "(Note that any breakpoint larger than the
maximum layout width set will be ignored.)
";
$vhtml .= "
Content Grid Syntax
";
$vhtml .= "Rather than using shortcodes, content columns can be generated using simple <div> element classes.
";
$vhtml .= '
';
$vhtml .= '<div class="container"><div class="eight columns">COLUMN A</div>
';
$vhtml .= '<div class="eight columns">COLUMN B</div></div>
';
$vhtml .= '
';
$vhtml .= "
Using outside margins for columns is problematic because it is unknown how many columns may be in a row.
";
$vhtml .= "To resolve this problem, inner divs are used in each column to give inner padding instead of outside margins.
";
$vhtml .= "Simply add a second div inside the column div with a class of
inner to achieve the spacing effect.
";
$vhtml .= "The grid stylesheet automatically applies the padding to the inner div to give the column spacing. eg.
";
$vhtml .= '
';
$vhtml .= '<div class="container"><div class="eight columns"><div class="inner">COLUMN A</div></div>
';
$vhtml .= '<div class="eight columns"><div class="inner">COLUMN B</div></div></div>
';
$vhtml .= '
';
$vhtml .= "
You can see the combination of resizable responsive grid with inner padding in the following example grid.
";
$vhtml .= "(some colours and borders styles are added here for clearer emphasis only.)
";
$vexample = '
';
$vhtml .= $vexample;
$vhtml .= "
Content Grid Class Reference
";
$vhtml .= "Extra classes are available for column shifts and offsets, to help you position the grid columns.
";
$vhtml .= "Outer margins of different column sizes are applied to achieve these column shifts and offsets.
";
$vhtml .= "The below reference table shows you which of the numbered class names have what effect.
";
$vhtml .= '
| BioShip Framework | Skeleton Boilerplate | 960 Grid System | Blueprint | Foundation |
| Grid Columns | 12/16/20/24 | 16 | 12 or 16 | 24 | 12 |
| Units | % | px | px | px | % |
| Container | .container | .container | .container_12 .container_16 | .container | .row |
| Grid Column | .{xxx}.columns or .spanX
| .{xxx}.columns or .spanX | .grid_X | .span-X | .small-X.column .medium-X.column .large-X.column |
| Offset Left | .offsetX or .offsetleftX (margin-left) | .offsetX (padding-left) | .prefix_X (padding-left) | .prepend-X (padding-left) | .small-offset-X .medium-offset-X .large-offset-X (margin-left) |
| Offset Right | .offsetrightX (margin-right) | n/a | .suffix_X (padding-right | .append-X (padding-right) | n/a |
| Pull | .shiftleftX (-margin-left) | n/a | .pull_X (-left) | .pull-X (-margin-left) | .pull-X,.small-pull-X .medium-pull-X,.large-pull-X (right) |
| Push | .shiftrightX (-margin-right) | n/a | .push_X (left) | .push-X (margins) | .push-X,.small-push-X .medium-push-X,.large-push-X (left) |
';
// extra ref: https://scotch.io/tutorials/cheat-sheet-for-comparing-bootstrap-and-foundation-css-classes
// TODO: using smaller spacer columns
// $vhtml .= "
Spacer Columns
";
$vhtml .= "
Content Grid Compatibility Classes
";
$vhtml .= "If you prefer, you can use the grid class syntax for 960GS or Blueprint classes by enabling
";
$vhtml .= "either of those options in theme settings so the rules are added to the grid stylesheet also.
";
$vhtml .= "For Foundation grid, simply enable the Foundation resources separately in theme settings tab
";
$vhtml .= "for Foundation (Skeleton layer), and use that grid syntax as you normally would.
";
if ($vwrap) {$vhtml .= "
"; $vhtml .= bioship_docs_wrap_close();}
return $vhtml;
}
// ------------
// LAYOUT HOOKS
// ------------
function bioship_docs_layout_hooks($vwrap) {
if ($vwrap) {$vdoclinks = bioship_docs_links(true); $vhtml = bioship_docs_wrap_open().'