Adding Images to WordPress Sidebars Is About to Get a Lot Easier

Adding images to sidebars in WordPress is a cumbersome task that requires users to upload an image to the Media Library, find the URL, copy it, and paste it into a Text widget along with additional HTML. Nearly two years ago, Mel Choyce opened a ticket on WordPress Trac proposing that a media widget be added to core. This widget would allow users to easily add images to sidebars.

Throughout the discussion, the idea of creating a catch-all media widget was brought up that would allow users to add images, audio, or video to a sidebar. After developers spoke to Matt Mullenweg about the direction of the project, the team decided to create three separate widgets to handle each media type. Choyce outlined the benefits this approach provides:

  • We can focus on creating more tailored experiences for each widget.
  • We’ll be able to launch new widgets without having to worry about constantly updating one central widget, or potentially breaking anything.
  • It’ll be easier for people to discover new media types since they won’t be buried within one widget.
  • This will more closely mimic the approach we’re taking to content blocks in the future, which should provide an easier transition.

Out of the three core widgets in development, the Image one is nearly complete ready for user testing. To test, first download and activate the Core Media Widgets plugin. Once activated, navigate to Appearance > Widgets in the WordPress backend and in the available widgets section, locate the Image widget.

Core Image Widget UI
Core Image Widget UI

Clicking the Select Image button displays the media library modal where you can either select or upload an image. Once an image is selected, click the Add to Widget button in the bottom-right corner. This is what the widget looks like after an image is added.

Core Image Widget With an Image
Core Image Widget With an Image

Here is what the widget looks like on a page using the Twenty Seventeen default theme.

Core Image Widget in Action
Core Image Widget in Action

The core image widget is incredibly easy to set up and is a significant improvement over the Text widget approach. The user interface is much simpler compared to the image widget supplied by Jetpack. Jetpack’s image widget UI doesn’t take advantage of the media library modal and instead, requires the user to know the image’s URL.

Jetpack Image Widget UI
Jetpack Image Widget UI

Many of the fields are the same as what’s provided by the media library modal. Not surprisingly, WordPress.com uses the same interface and requires the user to know the image URL.

Core Image Widget May Be Ready in Time for WordPress 4.7.4

The team is specifically seeking feedback from those who use image widgets provided by plugins on WordPress.org. Once the image widget is merged into core, the video and audio widgets will be added to the Core Media Widgets plugin. Users can leave the plugin enabled until all three widgets are added to core.

“Once a widget has been thoroughly tested by users, we can then copy it into core for a release while then also disabling the widget in the plugin,” Ruter said.

If you encounter a bug or discover an incompatibility with a plugin or theme, please create an issue on the project’s GitHub page. According to Ruter, the team is working hard to get the widget to a point where it can be merged into core. Depending on how testing goes, it could be merged into core as early as WordPress 4.7.4.

23 Comments


  1. Tried the plugin before and it’s not only for images; audio & video are also get a lot easier to add on sidebars. Lovely widgets!

    I hope it would be fine to include this on my comment ;) If anyone wants better visibility control of your media widgets, you can check out Widget Options for WordPress; free on .org repository too! I hope this will be of great help.

    Cheers,
    Jeffrey

    Report


    1. True, but I didn’t see the separate Video and Audio widgets during my tests. I only saw the image one. I imagine the Video and Audio widgets will be added soon though.

      As for controlling when and where Widgets are displayed, I use the Visibility module in Jetpack. https://jetpack.com/support/widget-visibility/

      Report


  2. Important to note that the various fields that the Jetpack image widget provides are also available in the new pending core image widget. Once you click on the “Edit Image” button you’ll see the fields for manipulating the caption, alt text, size, alignment, link URL, and all of the other properties you see when editing an image’s properties in the post editor.

    Report


    1. I kinda noted this but perhaps was not specific enough.

      The user interface is much simpler compared to the image widget supplied by Jetpack. Jetpack’s image widget UI doesn’t take advantage of the media library modal and instead, requires the user to know the image’s URL.

      I noticed the fields in the Jetpack widget are the same fields that are available in the Media Library Modal. Personally, I never use those fields and find them cumbersome or in the way. I tested the image widget by uploading a new image, setting it, and that’s all I needed to do. It was simple.

      I don’t want to see those fields added to the widget like the Jetpack one but I guess we’ll see what users think.

      Report


  3. I am going to do something unheard of and claim the the jetpack implementation is better. setting dimensions of the image is vital,adding external images (for all kind of “ads”) is very important for such a widget, and if it is external you need to configure title and caption.

    Didn’t try the widget yet, but it seems a big omission that you can not configure some user defined url as a target for an associated link.

    The only thing jetpack is lacking is the ability to select from the media library (and not handling responsiveness, but I haven’t heard of almost anyone that does it)

    Report


      1. Inserting external media via the media library was always a bad UX. not sure how you can even edit it after the first selection.

        Actually forcing people to open the media library at all is not great… you can probably do the widget from as a drag target to images to make it slightly easier.

        But generally I am with Nick below…. A media is just a form of content and if there is a need to be able to add general content to the sidebar, than a full dedicated post type and editing experience is more useful than handling it on one by one base (different for general text, different for images, probably different for audio, video, pdf, svg, ads …). And post type will have the additional benefit for status and revisions and capabilities….

        Report


  4. A little bit amused, but not shocked by anything anymore how easy people get excited over not only simple things, but things that already exist, and are 100 times better, in the meantime not addressing the real issues and WordPress’s shortcomings.

    There is a plugin called “Image Widget” at the repository, but it’s only for images and not video or audio files.

    BUT, there is a plugin called WP Editor Widget which is truly the perfect Swiss army knife for widgets. It’s basically a text widget with the full TinyMCE editor available. Add media, shortcodes, and basically anything you can do in a post or page. This plugin should have been selected for the core… but again, what do I know?

    I would instead put all of the available resources to tackle the security issues, before doing anything “spectacular” like this, or distraction free writing !!!

    Report


    1. Another good one that should-be-in-core is Black Studio TinyMCE Widget – 900,000+ Active installs.
      Also something like Jetpack’s Visibility module is much needed in the core.

      Report


      1. That was my initial choice dariodev, until I found the WP Editor Widget, which does exactly what Black Studio does, but the code is half the size, may be more, that’s why I went with the WP Editor Widget.

        Report


    2. in the meantime not addressing the real issues and WordPress’s shortcomings.

      Totally agree.

      Report


    3. I would instead put all of the available resources to tackle the security issues, before doing anything “spectacular” like this, or distraction free writing !!!

      This.

      Report


  5. Semi off topic but you mention at the end possibly being merged into 4.7.4. This seems a bit confusing to me as doesn’t WordPress usually only change the last number for bug and security fixes. The below is irrelevant if this is just a typo.

    Not adding new features and waiting til 4.8 to be added? I mean I remember reading that the next big update which I thought would of been 4.8 wasn’t going to be the normal 3 – 4 month cycle. Due to focusing on the features rather than restricting themselves to the timeframe.

    Does this also mean then that feature releases even if small like this would go through RC versions and be released automatically or would automatic updates still be restricted to bug and security fixes?

    Report


    1. Adding a core widget isn’t major functionality and if it’s deemed core ready, it will be added in either a point release or a major release. At this point, there is no confirmed or set time on when 4.8 will be released so if it’s a small feature and ready, it will be pushed out in a minor release. And, minor releases as we know are updated automatically.

      As for the RC stages for point releases, I don’t have an answer on that but it would be nice to see at least one RC release, especially if it doesn’t have security patches and adds features.

      Report


      1. Thanks will be interesting I hadn’t heard of them realising even small features automatically before so I do hope they have at least one RC release as well just as that little extra precaution.

        Report


      2. @Jay Starting this year, new smaller features can be included in minor releases. Normally in the past they would be limited to major releases. Minor releases do have RC versions, but they don’t get much fanfare. That should change this year. There were release candidate posts for 4.7.1 and 4.7.3: https://make.wordpress.org/core/2017/01/06/upcoming-wordpress-4-7-1-release/
        https://make.wordpress.org/core/2017/02/28/wordpress-4-7-3-rc1-is-now-available/

        Automatic updates will still be done for these minor releases, whether they are for bug fixes, security, or smaller features.

        Report


  6. I like the idea. This feature is very useful for most users. Although they can use a plugin for that, but putting a very helpful thing into the core is a great move.

    Report


  7. glad to hear this. it would reduce one of my external plugins usage. also looking for a “wp edit” kind ah function for wordpres core editor, specially “Text Search” Option.

    Report


  8. Ok yay. But the fact that this is still missing after how many years is kind of a joke. A simple rich text editor widget along the lines of Black Studio or WP Editor should have been in core long long ago. An image widget, or any other media widget is great, but it’s a little bit astonishing that it took this long to get to this point. But still…yep…yay.

    Report

Comments are closed.