Simple WordPress Themes

Hi,
Screenshot attached: http://awesomescreenshot.com/05edifn9d showing sidebar pushed down screen presumably by an overwidth content section. I’m beginning to understand some of the layout but this one has me stumped!

The page uses the Hidden header template with a right hand sidebar. The content comes from 3 recent exceprts shortcodes.

Can you point me to the layout/css that drives this behaviour?

Could you also point me at the code for the recent shortcode - I’d lke to add in an offset.

thanks
Nick

OK found the latest shortcode code. I’ve amended it to create a new front page latest shortcode to populate elements of the content templates automatically. It really only makes sense if you have an excerpt to display. Note also the addition of an offset. Use this with say three content template areas across the screen: one box has an offset of 0, the next and offset of 1 and the thridan offset of 2.

This code goes beneath the function st_latest code in content_functions.php.

Hope someone finds it useful!

NIck

function fp_latest($atts, $content = null) {
 extract(shortcode_atts(array(
 "num" => '5',
 "thumbs" => 'false',
 "excerpt" => 'false',
 "width" => '100',
 "height" => '100',
 "offset" => '0',
 "cat" => ''
 ), $atts));
 global $post;
 $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&offset;='.$offset.'&category;='.$cat);
   foreach($myposts as $post) :
  setup_postdata($post);
  $result='<span class="clearfix">';
  $result.='<h3>'.the_title("","",false).'</h3>';
   if (has_post_thumbnail() && $thumbs == 'true') {
    $result.= '<img alt="'.get_the_title().'" class="alignleft" src="'.get_bloginfo('stylesheet_directory').'/thumb.php?src='.get_image_path().'&h='.$height.'&w='.$width.'"/>';
   }
  if ($excerpt == 'true') {
   $result.= get_the_excerpt().'<div class="button"><a href="'.get_permalink().'">Read more</a></div>';
  }

  endforeach;
   $result.='</span>';
 return $result;
}

add_shortcode("front-page-latest", "fp_latest");
// Example Use: [front-page-latest excerpt="true" thumbs="true" width="50" height="50" num="5" offset="2" cat="8,10,11"]

Thanks or sharing. A live example or screenshot of the finished product would be nice to see as well.

As for the overlapping content, have you tested your markup against the HTML Validator? It could just be an unclosed div.

If you could post your markup to pastebin, I’ll give it a look as well.

Pastebin link: http://pastebin.com/X4zpQnin

(Hope this is right, not used PB before)

Validation fell over at the point where the theme tried to assign the right sidebar wrapper about line 167. The markup is from a simple page where I had added the lastest shortcode into the content area of default template with right sidebar. If I remove the shortcode the page works just fine. This is the standard Breeze shortcode, not the modified one I posted earlier.

The shortcode I used is:

(Thanks so much for your help - client was happy with the results of the work last week. I’ll post the link to the finished site when we’re done. Have now also converted my own business site; this query is for yet another site for a music foundation. Again will post links when we’re ready. These themes make it really easy to get a slick set of pages out there really fast.)

Glad you’re enjoying the themes. Hope you’ll help spread the word. People seem to be liking the content templates. The one I’m working on now I’m adding a few more useful scenarios e.g; staff directory with some more social networking additions. These will also be ported to Breeze and others when complete. Any others you can think of that might be useful on a universal scale, feel free to let me know.

In regards to your code, try adding:

after the latest posts.

OK I think I’ve been getting muddled again with the Default Layout in Breeze settings and overriding the setting on the Page.

