In my website homepage I have 3 widgets next to each other(left,center and right).
The problem is that the right widget (named publication) goes under the central widget. when I checked the codes by inspect tool in Chrome I noticed that the right widget is a child element of center widget. So I checked my Home.php file but all 3 widgets were in separate div elements.
Any idea what is causing the problem?
here is the link to the website: http://appro-europe.net
And here is the code in my home.php file:
<?php get_header(); ?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<?php dynamic_sidebar('Sideshow/Shark'); ?>
</div>
<main>
<section class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-sm-12 lr st-menu st-effect-1" id="menu-1">
<?php dynamic_sidebar('Sidebar_left_home/Shark'); ?>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 md">
<?php dynamic_sidebar('Home_middle/Shark'); ?>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 rl st-menu st-effect-2" id="menu-2">
<?php dynamic_sidebar('sidebar_right_home/Shark'); ?>
</div>
</div>
</section>
</main>
<?php get_footer(); ?>
code for the center widget:
function home_3cols_init()
{
register_widget('home_3cols');
}
class home_3cols extends WP_Widget{
function home_3cols()
{
$widget_ops = array('classname' => 'home_3cols', 'description' => 'Home
3 cols recent posts widget.');
$control_ops = array('id_base' => 'home_3cols-widget');
$this->WP_Widget('home_3cols-widget', 'Shark: home_3cols ', $widget_ops,
$control_ops);
}
function widget($args, $instance)
{
extract($args);
$show_excerpt = isset($instance['show_excerpt']) ? 'true' : 'false';
$title = $instance['title'];
$post_type = 'all';
$categories = $instance['categories'];
$posts = $instance['posts'];
$images = true;
$title_2 = $instance['title_2'];
$post_type_2 = 'all';
$categories_2 = $instance['categories_2'];
$posts_2 = $instance['posts_2'];
$images_2 = true;
$title_3 = $instance['title_3'];
$post_type_3 = 'all';
$categories_3 = $instance['categories_3'];
$posts_3 = $instance['posts_3'];
$images_3 = true;
echo $before_widget;
?>
<?php
$post_types = get_post_types();
unset($post_types['page'], $post_types['attachment'],
$post_types['revision'], $post_types['nav_menu_item']);
if($post_type == 'all') {
$post_type_array = $post_types;
} else {
$post_type_array = $post_type;
}
?>
<?php
$recent_posts = new WP_Query(array(
'showposts' => $posts,
'post_type' => $post_type_array,
'cat' => $categories,
));
?>
<div class="line"><h1><a href="<?php echo get_category_link(
$categories ) ?>"><?php echo $title; ?></a></h1></div>
<div id="owl-demo" class="owl-carousel">
<?php $counter = 1; while($recent_posts->have_posts()):
$recent_posts->the_post(); ?>
<div class="item">
<img src="<?=the_image(($post->ID),4);?>" alt="
<?php the_title(); ?>" title="<?php the_title(); ?>">
<a href="<? the_permalink();?>" class="lt">
<h1><?php the_title(); ?></h1>
</a>
<div class="lb">
<?php
if ( has_excerpt() ) {
the_excerpt();
} else {
echo
string_limit_words(get_the_content(),21)."...";
}
?>
</div>
<a href="<? the_permalink();?>"
class="read_more">Read More</a>
<div style="clear:both"></div>
</div>
<?php $counter++; endwhile; ?>
</div>
<?php
$post_types = get_post_types();
unset($post_types['page'], $post_types['attachment'],
$post_types['revision'], $post_types['nav_menu_item']);
if($post_type_2 == 'all') {
$post_type_2_array = $post_types;
} else {
$post_type_2_array = $post_type;
}
?>
<?php
$recent_posts = new WP_Query(array(
'showposts' => $posts_2,
'post_type' => $post_type_2_array,
'cat' => $categories_2,
));
?>
<div class="line" style="margin-top:0px;">
<h1>
<a href="<?php echo get_category_link( $categories_2 ) ?
>"><?php echo $title_2; ?></a>
</h1>
</div>
<div id="blog" class="owl-carousel">
<?php $counter = 1; while($recent_posts->have_posts()):
$recent_posts->the_post(); ?>
<div class="item">
<div class="media">
<div class="media-left media-middle">
<a href="<? the_permalink();?>">
<img src="<?=the_image(($post->ID),5);?
>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">
</a>
<div class="date_cat">
<time><i class="glyphicon glyphicon-
book"></i><a href="<?php echo get_category_link( $categories_2 ) ?>"> <?php
echo $title_2; ?></a>
<i class="glyphicon glyphicon-calendar">
</i><?php the_time('j F Y'); ?></time>
</div>
</div>
<div class="media-body">
<h2 class="media-heading">
<a href="<? the_permalink();?>"><?php
the_title(); ?></a>
</h2>
<p>
<?php
if ( has_excerpt() ) {
the_excerpt();
} else {
echo
string_limit_words(get_the_content(),35)."...";
}
?>
</p>
</div>
</div>
</div>
<?php $counter++; endwhile; ?>
</div>
<?php
$post_types = get_post_types();
unset($post_types['page'], $post_types['attachment'],
$post_types['revision'], $post_types['nav_menu_item']);
if($post_type_3 == 'all') {
$post_type_3_array = $post_types;
} else {
$post_type_3_array = $post_type;
}
?>
<?php
$recent_posts = new WP_Query(array(
'showposts' => $posts_3,
'post_type' => $post_type_3_array,
'cat' => $categories_3,
));
?>
<div class="line"><h1><a href="<?php echo get_category_link(
$categories_3 ) ?>"><?php echo $title_3; ?></a></h1></div>
<?php $counter = 1; while($recent_posts->have_posts()): $recent_posts-
>the_post(); ?>
<?php if($counter==1): ?>
<div class="item training">
<div class="media">
<!--<div class="media-left media-middle pull-right">
<a href="<? the_permalink();?>">
<img src="<?=the_image(($post->ID),6);?>" title="<?
php the_title(); ?>" alt="<?php the_title(); ?>">
</a>
</div>-->
<div class="media-body ">
<h2 class="media-heading">
<a href="<? the_permalink();?>"><?= the_title();?>
</a>
</h2>
<p>
<?php
if ( has_excerpt() ) {
the_excerpt();
} else {
echo string_limit_words(get_the_content(),10)."...";
}
?>
</p>
</div>
</div>
</div>
<div id="" class="owl-carousel trainingg">
<?php else: ?>
<div class="item">
<a href="<? the_permalink();?>">
<img src="<?=the_image(($post->ID),7);?>" alt="<?php
the_title(); ?>" title="<?php the_title(); ?>">
</a>
<h2 class="media-heading">
<a href="<? the_permalink();?>"><?php the_title(); ?>
</a>
</h2>
</div>
<?php endif; ?>
<?php $counter++; endwhile; ?>
</div>
<?php
echo $after_widget;
}
function update($new_instance, $old_instance)
{
$instance = $old_instance;
$instance['show_excerpt'] = $new_instance['show_excerpt'];
$instance['title'] = $new_instance['title'];
$instance['post_type'] = 'all';
$instance['categories'] = $new_instance['categories'];
$instance['posts'] = $new_instance['posts'];
$instance['show_images'] = true;
$instance['title_2'] = $new_instance['title_2'];
$instance['post_type_2'] = 'all';
$instance['categories_2'] = $new_instance['categories_2'];
$instance['posts_2'] = $new_instance['posts_2'];
$instance['show_images_2'] = true;
$instance['title_3'] = $new_instance['title_3'];
$instance['post_type_3'] = 'all';
$instance['categories_3'] = $new_instance['categories_3'];
$instance['posts_3'] = $new_instance['posts_3'];
$instance['show_images_3'] = true;
return $instance;
}
function form($instance)
{
$defaults = array('show_excerpt' => null,
'title' => 'Recent Posts', 'post_type' => 'all', 'categories' =>
'all', 'posts' => 4,
'title_2' => 'Recent Posts', 'post_type_2' => 'all', 'categories_2'
=> 'all', 'posts_2' => 4,
'title_3' => 'Recent Posts', 'post_type_3' => 'all', 'categories_3'
=> 'all', 'posts_3' => 4,);
$instance = wp_parse_args((array) $instance, $defaults); ?>
<p>
<input class="checkbox" type="checkbox" <?php
checked($instance['show_excerpt'], 'on'); ?> id="<?php echo $this-
>get_field_id('show_excerpt'); ?>" name="<?php echo $this-
>get_field_name('show_excerpt'); ?>" />
<label for="<?php echo $this->get_field_id('show_excerpt'); ?>">Show
excerpt</label>
</p>
<h3>Column One</h3>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">Title:
</label>
<input class="widefat" style="width: 216px;" id="<?php echo $this-
>get_field_id('title'); ?>" name="<?php echo $this-
>get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('categories'); ?>">Filter
by Category:</label>
<select id="<?php echo $this->get_field_id('categories'); ?>" name="
<?php echo $this->get_field_name('categories'); ?>" class="widefat
categories" style="width:100%;">
<option value='all' <?php if ('all' == $instance['categories'])
echo 'selected="selected"'; ?>>all categories</option>
<?php $categories =
get_categories('hide_empty=0&depth=1&type=post'); ?>
<?php foreach($categories as $category) { ?>
<option value='<?php echo $category->term_id; ?>' <?php if
($category->term_id == $instance['categories']) echo 'selected="selected"';
?>><?php echo $category->cat_name; ?></option>
<?php } ?>
</select>
</p>
<p>
<label for="<?php echo $this->get_field_id('posts'); ?>">Number of
posts:</label>
<input class="widefat" style="width: 30px;" id="<?php echo $this-
>get_field_id('posts'); ?>" name="<?php echo $this-
>get_field_name('posts'); ?>" value="<?php echo $instance['posts']; ?>" />
</p>
<h3 style='margin-top: 40px;'>Column Two</h3>
<p>
<label for="<?php echo $this->get_field_id('title_2'); ?>">Title:
</label>
<input class="widefat" style="width: 216px;" id="<?php echo $this-
>get_field_id('title_2'); ?>" name="<?php echo $this-
>get_field_name('title_2'); ?>" value="<?php echo $instance['title_2']; ?>"
/>
</p>
<p>
<label for="<?php echo $this->get_field_id('categories_2'); ?
>">Filter by Category:</label>
<select id="<?php echo $this->get_field_id('categories_2'); ?>"
name="<?php echo $this->get_field_name('categories_2'); ?>" class="widefat
categories" style="width:100%;">
<option value='all' <?php if ('all' ==
$instance['categories_2']) echo 'selected="selected"'; ?>>all
categories</option>
<?php $categories =
get_categories('hide_empty=0&depth=1&type=post'); ?>
<?php foreach($categories as $category) { ?>
<option value='<?php echo $category->term_id; ?>' <?php if
($category->term_id == $instance['categories_2']) echo
'selected="selected"'; ?>><?php echo $category->cat_name; ?></option>
<?php } ?>
</select>
</p>
<p>
<label for="<?php echo $this->get_field_id('posts_2'); ?>">Number of
posts:</label>
<input class="widefat" style="width: 30px;" id="<?php echo $this-
>get_field_id('posts_2'); ?>" name="<?php echo $this-
>get_field_name('posts_2'); ?>" value="<?php echo $instance['posts_2']; ?>"
/>
</p>
<h3 style='margin-top: 40px;'>Column Three</h3>
<p>
<label for="<?php echo $this->get_field_id('title_3'); ?>">Title:
</label>
<input class="widefat" style="width: 216px;" id="<?php echo $this-
>get_field_id('title_3'); ?>" name="<?php echo $this-
>get_field_name('title_3'); ?>" value="<?php echo $instance['title_3']; ?>"
/>
</p>
<p>
<label for="<?php echo $this->get_field_id('categories_3'); ?
>">Filter by Category:</label>
<select id="<?php echo $this->get_field_id('categories_3'); ?>"
name="<?php echo $this->get_field_name('categories_3'); ?>" class="widefat
categories" style="width:100%;">
<option value='all' <?php if ('all' ==
$instance['categories_3']) echo 'selected="selected"'; ?>>all
categories</option>
<?php $categories =
get_categories('hide_empty=0&depth=1&type=post'); ?>
<?php foreach($categories as $category) { ?>
<option value='<?php echo $category->term_id; ?>' <?php if
($category->term_id == $instance['categories_3']) echo
'selected="selected"'; ?>><?php echo $category->cat_name; ?></option>
<?php } ?>
</select>
</p>
<p>
<label for="<?php echo $this->get_field_id('posts_3'); ?>">Number of
posts:</label>
<input class="widefat" style="width: 30px;" id="<?php echo $this-
>get_field_id('posts_3'); ?>" name="<?php echo $this-
>get_field_name('posts_3'); ?>" value="<?php echo $instance['posts_3']; ?>"
/>
</p>
</p>
<?php }
}
?>
