I am trying to add a wordpress recent posts widget plugin in a theme but somehow even after adding the same class the styles ae not reflecting in the front end i tried to enqueue style in the plugin but that too didnt help
here is the plugin code
<?php echo $args[ 'before_widget' ]; ?>
<div id="rpwwt-<?php echo $args[ 'widget_id' ];?>" class="mb-50 mb-sm-30">
<?php if ( $title ) echo $args[ 'before_title' ] . $title . $args[ 'after_title' ]; ?>
<?php while ( $r->have_posts() ) { $r->the_post(); ?>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="<?php the_permalink(); ?>"<?php echo $this->customs[ 'link_target' ]; ?>><?php
if ( $bools[ 'show_thumb' ] ) {
$is_thumb = false;
// if always only the default image
if ( $bools[ 'use_default_only' ] ) {
echo $default_img;
// if only first image
} elseif ( $bools[ 'only_1st_img' ] ) {
// try to find and to display the first post image and to return success
$is_thumb = $this->the_first_post_image();
} else {
// look for featured image
if ( has_post_thumbnail() ) {
// if there is featured image then show it
the_post_thumbnail( $this->customs[ 'thumb_dimensions' ] );
$is_thumb = true;
} else {
// if user wishes first image trial
if ( $bools[ 'try_1st_img' ] ) {
// try to find and to display the first post image and to return success
$is_thumb = $this->the_first_post_image();
} // if try_1st_img
} // if has_post_thumbnail
} // if only_1st_img
// if there is no image
if ( ! $is_thumb ) {
// if user allows default image then
if ( $bools[ 'use_default' ] ) {
echo $default_img;
} // if use_default
} // if not is_thumb
// (else do nothing)
} // if show_thumb ?>
</a></div>
<div class="s-right left-text">
<?php
if ( $bools[ 'show_categories' ] ) {
?><h6 class="color-semi-black"><?php echo $this->get_the_categories( $r->post->ID ); ?></h6><?php
}
// show title if wished
if ( ! $bools[ 'hide_title' ] ) {
?><a href="<?php the_permalink(); ?>"><h6 class="font-11 mtb-5"><?php if ( $post_title = $this->get_the_trimmed_post_title() ) { echo $post_title; } else { the_ID(); } ?></h6></a><?php
}
?><?php
if ( $bools[ 'show_date' ] ) {
?><h6 class="color-primary"><?php echo get_the_date(); ?></h6><?php
}
?>
</div>
</div>
<?php } // while() ?>
</div><!-- .rpwwt-widget -->
<?php echo $args[ 'after_widget' ]; ?>
here is the output
<div id="news-side">
<div id="rpwwt-recent-posts-widget-with-thumbnails-2" class="mb-50 mb-sm-30">
<h5 class="mb-30 left-text">Recent Posts</h5>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="http://localhost/wordpress/the-secret-of-the-perfect-italian-pizza/" target="_blank"><img width="90" height="90" src="http://localhost/wordpress/wp-content/uploads/2020/06/blog-2-1000x400-1-150x150.jpg" class="attachment-90x90 size-90x90 wp-post-image" alt="" /> </a></div>
<div class="s-right left-text">
<h6 class="color-semi-black">Recipes</h6><a href="http://localhost/wordpress/the-secret-of-the-perfect-italian-pizza/"><h6 class="font-11 mtb-5">The secret of the perfect italian pizza</h6></a><h6 class="color-primary">2020-06-15</h6> </div>
</div>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="http://localhost/wordpress/paneer-pizza/" target="_blank"><img width="90" height="90" src="http://localhost/wordpress/wp-content/uploads/2020/06/blog-1-1000x400-1-150x150.jpg" class="attachment-90x90 size-90x90 wp-post-image" alt="" /> </a></div>
<div class="s-right left-text">
<h6 class="color-semi-black">Recipes</h6><a href="http://localhost/wordpress/paneer-pizza/"><h6 class="font-11 mtb-5">Paneer Pizza</h6></a><h6 class="color-primary">2020-06-15</h6> </div>
</div>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="http://localhost/wordpress/recipe-of-the-week-tomato-pastas/" target="_blank"><img width="90" height="90" src="http://localhost/wordpress/wp-content/uploads/2020/06/blog-3-1000x400-1-150x150.jpg" class="attachment-90x90 size-90x90 wp-post-image" alt="" /> </a></div>
<div class="s-right left-text">
<h6 class="color-semi-black">Recipes</h6><a href="http://localhost/wordpress/recipe-of-the-week-tomato-pastas/"><h6 class="font-11 mtb-5">Recipe of the week: Tomato pastas</h6></a><h6 class="color-primary">2020-06-15</h6> </div>
</div>
</div><!-- .rpwwt-widget -->
</div>
i tried to enque style like this but that too didnt help
<?php echo $args[ 'before_widget' ]; ?>
<?php //add styles
add_action('wp_enqueue_scripts','rpwwt_styles');
function rpwwt_styles(){
wp_register_style('custom',plugins_url('css/custom.css',__FILE__));
wp_enqueue_style('custom');
}?>
<div id="rpwwt-<?php echo $args[ 'widget_id' ];?>" class="mb-50 mb-sm-30">
<?php if ( $title ) echo $args[ 'before_title' ] . $title . $args[ 'after_title' ]; ?>
<?php while ( $r->have_posts() ) { $r->the_post(); ?>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="<?php the_permalink(); ?>"<?php echo $this->customs[ 'link_target' ]; ?>><?php
if ( $bools[ 'show_thumb' ] ) {
$is_thumb = false;
// if always only the default image
if ( $bools[ 'use_default_only' ] ) {
echo $default_img;
// if only first image
} elseif ( $bools[ 'only_1st_img' ] ) {
// try to find and to display the first post image and to return success
$is_thumb = $this->the_first_post_image();
} else {
// look for featured image
if ( has_post_thumbnail() ) {
// if there is featured image then show it
the_post_thumbnail( $this->customs[ 'thumb_dimensions' ] );
$is_thumb = true;
} else {
// if user wishes first image trial
if ( $bools[ 'try_1st_img' ] ) {
// try to find and to display the first post image and to return success
$is_thumb = $this->the_first_post_image();
} // if try_1st_img
} // if has_post_thumbnail
} // if only_1st_img
// if there is no image
if ( ! $is_thumb ) {
// if user allows default image then
if ( $bools[ 'use_default' ] ) {
echo $default_img;
} // if use_default
} // if not is_thumb
// (else do nothing)
} // if show_thumb ?>
</a></div>
<div class="s-right left-text">
<?php
if ( $bools[ 'show_categories' ] ) {
?><h6 class="color-semi-black"><?php echo $this->get_the_categories( $r->post->ID ); ?></h6><?php
}
// show title if wished
if ( ! $bools[ 'hide_title' ] ) {
?><a href="<?php the_permalink(); ?>"><h6 class="font-11 mtb-5"><?php if ( $post_title = $this->get_the_trimmed_post_title() ) { echo $post_title; } else { the_ID(); } ?></h6></a><?php
}
?><?php
if ( $bools[ 'show_date' ] ) {
?><h6 class="color-primary"><?php echo get_the_date(); ?></h6><?php
}
?>
</div>
</div>
<?php } // while() ?>
</div><!-- .rpwwt-widget -->
<?php echo $args[ 'after_widget' ]; ?>
check screenshots for reference
I am trying to add a wordpress recent posts widget plugin in a theme but somehow even after adding the same class the styles ae not reflecting in the front end i tried to enqueue style in the plugin but that too didnt help
here is the plugin code
<?php echo $args[ 'before_widget' ]; ?>
<div id="rpwwt-<?php echo $args[ 'widget_id' ];?>" class="mb-50 mb-sm-30">
<?php if ( $title ) echo $args[ 'before_title' ] . $title . $args[ 'after_title' ]; ?>
<?php while ( $r->have_posts() ) { $r->the_post(); ?>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="<?php the_permalink(); ?>"<?php echo $this->customs[ 'link_target' ]; ?>><?php
if ( $bools[ 'show_thumb' ] ) {
$is_thumb = false;
// if always only the default image
if ( $bools[ 'use_default_only' ] ) {
echo $default_img;
// if only first image
} elseif ( $bools[ 'only_1st_img' ] ) {
// try to find and to display the first post image and to return success
$is_thumb = $this->the_first_post_image();
} else {
// look for featured image
if ( has_post_thumbnail() ) {
// if there is featured image then show it
the_post_thumbnail( $this->customs[ 'thumb_dimensions' ] );
$is_thumb = true;
} else {
// if user wishes first image trial
if ( $bools[ 'try_1st_img' ] ) {
// try to find and to display the first post image and to return success
$is_thumb = $this->the_first_post_image();
} // if try_1st_img
} // if has_post_thumbnail
} // if only_1st_img
// if there is no image
if ( ! $is_thumb ) {
// if user allows default image then
if ( $bools[ 'use_default' ] ) {
echo $default_img;
} // if use_default
} // if not is_thumb
// (else do nothing)
} // if show_thumb ?>
</a></div>
<div class="s-right left-text">
<?php
if ( $bools[ 'show_categories' ] ) {
?><h6 class="color-semi-black"><?php echo $this->get_the_categories( $r->post->ID ); ?></h6><?php
}
// show title if wished
if ( ! $bools[ 'hide_title' ] ) {
?><a href="<?php the_permalink(); ?>"><h6 class="font-11 mtb-5"><?php if ( $post_title = $this->get_the_trimmed_post_title() ) { echo $post_title; } else { the_ID(); } ?></h6></a><?php
}
?><?php
if ( $bools[ 'show_date' ] ) {
?><h6 class="color-primary"><?php echo get_the_date(); ?></h6><?php
}
?>
</div>
</div>
<?php } // while() ?>
</div><!-- .rpwwt-widget -->
<?php echo $args[ 'after_widget' ]; ?>
here is the output
<div id="news-side">
<div id="rpwwt-recent-posts-widget-with-thumbnails-2" class="mb-50 mb-sm-30">
<h5 class="mb-30 left-text">Recent Posts</h5>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="http://localhost/wordpress/the-secret-of-the-perfect-italian-pizza/" target="_blank"><img width="90" height="90" src="http://localhost/wordpress/wp-content/uploads/2020/06/blog-2-1000x400-1-150x150.jpg" class="attachment-90x90 size-90x90 wp-post-image" alt="" /> </a></div>
<div class="s-right left-text">
<h6 class="color-semi-black">Recipes</h6><a href="http://localhost/wordpress/the-secret-of-the-perfect-italian-pizza/"><h6 class="font-11 mtb-5">The secret of the perfect italian pizza</h6></a><h6 class="color-primary">2020-06-15</h6> </div>
</div>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="http://localhost/wordpress/paneer-pizza/" target="_blank"><img width="90" height="90" src="http://localhost/wordpress/wp-content/uploads/2020/06/blog-1-1000x400-1-150x150.jpg" class="attachment-90x90 size-90x90 wp-post-image" alt="" /> </a></div>
<div class="s-right left-text">
<h6 class="color-semi-black">Recipes</h6><a href="http://localhost/wordpress/paneer-pizza/"><h6 class="font-11 mtb-5">Paneer Pizza</h6></a><h6 class="color-primary">2020-06-15</h6> </div>
</div>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="http://localhost/wordpress/recipe-of-the-week-tomato-pastas/" target="_blank"><img width="90" height="90" src="http://localhost/wordpress/wp-content/uploads/2020/06/blog-3-1000x400-1-150x150.jpg" class="attachment-90x90 size-90x90 wp-post-image" alt="" /> </a></div>
<div class="s-right left-text">
<h6 class="color-semi-black">Recipes</h6><a href="http://localhost/wordpress/recipe-of-the-week-tomato-pastas/"><h6 class="font-11 mtb-5">Recipe of the week: Tomato pastas</h6></a><h6 class="color-primary">2020-06-15</h6> </div>
</div>
</div><!-- .rpwwt-widget -->
</div>
i tried to enque style like this but that too didnt help
<?php echo $args[ 'before_widget' ]; ?>
<?php //add styles
add_action('wp_enqueue_scripts','rpwwt_styles');
function rpwwt_styles(){
wp_register_style('custom',plugins_url('css/custom.css',__FILE__));
wp_enqueue_style('custom');
}?>
<div id="rpwwt-<?php echo $args[ 'widget_id' ];?>" class="mb-50 mb-sm-30">
<?php if ( $title ) echo $args[ 'before_title' ] . $title . $args[ 'after_title' ]; ?>
<?php while ( $r->have_posts() ) { $r->the_post(); ?>
<div class="sided-90x mb-30">
<div class="s-left">
<a href="<?php the_permalink(); ?>"<?php echo $this->customs[ 'link_target' ]; ?>><?php
if ( $bools[ 'show_thumb' ] ) {
$is_thumb = false;
// if always only the default image
if ( $bools[ 'use_default_only' ] ) {
echo $default_img;
// if only first image
} elseif ( $bools[ 'only_1st_img' ] ) {
// try to find and to display the first post image and to return success
$is_thumb = $this->the_first_post_image();
} else {
// look for featured image
if ( has_post_thumbnail() ) {
// if there is featured image then show it
the_post_thumbnail( $this->customs[ 'thumb_dimensions' ] );
$is_thumb = true;
} else {
// if user wishes first image trial
if ( $bools[ 'try_1st_img' ] ) {
// try to find and to display the first post image and to return success
$is_thumb = $this->the_first_post_image();
} // if try_1st_img
} // if has_post_thumbnail
} // if only_1st_img
// if there is no image
if ( ! $is_thumb ) {
// if user allows default image then
if ( $bools[ 'use_default' ] ) {
echo $default_img;
} // if use_default
} // if not is_thumb
// (else do nothing)
} // if show_thumb ?>
</a></div>
<div class="s-right left-text">
<?php
if ( $bools[ 'show_categories' ] ) {
?><h6 class="color-semi-black"><?php echo $this->get_the_categories( $r->post->ID ); ?></h6><?php
}
// show title if wished
if ( ! $bools[ 'hide_title' ] ) {
?><a href="<?php the_permalink(); ?>"><h6 class="font-11 mtb-5"><?php if ( $post_title = $this->get_the_trimmed_post_title() ) { echo $post_title; } else { the_ID(); } ?></h6></a><?php
}
?><?php
if ( $bools[ 'show_date' ] ) {
?><h6 class="color-primary"><?php echo get_the_date(); ?></h6><?php
}
?>
</div>
</div>
<?php } // while() ?>
</div><!-- .rpwwt-widget -->
<?php echo $args[ 'after_widget' ]; ?>
check screenshots for reference
Share Improve this question asked Jun 20, 2020 at 2:25 Sash_007Sash_007 74 bronze badges1 Answer
Reset to default 0I got this fixed
the proble was in the custom.css
where i added
.s-right{
margin-top:-30px;
}
i removed that and that fixed the margin issue