If this is your first WordPress theme, this section will walk you through the steps necessary to install iFeature Pro.

First login to WordPress. Typically located at yourdomain.com/wp-admin

Once logged in press the “Appearance” tab in the left-hand menu of the WP-Admin Dashboard and press “Themes“. Then press the “Install Themes” tab at the top of the page.

Next, press the “Upload” tab and press the “Choose File” button and browse to the location where you downloaded ifeaturepro.zip (if you purchased a bundle you must first unzip that package). Once the file has been selected, press the “Install Now” button. Once the theme has been uploaded, and installed, simply “Activate” the theme and you are ready to begin using iFeature Pro.

Permalink

IMPORTANT: Whenever and however updating a theme we strongly recommend and caution you to backup all files and settings.

AUTOMATICALLY UPDATING

iFeature Pro 3 utilizes the CyberChimps Update API, which allows you to update your theme from the “Updates” menu in the WP-Admin Dashboard. When an update is available, you will be notified next to the “Updates” menu item under the Dashboard settings. You can also manually check for updates by pressing the “check again” button at the top of the updates page.

The new version will appear under the Themes section of the page, simply select “update” and the API will take care of the rest.

MANUALLY UPGRADING

- First, in your theme settings export/backup/save your settings

- Now, via FTP (please contact your host if you’re unsure of how to FTP) navigate to wp-content/themes/ifeaturepro and back that entire folder up (don’t delete it, rename it, move it or change it in anyway – we want it to stay active with WordPress)

- Now download the latest theme version: http://cyberchimps.com/my-account/

- Unzip it and upload the ifeaturepro folder directly over the other one overwriting it

- Now, you may have to reapply your backed up settings and make other adjustments

- In case you have any issue at any point that’s why you have the old theme folder backed up for safekeeping (you can reupload the original should you need to)

Permalink

You have two different options for setting up your home page in iFeature Pro. Your home page can either be a list of your blog posts (which is the default setting), or a static page where you can add your own page content and Elements using our iFeature Pro Page Options.

If you want to continue using your home page as your blog post index, you do not need to do anything. If you would like to have static content on your home page, you need to create a page in your WordPress install to use as your home page. If you would like to have a blog page as well, you need to also create a page for your blog.

Once you have created your page(s), visit the “Readings Settings” under the “Settings” tab in the WP-Admin menu. You will see that the “front page displays” option is set to “Your Latest Posts” by default. Change it to “A static page” and select the page you want to use for your home page and your posts page (if you want to have one). Save your changes and your new home page is ready to go.

Permalink

For complete control over iFeature Pro’s iMenu, we highly recommend using the WordPress menu system. By default, any page you make becomes a link in the menu. However, when you create a custom menu you need to manually update your menu for greater control. iFeature Pro 3 has two custom menu locations, header for the top navigation, and footer for the secondary footer menu.

To begin creating your own custom menu, visit Appearance > Menus while logged into your WP admin. Assign a name for your menu (navigation for example) and begin adding your menu items by using the options available to you in the left-hand menu. You can either make your own custom links by entering in the URL and the Label (the text that will actually show up in the menu), or by selecting and adding currently existing pages, posts or category and tag archives.

You may then drag and drop each item to re-order them, or to create your own custom dropdown menus by dragging pages under a parent page and nested them offset to the right. Once you are done creating your menu, select it from the Header Menu dropdown list and press Save Menu. Now your new custom menu will appear in your iMenu.

The new iMenu offers even more new colors to select from, as well as the option for a color picker located under the Design tab in the iFeature Pro 3 settings.

Permalink

iFeature Pro offers several Widgetized areas using WordPress’s built-in Widget dashboard. iFeature Pro offers Sidebar Widgets, Widget boxes, and Footer Widgets.

To make changes to Widgets go to the Appearance tab in WP-Admin, and select “Widgets”.

Grab the widgets you wish to use into the designated area to the right within the Widgets dashboard.

Sidebar Widgets

Sidebar Widgets supports multiple Widgets, simply drag and drop them in the order you would like and they will display on sidebar section of your website (see image to the right).

Widget Boxes

To put a Widget in the left box place the Widget in Box Left of the Widget dashboard area, to place a Widget in the middle place a widget in Box Middle of the Widget dashboard area, to place a Widget in the right box place the Widget in Box Right of the Widget dashboard area.

Footer Widgets

