For The Cause

Welcome to For The Cause! This theme is packed full of options for the homepage, includes a Business Page Template, and has support for WooCommerce and our free Features and Testimonials plugins. A new, unique feature includes a progress bar to show the progress of your projects.

Note: This product has been retired. Documentation is no longer being updated.

Installing your Theme ↑ Back to top

To learn how to install your theme please reference our documentation here: Installing a Theme

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to:
For The Cause > Framework

Activate your Theme Key ↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

Please reference the WooCommerce Helper Documentation to learn more.

Adding your Logo ↑ Back to top

You have two options when adding a logo to your site. You can either use a text based Site Title and optional Tagline, or you can use an image based logo as shown in the demo.

To upload your own image based logo:

  1. Go to: For The Cause > Settings > General Settings > Quick Start > Custom Logo
  2. Upload your logo image – we recommend using either a .jpg or .png for this.
  3. Save All Changes.

The optimal logo size is:

  • Height: 40px
  • Width: 215px

If you don’t have an image based logo, there is an option to add your Site Title and Tagline. The settings are just below the logo image upload area.

To enable the text based Site Title and Tagline:

  1. Go to: Settings > General to enter your site title and tagline.
  2. Go to: For The Cause > Settings > General Settings > Quick Start and check the box to enable the text based site title and tagline.
  3. Optionally Enable the site description and adjust the typography settings.
  4. Save All Changes.

Set up The Homepage ↑ Back to top

The For The Cause homepage is built as a module based layout with 7 available modules. To enable/disable these modules, or to adjust the settings, go to: For The Cause > Settings > Homepage > Homepage Setup

For The Cause - Homepage Settings

The 7 homepage modules are setup as follows:

Featured Products ↑ Back to top

  • To setup go to: For The Cause > Settings > Homepage Setup to enable this section.
  • Be sure to install and activate WooCommerce.
  • Add a product that you would like to mark as featured and save.
  • To mark a product as featured go to: Products > Products and select the Star in the featured column (see image below).
  • You can alternatively select the Quick Edit option to see the Featured product box.
  • To set the number of featured products on the homepage go to:
    For The Cause > Settings > Homepage > Featured Products
Use the Star column to mark featured products.
Use the Star column to mark featured products.

Features ↑ Back to top

To enable the Features homepage content:

  1. Download, install and activate the Features plugin.
  2. Go to: For The Cause > Settings > Homepage > Features
  3. Add a title and/or description for the Features section.
  4. Save All Changes.
  5. Go to: Features > Add New
  6. Add your feature and a Featured Image.
  7. Publish.
  8. Repeat to add a minimum of 4 Features to properly fill the homepage region.
To learn how to install a plugin, please see our video tutorial: Installing Plugins
Note: You can not use column shortcodes with the Features and Testimonials widgets, they are intended to display full-width.

Category Posts ↑ Back to top

For The Cause has a homepage module to display category posts. To enable this, first you will need to add a few blog posts with categories.

Adding Category Posts to the Homepage

To add blog posts to your homepage:

    1. Go to: For The Cause > Settings > Homepage > Homepage Setup and enable the Category Posts option.
    2. Go to: Pages > Add New to create your blog page template.
    3. Title the Page, example: Blog.
    4. Select ‘Blog‘ from the Page Attributes > Template dropdown option. Learn more about Page Templates here.
    5. Publish your new Blog Page Template.
    6. Go to: Posts > Add New to add a few posts.
    7. Add categories, tag your posts and save your changes.

Adding a category

  1. Go to: For The Cause > Settings > Homepage > Category Posts to configure the following options:
    • Enter the Title and Description for your Category Post Section.
    • Select the Number of Categories to display.
    • Optionally chose to exclude post categories or only show specific categories using the category id.
  2. Save All Changes.

Testimonials ↑ Back to top

To enable the Testimonials homepage content:

  1. Download, install, and activate the Testimonials plugin.
  2. Go to: For The Cause > Settings > Homepage > Testimonials
  3. Add a title for the Testimonials section.
  4. Save All Changes.
  5. Go to: Testimonials > Add New
  6. Add a Featured Image or email linked to a Gravatar email account.
    The Featured Image will override the Gravatar image.
  7. Publish.
  8. Repeat to add a minimum of 4 Testimonials to properly fill the homepage region.

Homepage Content Area ↑ Back to top

The Content Area of your homepage can either be set as a Page of content or your most recent Blog Posts.

Adding Page Content to the Homepage

To add page content to your homepage:

  1. Go to: Page > Add New
  2. Add homepage title and content.
  3. Publish page.
  4. Go to: For The Cause > Settings > Homepage > Content Area > Page Content
  5. Set the Content Type to Page Content in the dropdown menu.
  6. Set the Page Content as your newly created page.
  7. To Show Sidebar on the homepage select the checkbox. The sidebar setting inherits the global layout, rather than the layout of the page selected.
  8. Save All Changes.

To add blog posts, chose the Content Type option for Blog Posts in the Content Area settings and select how many blog posts to display. Optionally chose to exclude certain categories using the category id, this can be useful, for example, if you were to use the Category Posts homepage module to display other categories.

You can optionally chose set a background color or image for the Content Area here as well.

Homepage Widget Columns ↑ Back to top

For The Cause comes with a homepage widget area divided into two columns, left and right. To enable this go to: For The Cause > Settings > Homepage Setup

To add widget to your homepage columns go to: Appearance > Widgets and add widgets to the left and right Homepage Column widget areas. To learn more about how to add Widgets please see our tutorial here: How to Add Widgets

Promotional Message ↑ Back to top

For The Cause has an optional Promotional Area where you can link your visitors to a specific area of your site, like your shop. Here is what it looks like on the demo:

ForTheCause-PromotionalArea-Demo

To set up, go to: For The Cause > Settings > Homepage > Promotion.

  • Add your Promotional Title and Secondary Text.
  • Optionally upload an image to display to the left of the text.
  • Add the button text.
  • Enter the link for the button in the promotional area.
  • Optionally upload a background image or set the background color for the promotional area. Additional image options such as image repeat are also available.
  • Save All Changes.

Using A Widgetized Homepage ↑ Back to top

Widgetized homepage componentsYou can optionally utilize the Homepage Widget area to setup your homepage. To add widgets/re-order the homepage go to: Appearance > Widgets in your dashboard and the drag widgets into the Homepage widget area in the right column.

There is also an option to add content via the Woo-Component widget, options for For The Cause include: Page Content, Blog Posts, Category Blog Posts, Homepage Columns, Promotion and Featured Products.

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets
Note: Using the Appearance > Widgets – Homepage Widget Area will automatically override the Homepage Theme Option settings once you add a widget into the Homepage widget area.

Set up The Slider ↑ Back to top

To enable the Homepage Featured Slider go to: For The Cause > Settings > Featured Slider > Slider Content. From here you can set the number of slides to display on the homepage, optionally choose a Slide Group (category), or whether to show a title on Video slides or what order the slides should display.

Featured Slider Settings

To edit additional Homepage Featured Slider settings go to: For The Cause > Settings > Featured Slider > Slider Settings.

For The Cause - Featured Slider Settings

Add Slides

To add slides to your homepage:

  1. Go to Slides > Add New
  2. Add slide content in the main content area, including a title and description.
  3. Add a Featured Image for the slide.
  4. Scroll down to review additional options in For The Cause Custom Settings for URL to link to or to add video embed code.
  5. Publish slide to save.

Adding a new slide - For The Cause

Note: The Homepage Featured Slider in For The Cause does not utilize the WooSlider plugin even though it uses similar functionality. After you purchase and install the WooSlider plugin the Slides menu option will be listed as Slideshows instead. The plugin is required if you would like to display a featured slider on your Business Page Template.
Slideshows Menu – WooSlider Installed
Slideshows Menu – WooSlider Installed
Slides Menu – WooSlider not installed
Slides Menu – WooSlider not installed

Add a Button to a Slide

The For The Cause theme demo includes a slide with a button, which can be placed with a button shortcode. To learn more about Shortcodes please see our tutorial here: Docs Shortcodes

Progress Bar

You may also notice there is a progress bar in the first slide on the demo to help display the % completed of a project. To learn how to add this, please see go here: Project Progress Bar

Example of the Progress Bar in a slide from the theme demo.
Example of the Progress Bar in a slide from the theme demo.

Business Page Template ↑ Back to top

The For The Cause comes with a useful Business Page Template to help display additional content on your site, including support for the WooSlider plugin. You must purchase the WooSlider plugin separately in order to use it on the Business Page Template.

Go to: For The Cause > Settings > Business Template to select the business page modules you would like to display.

To set the business page template:

  1. Go to: Pages > Add New
  2. Add a title and the page content.
  3. Go to: Page Attributes > Template just below the publish module to select the Business page template.
  4. Publish the page.

Setting the Business Page Template as the Homepage ↑ Back to top

To set the Business Page Template as your Homepage go to: Settings > Reading and select the Static Page – Front Page as your newly created Business Page (instead of the recent posts setting).

Please note! By manually setting a static front page in the Reading settings you will be disabling the Homepage widgetized area and the Homepage Theme Option settings.

To learn more about Page Templates please see our video tutorial here: Page Templates

Including WooSlider in the Business Page Template ↑ Back to top

The Business Page Template slider uses the WooSlider ‘Attached Images’ slideshow type. To add it to your Business Page Template (after purchasing, downloading, and activating the WooSlider):

  1. Go to: For The Cause > Settings > > Layout > Business Template to select Display WooSlider. Here you also have the option to display Features, Testimonials, or your latest blog posts.
  2. Next, go to: Pages > Edit to add images to your newly created business page.
  3. Select Add Media.
  4. Upload as many images as you’d like.
  5. Close (X) the Media Uploader pop-up window.
  6. Finally, save changes by selecting Update.

You must upload images directly to your business page template in order for the Business Page Template WooSlider feature to show.

Pro Tip! in the new WordPress 3.5+ Media Uploader you can select Uploaded to this Page from the dropdown to only view the images uploaded to this page and are used in the featured slider (see below). Drag and drop the images from here to reorder if you’d like.

Attached Images - Business Slider

WooCommerce Settings ↑ Back to top

To review the following WooCommerce Homepage Options go to: For The Cause > Settings > WooCommerce > General

For The Cause - WooCommerce Settings

  1. Upload a Custom Placeholder to be displayed when there is no product image.
  2. Display a Header Cart Link in the main navigation.
  3. Chose to display the Shop archives page or Product Details page full width, removing the sidebar.
  4. Save All Changes.

Image Dimensions ↑ Back to top

For The Cause has ideal image dimensions. Larger images will be dynamically resized to fit, while smaller images will be stretched larger to fit. Product images will scale width/height and will not be cropped into a square (unless you use the ‘Hard Crop’ setting found in WooCommerce > Settings > Catalog > Image Options). For greatest control of your image sizes, it is best to ensure your images are the exact size before uploading.

Please note! We do not recommend that you force the height of your slider or product images with CSS as this will break the responsiveness of the theme images. Rather, it is best to save out your slider/product images with the same height before uploading.

Recommended Image Sizes ↑ Back to top

  • Featured Slider/WooSlider Business Slider suggested minimum width: 1440 – height will scale to fit. The height of all the images on the demo is 318px.
  • Testimonials icon images: 45px x 45px
  • Features icon images: 32px x 32px
  • Single Blog Post Page Images maximum width: 810px – height can be set to whatever you’d like in For The Cause > Settings > Dynamic Images > Resizer Settings.

WooCommerce Product Images ↑ Back to top

To adjust the Shop Image settings go to: WooCommerce > Settings > Catalog and scroll to the bottom of the page to find image size settings. If you change these settings after you’ve uploaded images, you must Regenerate Thumbnails for the changes to take effect.

Due to the product layout on archive shop pages, square product images work best. This can be achieved by using the WooCommerce Hard Crop feature and setting the same pixel dimension for both the width and the height.

Here are the WooCommerce image size settings for the demo:

ForTheCause-WooCommerce-Image-Size-Settings

  • Catalog Images: 400px x 400px
  • Single Product Image: 600px x 600px
  • Product Thumbnails: 120px x 120px

To learn more about WooCommerce product images please see further documentation here: Adding Product Images and Galleries and Using the Appropriate Product Image Dimensions

Featured Blog Images ↑ Back to top

To set the Featured Blog Image size for the blog page go to: For The Cause > Settings > Dynamic Images > Resizer Settings. Here are the example settings from the demo:

Dynamic Images - For The Cause

Here you can chose to:

  • Set the alignment for the Featured Image on the Blog Page.
  • Show the featured image on your single blog post page, optionally set a different size for this thumbnail, and designate the alignment.
  • Add the featured image to the RSS feed.
  • Enable a lightbox for all your images.

To learn more about Featured Images please see our tutorial here: Featured Images

Subscribe & Connect ↑ Back to top

The Subscribe & Connect functionality for the For The Cause theme can be used on single post pages or with the Subscribe & Connect widget, either in the sidebar, footer, or homepage widget areas.

To add social media icons to your single posts page go to: For The Cause > Settings > Subscribe & Connect > Setup and select Enable Subscribe & Connect – Single Post.

For The Cause - Subscribe and Connect

