Featured Pages Unlimited for WordPress - Documentation

The  Featured Pages Unlimited plugin for WordPress is a simple and powerful solution to engage your visitors on your most visited page : home. The plugin allows you to select the most important content of your website, and display it on home beautifully, with a cool hover effect and call to action buttons. All options are set in live preview with the WordPress customizer which makes it ridiculously simple to use.

The Featured Pages Unlimited plugin works with any theme. In this documentation, we will be using WordPress Twenty Thirteen Theme to show you how it's done perfectly!

First of all, you'll need to  install the WordPress plugin. 

Note that this feature is included in the Customizr Pro theme, so you won't have to install the plugin when using Customizr Pro.

Start customizing the Featured Pages

1. In your WordPress Admin Menu, go to Appearance > Customize > Main Content > Featured Pages.
2. Look for Display home featured pages area, click on the drop-down and select Enable.

Location, Number and Layout

1. Select a Location. Click on drop-down to select
   • Before Content (Select this to automatically display featured pages above home page content)
   • Custom Location (Select this to use a custom hook, and place the featured pages anywhere on your home page)
2. Advanced developers can define a custom hook to display your featured pages.
   • This text input will appear, if you select Custom Location in the previous setting.
   • Add your custom hook in this field without any quotes, space or special characters (it will be stripped out) . Ex : my_custom_hook.
   • In your WordPress template, simply add <?php do_action("my_custom_hook") ?> where you want to display your featured pages. Note : when customizing any theme, it is important to do it with a child theme, otherwise you'll lose your customizations when updating the theme. More information about child theme here.
3. Featured Pages Number. Use this setting to determine how many featured pages to show.
   • Set a number of featured pages, by clicking on the dial or typing in the number. In this example, we will select 4 featured pages.
   • Save and REFRESH THE CUSTOMIZER PAGE, the subsequent relevant settings will appear.
4. Feature Pages Layout. Use this setting to set the number of block by line.
   • In this example we are using 4 featured pages, click on drop-down and select 4 blocks by line.
   • The blocks by line depends on number of featured pages.
   • For example, to divide 6 featured pages into two rows, we will select 3 blocks by line.
5. Now in your preview panel, you will see the following.

   

6. Disable reordering for devices > 768px (portrait width of tablets).
   • Check this box if you want to display Featured Pages by lines on tablet's portrait layout.
7. Background color.
   • Use this color picker to select the background color of your featured pages block.
   • Default is white color. For this example, we will select light grey color.
8. Now in your preview panel, you will see the following.

   

9. Enable random colors.
   • This option will apply a beautiful flat design look to your front page with random colors.
10. Let's look at our preview panel now.

    

Thumbnails

1. Display thumbnails.
   • The images are set with the "featured image" of each pages or posts.
   • Uncheck the setting to disable the featured images.
2. Override random colors.
   • If this option is checked and you have enable the random color option, your page/post thumbnail will be displayed instead of the random color. (item 9 under Location, Number and Layout)
   • Note: At the moment, you will not see any thumbnail, because you have not selected the featured page, we will discuss this in the last section of this documentation.
3. Thumbnails shape. In this setting, there are 4 options to select. Try them out and see how it looks in preview panel.
   • Rounded, expand on hover
   • Rounded, no expansion
   • Squared, expand on hover
   • Squared, no expansion
4. Dynamic thumbnail centering on any devices.
   • This option dynamically centers your images on any devices vertically or horizontally (without stretching them) according to their initial dimensions.

Title and Excerpt

1. Display title.
   • Check on this setting to display.
2. Display excerpt.
   • Check on this setting to display.
3. Title / excerpt color.
   • Use this color picker to select a font color for your title and excerpt
4. Override random colors.
   • If you check on this check box, your Title / excerpt color setting will override the random color (item 9 under Location, Number and Layout).
5. Limit excerpt to 200 chars.
   • It's advisable to keep this setting checked, in order to limit the excerpt to 200 characters, so that it does not break the layout of the featured pages block.

Buttons

1. Display buttons.
   • Check this check box to display a button on your featured pages.
2. Button Text.
   • Enter a text for your button.
3. Select a button style.
   • Click on the drop down to select a button style (button color scheme).
   • There are 9 styles for you to choose.
   • In this demo, we will select blue color.
