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.
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.
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:
- Go to: For The Cause > Settings > General Settings > Quick Start > Custom Logo
- Upload your logo image – we recommend using either a .jpg or .png for this.
- 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:
- Go to: Settings > General to enter your site title and tagline.
- Go to: For The Cause > Settings > General Settings > Quick Start and check the box to enable the text based site title and tagline.
- Optionally Enable the site description and adjust the typography settings.
- 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
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
Features ↑ Back to top
To enable the Features homepage content:
- Download, install and activate the Features plugin.
- Go to: For The Cause > Settings > Homepage > Features
- Add a title and/or description for the Features section.
- Save All Changes.
- Go to: Features > Add New
- Add your feature and a Featured Image.
- Repeat to add a minimum of 4 Features to properly fill the homepage region.
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:
- Go to: For The Cause > Settings > Homepage > Homepage Setup and enable the Category Posts option.
- Go to: Pages > Add New to create your blog page template.
- Title the Page, example: Blog.
- Select ‘Blog‘ from the Page Attributes > Template dropdown option. Learn more about Page Templates here.
- Publish your new Blog Page Template.
- Go to: Posts > Add New to add a few posts.
- Add categories, tag your posts and save your changes.
- 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.
- Save All Changes.
Testimonials ↑ Back to top
To enable the Testimonials homepage content:
- Download, install, and activate the Testimonials plugin.
- Go to: For The Cause > Settings > Homepage > Testimonials
- Add a title for the Testimonials section.
- Save All Changes.
- Go to: Testimonials > Add New
- Add a Featured Image or email linked to a Gravatar email account.
The Featured Image will override the Gravatar image.
- 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:
- Go to: Page > Add New
- Add homepage title and content.
- Publish page.
- Go to: For The Cause > Settings > Homepage > Content Area > Page Content
- Set the Content Type to Page Content in the dropdown menu.
- Set the Page Content as your newly created page.
- To Show Sidebar on the homepage select the checkbox. The sidebar setting inherits the global layout, rather than the layout of the page selected.
- 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:
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
You 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.
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.
To edit additional Homepage Featured Slider settings go to: For The Cause > Settings > Featured Slider > Slider Settings.
To add slides to your homepage:
- Go to Slides > Add New
- Add slide content in the main content area, including a title and description.
- Add a Featured Image for the slide.
- Scroll down to review additional options in For The Cause Custom Settings for URL to link to or to add video embed code.
- Publish slide to save.
Add a Button to a Slide
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
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:
- Go to: Pages > Add New
- Add a title and the page content.
- Go to: Page Attributes > Template just below the publish module to select the Business page template.
- 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).
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):
- 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.
- Next, go to: Pages > Edit to add images to your newly created business page.
- Select Add Media.
- Upload as many images as you’d like.
- Close (X) the Media Uploader pop-up window.
- 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.
WooCommerce Settings ↑ Back to top
To review the following WooCommerce Homepage Options go to: For The Cause > Settings > WooCommerce > General
- Upload a Custom Placeholder to be displayed when there is no product image.
- Display a Header Cart Link in the main navigation.
- Chose to display the Shop archives page or Product Details page full width, removing the sidebar.
- 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.
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.
Here are the WooCommerce image size settings for the demo:
- Catalog Images: 400px x 400px
- Single Product Image: 600px x 600px
- Product Thumbnails: 120px x 120px
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:
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.
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:
Here is an example of the Subscribe & Connect Widget in the sidebar:
Contact Page ↑ Back to top
To setup a Contact Page:
- Go to: Pages > Add New
- Title your Contact Page
- Go to: Page Attributes > Template just below the publish module to select the Contact page template.
- Publish your page.
- Go to: For The Cause > Settings > Contact Page to enter the Contact Form Email address.
- 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)
- Be sure to Save All Changes when finished.
To learn more about how Page Templates work please see our video tutorial here: Page Templates
Contact Page Maps ↑ Back to top
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.
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.