1

so I am still quite new to wordpress development so don't rage and I am sorry if I did something really stupid.

So I am having trouble with my CSS, for some reason it's not affecting the widget content output, which can be seen in the movieposterdisplay-class file. What I am trying to do is make the outputted youtube video auto size to fit the container using CSS. What I want to know is why the CSS isn't affecting the HTML code and a solution to fix it. Thanks in advance for any help.

movieposterdisplayfile

require_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay- 
  scripts.php');

require_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay- 
  class.php');

function register_movieposterdisplay(){
  register_widget('Movie_Poster_Display_Widget');
}

add_action('widgets_init', 'register_movieposterdisplay');

movieposterdisplay-scripts file

<?php
function mpd_add_scripts(){

wp_enqueue_style('mpd-main-style', plugins_url().'/movieposterdisplay/css/style.css');

wp_enqueue_script('mpd-main-style', plugins_url().'/movieposterdisplay/js/main.js');
}

add_action('wp_enqueue_scripts', 'mpd_add_scripts');

movieposterdisplay-class file (file contains the widget output)

<?php
class Movie_Poster_Display_Widget extends WP_Widget {

function __construct() {

parent::__construct(
  'movieposterdisplay_widget', // Base ID
  esc_html__( 'Movie Widget', 'mpd_domain' ), // Name  
  array( 'description' => esc_html__( 'Displays Movie/TV posters, overviews and trailers.', 'mpd_domain' ), ) 
  );
}

public function widget( $args, $instance) {
echo $args['before_widget']; 

  $trailer_key ="http://www.youtube.com/embed/" .$this->display_trailer($instance, $first_movie_result)."?enablejsapi=1";
  ?>

  <div class="youtubeplayer">
    <iframe 
    id="player" type="text/html"
    src="<?php echo $trailer_key;?>"
    frameborder="0" allowfullscreen="allowfullscreen">
    </iframe>
  </div>
  <?php 
echo $args['after_widget'];
} 

style.css

.youtubeplayer {
  position: relative;
  padding-bottom: 75%; 
  padding-top: 25px;
  height: 0;
  border: 5px solid red;
}

.youtubeplayer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
0

The problem was due to an incorrect file path in the movieposterdisplay-scripts file. Whilst the file loaded correctly in the main php file require_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay- class.php'); as it already assigned the correct plugin folder name. It did not enqueue correctly as the code was wp_enqueue_style('mpd-main-style', plugins_url().'/movieposterdisplay/css/style.css'); and I had previously changed the folder name.

Hence I thought it was loading correctly and running fine, however it was only loading correctly.

-1

Fortunately, it’s fairly easy to find and diagnose the problem. Go to any page on your site and, in Chrome, right-click and select “Inspect”. That will open up a new window with all kinds of code in it. Find the element and expand it. There, you’ll see a long list of elements. Those are your many stylesheets that are enqueued from a wide variety of sources. When done correctly, each should have an identifying ID. Most likely, you’ll notice that your plugin style is later in the than your theme style.

Of note: You’ll also know you have this problem if you start to add CSS and find yourself having to add !important to all your styles. As a general rule, you shouldn’t ever need to do that as long as everything is enqueued correctly.

  • Thanks for the tip but I think there's something else wrong with this because even if you do "!important" for all the elements in the CSS file the content output of the widget will still not change. – Dev john Jul 21 '18 at 18:34
  • Thanks for the help Shubham Vijay really appreciate it. I figured out the problem. – Dev john Jul 24 '18 at 7:05

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.