#Skeleton WordPress Theme
##About
Live Demo: http:demos.simplethemes.com/skeleton
bbPress Demo: http://demos.simplethemes.com/skeleton/forums
There are three branches available for this theme.
- standalone: Just the basic WordPress theme.
- master: Includes Jigoshop and bbPress styles
- buddypress: Basic starting point for use with BuddyPress (unsupported).
Skeleton, created by Casey Lee at Simple Themes is a simple, responsive WordPress theme based on the Skeleton Boilerplate. It has several useful shortcodes, such as tabs, toggles, cross-browser CSS3 buttons, and layout columns. It also includes a bbPress skin/stylesheet and sample child theme.
Special thanks to the following people/sites for code and inspiration:
- Skeleton Responsive Boilerplate // Responsive Layout Framework by Dave Gamache
- Theme Options Framework // Powerful Customizeable Theme Options by Devin Price
- Thematic Framework // Code Inspiration and learning - Ian Stewart
- Formalize // Better forms styling - Nathan Smith
- TwentyTen Theme // Default WordPress Loops
This repository contains multiple items. To install this theme, download and extract first. Upload the folder and contents of the 'skeleton' folder to your wp-content/themes/ directory, then activate from Appearance → Themes. It's important to keep the parent theme folder named 'skeleton' as the CSS PIE script relies on this path.
You can configure its options from Appearance → Theme Options.
If you want to use as Skeleton as a child theme, a base starting point with a few modifications as an example is included in the 'skeleton_childtheme' folder. To create your own, you should start with three files:
- style.css
- functions.php
- options.php
- bbPress Styles
- Installing and activating bbPress will also activate an additional sidebar/widget location named 'Forum Sidebar'.
- Jigoshop Styles
- Installing and activating Jigoshop will also activate an additional sidebar/widget location named 'Shop Sidebar'.
- Be sure to disable default Jigoshop styles from Jigoshop → Settings → Disable Jigoshop frontend.css = YES
##Shortcodes
Skeleton has several built in shortcodes. You can see them in action on the shortcodes demo page.
###Callouts
A callout is (by default) a rounded cornered styled inset box. It has two arguments:
- align - aligns the callout left, right, or center
- width - Only use this parameter if you must. Defined widths will not scale properly on all devices. Instead, consider embedding them in one of the column shortcodes.
[callout align="center" width="400"]
This is a 400px centered callout box
[/callout]
[callout align="left" width="200"]
This is a 200px left aligned callout box
[/callout]
[callout align="right" width="100"]
This is a 100px right aligned callout box
[/callout]
[callout]
This is a callout that will expand the entire width of its parent container.
[/callout]
###Fluid Columns
You've seen these before. The fractional shortcode combinations allow you to inser scalable columns into your content. The only rule here is, the last column must have a suffix of '_last'. See the example below.
// Three Columns Example
[one_third]
Column One - Add anything you want here
[/one_third]
[one_third]
Column Two - Add anything you want here
[/one_third]
[one_third_last]
Column Three - Add anything you want here
[/one_third_last]
Available Options – Up to 6 columns
- one_third
- two_thirds
- one_half
- one_fourth
- three_fourths
- one_fifth
- two_fifth
- three_fifth
- four_fifth
- one_sixth
- five_sixth
###Cross-Browser CSS3 Buttons Tested in IE7,IE8,IE9,Webkit, and Mozilla browsers. Preview all colors and sizes
[button align="center" color="white" size="small" link="http://www.simplethemes.com"]Small Button[/button]
###Tabs You can create tabs content within your content as well. Each tab needs a unique id (identifier) in order to work.
See a preview of the tabs in action here
[tabgroup]
[tab title="Tab 1" id="t1"]Tab 1 content[/tab]
[tab title="Tab 2" id="t2"]Tab 2 content[/tab]
[tab title="Tab 3" id="t3"]Tab 3 content[/tab]
[/tabgroup]
###Accordion Toggles See them in action here.
[toggle title="Button text One"]
Toggle Content One
[/toggle]
[toggle title="Button Text Two"]
Toggle Content Two
[/toggle]
[toggle title="Button Text Three"]
Toggle Content Three
[/toggle]
###Latest Posts
Insert a list of your latest posts from specified category(s) into any page with optional thumbnail and excerpt.
[latest excerpt="true" thumbs="true" width="50" height="50" num="5" cat="8,10,11"]
###Related Posts
Insert a list of related (tagged) posts.
[related_posts]
###Raw HTML
Sometimes the WordPress editor will strip out your more advanced markup. This can be a real drag. By wrapping your code in [raw] tags, you can eliminate this issue.
[raw] YOUR SAFE HTML CODE [/raw]
###Clearing
If you ever need to clear an element, you can use the “clear” shortcode below.
[clear]
###Clear with Horizontal line:
Similar to “clear”, this does the same thing but adds a horizontal line below.
[clearline]
##Layout Customization Hooks
You can find a list of these functions in the top of the functions.php file:
- st_above_header // Hook to add content before header
- st_header // Opening header tag and logo/header text
- st_header_extras // Additional content may be added to the header
- st_below_header // Hook to add content after header
- st_navbar // Opening navigation element and WP3 menus
- st_before_content // Opening content wrapper
- st_after_content // Closing content wrapper
- st_before_sidebar // Opening sidebar wrapper
- st_after_sidebar // Closing sidebar wrapper
- st_before_footer // Opening footer wrapper
- st_footer // The footer (includes sidebar-footer.php)
- st_after_footer // The closing footer wrapper