Foundation

Theme Options

Upon activating the theme, you should be taken to the theme options page. You can access the theme options any time by going to the Appearance section of your WordPress control panel and selecting “Theme Options.” The options are split into three tabs.

General Options

This tab controls most of the theme’s features. Here you can pick a logo style. The “Text” logo will use the site’s title to generate a logo for you. You can choose an image and upload your own logo too. Just below that you can upload a favicon (the small icon that sits next to the URL in most browser’s navigation bar. You can also upload an Apple iOS shortcut icon which would be used when someone with an Apple device creates a shortcut to your site on their home screen.

For your blog archive page, you can choose to have the full post content displayed or to use an excerpt. If you use the full content you can still insert a “more” quick tag to cut the content off and direct visitors to the full post. Regardless of the selection the comment section is only visible on the full post.

Foundation includes a built-in lightbox gallery which allows your thumbnail galleries to be opened in an attractive pop-up lightbox. If you’d like to disable this effect you can do so here. You can also choose from the different styles that are included with the theme too.

The custom footer text lets you specify the text in the left hand side of the footer. You can enter your text here.

Search lets you choose to include a search box in the right hand side of the navigation bar if you’d like to.

The next options are for your MailChimp account. If you’re using the MailChimp widget you’ll need to add your MailChimp API key and List ID number in the fields provided. Both of those are available in your MailChimp account.

The last options in this tab allow you to set the number of staff members or sponsors that are visible in staff-groups and sponsor groups. This setting does not affect the staff page template which displays all staff members from all groups, but instead only groups that are added directly to the navigation.

Slideshow

The slideshow tab lets you configure how the slideshow on the home page and on pages/posts that use the gallery format work. You can choose to have the slideshow play automatically or not. If you’ll be using videos we suggest setting this to “no.” You can also choose to include navigation arrows or not.

There are two animation types available: fade or slide. Both animations are touch enabled.

Lastly you can choose the slide duration which is the number of milliseconds that each slide is visible and also the animation duration which is the number of milliseconds that each transition takes.

Styling

The styling tab has the styling options for the theme. With version 3.0 we’ve also added support for the theme customizer. There are two main advantages of using the theme customizer over the styling tab. The first is you can see your changes live. The second is you can make changes and see the results before you publish them.

The one option that is on the styling tab that isn’t duplicated in the customizer is the Custom CSS box. You can enter any custom CSS snippets you have there instead of editing the theme itself.


Home page

Page TemplatesTo set up a home page like the demo, first go to pages and select “add new.” This new page will serve as your home page. You can give it any title you like, but “home” is a good starting point. In the right hand column, you’ll notice a box labeled “Page Attributes” with a drop-down menu in it. Choose “Home Page” from the list of available templates there (we’ll cover the other templates shortly). Now publish your page.

Next go to the Settings section of your WordPress control panel and select “Reading.” Here you can select a page to serve as your home page. Choose “Front page displays” a “Static page” and then select your home page from the drop down of available pages.
Reading Settings

Home Slideshow

Here is a quick video to show how to add slides. It’s made with the Progress theme, but the process is the same

Home Widgets

The home page content comes from widgets. These can be added by going to the Appearance section and selecting “Widgets.” The home page has two separate widget areas or “sidebars.” The one next to the slideshow is called “Home Top” and it is intended to have one or two widgets in it.

The second one is labeled “Home Bottom.” It is unique because some widgets here can exist as “bar” which spans the width of the site. Those widget are:

  • Action Widget
  • Donation Widget
  • MailChimp Widget

When you use one of these widgets at the bottom of the home page it will span the entire width of the site. You can still use these widgets in other locations where they will take up the same amount of space as a normal one.

In the demo, the “Home Top” sidebar has an action widget. Here are the widgets used in the “Home Bottom” sidebar:

  • Donation Widget
  • Text
  • Featured Posts
  • Recent Comments
  • Featured Video Widget
  • Sponsors Widget
  • MailChimp Widget

The home page uses a script to help the widgets stack nicely if they have different heights. You can rearrange the order of the widgets to achieve a different fit.


Navigation Menus

You can set up your navigation menus by going to the Appearance section and selecting “Menu.” Here’s a quick video about WordPress menus:

Foundation offers the option of using social media icons to link to your profiles on various social media services. These icon links are made to work in the Left Side Navigation Bar and Right Side Navigation bar menu locations that are part of the theme. You can add these icon links by creating “Custom Links” in your menu builder for each service.

Once you’ve created the link, you’ll have a menu item with the name whatever you specified in the label. To change that to the appropriate icon, click the “Screen Options” tab in the top right hand corner. Make sure the box next to “CSS Classes” is checked. Then scroll down and click on the down arrow next to the custom menu item you created. In the box for CSS Classes, enter the class that corresponds to the service you’re using.

Here are a list of the included styles with Foundation. Just enter the name as it appears below to use that icon.

  • dribbble
  • facebook
  • flickr
  • foursquare
  • forrst
  • google
  • instagram
  • linkedin
  • pinterest
  • location
  • twitter
  • youtube
  • vimeo
  • yelp
  • rss
  • Adding one of the class names above will replace the menu item’s name (label) with the corresponding icon.

    In the theme demo, the social icons are lined up on the right hand side of the navigation bar. To do that, we’ve created a separate navigation menu for them. It’s then assigned to the “right side navigation bar” menu location in the theme. That causes it to line up on the right hand side.


    Staff Area

    You can add your staff members by going to the staff section and selecting add new. You can fill in details such as job title, twitter username, Facebook profile page, and phone number. To add an image of your staff member, use the featured image to upload a picture. Only the details you fill in will be displayed. You can create staff type groups to organize your staff members. Say you want a list of your professional staff and a separate list of interns or directors. Just create a “Staff Type” for each group and assign the appropriate people to them. To create a “page” for them, add that staff type to the navigation. You can find the staff groups in the left hand column of the navigation builder (Appearance > Menu). If you don’t see them there, click the screen options tab in the top right hand corner and make sure the box next to Staff Groups is checked.

    Sponsors Area

    The sponsors area works much like the staff section. Just add a new sponsor and fill in the appropriate fields. You can add groups of sponsors if you need to separate them based on some criteria. You’ll need to create at least one sponsor group to add to your navigation in order to make a “page” for your sponsors. You can find the sponsor groups in the left hand column of the navigation builder (Appearance > Menu). If you don’t see them there, click the screen options tab in the top right hand corner and make sure the box next to Sponsor Groups is checked.

    Press Area

    You can create a press release archive and section with Foundation too. Creating a Release is similar to making a post. Go to “Press Releases” and click “Add New.” Enter your information and click publish. To add an archive for your Press Releases, create a new page and choose “Press Release Archive” as the template (you can select page templates in the right hand column when editing a page). Publish that and your press archive is ready to go.


    Post Formats

    Foundation has support for four “formats” that can be used with pages and posts. The formats are:

    • Standard
    • Image
    • Video
    • Gallery

    You can choose a format from the box located in the right hand column when editing a page/post. The standard format is a basic page/post layout. The image format will display the “featured image” of that page/post at the top of the page. The video format allows you to place an embedded video at the top of your page/post. To use this format, choose video and then paste the embed code for your video from a service such as YouTube or Vimeo in the box for it.

    The gallery format will create a touch-enabled slideshow at the top of your page/post. It will automatically use all images that were uploaded on that page or post in the slideshow.


    Shortcodes

    Foundation includes two different button shortcodes. The first one links to your PayPal email address. It looks like this:

    Here you can replace the Label Goes Here with the text you’d like to have on your button. Change the you@email.com for the email address on your PayPal account. Lastly the What the Donation Is For can be changed to show within PayPal what the donation is for.

    Just place the shortcode with the options above where you’d like to have the button show up.

    The next shortcode option is for a button that links to a URL. It looks like this:

    Here the Label Goes Here is once again the text on your button. The http://yourlink.com is the URL you’d like to make the button link to.

    The last bundled shortcode creates a “lead” section for your pages or posts. It essentially sets a different style there. You can use it like so:

    Those are the bundled shortcodes that you can use in the Foundation theme.


    Page Templates

    Foundation includes six page templates for you to use. To select a template, look in the right hand column when editing a page and you’ll see a box labeled “Page Attributes.” In that box is a drop-down labeled “templates.” You can pick a new template for your page there.

    Home
    This template has the layout and features that make up the home page.
    Full Width
    The sidebar is removed in this template allowing the content to span the full width of the site.
    Sitemap
    You can use this template to create a site map of your content.
    Staff
    If you only need one listing of your staff members, then you can use this template to create that.
    Default Template
    This is the basic page template with a sidebar in the right hand column.

    If you have any questions or problems using the Foundation theme, please feel free to ask. Thank you for your business and we sincerely hope you enjoy creating with Organized Themes.

    Bill Robbins

    I'm the creator of the Organized Themes. We're here to help you create a fantastic website. Let us know how we can help.