Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Sidebar shows outside wrapper

Featured Replies

Hi

 

I have been asked to fix an error on a WP website where the right sidebar appears underneath the page content.

 

When I checked it I did think it may be a plugin issue or even CSS pushing it down but have noticed the sidebar seem to appear outside page wrapper div?

 

Here is the php code for the blog page, I think (which is why i need help) when I checked it in Notepad++ the wrapper div is not actually closed?

 

<?php
/*

Template Name: Blog style 2.

*/

?>
<?php get_header(); ?>
<?php
$position = get_post_meta($post->ID, 'rd_slider_position', true);
$sponsors = get_post_meta($post->ID, 'rd_sponsors', true);
if(get_post_meta($post->ID, 'rd_sidebar_position', true) == 'left') {

$content_css = 'float:right;';

$sidebar_css = 'float:left;';

} else {

$content_css = 'float:left;';

$sidebar_css = 'float:right;';

}

$subtitle = get_post_meta($post->ID, 'rd_subtitle', true); ?>

<?php

if ($position == 'up' ){
// Revolution Slider
$slider_page_id = $post->ID;
if(is_home() && !is_front_page()){
$slider_page_id = get_option('page_for_posts');
}
if(get_post_meta($slider_page_id, 'rd_slider_type', true) == 'layer' && (get_post_meta($slider_page_id, 'rd_slider', true) || get_post_meta($slider_page_id, 'rd_slider', true) != 0)): ?>
<?php $layout = of_get_option('rd_wide');
if ($layout =="yes") { ?>
</div>
<?php } ?>
<?php echo do_shortcode('[rev_slider '.get_post_meta($slider_page_id, 'rd_slider', true).']'); ?>
<?php $layout = of_get_option('rd_wide');
if ($layout =="yes") { ?>
<div class="wrapper">
<?php } ?>
<?php endif; ?>
<?php } ?>

<div id="title">
<div class="page_title">
<?php the_title(); ?>
</div>
<?php if($subtitle){

echo '

<div class="subtitle">

<p>'. $subtitle.'</p>

</div>';
}
?>
</div>
<?php $layout = of_get_option('rd_wide');
if ($layout =="yes") { ?>
</div>
</div>
<div id="center_background">
<div class="wrapper">
<?php } ?>
<?php

if ($position == 'down' ){
// Layer Slider
$slider_page_id = $post->ID;
if(is_home() && !is_front_page()){
$slider_page_id = get_option('page_for_posts');
}
if(get_post_meta($slider_page_id, 'rd_slider_type', true) == 'layer' && (get_post_meta($slider_page_id, 'rd_slider', true) || get_post_meta($slider_page_id, 'rd_slider', true) != 0)): ?>
<?php $layout = of_get_option('rd_wide');
if ($layout =="yes") { ?>
</div>
</div>
<?php } ?>
<style>.rev_slider_wrapper:after {
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0);
}#page,#page_content, #center_background {background:none; background-color:#fff;} </style>
<?php echo do_shortcode('[rev_slider '.get_post_meta($slider_page_id, 'rd_slider', true).']'); ?>

<?php endif; ?>
<?php $layout = of_get_option('rd_wide');
if ($layout =="yes") { ?>
</div>
</div>
<div id="center_background">
<div class="wrapper">
<?php } ?>
<?php } ?>
<!-- #page -->

<div id="page">

<!-- #posts -->

<div id="posts" style="<?php echo $content_css; ?>">
<?php $id = get_cat_id('Portfolio');

$q = "cat=-" . $id;

query_posts($q.'&paged='.$paged);

global $more;

$more = 0;

if (have_posts()) : while (have_posts()) : the_post();

?>
<!-- .blog_post -->

<div class="blog_post">
<div class="post_content">

<!-- .post_meta END -->

<?php

if(get_post_meta($post->ID, 'rd_show_slider', true) == 'yes') {

$my_meta = get_post_meta($post->ID, 'rd_video', true);

if ($my_meta !== ''){echo "<div class='post_att'>".$my_meta."</div>";}else{

$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );

?>
<?php

//find images in the content with "wp-image-{n}" in the class name

preg_match_all('/<img[^>]?class=["|\'][^"]*wp-image-([0-9]*)[^"]*["|\'][^>]*>/i', get_the_content(), $result);

//echo '<pre>' . htmlspecialchars( print_r($result, true) ) .'</pre>';

$exclude_imgs = $result[1];

$args = array(

'order' => 'ASC',

'post_type' => 'attachment',

'post_parent' => $post->ID,

'exclude' => $exclude_imgs,

'post_mime_type' => 'image',

'post_status' => null,

'numberposts' => -1,

);

$attachments = get_posts($args);

if ($attachments) {

echo "<div class='post_att'><div class='flexslider'><ul class='slides'>";

foreach ($attachments as $attachment) {

echo "<li>";

echo '<a href="' . get_permalink( $post->ID ) . '">';

echo wp_get_attachment_image( $attachment->ID, 'large-image' );

echo "</a></li>";
}

echo "</ul></div></div>";

}

?>
<?php }} ?>

<!-- .blog_entry -->

<div class="blog_entry">

<!-- .p_title -->

<div class="p_title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php the_title(); ?>
</a></div>

<!-- .p_title END -->

<?php the_content('Read more »'); ?>
</div>

<!-- .blog_entry END -->

</div>
<div style="clear:both"></div>

<!-- .post_content END-->

</div>

<!-- .blog_post END -->

<?php endwhile; ?>

<!-- .navigation -->

<div class="navigation">
<?php kriesi_pagination(); ?>
</div>

<!-- .navigation END -->

<?php else : ?>
<div id="notfound">
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>
<?php endif; ?>
</div>

<!-- #posts END -->

<div id="sidebar" style="<?php echo $sidebar_css; ?>">
<?php generated_dynamic_sidebar(); ?>
</div>
<div style="clear:both"></div>
</div>
<?php if(of_get_option('rd_enable_breadcrumbs', "1")) : ?>

<div id="breadcrumbs">
<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>
</div>
<?php endif; ?>
<?php get_footer(); ?>

 

Hi,

 

I have not fully looked at this - but it seems to start with a closing tag on line 40 - which is probably not good :) But it could be relating to something outside the scope of this file - which makes it messy and hard to trouble shoot!

 

It looks like there is some logic conditionally messing with divs which makes the code a bit of a mess and hard to follow and find mistakes,

 

I would recommend stripping out all of the logic that is not required and just get it working, and then start adding bits in as needed.

 

Cheers,

  • Author

Hi,

 

I have not fully looked at this - but it seems to start with a closing tag on line 40 - which is probably not good :) But it could be relating to something outside the scope of this file - which makes it messy and hard to trouble shoot!

 

It looks like there is some logic conditionally messing with divs which makes the code a bit of a mess and hard to follow and find mistakes,

 

I would recommend stripping out all of the logic that is not required and just get it working, and then start adding bits in as needed.

 

Cheers,

 

Thanks - i believe they actually paid for that template!

 

I am starting to strip it down - so will update with anything I find!

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.