The Footer also uses Widgets, and supports up to 4 widgets that are displayed horizontally left-to-right. Simply drag and drop them in the order you would like and they will display in Widgetized Footer area of your website (see image above).

Permalink

Overview:

iFeature Pro uses powerful page options giving you complete control over the look and feel of your page, which are laid out in easy to follow tabs. The first tab includes our new Drag and Drop Page Elements, which allows you control what page elements appear on your page and the order that they are seen in. Below you will find a detailed outline of each of the options available to you in the iFeature Pro Page Options.

Video Walkthroughs

We are in the process of creating video walkthroughs unique to iFeature Pro, including the use of the Drag and Drop Page Elements. For the time being, please refer to our iFeature Pro 2 video tutorials which will provide a lot of useful information if you are a new user. 

Page Options:

The first options tab is the Page Options tab, which is used to assign your sidebar style and enable any sections you want to appear on that page. Below you will find an itemized list of each option and what it does.

Select Page Layout – This option allows you to select from four different sidebar configurations: Sidebar Right (default), Two Right Sidebars, Sidebar Left and Right, and No Sidebar (full-width).

Page Title - Toggle the switch to turn the page title on or off (on by default).

Page Elements - This is the Drag and Drop Page Elements tool where you can add or remove elements that you want to appear on your page. You can also drag and re-order the elements in the Active Elements column to arrange the order that they appear on the page. For more information please visit our Drag and Drop Page Elements documentation page.

iFeature Slider Options:

This options tab is for configuring the iFeature Slider if you have enabled it on your page using the Page Options tab, and replaces the iFeature Slider options tab in the iFeature Pro theme options page. These settings offer full control over the look and configuration of the iFeature Slider, including the size, whether or not it generates slides from blog posts or custom slides, animation type, and much more. Below you will find a detailed explanation of each option.

Select Slider Size – This option allows you to select whether you want your slider to be full width or half-width, which automatically sizes the slider to fit within the page content depending on your sidebar configuration. (note: if you use the half-width slider it will remain above the page content and cannot be dragged above or below any other elements. If you want to move the slider above or below other elements you need to use the full-width slider).

Select Slider Type – This option is for selecting the source of your feature slides: blog posts or custom slides. For more information about these two kinds of slider configurations, please refer to the “Using the iFeature Slider” documentation page.

Blog Post Category – If you are using “Blog Posts” as your Slider Type, use this drop down menu to select the category you wish the slides to be called from. You can select any of your custom categories, or simply select “All” to call from your latest posts.

Custom Slide Category – If you have selected “Custom Slides” as your Slider Type, you can select the category you want the slides to be called from. “Default” is the default category, which is the category every custom slide is placed under if a custom category is not specified.

Number of Featured Blog Posts – This option only pertains to slides generated from blog posts. Enter the number of slides you want to appear into this text input box and update the page. The default number for blog posts is five.

Slider Height – If you wish to customize your iFeature Slider’s height, you may do so with this option. The default height is 330 pixels.

Slider Delay Time – This option controls the time each slide appears before it transitions. It is measured in milliseconds (1000 milliseconds equals 1 second), and the default speed is 3500 ms.

Select Slider Animation Type – This option is for selecting the animation style you want to use for that page. There are currently 15 choices: Random (default), Slice Down, Slice Down-Left, Slice Up, Slice Up-Left, Slice Up-Down, Slice Up-Down Left, Fold, Fade, Slide-In Right, Slide-In Left, Box Random, Box Rain, Box Rain-Grow, Box Rain-Reverse and Box Rain-Grow-Reverse.

 Select Slider Navigation Type – This option is for selecting the navigation type you want to use with the slider. There are three choices: dots (default), thumbnails and none.

Select Slider Caption Style – Use this option to configure the slider caption (title and text) style you wish to use. You have four choices: bottom (default), left, right, and none (disables the caption bar on all slides).

Navigation Arrows – This option will hide the navigation (left and right) arrows from appearing on the slides.

Navigation Auto-Hide – By default the navigation arrows only appear when a user mouses over the slides. Enabling this option will cause the navigation arrows to always appear.

WordThumb Image Resizing – Toggle this option to enable or disable the use of WordThumb Image Resizing.

Callout Options:

The Callout options tab is for customizing the Callout Section if enabled on the page. Here you have complete control over the title, text, and a number of color pickers to select your own title, text, and button color. You can also upload a custom image to use as the button if you do desire. Continue reading below for a description of each option.