I added echo $colstyle to content_functions like this
// Right Sidebar Wrapper
function RightSidebarGrid($contentgrid,$leftsidebargrid,$rightsidebargrid,$colorder,$colstyle) {
if (is_single() || is_page()) {
$colstyle = GetColStyle();
} else {
$colstyle = GetArchiveColStyle($colstyle);
}
echo ‘colstyle is: ‘.$colstyle

With the default set to left, then overriding it to right on a page and adding the latest shortcode results in the overflow / missing div identifier. ie colstyle =left so code doesn’t get executed.

With the default set to right, and setting the page to right sidebar, works ok.
If I don’t put the shortcode on the page, then default=left, page=right works just fine.

It looks like if I put the shortcode on the page I can only use the default page layout.

It’s probably because both functions rely on the $post global variable. I’ll have to do some pretty extensive testing on that one. This is occurring on a Page, right? If so, try changing:

$colstyle = GetArchiveColStyle(&$colstyle);

to:

$colstyle = GetColStyle(&$colstyle);

This should be the parameter in all Page templates (not GetArchiveColStyle) I think.

I changed line 13 of page.php (the right place?) as you suggested - no change. colstyle still reported as left.

(Default layout: left; page layout: right; page template: default)

I do have the work round of putting all the sidebars over on the right so everything is consistent, so no great rush to fix this, for me anyway.

Ok, this modification to the st_latest function should work.
You might need to update your function as well. Basically we just converted the query to its own independent WP_Query class.

// Latest Posts

function st_latest($atts, $content = null) {
 extract(shortcode_atts(array(
 "num" => '5',
 "thumbs" => 'false',
 "excerpt" => 'false',
 "width" => '100',
 "height" => '100',
 "cat" => ''
 ), $atts));
 global $post;
 
 $myposts = new WP_Query('cat='.$cat.'&numberposts='.$num.'&orderby=post_date&order=DESC');

 $result='<ul class="captionlist">';

 while($myposts->have_posts()) : $myposts->the_post();
  $result.='<li class="clearfix">';
   if (has_post_thumbnail() && $thumbs == 'true') {
    $result.= '<img alt="'.get_the_title().'" class="alignleft" src="'.get_bloginfo('stylesheet_directory').'/thumb.php?src='.get_image_path().'&amp;h='.$height.'&amp;w='.$width.'"/>';
   }
  $result.='<a href="'.get_permalink().'">'.the_title("","",false).'</a>';
  if ($excerpt == 'true') {
   $result.= '<ul><li>'.get_the_excerpt().'</li></ul>';
  }
  $result.='</li>';
  endwhile;

 $result.='</ul> ';
 return $result;
 var_dump($result);
}
add_shortcode("latest", "st_latest");
// Example Use: [latest excerpt="true" thumbs="true" width="50" height="50" num="5" cat="8,10,11"]

Sadly, no change. With the default set to left and the page set to right, colstyle still gets set to “left” when it should be “right”  Even more bizarrely, the output is now limited to 10 records in the list. Is numberposts available with WP_Query?

Well this is fun. I’m always up for a challenge :) I’ve feel like I’ve tested this pretty extensively. Basically we changed num_posts to posts_per_page and added wp_reset_postdata right after endwhile.

Please let me know if this works for you too.
http://screencast.com/t/OvYbMGAt3c4

// Latest Posts

function st_latest($atts, $content = null) {
 extract(shortcode_atts(array(
 "num" => '5',
 "thumbs" => 'false',
 "excerpt" => 'false',
 "width" => '100',
 "height" => '100',
 "cat" => ''
 ), $atts));
 global $post;
 
 $myposts = new WP_Query('cat='.$cat.'&posts_per_page='.$num.'&orderby=post_date&order=DESC');

 $result='<ul class="captionlist">';

 while($myposts->have_posts()) : $myposts->the_post();
  $result.='<li class="clearfix">';
   if (has_post_thumbnail() && $thumbs == 'true') {
    $result.= '<img alt="'.get_the_title().'" class="alignleft" src="'.get_bloginfo('stylesheet_directory').'/thumb.php?src='.get_image_path().'&amp;h='.$height.'&amp;w='.$width.'"/>';
   }
  $result.='<a href="'.get_permalink().'">'.the_title("","",false).'</a>';
  if ($excerpt == 'true') {
   $result.= '<ul><li>'.get_the_excerpt().'</li></ul>';
  }
  $result.='</li>';
  endwhile;
 wp_reset_postdata();
 $result.='</ul> ';
 return $result;
}
add_shortcode("latest", "st_latest");
// Example Use: [latest excerpt="true" thumbs="true" width="50" height="50" num="5" cat="8,10,11"]

Yep, that’s done it - fantastic!

Well, nearly! If you don’t have a value for num, 10 posts get displayed whereas the code default is 5 ... But I won’t tell anyone if you don’t! But if you put a number in, it does obey it.

Just for completeness, here’s the updated code for the “fplatest” shortcode I posted before: