Animal Hub WordPress Theme Documentation

Lovingly crafted by Rescue Themes
Ways to Get in Touch
Other Useful Links

Thank you for purchasing this theme! A big high-five from the Rescue Themes team!

This document covers the installation and use of this theme and is intended to get your site up and running quickly.

If you have any questions that are beyond the scope of this help file, please feel free to visit our support page.


Getting Started

Getting Started from Rescue Themes on Vimeo.

  1. Install & Activate the Theme

    Download the 'All files & documentation' folder from your Envato Marketplace account's download area. Unzip that folder and upload/activate the "animalhub.zip" file from within the download package into WordPress.

    Download
    Download
  2. Install & Activate Recommended Plugins

    After the theme is activated, a list of recommended plugins will be displayed at the top of the WordPress admin area. Install and activate those plugins by selecting 'Begin installing plugins'.

    Be sure that you both "Install" and "Activate" the plugins in order to make them functional.

    Notice: The installation process may take a while on some hosts, so please be patient.

    Plugin Notice
    Plugin List
  3. Import the Demo Data

    The quickest way to setup your theme to mirror the demo is to import demo content.

    Demo content will be available to you within the "All Files" download package that you receive from your Envato Market download area.


    Plugin Notice
    Importing WordPress Demo XML File

    Navigate to Tools > Import and select WordPress. Install the WordPress Importer plugin. Activate and run the importer.

    Next upload the demo content XML file with the WordPress importer.

    Import
    Import

    Notice: Check the 'Download and import file attachments' option after clicking 'Upload file and import'. This will import demo images. It may take a couple extra minutes to import but it'll be worth it.

    Importing Widgets

    To import the demo widgets, install and active the Widget Importer & Exporter plugin.

    Navigate to Tools > Widget Importer & Exporter > Choose the 'heartfelt-widgets.wie' file from the 'demo-content' folder from the all files download package.

  4. Assign Home and Blog Pages

  5. From the Reading Settings of your WordPress site, assign the Home page as the 'Front page' and the Blog page as the 'Posts page'.

    Reading
  6. Assign Menus

  7. The demo content also inlcudes menus that you can assign in the following location:

    Menus
  8. Theme Options

    You can adjust the theme options and widgetized areas in the Customize area:

    Appearance > Customize

    This theme includes multiple widetized areas:

    • Inner Sidebar
    • Home Hero Left
    • Home Hero Right
    • Home Top Middle
    • Home Blog Sidebar
    • PetFinder Page Header
    • Pets Page Header
    • Pets Page Sidebar
    • Shop Sidebar

    Widgets can be added to these areas in the Customizer or by navigating to "Appearance > Widgets"

Not Importing the Demo XML File?

If you aren't importing the demo data included with the theme, then at a minimum you'll want to create a "Home" and "Blog" page.

  1. Home
  2. Create a page called "Home" and assign the Home Template to it.

    Menus
  3. Blog Page
  4. Create a page called "Blog". No special template needs to be assigned to this page


  5. Assign Home and Blog Pages

  6. From the Reading Settings of your WordPress site, assign the Home page as the 'Front page' and the Blog page as the 'Posts page'.

    Reading

Home Page Sections

To setup your home page, you'll first need to create a page called "Home" (or whatever name you'd like) and assign the Home Template in its Page Attributes box.

Home Page

Next you'll need to assign that page as the Front Page in "Settings > Reading":

Reading

This video will walk through each section on the home page.

Home Page from Rescue Themes on Vimeo.


Animal Custom Posts

To start creating animal custom posts, the Rescue Animal Custom Posts should be installed and activated. More information about the plugin can be reviewed here and download the file here.

Once the Rescue Animal Custom Posts plugin is activated, an Animals menu will be added to your WordPress admin area and you can begin adding animals:

animals-list

To display your animals, create a page and assign the "Animal Posts" template to it:

Animals Template

Your Animal Posts page will have it's own sidebar that you can manage in "Appearance > Widgets", or, "Appearance > Customize > Widgets".


PetFinder

To use the Petfinder feature, install and activate the Petfinder Listings plugin.

Once activated, navigate to "Settings > Petfinder Listings":

petfinder settings

After you've created a PetFinder acccount, you can get an API key here

Enter the shelter ID for the animals you'd like to display.