Title - Use this text field to enter the title for your Callout Section.

Callout Text – Use this text area to enter the text you wish to appear in your callout section.

Callout Button Text – Use this text field to enter the text you want to appear inside of the Callout Section button.

Callout Button URL – Enter the URL you want the Callout Section button to link to.

Custom Callout Button Image – Use this image uploader to use a custom image instead of the default Callout Section button.

Custom Background Color -With the Select Callout Section Background option, use the color picker (or enter your own hex value) to choose a custom color for the Callout Section background.

Callout Title Color – This option allows you to select a custom color (or enter your own hex value) for the Callout Section title.

Callout Text Color – This option allows you to select a custom color (or enter your own hex value) for the Callout Section text.

Callout Button Color – This option allows you to select a custom color (or enter your own hex value) for the Callout Section button.

Twitterbar Section Options:

The Twitterbar Options Tab is where you enter the Twitter handle you would like to use with the Twitterbar Section (if enabled on the page).

Twitter Handle: Enter the Twitter handle you would like

Carousel Section Options:

The Carousel Options Tab is where you select the category you would like to use with the Carousel Element (if enabled on the page). More detailed information on using the Carousel, visit our Carousel documentation page.

Carousel Category: Enter the category you would like to use.

 SEO Options

The SEO Options tab gives you the ability to add META descriptions for title, description, and keywords to each individual page. This allows search engines to more accurately index your content, which helps improve your search rankings. Below are the explanations for each option in the SEO Options tab.

Title – Use this text input field to enter your META title. Keep it short and relative to your content.

Description – Use this text box to enter your META description here. The description can be longer than the title, but it is still recommended to keep it short and relative to your content.

Keywords – Use this text input field to enter your META keywords, separated by commas. You may enter as many as you like, but it is important that they are relevant to your content.

Permalink

Overview:

With iFeature Pro we have introduced a powerful new tool called Drag and Drop Page Elements which allows you to drag, drop and re-order the Elements you wish to use on your page. These options are set on a per-page basis, giving you complete control over the look and feel of every page on your website.

To use this tool, simply click on the element, hold your mouse or trackpad button, and drag the element over from the inactive elements column to the active elements column, and vice versa (you can also click the minus button to remove an active element). Once you have the elements you wish to use in the Active Elements column, click and hold down again and drag the elements above or below each other until you achieve the desired order.

Once you enable the Elements you want to use on your page, the various options tabs will allow you to set specific settings to each of those elements. For more information about using the Page Element options, visit our Page Options documentation page here.

A video tutorial for using the Drag and Drop Page Elements is coming soon!

Permalink

Here we will provide a step-by-step guide for using the iFeature Pro Slider. The iFeature Slider is used to display featured site content on your page and is controlled using posts. You have the option to feature blog posts in your iFeature Slider, or to create your own custom slides that you can link to a page on your site or an outside link.

Below we will outline in detail the steps necessary to use featured posts, or to create your own custom slides.

Featured Posts:

To use the iFeature Slider to feature blog posts, you can either edit an existing post or create a brand new one. Once you have your post content ready, the first step is to make sure that your post is published under the proper category. By default the iFeature Slider pulls from every category, so if you want to use it in this way you are ready to move on to the next step. If you have assigned a specific category in the iFeature Slider Settings (for example: featured), then you must place the post in this category. If you need to create this category, press the “add new category” button under the “Categories” menu on the right-hand side of the post edit page, type the name you have specified, and press enter.

Next you must tell the feature slider where to pull the image to be displayed. To do this you will use the iFeature Slider Content box which can be found below the post window (see image below).

To add an image to your featured slide, use the image uploader to browse and select your image. Then simply update (or publish if it is a new post) and you will see a thumbnail of the image you uploaded.

In iFeature Pro, slider images are automatically resized to fit the size of your slider. The three slider sizes (in pixels) are as follows: 980 by 330 for the full width slider, 640 by 330 for a half-width slider with one sidebar, and 480 by 330 for a half-width slider with two sidebars.

The iFeature Slider also allows for some custom text to be displayed below the post title. To use this, enter your custom text into the text input field and update or publish your post. This section is optional, so if you do not wish to use custom text simply use this text field blank.

You may also hide the title bar (the black bar that appears at the bottom of the slider) on individual posts by checking off the hide title bar checkbox.