4. Override random colors.
   • If enabled, your custom button style (Select a button style) setting will override the random color (item 9 under Location, Number and Layout).
5. Button text color.
   • Click on this color picker to select a color for your button text.

Featured Pages Selection

1. Important Note:
   • The number of inputs shown in this section, corresponds to the Featured Pages Number set on item 3 of Location, Number and Layout.
   • If you are not seeing the correct number of inputs, please click on "Save and Publish" button found on top left corner. Follow by refreshing your webpage, and your settings will appear.
2. Home featured page one to three, Custom featured page 4 to ?
   • Depending on the Featured Pages Number set on item 3 of Location, Number and Layout, you will get the corresponding inputs in running order.
   • Click one the drop-down to assign your page. (Remember to create your posts or pages with title, content, and featured image before hand).
   • You are able to assign post or page to this setting.
   • After, you have assigned all the featured pages, this is what you will see in your preview panel.
3. Featured text one to ?
   • You need to select a page/post first.
   • Leave this field empty if you want to use the excerpt. You can include HTML tags.
   • Enter some text to replace the excerpt if you desire. For example: Some custom excerpt for sample page <a href='http://google.com'>This is a link!</a>
   • After, you have entered all featured text, this is what you will see in your preview panel.

Custom CSS

1. In this demo, you may have noticed the white gab between the menu of Twenty Thirteen Theme and the featured pages block.

   

2. If you have set the background color of featured pages block to white, you will not see the gab.
3. However in this example, you will need to add some custom css code to close the gab.
4. Add the following codes in your child theme stylesheet or theme stylesheet
   .fpc-container.fpc-marketing {

   margin : 0 !important ;

   }

We are done!

1. Please see screenshot of the result of this tutorial.

   

Example Setups

1. The following are some possible setups and screenshots for your reference.

Example - Random Colors Only

1. Go to Location, Number and Layout -> Background color.
   • Select white from color picker.
2. Go to Thumbnails -> Override random colors.
   • Uncheck this setting.
3. Go to Title And Excerpt -> Override random colors.
   • Uncheck this setting.
4. Go to Buttons -> Override random colors.
   • Uncheck this setting.
5. Click on "Save and Publish" button on the top left corner of your webpage.
6. You may have notice a dotted horizontal line on your front end. You may want to use the following CSS code to remove it.
   .home hr {

   background : none !important ;

   }
7. This is what it looks like on your front end.

   

Example - SIx Featured Pages and 3 Blocks By Line

1. Go to Location, Number and Layout -> Featured Pages Number.
   • Set the number to 6
2. Go to Location, Number and Layout -> Featured Pages Layout.
   • Select 3 blocks by line.
3. Click on "Save and Publish" button on the top left corner of your webpage.
4. Refresh your webpage and the navigate back to Featured Pages.
5. Go to Thumbnails -> Override random colors.
   • Check this setting.
6. Go to Title And Excerpt -> Title / excerpt color.
   • Click on color picker and set a color.
7. Go to Title And Excerpt -> Override random colors.
   • Check this setting.
8. Go to Buttons -> Select a button style.
   • Click on drop-down and select a style.
9. Go to Buttons -> Override random colors.
   • Check this setting.
10. Go to Featured Pages Selection.
    • Select your featured pages and enter featured texts if you want to overwrite excerpt.
11. Click on "Save and Publish" button on the top left corner of your webpage.
12. This is what it looks like on your front end.

    

Example - Square Thumbnails

1. Continuing from the above example.
2. Go to Thumbnails -> Thumbnails shape.
   • Click on drop-down and select Squared, expand on hover or Squared, no expansion.
3. Note: Explanation for the difference between expand on hover or no expansion.
   • When you place your cursor on the thumbnail, it will "grow" larger, if you select expand on hover.
   • The thumbnail will not "grow" if you select no expansion.
4. Click on "Save and Publish" button on the top left corner of your webpage.
5. This is what it looks like on your front end. The screenshot shows expand on hover for Thumbnail of Sample Page 1.

   

Example - No Thumbnails

1. Continuing from the above example.
2. Go to Thumbnails -> Display thumbnails.
   • Uncheck this setting.
3. Click on "Save and Publish" button on the top left corner of your webpage.
4. This is what it looks like on your front end.

   

We have reached the end of this documentation. Hope it's useful :)