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!