If you are using thumbnails with your slider, you have the option of uploading a custom thumbnail for your slide (thumbnails are generated from the slider image by default).

Slides are ordered chronologically by the post date of the posts. The newest post will display first. Below is an image representing what a post page should look like to utilize all the slider options available. The post title becomes the title of the slide, the uploaded image will display in the slide itself, and the custom text will display below the title if used. If you are using a specific category for your slider, do not forget to place your post under that category.

 

iFeature Slides:

You also have the option to create your own custom slides, which is useful if you do not want to feature blog post content and would like to link to other pages. The process is very similar to using a post category, and uses a custom post type which will only display in the iFeature Slider. In order to enable custom slides, select “Custom Slides” from the dropdown menu of the “Select the Slider Type” option in the iFeature Slider options settings.

Next, navigate to the “Custom Slides” panel in your WP-Admin sidebar, which can be found directly above the iFeature Pro options panel. To make a new custom slide, click the “Add New” link which will take you to the custom slide post page.

Enter your slide title into the post title input field, and use the post content field to enter any custom text you would l

ike to display before the title. Next, enter the link you would like the slide to point to in the “Custom Slide Link” input field.

Use the image uploader to upload your feature slide image. In iFeature Pro 2, slider images are automatically resized to fit the size of your slider. The three slider sizes (in pixels) are as follows: 980 by 330 for the full width slider, 640 by 330 for a half-width slider with one sidebar, and 480 by 330 for a half-width slider with two sidebars.

The NivoSlider option in iFeature Pro adds support for the slider originally used in versions of iFeature Pro prior to 4.0. It is similar to the current slider, but offers a few more animation options and some slight styling differences.

Using and configuring NivoSlider is the same as the default slider, but if is important to note that NivoSlider is currently not responsive. We are hoping to add this functionality soon, but for right now the slider will not fluidly respond when resizing the browser and will simply hide when viewed on an iPhone with Responsive Design turned on.

Permalink 

Overview

iFeature Pro offers a Featured Posts Carousel that can be used on your post index page, or on a per-page basis. This section displays six posts at a time, but has the ability to navigate left or right through as many posts as you would like to use.

Creating Featured Posts

To create the content for your Carousel, click on the Carousel link in the sidebar when logged into WP-Admin. This section utilizes custom post types, so click “add new” to begin creating your Featured Posts content.

 

You will use the meta options field shown above to create your Carousel content. Give your Featured Post a title, upload an image (140 is the default image width), and enter the link to the blog post you are featuring. You can also assign a custom category to your Carousel entries, which is useful for calling specific content on individual pages.

If you click the “Carousel” link in the sidebar, you will see a list of all the Carousel content you have created.

If you would like to re-order this content, we recommend using the Post Types Order plugin.

Permalink

To customize your install of iFeature Pro, select “iFeature Pro Options” under the Appearance tab in the left-hand menu of WP-Admin. Here you will find five different option tabs:  Design, Header, Blog, Templates, Footer, and Import/Export. Simply select the settings tab you wish to edit.

Within each option tab are sub-sections that contain specific groups of options. For example, “Design” includes “Typography”, “Background”, “Custom Colors”, and “Custom CSS”. Some tabs also include options that don’t fall under a sub-section, such as the “Color Scheme” option in the “Design” tab.

When you are done making your changes, press the “Save Options” button in the top-right corner of the options panel. If at any time you wish to revert to the default settings, press the “Restore Defaults” button in the bottom-left corner of the options panel.

At the top of the options panel you will find helpful links to our documentation, support forum, and social media profiles. Please visit these links for more information and to stay up to date on the latest CyberChimps news.

Permalink

Overview:

The design options tab allows you to control the look and feel of iFeature Pro, including fonts, background, colors, and even Custom CSS. These powerful options allow you to make a wide variety of design choices, so continue reading below to learn more.

Responsive Design

This option controls whether or not your site uses responsive design. To disable responsive design, toggle the switch to off.

Select a Color Scheme

iFeature Pro includes nine different color scheme options which change the color of the iMenu and the link color throughout the theme. These colors are: Blue (default), Black, Dark Blue, Green, Grey, Orange, Pink, Red and White.

Typography:

Choose A Font

