FeaturedPosts

(Difference between revisions)
Jump to: navigation, search
(Added - Extra Customizations of any kind: section)
(Changed "Extra Customizations of any kind" to - Customize FeaturedPosts: - Added "Customize Excerpt Box CSS" section)
Line 147: Line 147:
 
Good luck, and if you have any questions please feel free to post those in our support forum.
 
Good luck, and if you have any questions please feel free to post those in our support forum.
  
==Extra Customizations of any kind==
+
==Customize VidEmbed==
  
 +
====Extra Customizations Policies====
 
[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check our the official policy and details on any Extra Customizations]
 
[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check our the official policy and details on any Extra Customizations]
 +
 +
====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.
 +
<pre brush"css">
 +
.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 */
 +
}
 +
</pre>
 +
 +
*Related thread:
 +
**http://ithemes.com/forum/index.php?/topic/18184-formatting-excerpt/
  
 
==Additional Resources==
 
==Additional Resources==

Revision as of 14:08, September 13, 2011


Series: DisplayBuddy

Contents

Description

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.


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.

Featuredposts-layouts.png

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.

Global Plugin Settings

Here is a list of the settings and a description of what each one will effect.

  • Content Category - If you are using a post type that has categories this will allow you to specify if you would only like content from a specific category to be displayed.
  • Post Type - This setting allows you to choose a post type for Featured Posts from a list of the existing post types on your site.
  • Number of posts - Select the number of posts that you would like to be displayed in Featured Posts.
  • Number of words to show in excerpt - Featured Posts displays an except of each post and this setting allows you to set the maximum amount of words that it will display.
  • Custom Read More link - Since this plugin is meant to show excerpts of the posts it also adds a read more link that will allow visitors to easily navigate to the full post. This option allows you to set what that custom read more link text is shown.
  • Time between automatic transitions - Featured Posts automatically transitions through the posts that have been specified and this setting controls how much time there is between each automatic transition.
  • Time after pause until autostart resumes - When Featured Posts is being displayed on the front end of your site it has different buttons and links that allow visitors to your site to manually control when transitions happen. This setting allow you to set how much time there is between when the visitor does and manual transition and when the Featured Posts will start automatically transitioning again.
  • Slide speed - This setting controls how long the slide transition between each post will take.


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 Featured Posts on your site

Featured Posts 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 Featured Posts widget into the widget area that you would like for it to display in.

Shortcode

If you would like to add a Featured Posts 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.


Layouts

Featured Posts 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 Featured Posts 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 Featured Posts 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 VidEmbed

Extra Customizations Policies

Check our the official policy and details on any Extra Customizations

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 */
}

Additional Resources

  1. Free Plugins by PluginBuddy
  1. PluginBuddy Tutorials
  2. PluginBuddy.com
  3. Support Forum
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox