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 -->
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(']]>', ']]>', $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!