Select the font you would like to use from the drop down menu. The default font is Arial, and you have a choice between a number of standard web fonts and Google fonts. Additionally, if you select “Custom” from the drop down, a custom font option will appear below the drop-down menu where you can enter a custom font not found in the list. You have the choice of using standard Web fonts and any of the Google Web Fonts. If entering a Google font with more than one word, please use a + symbol in between the words instead of a space. For example, “Maven+Pro”.

TypeKit Code

If you wish to use TypeKit fonts with iFeature Pro 3, please enter your custom TypeKit code into the text box.

Choose A Menu Font

This option allows you to select the font you would like to use for the iMenu only. The default font is Cantarell, and you have a choice between a number of standard web fonts and Google fonts, or you can enter your own font below (Google Fonts with more than one word format as follows: Maven+Pro)

Menu Link Color

Use the color picker to select the site menu link color. The default is “FFFFFF” which is the hex code for the color white. To change the link color to black you can use the color picker, or simply enter “000000″.

Background:

Select a Background

iFeature Pro offers six unique background choices. Simply select the image that represents the background you wish to use, and it will be applied when you save your settings.

Custom Background

If you wish to use your own custom background image or a standard color, turn the “Custom Background” option to “On”. The following background options will appear when this option is enabled.

Background Image

Use this image uploader to upload your own custom background image.

Select the Image Position

Select from either “Left”, “Center”, or “Right” to choose the position of your custom background image.

Select the Image Repeat

Use these options to control how the image is repeated. You can select Tile Horizontally, Tile Vertically, Tile (which repeats both Horizontally and Vertically) or No Tile which will not repeat the image.

Select the Image Attachment

Choose between “Scroll” and “Fixed”. A fixed background means that the background image will never move as you scroll down the page, whereas a scroll background will move as you scroll down the page.

Select a Background Color

If you would rather use a standard color as your website background, use the color picker to select the color you want to use.

Custom Colors:

Menu Link Color

Use the color picker to change the color of the links in the iMenu. The default color is white.

Site Title Color

Use the color picker to change the name of the site color in the header.

Site Description Color

If you have the site description (tagline) enabled and wish to change the color, use this color picker to do so.

Link Color

Use the color picker if you would like to change the color of the links throughout iFeature Pro 3.

Post Title Color

Use the color picker to select a custom post title color if you wish.

Footer Color

Use the color picker to select a custom footer color.

Custom Home Icon

This section allows you to upload a custom home icon image for the iMenu. For example you could upload a small company logo.

Hide Home Icon

This check box allows you to hide the home icon in the iMenu.

Hide Menu Search
This check box allows you to hide the search box in the iMenu.

Site Title Color

Use the color picker to select the site title color.

Site Description Color

Use the color picker to select the site description (tagline) color.

Link Color

Use the color picker to select the site link color.

Post Title Color

Use the color picker to select the post title color.

Custom CSS:

Override the default CSS. Please see Using Custom CSS for a further explanation. You may also want to consider using a Child Theme instead.

Permalink

Overview:

This options tab controls all aspects related to the header, including the header Drag & Drop Elements. Continue reading below to learn more.

Drag & Drop Elements

This section allows you to have complete control over your iFeature Pro header. To customize your header, simply move elements from the inactive column to the active column by holding down your mouse or trackpad button over them and dragging them over to the active column (or vice versa to remove). You can also re-order them in the active column to change the order that they appear in. For example, dragging iMenu above Logo and Icons will make the menu appear at the top of the header and the Logo and Icons below them.

Header Options:

Custom Logo

Use the image uploader to upload a custom logo for the header. You can also enter the link to your custom logo if you’ve already uploaded it to the Media section of WP-Admin.

Social Icon Margin Top

Use this option to change the position that the social icons appear on the screen. For example, if you upload a full-width logo banner image and would like to push the icons below the image, enter a greater value in the text box until it is positioned to your liking.

Custom Favicon

Use the image uploader to upload a custom favicon for the header. You can also enter the link to your custom favicon if you’ve already uploaded it to the Media section of WP-Admin. A favicon is a 16 pixel by 16 pixel image which appears next the URL in most web browsers. If you need help generating a favicon, we recommend a website like http://favicon-generator.org/.

Breadcrumbs

Toggle this on or off to show or hide the breadcrumb navigation links that appear on single post pages, pages, archives, etc. These links are on by default.

iMenu Options:

Choose a Menu Font

This option allows you to select a font to use in your iMenu. The default font is Arial, but you also have a choice between a variety of standard and Google Web fonts. If the font you wish to use is not in the list, select “Custom” to trigger a text box to enter a custom font value. If you would like to use a Google font with more than one word in the name, please separate the words with a + symbol rather than a space. For example: “Maven+Pro”.

