ifeature Pro Documentation for ifeature v1.1.2 (last updated 5/04/2011)

Transcription

1 1 ifeature Pro Documentation for ifeature v1.1.2 (last updated 5/04/2011) TABLE OF CONTENTS: if Topic Page(s) Installing ifeature Pro 2 Updating ifeature Pro 3 Using the Menu 4 ifeature Pro Layout Templates 5 Widgets 6-7 ifeature Pro Settings 8 General Options 9-10 Header Options 11 SEO Options Callout Section Options 14 ifeature Slider Options Using the ifeature Slider Footer Options 20 Shortcode Library Custom CSS For the support forum please visit:

2 2 Installing ifeature Pro 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 Once logged in press the Appearance tab in the left-hand menu of 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. 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.

3 3 Updating ifeature Pro There are two ways to update your existing install of ifeature Pro to the latest version. If you have FTP access to your server, simply upload the new ifeaturepro folder to the wpcontent/themes directory, overwriting the old files with the new ones. Or, if you would rather use the theme installer in WP-Admin, simply activate the default theme (2010), delete the old version of ifeature Pro, and then install the new zip as you normally would. You do not have to worry about your settings being lost as they are stored to the database.

4 4 Using the Menu For complete control over your ifeature Menu, we highly recommend using the WordPress menu system. By default, any page you make becomes a link in the menu. To begin creating your own custom menu, visit Apperance > Menus while logged into 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. 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. 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 ifeature Menu.

5 5 ifeature PRO LAYOUT TEMPLATES ifeature Pro uses WordPressʼs template management system allowing you to change the layout of your Pages individually. If want to change the layout of a Page simply login to WP-Admin, and Edit the Page you would like to assign a different template. Once you are viewing the WP-Admin dashboard for the Page you would like to edit locate the Page Attributes section on the right. From there select the Template with the layout you would like to use: The Default Template includes the Page content on the left, and the Sidebar on the right. The Full Width Page includes Page content only, and does not have a Sidebar. The ifeature Pro Homepage includes the ifeature Slider, callout section, and the Widgetized Boxes. Setting the ifeature Pro Homepage: To set the ifeature Pro Homepage layout, and template create a new Page for example called Home then use the instructions above to assign the Page the ifeature Pro Homepage template. Then create a new Page titled Blog or whatever you would like to name your Blog page to be named (no need to select a template here). Once you have created a Blog Page and assigned the Page Home with the ifeature Pro Homepage template then go to your WP-Admin dashboard, on the left-hand side locate Settings expand the menu, and select Reading. Once you are on the Reading Settings page, under Front page displays select A static page (select below). Then select the Page you created that has your ifeature Pro Homepage template selected ( Home ). Now under Post page select the Page that will display your standard WordPress blog. Simply select the Blog Page we created earlier, hit Save Changes at the bottom, and your Homepage is now using the ifeature Pro Homepage template, and your Blog can be found on your Blog Page.

6 6 WIDGETS ifeature Pro offers several Widgetized areas using WordPressʼs builtin 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 The Widget Boxes are currently only for the ifeature Pro Homepage template and are on by default. To put a Widget in the left box place the Widget in Box 1 of the Widget dashboard area, to place a Widget in the middle place a widget in Box 2 of the Widget dashboard area, to place a Widget in the right box place the Widget in Box 3 of the Widget dashboard area.

7 7 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).

8 8 Using the ifeature Pro Settings Page in WP-Admin In order to begin customizing your install of ifeature Pro, click on ifeature Pro just above Appearance in the left-hand menu of WP-Admin. Here you will find six different option categories: General, Header, SEO, Callout Section, ifeature Slider, and Footer. To edit one of these categories, simply click the tab you wish to edit. When you are done editing your options, press the Save Settings button. If you ever want to revert back to the default ifeature Pro settings, press the Reset button at the bottom of the page (this will delete all of your settings so make sure you backed up all of your setting information separately). There you will also find links to the official ifeature Pro support forum and the web version of this documentation. Continue reading for a detailed explanation of the settings within each option category.

9 9 GENERAL OPTIONS Choose imenu Color: Use this dropdown to select your desired color scheme. The default is Grey, and you may also choose from Blue, Orange, Red, and Pink. Choose a font: Select the font you would like to use from the drop-down menu. The default font is Cantarell, and you have a choice between a number of standard web fonts and Google fonts. Custom CSS: If you wish to override the default ifeature styling, you may do so here. For more detailed information about using Custom CSS, refer to the Using Custom CSS page further in this document. continued on page 8

10 10 Custom Favicon: Here you can enter a URL to a custom favicon image. 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 Once you have your favicon image, simply upload it to the WordPress Media section (found in the left-hand sidebar in WP-Admin) and enter the URL in the text field. Google Analytics Code: Use this field to enter your Google Analytics Code, which will automatically be inserted into the footer. For more information about Google Analytics, please visit Show Facebook Like Button: If you would like to include a Facebook Like Button at the bottom of your blog posts, check off this radio button.

11 11 HEADER OPTIONS Logo URL: Enter the link to your custom logo image here. The maximum height for your image should be 60 pixels, and the image should be uploaded to the WordPress Media section which can be found in the left-hand menu of WP-Admin. If you would like to use the text of your siteʼs title instead, enter the word hide instead. Custom Menu Icon: If you would like to replace the home icon used in the imenu, upload the image to the Media section and enter the URL here. Header Contact Area: This is where you can enter a custom contact message (such as a phone number) which will be displayed in the top right hand corner of the siteʼs header. If you would like to hide this section from appearing on your homepage, enter the word hide instead. Social Icons: The header also features seven social icons which you can apply your own links to: Facebook, Twitter, LinkedIn, YouTube, Google Maps, Contact, and RSS. Simply fill in the appropriate link for each icon, or enter hide to hide the icon.

