0

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 what i get

enter image description here

1 Answer 1

0

I 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.