Custom Menu Colors

If you enable this option you will be able to customize several menu colors, including the menu bar, link color, drop down color and menu link hover color.

Rounded Corners

Controls whether or not the menu has rounded corners. .

Home Icon

If you wish to disable the Home Icon in your iMenu, toggle this option to “Off”.

Search Bar

If you wish to disable the Search Bar in your iMenu, toggle this option to “Off”.

Social Options

Icon Set

Use this option to select from three different styles of social icons. Simply select the image that represents the icon set you want to use and it will be applied when you save your settings.

Twitter Icon URL

Toggle the On/Off switch to enable or disable the Twitter social icon. Use the text field to enter the link to your Twitter profile.

Facebook Icon URL

Toggle the On/Off switch to enable or disable the Facebook social icon. Use the text field to enter the link to your Facebook profile.

Google + Icon URL

Toggle the On/Off switch to enable or disable the Google + social icon. Use the text field to enter the link to your Google + profile.

Flickr Icon URL

Toggle the On/Off switch to enable or disable the Flickr social icon. Use the text field to enter the link to your Flickr profile.

LinkedIn Icon URL

Toggle the On/Off switch to enable or disable the LinkedIn social icon. Use the text field to enter the link to your LinkedIn profile.

YouTube Icon URL

Toggle the On/Off switch to enable or disable the YouTube social icon. Use the text field to enter the link to your YouTube profile.

Google Maps Icon URL

Toggle the On/Off switch to enable or disable the Google Maps social icon. Use the text field to enter the link to a Google Maps location.

Email Address

Toggle the On/Off switch to enable or disable the Email Address icon. Use the text field to enter your Email address.

RSS Icon URL

Toggle the On/Off switch to enable or disable the RSSl icon. Use the text field to enter a link to a custom RSS solution like Feedburner.

 Tracking

Google Analytics Code:

Use this entry field to enter your Google Analytics Code, which will automatically be inserted into the footer. For more information about Google Analytics, please visit http:// www.google.com/analytics/.

Permalink

Overview:

This options tab is where you can configure all of your blog settings, including the Drag & Drop Blog Elements. Please read below to learn more.

Drag and Drop Blog Elements

The Drag and Drop Blog Elements give you complete control over the look and feel of your blog page. Too add or remove elements, simply hold down your mouse or trackpad button over the element and drag it over to the active/inactive column. You can also re-arrange the elements within the active column to change the order they appear. Note: if you’re using the half-width slider the order it is placed does not matter as it will always stay within the page content area. If you are using the full-width slider, however, you can arrange it in any order.

Blog Options

Select the Sidebar Type

Select the image that represents the sidebar configuration you would like to use. The options are: Sidebar Right, No Sidebar, Sidebar Left and Right, and Two Sidebar Right.

Post Format Icons

Toggle to enable or disable the post format icons. These are on by default.

Post Excerpts

Toggle to enable or disable the the use of post excerpts. When enabled, two options will appear below which allow you to customize the link text and the length of the excerpt before the link appears.

Featured Images

Toggle to enable or disable the use of post featured images. When this option is enabled, three options will appear below which allow you to control the image alignment as well as the height and width.

Featured Post Carousel

Toggle this option to enable or disable the use of the Featured Post Carousel. If enabled, a category select option will appear allowing you to select from the Featured Post Carousel category you would like to use. For more information about the carousel visit our documentation page here.

Post Byline Elements

These options allow you to enable or disable the following Post Byline Elements from appearing in your posts: Author, Categories, Date, Tags, Comments, and Share. They are all enabled by default.

Show Facebook Like Button

Check the box to show the Facebook Like Button on all blog posts.

Show Google +1 button

Check this box to show the Google +1 Button on all blog posts.

Blog Slider

Select the Slider Size

Select the slider size for your blog page (default is Half-Width), you can also use full-width which will display above the blog content and sidebar.

Select the Slider Type

This option allows you to select between blog posts or custom slides. Custom slides enable you to create slides that are not associated with posts or pages. Please see Using the iFeature Slider for more information.

Show Posts From Blog Category

This is where you can assign a specific post category to be used with the feature slider. By default the feature slider pulls from all categories, so if you have a specific category simply select the category you would like to use.

