#Skeleton WordPress Theme
Live Demo: http:demos.simplethemes.com/skeleton
bbPress Demo: http://demos.simplethemes.com/skeleton/forums
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
Installation & Basic Setup
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 crate your own, you should start with three files:
Third Party Info
- 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
Skeleton has several built in shortcodes. You can see them in action on the shortcodes demo page.
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]
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
###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.
[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]
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"]
Insert a list of related (tagged) posts.
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]
If you ever need to clear an element, you can use the “clear” shortcode below.
###Clear with Horizontal line:
Similar to “clear”, this does the same thing but adds a horizontal line below.
##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