Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Adding in an RSS Feed Display WordPress

  • SOLVED

I can't figure out how to do this so hopefully will be able to get a little help!

Take a look at [[LINK href="http://www.weeepics.com/Image.jpg"]]this image[[/LINK]].

I'm building this site using the Pure Vision WP theme - [[LINK href="http://themeforest.net/item/purevision-wordpress-theme/156538"]]see here[[/LINK]].

Basically, I didn't want the slider / fader that comes with the theme as I want two panels and then a thinner panel with a feed to the news/blog area. (as seen in the linked image)

I've managed to edit the cycle1_display.php file to achieve the first two panels (Featured 1 and Featured 2 as seen in the image above). I have also managed to add the thin white bar the feed display will sit on (as a you'll see in the code below)

However, I'm not sure how to go about getting the news feed to sit ontop of this white graphic.
Any ideas?

This is the cycle1_display.php file in question...
<?php

$c1_slides_array = explode( ',', $purevision_options['c1_slides_order_str'] );
$hide_controls = ( count($c1_slides_array) < 2 ) ? 'visibility:hidden': '';
$c1_no_3d_shadow = $purevision_options['c1_remove_3d_shadow'];
if ( $purevision_options['c1_remove_image_frame'] == "yes" ) {
$c1_image_width = 364;
$c1_image_height = 400;
} else {
$c1_image_width = 364;
$c1_image_height = 374;
}
?>

<div id="c1-header">
<div id="header-content" class="container_24">
<div class="c1-slideshow">
<ul id="c1-slider">
<?php foreach( $c1_slides_array as $slide_row_number ) :
$c1_slide_link_url = $purevision_options['c1_slide_link_url_'.$slide_row_number];
$c1_slide_link_target = $purevision_options['c1_slide_link_target_'.$slide_row_number]; ?>
<li>
<div class="c1-slide-img-wrapper">
<?php echo ($c1_slide_link_url) ? "<a href='http://www.bogbainfarm.com/activities-2/' target='_{$c1_slide_link_target}'>" : '' ; ?>
<a href="http://www.bogbainfarm.com/activities-2/"><img src="http://www.bogbainfarm.com/wp-content/themes/purevision/sliders/cycle/cycle1/Outdoor%20Activities.png" alt="Outdoor Activities at Bogbain Farm" class="slide-img" width="<?php echo $c1_image_width; ?>" height="<?php echo $c1_image_height; ?>" /> </a>
<?php echo ($c1_slide_link_url) ? "</a>" : '' ; ?>

<a href="http://www.bogbainfarm.com/venue-hire/"><img src="http://www.bogbainfarm.com/wp-content/themes/purevision/sliders/cycle/cycle1/Events%20and%20Venue%20Hire.png" alt="Events and Venue Hire at Bogbain Farm" class="slide-img" width="<?php echo $c1_image_width; ?>" height="<?php echo $c1_image_height; ?>" /> </a>
<?php echo ($c1_slide_link_url) ? "</a>" : '' ; ?>

<a href="http://www.bogbainfarm.com/activities-2/"><img src="http://www.bogbainfarm.com/wp-content/themes/purevision/sliders/cycle/cycle1/Latest-News-Bar.png" alt="Outdoor Activities at Bogbain Farm" class="slide-img" width="204px" height="395px" /> </a>
<?php echo ($c1_slide_link_url) ? "</a>" : '' ; ?>


</div>
</li>
<?php endforeach; ?>
</ul>
<input type="hidden" class="base-url" value="<?php bloginfo('wpurl'); ?>" />
</div>
<!-- end c1-slideshow -->
<span id="c1-resumeButton" style="<?php echo $hide_controls; ?>"><a href="" title="<?php esc_attr_e('Play', 'purevision'); ?>" class="pngfix"><?php esc_html_e('Play', 'purevision'); ?></a></span>
<span id="c1-pauseButton" style="<?php echo $hide_controls; ?>"><a href="" title="<?php esc_attr_e('Pause', 'purevision'); ?>" class="pngfix"><?php esc_html_e('Pause', 'purevision'); ?></a></span>
<div id="c1-nav" style="<?php echo $hide_controls; ?>"></div>

</div>
<!-- end header-content -->
<?php if ( !$c1_no_3d_shadow == 'yes' ) : ?>
<div class="clear"></div>
<div id="c1-shadow" class="container_24 pngfix"> </div>
<?php endif; ?>
</div>
<!-- end c1-header -->

Answers (1)

2011-03-20

AdamGold answers:

One option is to use this plugin:
http://wordpress.org/extend/plugins/recent-posts

And just call mdv_recent_posts(); in your thin white area:
<div id="thin_white_area">
<?php mdv_recent_posts(); ?>
</div>


AdamGold comments:

Another option is to insert this code into the DIV of the thin white area:

<?php
$args = array( 'numberposts' => 1, 'order'=> 'ASC', 'orderby' => 'date' );
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
<div>
<?php the_date(); ?>
<br />
<?php the_title(); ?>
<?php the_excerpt(); ?>
</div>
<?php endforeach; ?>

Edit 'numberposts' => 1 to the number of posts you would like to display.
Edit 'orderby' => 'date' to the order method you would like to use. (I recommend date, title or menu_order) read more here: http://codex.wordpress.org/Function_Reference/WP_Query#Order_.26_Orderby_Parameters


FPHT comments:

Thanks for the quick reply. That worked, but how do I get the white area to sit behind the feed. The feed has just pushed it down. Have I put the code in the right place?

Also, is it possible to make the excerpt shorter? I tried adding the suggested function into function.php but wordpress didn't like that!

This is how it now looks....