Show Posts From Custom Slide Category

This drop down menu will only function if you are using custom slides, and custom categories. If you are using custom slides, this option allows you to pick what custom slide category you want on your blog page. For all other pages use the Page Meta Options.

Number of Featured Blog Posts

Enter the number of featured posts that you want the feature slider to cycle through. The default is 5.

Slider Height

The default slider height is 330-pixels. If you want to make the slider tall or smaller simply enter the pixel height.

Slider Delay Time (in milliseconds)

Enter the time that you want each slide to appear before it changes to the next one. The time is entered in milliseconds, so if you want a 7 second delay, enter 7000. The default is 3500, which is 3.5 seconds.

Choose the Caption Style

This allows you to move the location of the caption text displayed on the slider. The default is Bottom, but you can also select from Left, Right, and None.

Choose the Slider Animation

Select from a wide variety of slider animation types. The default is random.

Choose the Slider Navigation

This controls the icons or dots below the slider. The default is dots, but you can also select Thumbnails, or None to hide them.

Slider Navigation

Toggle this option to enable or disable the use of the slider navigation arrows.

Slider Navigation Auto-Hide

Toggle this option to enable or disable the slider navigation auto-hide.

WordThumb Image Resizing

Toggle this option to enable or disable the use of WordThumb Image Resizing on the blog iFeature Slider. It is off by default, and if you experience issues with your images not showing up you should keep this option disabled.

Twitterbar

Twitter Handle

Enter the Twitter handle you want to use with the Twitterbar. Note: requires the Twitter for WordPress plugin.

Carousel

Carousel Category

Enter the category you want to use with your featured post carousel.

SEO OPTIONS

SEO Home Description

Enter the META description of your homepage here. This helps SEO.

SEO Home Keywords

Enter the META keywords of your homepage here (separated by commas).

Optional SEO Home Title

Enter an alternative title of your homepage here (default is the site tagline).

Permalink

Overview:

This options tab gives you control over the Single Post, Archive, Search, and 404 WordPress templates. You can change the sidebar layout, hide or enable post meta elements, and more. Read below for more info.

Single Post:

Select the Sidebar Type

Select the image that represents the sidebar layout you wish to use for this template.

Post Byline Elements

Toggle the byline elements you want to use for this template.

Facebook Like Button

Displays a Facebook Like button on this template.

Google Plus One Button

Displays a Google Plus One button on this template.

Post Pagination Links

Displays Previous and Next post links at the bottom of this template.

Archive:

Select the Sidebar Type

Select the image that represents the sidebar layout you wish to use for this template.

Post Excerpts

Enables post excerpts to be used instead of the full post.

Post Byline Elements

Toggle the byline elements you want to use for this template.

Facebook Like Button

Displays a Facebook Like button on this template.

Google Plus One Button

Displays a Google Plus One button on this template.

Post Pagination Links

Displays Previous and Next post links at the bottom of this template.

Overview

These options are related to the footer section of iFeature Pro 3. To learn more continue reading below.

Footer

Enables the theme footer.

Footer Copyright Text

Here you can enter your custom footer copyright text. By default it displays your site title.

Credit Link

Enables the CyberChimps Credit Link.

Afterfooter

Enables the theme after footer.

Permalink

Overview

If you would like to copy your current iFeature Pro settings to another install (or back up your existing settings, which could be useful if you accidentally reset your options), copy the export code from the “Export iFeature Settings” text window and paste them to a text/office document and save.

To import you settings, copy your saved export code and enter it into the “Import Settings” text window and then save your theme options.

WARNING: If you do not paste correct export code into the “Import Settings” text window, the theme will restore to the default settings as a failsafe. Be sure to select the code in its entirety before you Copy and Paste.

Permalink

 

A child theme is your best option if you are looking to do some serious customizations to iFeature Pro 4. A child theme is a companion theme where customizations to the main theme can be made that will not be overwritten when the main theme is updated. This is useful if you are making a substantial amount of changes to the theme’s CSS, or if you want to make customizations to the core template files.

Creating and activating a child theme is quite simple, and below you will find several examples along with a download link to an already prepared empty child theme.

Download iFeature Pro 4 starter child theme.

Creating your own:

All you need is a basic text editor, and you are ready to create your own child theme for iFeature Pro 4. The first step is to create a folder to house the contents of your child theme. Using your computer, create a folder (on your Desktop for example) and give it a name relevant to your child theme. For our example, we have created a folder called “iFeaturePro-child-theme”

