WordPress.org

Ready to get started?Download WordPress

Forums

Featured Page Widget
[resolved] How to make selected pages display horizontally (5 posts)

  1. DivaVocals
    Member
    Posted 2 years ago #

    I like this plugin, and see how I can make GREAT use of this, but I'd like to know if there is a way to make multiple selected pages appear horizontally instead stacked vertically. Any help would be appreciated..

    http://wordpress.org/extend/plugins/featured-page-widget/

  2. DivaVocals
    Member
    Posted 2 years ago #

    Okay I'm kinda halfway there with this, but was unable to get the custom template to work. (even though I put the template in the specified folder, this plugin still used the standard.php template file..) So I had to modify the standard layout to make it happen.

    I replaced the entire contents of the wp-content/plugins/featured-page-widget/templates/standard.php file with the following code:

    <?php
    if ( preg_match('#' . basename(__FILE__) . '#', $_SERVER['PHP_SELF']) ) {
         die('You are not allowed to call this page directly.');
    }
    /**
     * order-list.php - Displays entries as an ordered list with the excerpt as the title of the link.
     *
     * This can be copied to a folder named 'featured-page-widget' in your theme
     * to customize the output.
     *
     * @package Featured Page Widget
     * @subpackage templates
     * @author GrandSlambert
     * @copyright 2009-2011
     * @access public
     * @since 2.0
     */
    ?>
    
    <ul id="featured-post-list">
         <?php if ( $featured->have_posts() ) : while ($featured->have_posts()) : $featured->the_post(); ?>
    
                   <li id="featured-post-list" class="featured-post-widget">
         <?php if ( has_featured_post_image ( ) ) : ?>
              <div class="featured-post-image align<?php echo $instance['imagealign']; ?>">
                   <?php the_featured_post_image(); ?>
              </div>
         <?php endif; ?>
    	      <h3 id="featured_post_title_<?php the_id(); ?>" class="featured-post-title">
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
         </h3>
         <div id="featured_post_content_<?php the_id(); ?>" class="featured_post_content">
              <?php the_featured_post_content(); ?>
         </div>
         <p  id="featured_post_more_link_<?php the_id(); ?>" class="featured_post_more_link" style="text-align:<?php echo $instance['linkalign']; ?>;">
              <?php the_featured_post_read_more_link(); ?>
         </p>
                   </li>
         <?php endwhile;
              endif; ?>
    </ul>

    I added the following declarations to the bottom of the stylesheet wp-content/plugins/featured-page-widget/templates/featured-page-widget.css.

    ul#featured-post-list,
    ul#featured-post-list li {
    /* Setting a common base */
    margin: 0;
    padding: 0;
    }
    
    ul#featured-post-list li {
    display: inline-block;
    width: 32.9%;
    min-height: 300px;
    background: #ccc;
    }

    You may need to adjust the width and min-height settings in the stylesheet for your own layout, but with these settings I was able to get three pages appear in a horizontal layout.

    You can see the result here: http://i53.tinypic.com/ei9wu8.png

    Next up is to replace the "Read More" link with a button..

  3. hsiaowei0913
    Member
    Posted 2 years ago #

    thanks for this!
    this widget is very good and easy to use!
    and I also think it's pretty good if you can make it horizontally!
    I saw you used it for post! but I want to use it for video.
    I tried what you said but it turned out an error " no header...." something like that.

    Do you know how to fix it?

  4. DivaVocals
    Member
    Posted 2 years ago #

    Nope.. I've moved on..

  5. whoo
    Member
    Posted 2 years ago #

    A much easier way is to create a 'featured-page-widget' folder in your theme (that way if you update the plugin you wont lose all your changes) copy the 'featured-page-widget.css' to that folder and comment out or delete the 'clear: both;' css command on line 13.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic