Support » Developing with WordPress » Adding a custom WordPress widget crashes the Media Library

  • zehdolphin

    (@zehdolphin)



    Im creating a custom WordPress theme and recently the Media Library stopped working. I’m using ACF to create custom fields, and when I want to select an image the Media Library just keeps loading without showing any images.

    After some debugging I noticed that when removing the code that adds my custom widget, everything works fine.

    Now, my question is, how does the code below affect the functionality of the Media Library?

    <!-- 
    
    This widget is created to display some simple business information like a phone number and an address.
    If supplied the widget will also show icons for social medias such as Facebook, Instagram and Twitter.
    
     -->
    <?php 
    
    class info_widget extends WP_Widget {
    
        function __construct() {
            parent::__construct(
    
                // Base ID of your widget
                'info_widget', 
    
                // Widget name will appear in UI
                __('Information Widget', 'wpb_widget_domain'), 
    
                // Widget description
                array( 'description' => __('Simple widget to display some business information.', 'wpb_widget_domain' )) 
            );
        }
    
        // Creating widget front-end
        public function widget($args, $instance) {
    
            // before and after widget arguments are defined by themes
            echo $args['before_widget'];
    
            // This is where you run the code and display the output
    
            $phone = __($instance['phone'], 'wpb_widget_domain' );
            $address = __($instance['address'], 'wpb_widget_domain' );
            $facebook_link = __($instance['facebook_link'], 'wpb_widget_domain' );
            $twitter_link = __($instance['twitter_link'], 'wpb_widget_domain' );
            $youtube_link = __($instance['youtube_link'], 'wpb_widget_domain' );
    
            ?>
    
            <style type="text/css">
    
                .widget_info_widget {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }
    
                    .widget_info_widget .wrapper {
                        flex-grow: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
    
                        .widget_info_widget .wrapper p {
                            margin: 5px;
                        }
    
                        .widget_info_widget .wrapper a {
                            color: black;
                            text-decoration: none;
                        }
    
                        .widget_info_widget .wrapper a:hover {
                            text-decoration: underline;
                        }
    
                        .widget_info_widget .wrapper .icons {
                            margin-top: 20px;
                        }
    
                            .widget_info_widget .wrapper .icons .social {
                                font-size: 30px;
                                transition: filter 250ms;
                                color: black;
                                margin-left: 5px;
                                margin-right: 5px;
                            }
    
                            .widget_info_widget .wrapper .icons .social:hover {
                                filter: invert(0.5);
                            }
    
            </style>
    
            <center class="wrapper">
    
                <p class="phone-number"><?php echo $phone; ?></p>
                <p class="address"><a href="https://www.google.se/maps/place/<?php echo $address?>"><?php echo $address; ?></a></p>
    
                <div class="icons">
                    <?php if (!empty($facebook_link)): ?> 
                        <a class="social" href="<?php echo $facebook_link; ?>"><i class="fab fa-facebook"></i></a>
                    <?php endif; ?>
    
                    <?php if (!empty($twitter_link)): ?> 
                        <a class="social" href="<?php echo $twitter_link; ?>"><i class="fab fa-twitter-square"></i></a>
                    <?php endif; ?>
    
                    <?php if (!empty($youtube_link)): ?> 
                        <a class="social" href="<?php echo $youtube_link; ?>"><i class="fab fa-youtube-square"></i></a>
                    <?php endif; ?>
                </div>
            </center>
    
            <?php
            echo $args['after_widget'];
        }
    
        // Widget Backend 
        public function form($instance) {
    
            if (isset($instance['phone'] ) ) {
                $phone = $instance['phone'];
            }
            else {
                $phone = __('070-123 45 67', 'wpb_widget_domain');
            }
    
            if (isset($instance['address'] ) ) {
                $address = $instance['address'];
            }
            else {
                $address = __('Templateroad 5', 'wpb_widget_domain');
            }
    
            if (isset($instance['facebook_link'] ) ) {
                $facebook_link = $instance['facebook_link'];
            }
            if (isset($instance['twitter_link'] ) ) {
                $twitter_link = $instance['twitter_link'];
            }
            if (isset($instance['youtube_link'] ) ) {
                $youtube_link = $instance['youtube_link'];
            }
    
            // Widget admin form
            ?>
    
                <style type="text/css">
                    .widefat {
                        margin-bottom: 10px;
                    }
                </style>
    
                <p>
                    <label for="<?php echo $this->get_field_id('phone'); ?>"><?php _e('Phone:'); ?></label> 
                    <input class="widefat" id="<?php echo $this->get_field_id('phone'); ?>" name="<?php echo $this->get_field_name('phone'); ?>" type="text" value="<?php echo esc_attr($phone); ?>" />
    
                    <label for="<?php echo $this->get_field_id('address'); ?>"><?php _e('Address:'); ?></label> 
                    <input class="widefat" id="<?php echo $this->get_field_id('address'); ?>" name="<?php echo $this->get_field_name('address'); ?>" type="text" value="<?php echo esc_attr($address); ?>" />
    
                    <label for="<?php echo $this->get_field_id('facebook_link'); ?>"><?php _e('Facebook Link (not required):'); ?></label> 
                    <input class="widefat" id="<?php echo $this->get_field_id('facebook_link'); ?>" name="<?php echo $this->get_field_name('facebook_link'); ?>" type="text" value="<?php echo esc_attr($facebook_link); ?>" />
    
                    <label for="<?php echo $this->get_field_id('twitter_link'); ?>"><?php _e('Twitter Link (not required):'); ?></label> 
                    <input class="widefat" id="<?php echo $this->get_field_id('twitter_link'); ?>" name="<?php echo $this->get_field_name('twitter_link'); ?>" type="text" value="<?php echo esc_attr($twitter_link); ?>" />
    
                    <label for="<?php echo $this->get_field_id('youtube_link'); ?>"><?php _e('Youtube Link (not required):'); ?></label> 
                    <input class="widefat" id="<?php echo $this->get_field_id('youtube_link'); ?>" name="<?php echo $this->get_field_name('youtube_link'); ?>" type="text" value="<?php echo esc_attr($youtube_link); ?>" />
                </p>
            <?php 
        }
    
        // Updating widget replacing old instances with new
        public function update($new_instance, $old_instance) {
            $instance = array();
            $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
            $instance['phone'] = (!empty($new_instance['phone'])) ? strip_tags($new_instance['phone']) : '';
            $instance['address'] = (!empty($new_instance['address'])) ? strip_tags($new_instance['address']) : '';
            $instance['facebook_link'] = (!empty($new_instance['facebook_link'])) ? strip_tags($new_instance['facebook_link']) : '';
            $instance['twitter_link'] = (!empty($new_instance['twitter_link'])) ? strip_tags($new_instance['twitter_link']) : '';
            $instance['youtube_link'] = (!empty($new_instance['youtube_link'])) ? strip_tags($new_instance['youtube_link']) : '';
            return $instance;
        }
    }
    
    ?>

    The code in my functions.php file to load the widget looks like this:

    // Custom info widget
    
    // Register and load the widget
    function load_widget() {
        register_widget('info_widget');
    }
    add_action('widgets_init', 'load_widget');
    
    include 'widgets/information_widget.php';

    Any help is greatly appreciated and I’m relatively new to WordPress so I might have missed something obvious but it just seems odd that the Media Library stops working.. It should also be noted that the widget itself works properly, both backend and frontend!

Viewing 1 replies (of 1 total)
  • Felipe Elia

    (@felipeelia)

    Probably the problem is the begining of your file:

    <!-- 
    
    This widget is created to display some simple business information like a phone number and an address.
    If supplied the widget will also show icons for social medias such as Facebook, Instagram and Twitter.
    
     -->
    <?php 

    When you call
    include 'widgets/information_widget.php';
    it outputs that HTML comment, and as media library is based on AJAX responses, probably it’s getting that comment before the real result.

    Try to make that a PHP comment, like

    <?php 
    /*
    
    This widget is created to display some simple business information like a phone number and an address.
    If supplied the widget will also show icons for social medias such as Facebook, Instagram and Twitter.
    
    */

    Also remove the last ?> (in the end of file). You don’t need it and removing it you also prevents PHP of outputing some undesired white space. As a last check, be sure to save your file as UTF-8 *without* BOM.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.