<?php

$c1_slides_array = explode( ',', $purevision_options['c1_slides_order_str'] );
$hide_controls = ( count($c1_slides_array) < 2 ) ? 'visibility:hidden': '';
$c1_no_3d_shadow = $purevision_options['c1_remove_3d_shadow'];
if ( $purevision_options['c1_remove_image_frame'] == "yes" ) {
$c1_image_width = 364;
$c1_image_height = 400;
} else {
$c1_image_width = 364;
$c1_image_height = 374;
}
?>

<div id="c1-header">
<div id="header-content" class="container_24">
<div class="c1-slideshow">
<ul id="c1-slider">
<?php foreach( $c1_slides_array as $slide_row_number ) :
$c1_slide_link_url = $purevision_options['c1_slide_link_url_'.$slide_row_number];
$c1_slide_link_target = $purevision_options['c1_slide_link_target_'.$slide_row_number]; ?>
<li>
<div class="c1-slide-img-wrapper">
<?php echo ($c1_slide_link_url) ? "<a href='http://www.bogbainfarm.com/activities-2/' target='_{$c1_slide_link_target}'>" : '' ; ?>
<a href="http://www.bogbainfarm.com/activities-2/"><img src="http://www.bogbainfarm.com/wp-content/themes/purevision/sliders/cycle/cycle1/Outdoor%20Activities.png" alt="Outdoor Activities at Bogbain Farm" class="slide-img" width="<?php echo $c1_image_width; ?>" height="<?php echo $c1_image_height; ?>" /> </a>
<?php echo ($c1_slide_link_url) ? "</a>" : '' ; ?>

<a href="http://www.bogbainfarm.com/venue-hire/"><img src="http://www.bogbainfarm.com/wp-content/themes/purevision/sliders/cycle/cycle1/Events%20and%20Venue%20Hire.png" alt="Events and Venue Hire at Bogbain Farm" class="slide-img" width="<?php echo $c1_image_width; ?>" height="<?php echo $c1_image_height; ?>" /> </a>
<?php echo ($c1_slide_link_url) ? "</a>" : '' ; ?>


<?php

$args = array( 'numberposts' => 2, 'order'=> 'ASC', 'orderby' => 'date' );

$postslist = get_posts( $args );

foreach ($postslist as $post) : setup_postdata($post); ?>

<div>


<br />

<?php the_title(); ?>
<?php the_date(); ?>

<?php the_excerpt(); ?>
</div>

<?php endforeach; ?>

<a href="http://www.bogbainfarm.com/activities-2/"><img src="http://www.bogbainfarm.com/wp-content/themes/purevision/sliders/cycle/cycle1/Latest-News-Bar.png" alt="Outdoor Activities at Bogbain Farm" class="slide-img" width="204px" height="395px" /> </a>
<?php echo ($c1_slide_link_url) ? "</a>" : '' ; ?>


</div>
</li>
<?php endforeach; ?>
</ul>
<input type="hidden" class="base-url" value="<?php bloginfo('wpurl'); ?>" />
</div>
<!-- end c1-slideshow -->
<span id="c1-resumeButton" style="<?php echo $hide_controls; ?>"><a href="" title="<?php esc_attr_e('Play', 'purevision'); ?>" class="pngfix"><?php esc_html_e('Play', 'purevision'); ?></a></span>
<span id="c1-pauseButton" style="<?php echo $hide_controls; ?>"><a href="" title="<?php esc_attr_e('Pause', 'purevision'); ?>" class="pngfix"><?php esc_html_e('Pause', 'purevision'); ?></a></span>
<div id="c1-nav" style="<?php echo $hide_controls; ?>"></div>

</div>
<!-- end header-content -->
<?php if ( !$c1_no_3d_shadow == 'yes' ) : ?>
<div class="clear"></div>
<div id="c1-shadow" class="container_24 pngfix"> </div>
<?php endif; ?>
</div>
<!-- end c1-header -->


AdamGold comments:

What is the DIV of the white area? I can't see it in your code.

About the_excerpt, put this code in your functions.php file to make it shorter:

add_filter('the_excerpt', 'my_excerpts');
function my_excerpts($content = false) {
global $post;
$mycontent = $post->post_excerpt;

$mycontent = $post->post_content;
$mycontent = strip_shortcodes($mycontent);
$mycontent = str_replace(']]>', ']]&gt;', $mycontent);
$mycontent = strip_tags($mycontent);
$excerpt_length = 55;
$words = explode(' ', $mycontent, $excerpt_length + 1);
if(count($words) > $excerpt_length) :
array_pop($words);
array_push($words, '...');
$mycontent = implode(' ', $words);
endif;
$mycontent = '<p>' . $mycontent . '</p>';
return $mycontent;
}


Edit $excerpt_length = 55; to set the desired length.

Now, use my_excerpts instead of the_excerpt.


FPHT comments:

Thanks, that sorted the length. I don't have it in a DIV. How should I go about doing that?

:-)


AdamGold comments:

I would do something like that:

<div class="white-area">

<?php



$args = array( 'numberposts' => 2, 'order'=> 'ASC', 'orderby' => 'date' );



$postslist = get_posts( $args );



foreach ($postslist as $post) : setup_postdata($post); ?>



<div>





<br />



<?php the_title(); ?>

<?php the_date(); ?>



<?php the_excerpt(); ?>

</div>



<?php endforeach; ?>
</div>


And the CSS:
.white-area {
background: #FFF;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}


FPHT comments:

That worked perfectly, thanks! I just had to define the dimensions of the white-area and then add a margin so it would sit beside the other bits, and it worked!!

Many thanks!