Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
206 lines (135 sloc) 6.72 KB

Skeleton WordPress Theme


Live Demo:

bbPress Demo:

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:

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 create your own, you should start with three files:

  • style.css
  • functions.php
  • options.php

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 align="left" width="200"]
This is a 200px left aligned callout box

[callout align="right" width="100"]
This is a 100px right aligned callout box

This is a callout that will expand the entire width of its parent container.

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
Column One - Add anything you want here

Column Two - Add anything you want here

Column Three - Add anything you want here

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=""]Small Button[/button]


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

[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]

Accordion Toggles

See them in action here.

[toggle title="Button text One"]
Toggle Content One

[toggle title="Button Text Two"]
Toggle Content Two

[toggle title="Button Text Three"]
Toggle Content Three

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.



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
Something went wrong with that request. Please try again.