FeaturedPosts How to Create a Layout

From IThemes Codex
Revision as of 15:21, July 16, 2013 by Elise (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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.


← Back to FeaturedPosts Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox