Skip to content

Docs_core_convert_existing_theme

beingzoe edited this page Mar 11, 2011 · 1 revision

Initialize: Converting an existing theme

All the documentation is currently written assuming you are starting with a new theme development. This page attempts to provide a simple overview of using KST with an existing theme. This may not yet cover everything but should be enough to get you started.

Required theme files to run KST:

  • functions.php
  • _kst_bootstrap_theme.php

What to do in functions.php

  • Include _kst_bootstrap_theme.php first
  • Create settings array
  • Create new “kitchen” object for your theme passing the settings array
  • Load any “appliance” modules you want to use (or use a preset)
  • Do your theme normally otherwise (all templates, css, js, php, etc…)
    • Optionally include all css/js with the settings array

_The kst_bootstrap_theme.php file is simply used as is.

See the included “kst-starter” theme in the plugin download package.


Optional css/js files KST uses as part of HTML5 Boilerplate and WordPress best practices

  • style.css (required for all themes though)
  • style_admin.css
  • style_editor.css
  • assets/javascripts/plugins.js
  • assets/javascripts/script.js
  • assets/javascripts/script_admin.js

You can put these optional files anywhere you like but will need to give full source paths to them. They must be in these locations only if you want to use the short registered/known handle name for what we consider sensible defaults.

At this point you should be able to simply look up how to use whatever module you need and implement it.


HTML5 Boilerplate in KST

If you are new to HTML5 Boilerplate please review the following information and see html5boilerplate.com

Appliance: Marketing: JIT (Just-in-Time) Sidebar

Widget! Drop this widget in your sidebar above the last couple things in a sidebar and they will magically float with the page once they are scrolled to the top. Perfect for important navigation or “promotional” call to action content.


Usage Summary

$my_theme->load('jit_sidebar');

Then just add the widget to the appropriate sidebar just above the items you wish to “float”.


Usage Notes

Requires jQuery. Does not work in IE6.

The script will not trigger the floating if it detects that the height of the items being floated is taller than the height of the current browser viewport. Otherwise there would be content that would never be reachable.


Roadmap Notes

There are issues in certain layouts where the floating JIT sidebar overlaps the site footer in an unattractive way. This will be improved to prevent that from happening.

Clone this wiki locally