Featured Posts is a tool that will display your latest posts with featured images attached to them as rotating slides. With easy to use controls and stylish animations you can easily display more information to your users in an eye-pleasing manner.

Content

FeaturedPost Basics
How FeaturePosts Works
Settings
Layout Settings
Select Layout
Settings for Layout
Adding Images
Displaying FeaturePosts on Your Site
Widget
Shortcode
Layouts
How to Create a Layout
Customize Excerpt Box CSS

FeaturedPosts Basics

How FeaturedPosts Works.

Even though FeaturedPosts is very powerful, it works in a very simple way: it shows the latest posts which have a Featured Image attached to them.

It then takes those posts and shows them in its FeaturedPosts area, to the end user, along with the featured images associated with those posts.

Follow these steps to have FeaturedPosts work right away:
- Add a new post OR Edit an existing post.
- Upload OR Attach an image to that post.
- In the Image uploader window OR the image selector screen, click "Use as Featured Image" link under the image properties.
- Save.
Done! Your FeaturedPosts will now show that post as one of the posts inside the Featured Posts area.

Remember: the number of posts you show in FeaturedPosts decided how many posts show up, and which ones (the latest ones), in the Featured Posts area. Featured posts are shown in order based on most recently published displayed first and oldest last (descending).

Settings

Featured Posts has one central page with all of the plugin's settings on it. The settings can be divided into two main sections, Layouts and Global settings.

Layout Settings

Select Layout

The top of the settings page allows you to select which layout you would like to use by clicking an image representation of the layout you would like to use.

Settings for Layout

Featured Posts will store and display different width and height settings for each layout. Even if you select another layout the settings for all of your Featured Posts layouts will be saved where it can be accessed later. These settings will be used to determine the dimensions of the different elements in the layout.

Adding Images

The Featured Posts plugin uses the featured images that are attached to the posts. So in order to add an image to a specific slide you will set that image as the featured image for that post using WordPress's built in post editor.

Displaying FeaturedPosts on Your Site.

FeaturedPosts can be added to your site using two different methods, widgets or shortcode.

Widget

Navigate to the Widgets area under Appearance in the WordPress Admin area. Drag the FeaturedPosts widget into the widget area that you would like for it to display in.

Shortcode

If you would like to add a FeaturedPosts group to a post or page all you have to do is copy [featuredposts] and paste it the content of the page or post you would like for it to display in.

To display FeaturedPosts in theme template files like page.php, use

<?php echo do_shortcode('[featuredposts]'); ?>

Layouts

Overview

FeaturedPosts has multiple layouts that control how the different posts content is organized and styled when it is displayed on the front end of your site.

How to Create a Layout.

The layouts are stored in a folder labeled "layouts" in the FeaturedPosts plugin files.

1. To start creating a layout all you need to do is navigate into the layouts directory and create a new directory and name it the name you would like for your layout. It is recommended to copy an existing layout and rename it so that you will already have all of the files needed for a layout.

2. Now that you have created a directory to store all of your layouts files in it is time to go inside of that layout directory and started creating/editing the necessary files. Each layout contains the following files:

layout.txt
settings.txt
activate.txt
init.txt
style.css
screenshot.png

3. The layout.txt file contains what content will be displayed in each slide. The code below shows the layout.txt file from the default layout. You can add or remove anything that you would like to show up on each slide. The code below calls for the featured image(if there is one available for the post), the post title, the date the post was published and the post excerpt.

$output .= '<div>';

$output .= '<div class="featuredposts-image">';
if ( has_post_thumbnail() ) {
	// Can NOT always rely on using the named size 'featuredposts' in some situations.
	$inlayout = $this->_options['layouts'][$this->_options['layout']];
	$imgsize = 'pb_featuredposts' . $inlayout['image_width'] . 'x' . $inlayout['image_height'];
	$output .= '<a href="' . get_permalink() . '">' . get_the_post_thumbnail( $post->ID, $imgsize ) . '</a>';
}
$output .= '</div>';

