322 lines
16 KiB
HTML
322 lines
16 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||
<title>Premium Featured Posts Slider Documentation</title>
|
||
<meta name="description" content="Premium Featured Posts Slider WordpRess plugin documentation by Web factory Ltd. Sold exclusively on CodeCanyon.">
|
||
<meta name="lang" content="en">
|
||
<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
|
||
<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
|
||
<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
||
<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
|
||
<style type="text/css" media="screen">
|
||
p, table, hr, .box { margin-bottom:25px; }
|
||
.box p { margin-bottom:10px; }
|
||
.struct { border: 1px solid black; padding: 15px; margin: 20px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h3 class="center alt">“Premium Featured Posts Slider” Documentation by “Web factory Ltd” v1.15</h3>
|
||
|
||
<hr>
|
||
|
||
<h1 class="center">“Premium Featured Posts Slider” WordPress plugin</h1>
|
||
|
||
<div class="borderTop">
|
||
<div class="span-6 colborder info prepend-1">
|
||
<p class="prepend-top">
|
||
<strong>
|
||
Created: 2012-02-28, revision 4<br>
|
||
By: Web factory Ltd<br>
|
||
Support: <a href="http://codecanyon.net/user/WebFactory">via CodeCanyon</a>
|
||
</strong>
|
||
</p>
|
||
</div><!-- end div .span-6 -->
|
||
|
||
<div class="span-12 last">
|
||
<p class="prepend-top append-0">Thank you very much for purchasing our WordPress plugin. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page <a href="http://codecanyon.net/user/webfactory">contact form</a>. Have a good one!</p>
|
||
</div>
|
||
</div><!-- end div .borderTop -->
|
||
|
||
<hr>
|
||
|
||
<h2 id="toc" class="alt">Table of Contents</h2>
|
||
<ol class="alpha">
|
||
<li><a href="http://featured-posts-slider.webfactoryltd.com/">Online documentation, examples and help</a></li>
|
||
<li><a href="#installation">Installation</a></li>
|
||
<li><a href="#usage">Usage</a></li>
|
||
<li><a href="#configuration">Configuration</a></li>
|
||
<li><a href="#psd">PSD files</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
<li><a href="#credits">Sources and Credits</a></li>
|
||
</ol>
|
||
|
||
<hr>
|
||
|
||
<h3 id="installation"><strong>B) Installation</strong> - <a href="#toc">top</a></h3>
|
||
<h3>Installation</h3>
|
||
<ol>
|
||
<li>Download the plugin ZIP file.</li>
|
||
<li>Open your WP admin and go to Plugins -> Add New -> Upload. Browse for the ZIP file <em>premium-featured-posts-slider-plugin.zip</em> on your computer and hit “Install Now”.</li>
|
||
<li>Activate the plugin.</li>
|
||
</ol>
|
||
|
||
<h3>Placing the Slider in your theme</h3>
|
||
<ol>
|
||
<li>In WP admin, open Appearance - Premium Featured Posts Slider</li>
|
||
<li>All predefined options will be fine for now except "width". <strong>You have to set the width to fit your theme</strong>. It depends where you want to put the slider but the number is probably going to be around 600px. We don't recommend using "100%" as the width. Save settings.</li>
|
||
<li>If you have a widget area in header, or anywhere else you would like to put the slider just create a text widget and put the [fps] shortcode in it.</li>
|
||
<li>If you can't use the shortcode open <i>header.php</i> and put <code><?php the_featured_posts_slider(); ?></code> under your menu or on any other appropriate place depending on your theme's layout.</li>
|
||
</ol>
|
||
|
||
<h3>Upgrade</h3>
|
||
<ol>
|
||
<li>Deactivate and delete plugin in your WP admin -> Plugins.</li>
|
||
<li>Use the Add New -> Upload function to upload the new ZIP file.</li>
|
||
<li>Activate the plugin.</li>
|
||
</ol>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3 id="usage"><strong>C) Usage</strong> - <a href="#toc">top</a></h3>
|
||
|
||
<p>After positioning the FPS in your theme, using it very easy. Be sure to select a featured image for each of your posts because otherwise FPS won't know what image to associate with it. If you're displaying the latest content there's no need to manually select featured posts. The slider will simply show the last n posts. If you're displaying featured posts be sure to mark all content as featured that should be displayed in FPS. <br>All options are easily configurable via the options GUI and have inline help.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3 id="configuration"><strong>D) Configuration</strong> - <a href="#toc">top</a></h3>
|
||
|
||
<h3>Global FPS options</h3>
|
||
|
||
<p>Global FPS options are configured in WP Admin – Appearance – Premium Featured Posts Slider.</p>
|
||
|
||
<table>
|
||
<tr>
|
||
<td><b>Option name</b></td>
|
||
<td><b>Description</b></td>
|
||
<td><b>Default</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Width</td>
|
||
<td>Slider container width - <strong>this option has to be configured</strong>. Set the value according to your theme layout. Any CSS parsable value is accepted. We don't recommend using "100%". </td>
|
||
<td>600px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Slider Content</td>
|
||
<td>You can feature content that's been manually selected or use the latest content. This option has full support for custom post types and custom taxonomies.</td>
|
||
<td>latest posts</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Number of Slides</td>
|
||
<td>Number of posts shown in slider. If the number of "featured" posts is greater than "number of slides" the later will take precedence.</td>
|
||
<td>5</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Thumbnail Size</td>
|
||
<td>List of thumbnail sizes your theme supports. Select the size that best fits your site's layout and selected FPS layout. FPS registers it's own additional thumbnail size which can be customized. Thumbnail size can be chosen on a per-post basis while editing individual posts.<br>
|
||
Once the size is changed you have to re-build or re-upload the images. We suggest using <a href="http://codecanyon.net/item/image-sizes-manager/309402">Image Sizes Manager</a>.</td>
|
||
<td>medium</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Layout</td>
|
||
<td>FPS comes with 6 predefined layouts:
|
||
<ul>
|
||
<li>Layout 1 - Large image with title on image bottom</li>
|
||
<li>Layout 2 - Thumbnail with content on right</li>
|
||
<li>Layout 3 - Medium image with content on right</li>
|
||
<li>Layout 4 - Large image with title above image</li>
|
||
<li>Layout 5 - Thumbnail with content on left</li>
|
||
<li>Layout 6 - Medium image with content on left</li>
|
||
</ul>
|
||
If none fit your needs you can define your own using variables described later in this doc.</td>
|
||
<td>layout 2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Auto Generate Previous and Next Buttons</td>
|
||
<td>If checked previous and next buttons will be placed on left and right edges of the slider.</td>
|
||
<td>enabled</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Auto Generate Pagination Buttons</td>
|
||
<td>Choose from two pagination types below the slider: circles and thumbnails; or disable pagination.</td>
|
||
<td>circles</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Autoplay</td>
|
||
<td>Time between each automatic slide switch.</td>
|
||
<td>5 seconds</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Transition Effect</td>
|
||
<td>Effect used for transitioning between slides - slide or fade.</td>
|
||
<td>slide</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Transition Effect Speed</td>
|
||
<td>Duration of transition effect/animation in milliseconds.</td>
|
||
<td>350 milliseconds</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Stop on Hover</td>
|
||
<td>If checked autoplay will be stopped once user hovers over the slider.</td>
|
||
<td>enabled</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Randomize</td>
|
||
<td>Randomize slides order. By default they are orderd by publishing date, descending.</td>
|
||
<td>disabled</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Include CSS</td>
|
||
<td>If you wrote your own CSS for slides or copy/pasted our CSS code into some other file then disable this option, otherwise leave it enabled.</td>
|
||
<td>enabled</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Include jQuery</td>
|
||
<td>If your theme doesn't already have jQuery included enable this option to have FPS include it.</td>
|
||
<td>disabled</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Include Slides JS</td>
|
||
<td>If your theme already has Slides JS included uncheck this option.</td>
|
||
<td>enabled</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Shortcode Name</td>
|
||
<td>Write only the shortcode name, without brackets. If the shortcode name you want is already taken you'll be notified after saving.</td>
|
||
<td>fps</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Additional Image Size</td>
|
||
<td>Width, height and cropping option for FPS custom image size. <strong>Please note</strong>: changes to image size are not "retroactive" meaning they will only affect newly uploaded images. Use <a href="http://codecanyon.net/item/image-sizes-manager/309402">Image Sizes Manager</a> to re-build images.</td>
|
||
<td>330x330px, cropped</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Pagination Thumbnail Image Size</td>
|
||
<td>Width and height option for FPS navigation thumbnail image size. <strong>Please note</strong>: changes to image size are not "retroactive" meaning they will only affect newly uploaded images. Use <a href="http://codecanyon.net/item/image-sizes-manager/309402">Image Sizes Manager</a> to re-build images.</td>
|
||
<td>50x50px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Show Slider</td>
|
||
<td>If you want FPS shown only on certain pages but you placed FPS code in ie <em>header.php</em> set this option to enable conditional display on selected pages.</td>
|
||
<td>always display FPS</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>Per-post FPS options</h3>
|
||
|
||
<p>Per-post (page / custom post type) options are configured while editing and creating new content. Three variables can be set:</p>
|
||
<ul>
|
||
<li>featured - yes / no</li>
|
||
<li>layout - use FPS globally configured layout, one of 6 predefined or the custom one</li>
|
||
<li>thumbnail - use FPS globally configured thumbnail, or any other size available in your theme</li>
|
||
</ul>
|
||
|
||
<h3>Selecting featured content</h3>
|
||
|
||
<p>In post / page / custom post type list (table) you'll see a new column "Featured". By checking / unckecking the checkbox for a selected post you'll mark it as featured / not featured.</p>
|
||
|
||
<h3>List of variables available for use in custom layout code</h3>
|
||
|
||
<p>When writing custom layout code you can use the following variables. The code itself is plain HTML. Please note that the code you enter is the code <strong>for a single slide</strong> not the whole slider. To get some ideas how to write code look at the code of 6 predefined layouts.</p>
|
||
|
||
<ul id="layout-variables">
|
||
<li>{id} - post ID; ie: 34</li>
|
||
<li>{permalink} - post permalink URL; ie: http://www.myweb.com/my-pos/</li>
|
||
<li>{title} - post title; ie: My Nice Title</li>
|
||
<li>{excerpt} - post excerpt with "the_excerpt" filter applied. If there\'s no excerpt an empty string is returned.</li>
|
||
<li>{content-full} - complete post content with "the_content" filter applied.</li>
|
||
<li>{content} - post content before the "<!--more-->" separator with "the_content" filter applied.</li>
|
||
<li>{author} - post author "display name"; ie: John Doe</li>
|
||
<li>{author-link} - URL to author\'s archive page; ie: http://www.myweb.com/author/john/</li>
|
||
<li>{date} - post "published" date. Formatted using "date format" from Options - General; ie: 2011/02/22</li>
|
||
<li>{time} - post "published" time. Formatted using "time format" from Options - General; ie: 8:22 am</li>
|
||
<li>{comments-count} - total comments count; ie: 25</li>
|
||
<li>{categories} - comma separated list of category links</li>
|
||
<li>{tags} - comma separated list of tag links</li>
|
||
<li>{thumbnail} - thumbnail <IMG> HTML element complete with src, width, height and default WP CSS classes.</li>
|
||
<li>{thumbnail-src} - thumbnail file URL</li>
|
||
<li>{thumbnail-width} - thumbnail width in pixels; ie: 330.</li>
|
||
<li>{thumbnail-height} - thumbnail height in pixels; ie: 330.</li>
|
||
<li>{slider-width} - slider width you entered in FPS options; ie: 700px.</li>
|
||
</ul>
|
||
|
||
<h3>Using theme PHP functions</h3>
|
||
|
||
<p>FPS features two theme functions:</p>
|
||
<ul>
|
||
<li>the_featured_posts_slider() - echoes complete slider content</li>
|
||
<li>get_the_featured_posts_slider() - returns complete slider content in a string</li>
|
||
</ul>
|
||
|
||
<p>Both functions have no parameters so in most cases to implement FPS in your theme use:</p>
|
||
<pre>
|
||
<?php the_featured_posts_slider(); ?>
|
||
</pre>
|
||
|
||
<h3>Using the shortcode</h3>
|
||
<p>FPS shortcode ([fps]) is basically just a wrapper for <em>the_featured_posts_slider()</em> function. You can use it in text widgets to enable FPS. If you have a widget area in site's header implementing FPS is merely a matter of using the shortcode in a text widget.
|
||
<br>If your site's front-page is a static page you can of course put the shortcode in that page.</p>
|
||
|
||
<hr>
|
||
|
||
<h3 id="psd"><strong>E) PSD files</strong> - <a href="#toc">top</a></h3>
|
||
|
||
<p>FPS comes with two PSD files: <i>fps-arrows.psd</i> and <i>fps-pagination.psd</i>. First one contains the left and right navigation buttons, and the second one active and non-active pagination bullets that are usually placed below the slider.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3 id="faq"><strong>F) FAQ</strong> - <a href="#toc">top</a></h3>
|
||
|
||
<h3>It's not working!</h3>
|
||
<ul>
|
||
<li>Do you have <em>wp_footer()</em> function call in theme's footer? No? <a href="http://wordpress.org/support/topic/28-requires-wp_head-and-wp_footer-calls-in-theme-files">Add it</a>!</li>
|
||
<li>Do you have jQuery included in your theme? No? Enable "Include jQuery" option in FPS settings.</li>
|
||
<li>Do you have any posts selected as "featured"? No? Well then there are just no posts to show :)</li>
|
||
<li>Did you place the FPS function call or shortcode in your theme? No? You have to do it - see the <a href="/installation/">installation</a></li>
|
||
<li>Did you set the slider width in options? It's mandatory, you have to configure it.</li>
|
||
</ul>
|
||
|
||
<h3>My slider is all mangled up / CSS is broken</h3>
|
||
<p>FPS will not custom style your slides! It uses default WordPress CSS classes which your theme should already have defined such as <em>post</em> and <em>entry title</em>. It's alsoimportant that you choose the right image size to fit the current layout.<br />
|
||
Each slider has "fps-slide" class so you can easly target any elements with your CSS or write inline styles using the custom layout editor.<br>
|
||
If you still can't get it to work please contact us. We'll gladly help you!</p>
|
||
|
||
<h3>I changed the image size in options but the size is still the same!?</h3>
|
||
<p>Changes to image size are not “retroactive” meaning they will only affect newly uploaded images. Use <a href="http://codecanyon.net/item/image-sizes-manager/309402">Image Sizes Manager</a> to resize the old images.</p>
|
||
|
||
<h3>Can I place multiple Slider on the same page?</h3>
|
||
<p>No! There can only be one slider per screen at a time. You can place multiple sliders on different places ie: on homepage it shows below the header,on category pages it's in the middle ... But, only one per screen!</p>
|
||
|
||
<h3>Will this plugin slow my site down?</h3>
|
||
<p>No it won't. FPS has a minimal footprint and uses only one standard WP query to fetch featured posts. Everything else is a bit of JS and CSS.</p>
|
||
|
||
<hr>
|
||
<h3 id="credits"><strong>G) Sources and Credits</strong> - <a href="#toc">top</a></h3>
|
||
|
||
<p>No external PHP related assets were used in this script's code.</p>
|
||
|
||
<p>Other copyrighted assets used:</p>
|
||
<ul>
|
||
<li><strong>jQuery</strong><br>http://www.jquery.com<br>Licenced under MIT and GNU GPL version 2</li>
|
||
<li><strong>Slides</strong>, A Slideshow Plugin for jQuery<br>
|
||
copyright Nathan Searles<br>
|
||
www.slidesjs.com<br>
|
||
Licensed under the Apache License, Version 2.0
|
||
</li>
|
||
</ul>
|
||
|
||
<hr>
|
||
<p>Once again, <strong>thank you</strong> so much for purchasing this WordPress plugin. As stated at the beginning, we'd be glad to help you if you have any questions relating to this theme. We'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p>
|
||
|
||
<p class="append-bottom alt large"><strong>Web factory Ltd.</strong></p>
|
||
<p><a href="#toc">Go To Table of Contents</a></p>
|
||
|
||
<hr class="space">
|
||
</div><!-- end div .container -->
|
||
</body>
|
||
</html> |