To setup Subscribe & Connect go to:

  • Subscribe & Connect > Connect Settings to link the icons to each social media page.
  • Subscribe & Connect > Setup to enable the related posts in the Subscribe & Connect box (example below).
  • Subscribe & Connect > Subscribe Settings to setup the email subscription form.
  • For The Cause > Settings > General Settings > Subscription Settings to enter your preferred RSS feed URL.

Here is an example of the Subscribe & Connect panel on a single post page with related posts enabled:
ForTheCause-SubscribeConnect-SinglePost

Here is an example of the Subscribe & Connect Widget in the sidebar:
ForTheCause-SubscribeConnect-Widget

Contact Page ↑ Back to top

To setup a Contact Page:

Adding a Contact Page

  1. Go to: Pages > Add New
  2. Title your Contact Page
  3. Go to: Page Attributes > Template just below the publish module to select the Contact page template.
  4. Publish your page.
  5. Go to: For The Cause > Settings > Contact Page to enter the Contact Form Email address.
  6. From here you can also enable the information panel (see below) and enable the Subscribe & Connect panel to display your social icons (see demo example)
  7. Be sure to Save All Changes when finished.

For The Cause - Contact Page Settings

To learn more about how Page Templates work please see our video tutorial here: Page Templates

Contact Page Maps ↑ Back to top

For The Cause - Maps

To setup Google Maps:

  • Enter your Google Maps coordinates. Example: -33.924868,18.424055 – To find the Google Cordinates, search for your location on a Google Map, right click the pin and select “What’s Here”. This will input the Google Coordinates in the search box.
  • Optionally disable mousescroll for all the Google Maps on the site. This could improve usability on your site.
  • Set the map height.
  • Set the Default Zoom Level.
  • Select the Map Type: Normal, Satellite, Hybrid or Terrain.
  • Enter Map Callout text to be shown when you click on the map marker for your location.

Custom For The Cause Widgets ↑ Back to top

The For The Cause theme includes 5 custom widgets in addition to the Woo – Component widget mentioned above. Here are the other 5 custom widgets:

  • Woo – Adspace
  • Woo – Blog Author Info
  • Woo – Contact Form
  • Woo – Embed/Video
  • Woo – Flickr
  • Woo – Subscribe/Connect

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets

Progress Bar ↑ Back to top

To help display the progress of your projects, you can add a progress bar to your posts, pages or slides. To do this you must manually add code using the shortcode, function, or action. They should be used as follows:

  • Shortcode: [woothemes_progress_bar] – to be used in post, pages, or slides.
  • Function: woothemes_progress_bar() – to be used in a php template file.
  • Action: do_action( ‘woothemes_progress_bar’ ) – to be used in a php template file.

All of the above accept the following parameters:

  • raised – The total number raised. Enter your own number.
  • total – The overall total number. Enter your own number.
  • before_text – Optional string of text to display before the progress bar.
  • after_text – Optional string of text to display after the progress bar.
  • echo – Whether to display or return the HTML. Shortcode default for this is false.
  • before – Opening HTML markup.
  • after – Closing HTML markup.

Here is an example of the shortcode in action, you can copy and paste this into a post, page, or slide:

[woothemes_progress_bar raised="50" total="100" before_text="We're almost there!" after_text="Please help us reach our goal."]

When using the progress bar, you must manually enter the raised/total amounts and manually update this for your status.

The “before” and “after” parameters also allow for %raised% and %total% to be used as placeholders for the values supplied in the “raised” and “total” parameters. This allows for strings of text such as “We’ve raised 5 out of 10”.

Here is an example of this using a function, which you would paste into your php template file: This code would not work if pasted into a post, page or slide.

woothemes_progress_bar( array( 'raised' => 50, 'total' => 100 ) );

And here is an example using the action which you would paste into a php template file:
This also would not work pasted into a post, page or slide.

do_action( 'woothemes_progress_bar', array( 'raised' => 50, 'total' => 100 ) );

IgnitionDeck ↑ Back to top

As of version 1.1.0 ForTheCause offers full integration with the crowdfunding plugin IgnitionDeck. This integration meshes the display and layout of all IgnitinDeck pages including archives and single project pages. Additionally you have the option to display a project on the homepage in place of the default slider.

Homepage Project Display ↑ Back to top

All slider settings are configured as explained in the slider section. In addition to this when IgnitionDeck is activated you will see a new tab in the theme settings: Featured Slider > Ignition Deck Slider.

The IgnitionDeck slider settings
The IgnitionDeck slider settings

Here you can toggle whether to override the default slides with IgnitionDeck projects. You can also choose a project category to pull your projects in from.

As mentioned before, all slide settings such as the number of slides, transition effect, etc, are inherited from the default slider settings.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top