$output .= '<div class="featuredposts-excerpt"><h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
$output .= '<span class="date">' . get_the_time( get_option( 'date_format' ) ) . '</span>';
$output .= get_the_excerpt();
$output .= '</div>';

$output .= '</div>';

4. The settings.txt file has the different settings for that layout. The default layout settings are:

Entity Width
Entity Height
Image Width
Image Height

Here is what the code in the settings.txt file looks like to create those settings:

width,int,Entity Width,[Default: 400] - Width in pixels of the featured posts entity
height,int,Entity Height,[Default: 300] - Height in pixels of the featured posts entity
image_width,int,Image Width,[Default: 400] - Width in pixels of the featured posts image
image_height,int,Image Height,[Default: 300] - Height in pixels of the featured posts image

Each line has the different variables for each setting divided by commas. Here is a list of the different variables in the first line of code and what they each stand for:

width - this is what the setting will be saved as in the database.
int - the type of input that is needed for this setting.
Entity Width - what the setting will be labelled on the settings page.
[Default: 400] - Width in pixels of the featured posts entity - what the tooltip will display when hovered.

Those settings will be saved in the database so that they can be referenced later to control different elements of your layout. These settings can be whatever you want, and you can have as many or as few as you want.

5. The activate.txt file is used for setting default values for your layout settings you created in the settings.txt file. This file only needs to have an array of the default settings values. Below is an example of the default layout activate.txt file.

$defaults = array(
	'width'			=>	'600',
	'height'		=>	'500',
	'image_width'		=>	'600',
	'image_height'		=>	'300',
);

6. Now it is time to create your init.txt file, this is where all of the fun stuff happens. This file is used to create the some of the layout styles using the layout settings that you created in the settings.txt file. Using php in this file you can preform calculations to set different dimensions and other options for your layout. Here is the code for the default layouts init.txt file.

$excerpt_padding = '10'; // Integer padding amount.

$css .= '.featuredposts .next,.featuredposts .previous {';
$css .= '	top: ' . ( round( $options['image_height'] / 2 ) - 20 ) . 'px;';
$css .= '}';

$css .= '.featuredposts-excerpt {';
$css .= '	height: ' . ( $options['height'] - $options['image_height'] ) . 'px;';
$css .= '}';

$css .= '.featuredposts-excerpt {';
$css .= '	padding: ' . $excerpt_padding . 'px;';
$css .= '	width: ' . ( $options['width'] - ( 2 * $excerpt_padding ) ) . 'px !important;';
$css .= '}';

The first section of code is taking the image_height value and dividing it by 2 then subtracting 20 that value to set how far from the top the left and right navigation arrows will be.

The second second section of code is setting the height for the post excerpt section of the slide by subtracting the image_height from the entity height.

The thrid section of code is setting the width of the post excerpt section by taking the entity width and subtracting double the padding to account for that in the width.

You are not limited to these style calculations at all, you create any styles that you want. if you would like to see some interesting calculations you can look at the init.txt file in the right-solid layout or the right-solid-dark layout.

7. The style.css file is used for your styles that you always want to be applied to your layout.

8. The last file is the screenshot.png file, this image will be displayed in the admin area where you select the layout you would like to use.

9. There are some optional image files that you may want to use for navigation: next.png, previous.png, and pagination.png. You can use any image files that you like for that. After you have added that layout directory to the featured posts layouts folder it will automatically show up in the layout options in the FeaturedPosts section of your WordPress admin area.

Good luck, and if you have any questions please feel free to post those in our support forum.

Customize FeaturedPosts

Customize Excerpt Box CSS

You can change the color, height, size, positioning or anything else for the excerpt box that is shown on FeaturedPosts by using the template below. You can add any CSS to it or change any of the existing numerical values to suit your needs.

.featuredposts-container .featuredposts-slides .featuredposts-excerpt {
     height: 150px; /* changes the height of the excerpt box */ 
     margin-top: 50px; /* changes the position of the entire box from the top area */
     width: 50px /* changes the width of the excerpt box */
}

FeaturedPosts