Planet Foundation Documentation


Theme Layout

The Planet Foundation theme is laid out as follows:

  • Pre-Header: Appears at the top of a page. Constructed automatically from the Logo, Site Title, Tagline, and Sub-tagline in the Theme Customizer (Appearance-Customize). Can be overridden using a Pre-Header widget. (Appearance-Widget)
  • Navigation Menu: Will appear at the very top of the page if no Header is specified. Otherwise will appear under the Pre-Header and above the Header.
  • Header: Header is placed after the Navigation Menu. Configure using the Theme Customizer (Appearance-Customize). Will contain either the Header Image or Slideshow. Override for pages and posts using the Header Image custom type in the page and post editor. (Pages-All, Edit or Posts-All, Edit)
  • Left Sidebar: Specified using widgets (Appearance-Widgets). Implemented using Zurb’s Foundation Off-Canvas Menus. If no widgets specified, will not display.
  • Main Content: Your posts, pages, feeds, etc.
  • Right Sidebar: Specified using widgets (Appearance-Widgets). Implemented using Zurb’s Foundation Off-Canvas Menus. If no widgets specified, will not display.
  • Footer: Will display at the bottom of all pages. Constructed automatically from Contact and Follow Us sections of the Theme Customizer. Can be overridden using widgets (Appearance-Widgets).

Theme Customization

The Planet Foundation theme is configured from the WordPress dashboard using Appearance-Customize.

Site Title and Tagline

Under this section, you can specify a site title, tagline, and sub-tagline. These will appear in the Pre-Header region of your site automatically unless a widget is specified in that region.

Logo

Under the Logo section, you can add your site’s logo. This logo will appear in the Pre-Header region of the theme layout, unless the Pre-Header is configured using widgets (Appearance-Widgets).

Favicon

Under the Favicon section, specify your site’s favicon. A favicon should be a 16×16 pixel image and it will appear in the tabs of the web browser.

Navigation

Under the Navigation section, you can specify the menu to use as your sites main navigation menu. You can also specify this using Appearance-Menus

The Navigation Menu appears below the Pre-Header and above the Header. If no Header is specified, the navigation appears above the Pre-Header.

Background Image

The background image for all content on all pages can be specified using this section.

Colors

Background colors can be set for major regions of the theme using this section.

Font Styles

Use the Font Styles section to configure styles of headers, paragraphs, menus, and links.

You can select a family of font families to use from Google Fonts. In the Google Fonts Address field, you place the address specified in the code snippet provided by Google Fonts, such as http://fonts.googleapis.com/css?family=Open+Sans|Roboto.

All other settings for headers, paragraphs, menus, and links are specified using CSS syntax. For example, you might specify the following for Post Title: font-family:sans; font-size:10px; color:#000; letter-spacing:2px;

Header Image

Specify a default image for the Header region of the theme. The Header is displayed after the Pre-Header and below the Navigation Menu. It should have a minimum width of 1000 pixels.

Note that if a header image is specified as part of a page or post, the default image is overridden for that page or post. Also, if a Slideshow is specified, the slideshow overrides the default image on the front page.

If no Header Image or Slideshow is specified, nothing is displayed. The Pre-Header will be your only header

Slideshow

Use the Slideshow section to configure an animated slideshow on the front page of a site. The slideshow is implemented using Zurb’s Foundation Orbit Slider feature. An optional Ken Burns effect is also available.

Select the slideshow effect you want: None, Normal, or Ken Burns. Select up to five images for your slideshow using the media library.

If Normal is selected, the Zurb’s Foundation Orbit Slider is used to create the effect. The options pertaining to this setting are: Animation, Pause on Hover, Navigation Arrows, Slide Numbers, Timer Speed, and Tranisition Speed. For more information on what these options do, see the Orbit Slider Documention.

If Ken Burns is selected, then Ken Burns Options is specified for each image using this syntax as an example:

origin:0,0; destination: 0,0; scrolling_duration: 5000; fading_duration: 3000; display_duration: 3000;

Origin and destination can be negative or positive and specify the starting and ending coordinates of an image relative to its default position directly under the navigation menu. The role of the other options should be obvious.

If the Slideshow Effect is set to None, or there are no images specified, the front page image will default to the Header Image specified in the page’s configuration, or the default header specifed in Appearance-Header. If no slideshow or header is configured, none is displayed.

Sidebars

The Planet Foundation theme has two sidebars available: Right Sidebar and Left Sidebar. You can add widgets to these sidebars in the WordPress dashboard using the menu item Appearance-Widgets. If no widgets are placed in a sidebar, the sidebar will not be displayed.

Sidebars are implemented using Zurb’s Foundation Off-Canvas navigation. On small screens, sidebars will slide into view when activated using the accordion style menu buttons. By default, the same behavior will also be seen on large screens. If you want sidebars fully visible on large screens, go to Appearance-Customize, select Sidebars, and enable Sidebars on Large.

Contact

Use the Contact section to add your contact information. This contact information will show up in the footer automatically, unless the footer is configured using Appearance-Widgets.

Follow Us

Using this section, add your site’s associated social networks, such as Google+ or Facebook. These will automatically appear in your site’s footer unless the footer is configured using Appearance-Widgets

Per Post Configuration

A Page or Post has additional options giving the author more control over the appearance of the post.

Planet Foundation Header Image allows authors to add their own header to the page or post, overriding the default header. This header should be at least 1000 pixels in width.

Planet Foundation Optional Images allow authors to easily add photos to their post without using the often finicky Tiny MCE editor. It is recommended these images be no more than 300 pixels in width. Each image, including the Featured Image will be displayed in a column to the left of the text content specified in the Tiny MCE editor.

Other Planet Foundation Options allow authors to specify whether or not author, title, and tags are displayed as part of the post.

View a Post using Optional Images

Supported Post Formats

Planet Foundation supports several different post formats. The post format chosen will determine how the post or page is displayed in a feed or as a full post or page. The following formats are supported:

  • Standard
  • Aside
  • Video
  • Gallery
  • Link
  • Image
  • Quote
  • Status
View Post Formats Appearances

Image Galleries

Planet Foundation supports WordPress Galleries using Zurb Foundation’s Clearing Lightbox feature. Integrate a gallery into your page or post in the normal WordPress way using Add Media, Create Gallery from the Tiny MCE editor in post or page editor.

Zurb’s Foundation classes in the Tiny MCE

Planet Foundation attempts to integrate some of Foundation’s css classes into WordPress’ Tiny MCE editor. Since the Tiny MCE editor is always somewhat finicky, use this feature sparingly and please send constructive feedback if you have it.

Structured Data for Social Media and Search Engines

Planet Foundation attempts to integrate meta data that social media and search engines use to better display the content of a page or post. This includes Open Graph, Microformats.org, and Schema.org.