Once you have created your folder, you need to create a stylesheet for your child theme. Open up your text editor and enter the following text:

/*
Theme Name: iFeature Pro Child Theme
Theme URI: http://cyberchimps.com/
Description: Child Theme for iFeature Pro
Author: CyberChimps
Author URI: http://cyberchimps.com
Template: ifeaturepro
Version: 0.1
*/

@import url("../ifeaturepro/style.css");

 

The commented portion of the code defines all the various elements of your child theme. Here is a detailed explanation of each element:

Theme Name: This is the name of your child theme. It can be whatever you like, so be creative!

Theme URI: This is the link associated with your child theme. For your purposes, using your domain is probably sufficient but it can be any link you like.

Description: This is your child theme’s description, which provides a unique identifying text which is displayed in the WordPress theme manager.

Author: This one’s pretty simple, it’s you!

Author URI: This is the link associated with the author, again it’s probably best to use your domain but again it can be anything you like (a link to a different personal blog for example).

Template: This one is important. This defines which base theme the child theme is associated with, in our case, iFeaturePro. Please copy this section exactly as you see in the example.

Version: Finally, this is the version number of your child theme. When updating your child theme it is best to increase the version number. It is also helpful to keep a change log inside of your child theme to keep track of the changes you have added or removed.

With the above code, you now have a blank child theme that you can begin customizing. For example, adding the following code will change your site’s background color to blue:

body {background: blue;}

Any custom styles you add AFTER the @import code will be called ahead of the default iFeature Pro stylesheet, meaning that your custom code will be dominant.

Customizing Core Template Files:

Another powerful element of child themes is the ability to customize core template files, such as the header.php or index.php file. To customize a core template file, simply copy and paste the contents of that file into a new document, make your customizations, and save it with the same name and extension as the original.

This is the proper way to customize theme template files, because your child theme files will not be overwritten when the base theme is updated.

Installing and Activating:

Child themes are installed and activated like any other WordPress theme. You can either upload the folder to your wp-content/themes folder via FTP, or you can install it as a zip using the WordPress theme manager. In order to make your theme a zip, simply right click (option click on a Mac) and compress the folder to a zip archive.

Once you have your theme installed, simply activate it INSTEAD of iFeature Pro. This step is very important, otherwise your customizations will not take effect on your site.

Final Thoughts:

There are a few things one should keep in mind regarding child themes. It is important to stay up to date with the base theme’s releases, to ensure that your child theme stays up to date. For example, if you create a custom index.php file and the base theme receives a major update to the index.php file, your theme will not receive that update unless you add the new code to your child theme template file. Core template files in the base theme are rarely changed, but if they are those changes are documented in the change log.

This tutorial was designed to get you started with your own child theme, but if you have questions or need help with your own please stop by the iFeature Pro 4 customization forum (requires Pro forum access) and we would be happy to help you with your child theme.

Tutorial video coming soon.

Permalink

 

Using Custom CSS

Custom CSS can be used to further change the visual aspects of iFeature Pro to your liking. Some knowledge of CSS is useful, but is not required to begin using this option. We highly recommend using one of the following tools to help you determine the necessary CSS selectors to apply your custom changes: Firebug (http://getfirebug.com/) or Inspect Element (available in Google Chrome or Apple’s Safari).

Finding the selector

 

(note for this example we will be using Inspect Element)

Let’s say that you wish to change the color of the contact area text to red. Point your mouse as close to the area that you wish to modify, right-click and press inspect element. This will bring up a new area at the bottom of your browser that looks like the following:

The selector for the contact area appears in the right-hand menu (in this case #header_contact). Now that we have our selector, we can use Custom CSS to make  our change. Here is the code we would use to make the header contact text red.

#header_contact {color: red;}

This tells the browser to display the text as red in addition to the default styles for that selector.

This is just one example, but there is really no limit to what you can accomplish with Custom CSS.

 

For more CSS resources, we recommend the following links:

http://www.w3schools.com/css/

http://htmlhelp.com/reference/css/

http://www.htmldog.com/guides/cssbeginner/

 

You may also post questions in the iFeature Pro Customization forum for help in achieving your desired customizations.

http://cyberchimps.com/forum/customization/

 

Permalink

Visit the iFeature Pro 3 shortcode demo page for an overview of shortcodes in iFeature Pro.