Create a new page and paste the PetFinder shortcode into it. For example:

[shelter_list count="6"]

WooCommerce Plugin

These are some basic steps to get your online shop up and running quickly. For complete instructions, please visit the WooCommerce site.

Notice: If you imported the demo XML file content outlined in the "Getting Started" section above, select "Skip Setup" if WooCommerce asks you to create shop pages. Those pages were already imported and installing them again will just make duplicates.

Reading

Once you have the plugin installed and the shop pages created, navigate to "WooCommerce > Settings > Products" and make sure that the main shop page is assigned:

Reading

Navigate to "WooCommerce > Settings > Products" and set your product image sizes

Notice: If images are blurry, you may need to regenerate the thumbnails with the Regenerate Thumbnail plugin as described in the WooCommerce documentation

Set your shop pages:

Woo Shop Page Woo Pages

Donations

The features that organizations require in donation systems can vary greatly between organizations which is why we don't lock you into any one system.

In our demo, we're using the free donation management system Donate.ly but you're welcome to use any system that you'd like.

Any content you enter into your donation page will be displayed within the donation button lightbox when click. In the demo, we've pasted our Donate.ly form into our donation page.

You can adjust your donation button settings on the Customize page: Appearance > Customize > Header


Rescue Shortcodes

This plugin will add a shortcode dropdown in your WordPress editor. It's as simple as selecting from the dropdown the shortcode you'd like in your post or page.

You can also paste a shortcode into a text widget and place it in any widgetized area of the theme.

Shortcodes

Shortcode List

To use these shortcodes, please activate the Rescue Shortcodes plugin. For an example of these shortcodes in action, visit the example pages: Shortcode Elements and Shortcode Grid


Buttons: 6 Colors

          
[rescue_button color="black" url="#" title="Visit Site" target="blank" border_radius=""]Sample Content[/rescue_button]

[rescue_button color="red" url="#" title="Visit Site" target="blank" border_radius=""]Sample Content[/rescue_button]

[rescue_button color="orange" url="#" title="Visit Site" target="blank" border_radius=""]Sample Content[/rescue_button]

[rescue_button color="blue" url="#" title="Visit Site" target="blank" border_radius=""]Sample Content[/rescue_button]

[rescue_button color="green" url="#" title="Visit Site" target="blank" border_radius=""]Sample Content[/rescue_button]

[rescue_button color="white" url="#" title="Visit Site" target="blank" border_radius=""]Sample Content[/rescue_button]

        

Google Map

          
[rescue_googlemap title="Rescue Themes Offices" location="5046 S Greenwood Ave, Chicago, IL 60615" zoom="14" height=250]
        

Tabs

          
[rescue_tabgroup]

[rescue_tab title="First Tab"]
First tab content
[/rescue_tab]

[rescue_tab title="Second Tab"]
Second Tab Content.
[/rescue_tab]

[/rescue_tabgroup]

        

Notification Boxes: 5 Colors

          
[rescue_box color="blue" text_align="left" width="100%" float="none"] This is just an example title [/rescue_box]

[rescue_box color="gray" text_align="left" width="100%" float="none"] This is just an example title [/rescue_box] 

[rescue_box color="green" text_align="left" width="100%" float="none"] This is just an example title [/rescue_box] 

[rescue_box color="red" text_align="left" width="100%" float="none"] This is just an example title [/rescue_box] 

[rescue_box color="yellow" text_align="left" width="100%" float="none"] This is just an example title [/rescue_box]

        

Text Highlights: 5 Colors

          
[rescue_highlight color="blue"]This is just some example text[/rescue_highlight]

[rescue_highlight color="gray"]This is just some example text[/rescue_highlight]

[rescue_highlight color="green"]This is just some example text[/rescue_highlight]

[rescue_highlight color="red"]This is just some example text[/rescue_highlight]

[rescue_highlight color="yellow"]This is just some example text[/rescue_highlight]

        

Progress / Donation Tabs

          
[rescue_donation_tabgroup group_title="Help Us Reach our Goal"]

[rescue_donation_tab title="Total"]

Example Fundraiser
[rescue_progressbar title="Example" percentage="75" color="#f1c40f"]

Example Fundraiser
[rescue_progressbar title="Example" percentage="45" color="#1abc9c"]