12 12 SEO (Search Engine Optimization) OPTIONS Home Description: Home Description is used by search engines and sites like Facebook to display a description of your website. Enter a more detailed META description of your homepage here. For example, could use a home description of BlogAboutDogs.com is your number one news source about everything dogs. Featuring a forum, image gallery, and an online store, and much more. The Home Description setting is independent from any other WordPress settings, so if you do not enter any information then no META description will be set. Home Keywords: Keywords are used by search engines to help people find your website. Enter a series of your siteʼs important keywords here, each separated by a comma. You should only select keywords that are the most important and relevant to your siteʼs content. For example, blogaboutdogs.com could use the following home keywords: dogs, blog, dog pictures, dog forum, pets, online pet store. The Home Keywords setting is independent from any other WordPress settings, so if you do not enter any information here no META keywords will be set. Continued on page 11.

13 13 Optional Home Title: By default your homepage title is your WordPress Site Title, followed by your WordPress Tagline. If you would like to over-ride the default Tagline and enter your own custom Home Title you can do so using this option. Enter the Optional Home Title of your homepage here. For example, could use a home title of a blog dedicated to everything about dogs. If you do not enter a value here, the tagline entered in your WordPress General Settings will be used instead (your website name will be displayed no matter which option you choose).

14 14 CALLOUT SECTION OPTIONS Hide Callout Section: If you would like to hide the Callout Section on your site, check off the radio box. Callout Title: Enter the title you wish to use for your Callout Section here. Callout Text: Enter the text you wish to use for your Callout Section here. We recommend no more than two sentences, but three short sentences could also be used. Callout Image: Enter the URL of the image you wish to use with the Callout Section (60px by 180px) Callout Image Link: Enter the link you want the Callout Image to point to.

15 15 ifeature SLIDER OPTIONS Hide IFeature Slider: If you do not want to use the ifeature Slider on your site, check this box. Select the Slider Type: Choose whether or not you want to use custom slides or blog posts. Select the Slider Placement: Here you can choose if you want your ifeature Slider placed on the ifeature Pro Homepage or the Default (Post) Template. Show post from 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 that you would like to use (for example: featured), this is where you would enter it.

16 16 Number of Featured Posts: Enter the number of featured posts that you want the feature slider to cycle through. The default is 5. Slider Height: Enter the height (in pixels) for your slider. The default is 330. Slider Delay Time: 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 The default is 3500, which is 3.5 seconds. Choose the Slider animation: Select from four different animation options: Random, Swirl, Rain, and Fade. Hide the Navigation: Check this box if you would like to hide the feature navigation within the feature slider, and directly underneath it. For a detailed explanation see Using the ifeature Slider below.

17 17 USING THE ifeature SLIDER: Here we will provide a step-by-step guide for using the ifeature Slider. The ifeature Slider is used to display featured site content at the top of your homepage (either on the ifeature Pro Homepage template or the default post index template) 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. If you wish to chance the image, simply delete and upload a new one. (Note: image sizes are 976 by 330 for the ifeature Pro Homepage template and 640 by 330 for the post page template)

18 18 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. 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.

19 19 Custom 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 like to display before the title. Next, enter the link you would like the slide to point to in the Custom Slide Link input field. Finally, use the image uploader to upload your feature slide image (976 by 330 for the ifeature Pro Homepage template and 640 by 330 for the post page template). When you are done, press Publish and your custom slide is ready. Repeat the same process for as many slides as you would like to use. You may also hide the title bar by checking off the hide title bar checkbox.

20 20 FOOTER OPTIONS Hide the Boxes Section: Check off this radio button if you wish to hide the three widgetized box area. Footer Copyright: Here you can enter your custom footer copyright text. By default it displays your site title, and if you wish to hide this feature enter the word hide. Hide our link: If you wish to remove the link back to CyberChimps, check off this button.

21 21 SHORTCODE LIBRARY ifeature Pro includes a shortcode library designed to make creating posts and pages even easier. Below you will find visual examples of what each shortcode does, as well as how to implement it on your site. Fancy Checklist: [checklist] <ul> " <li>test</li> " <li>test2</li> " <li>test3</li> " <li>test4</li> " <li>test5</li> " <li>test6</li> </ul> [/checklist] Box: [box]testing testing 123 this is a test of my box[/box] Download Button: [button link=""]download Button [/button] [button link= " size="large"] Large Download Button [/button] Continued on page 19.

22 22 Two Column: [one_half] [/one_half] [one_half_last] [/one_half_last] Three Column: [one_third] [/one_third] [one_third] [/one_third] [one_third_last] [/one_third_last] Continued on page 20.

23 23 Four Column: [one_fourth] [/one_fourth] [one_fourth] [/one_fourth] [one_fourth] [/one_fourth] [one_fourth_last] [/one_fourth_last] Five Column: [one_fifth] [/one_fifth] [one_fifth] [/one_fifth] [one_fifth] [/one_fifth] [one_fifth] [/one_fifth] [one_fifth_last] [/one_fifth_last]

24 24 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 ( 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;}

25 25 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: You may also post questions in the ifeature Pro Customization forum for help in achieving your desired customizations. For more support options please visit on Twitter for update alerts and for basic support All text and images CyberChimps.com