/skeleton_wp

Skeleton 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.

Primary LanguagePHP

#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:

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

##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