[/rescue_donation_tab]

[rescue_donation_tab title="Goal"]

Second tab content
[rescue_clear_floats]

[rescue_button color="black" url="http://rescuethemes.com" title="Visit Site" target="blank" class="right" border_radius=""]
Sample Content
[/rescue_button]

[/rescue_donation_tab]

[rescue_donation_tab title="Donate"]

Third tab content

[rescue_button color="blue" url="http://rescuethemes.com" title="Visit Site" target="blank" class="right" border_radius=""]
Sample Content
[/rescue_button]

[/rescue_donation_tab]

[/rescue_donation_tabgroup]

        

Toggle Content

          
[rescue_toggle title="This Is Your Toggle Title"]Sample Content[/rescue_toggle]
        

Spacing

          
[rescue_spacing size="40px"]
        

Clear Floats

          
[rescue_clear_floats]
        

Grid Elements

          
[rescue_column size="one-half" position="first"]Sample Content[/rescue_column]

[rescue_column size="one-third" position="first"]Sample Content[/rescue_column]

[rescue_column size="one-fourth" position="first"]Sample Content[/rescue_column]

[rescue_column size="one-fifth" position="first"]Sample Content[/rescue_column]

[rescue_column size="one-sixth" position="first"]Sample Content[/rescue_column]

[rescue_column size="two-third" position="first"]Sample Content[/rescue_column]

[rescue_column size="three-fourth" position="first"]Sample Content[/rescue_column]

[rescue_column size="two-fifth" position="first"]Sample Content[/rescue_column]

[rescue_column size="three-fifth" position="first"]Sample Content[/rescue_column]
        

Icons by Font Awesome

This shortcode is a basic template. Replace the defaults as necessary.

          
[icon type="cloud" size="lrg | 5x | 4x | 3x | 2x | 1x" pull="center | Left | Right" color="#cccccc"]
        

List of Icon Types Available

For a complete list of icons available, please see the Font Awesome icon list. Simply enter the name of the icon into the "type" paramater of the icon shortcode. For example, the icon "fa-anchor" would be entered as the following:

[icon type="anchor" size="lrg" pull="center" color="#cccccc"]

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

For more information, please visit Contact From 7 in the WordPress Plugin Directory

Rescue About Widget

When activated, this plugin will add a widget called 'Rescue About' to your Widgets area. The widget will allow you to enter a title, biographical information, upload an image, and display social media icons.

For more information, please visit the Rescue About Widget Github page.

Rescue Reveal Content Widget

This plugin will display content within a hidden area that will reveal once hovered over.

For more information, please visit the Rescue About Widget Github page.


Credits

Zurb Foundation
http://foundation.zurb.com

Google Fonts - Open Sans & Copse
http://www.google.com/fonts/specimen/Open+Sans
https://www.google.com/fonts/specimen/Copse

Font Awesome
http://fortawesome.github.io/Font-Awesome

Media:
http://photodune.net/item/brown-border-collie/774183
http://photodune.net/item/kitten/2590077
http://photodune.net/item/kiten/2595150
http://photodune.net/item/labrador/2977701
http://photodune.net/item/twin-sisters-playing-with-chihuahua-dog-lying-on-lawn/4909697
http://photodune.net/item/cat/3503335
http://photodune.net/item/cat/3146779
http://photodune.net/item/pleeease/1362663
http://gratisography.com/
http://splitshire.com/funny-dog/
http://unsplash.com/post/75618987571/download-by-andre-spieker
http://splitshire.com/dog-looking-up/
http://skitterphoto.com/?portfolio=old-english-bulldog-pup
http://unsplash.com/post/60731095065/download-by-tiago-de-castro

Rescue Themes Plugins
https://github.com/RescueThemes/rescue-shortcodes
https://github.com/RescueThemes/rescue-about-widget
https://github.com/RescueThemes/Rescue-Reveal-Content

Recommended 3rd Party Plugins:
WooCommerce
Contact Form 7
https://wordpress.org/plugins/jquery-validation-for-contact-form-7/
https://wordpress.org/plugins/petfinder-listings/
https://wordpress.org/plugins/soliloquy-lite/


Last but not least, thank you for purchasing this theme!

Jump on back to the intro section of this document if you need to get in touch (there will be some handy links for you up there).