More On Widgets

Drag & Drop a Widget

Sidebar widget showing drag and drop.If you want to reorder your widgets, it is as simple as dragging and dropping from one part of the Widgets page to the other.

If you hover a Widget, either in the Available Widgets column or in one of the Widget Areas (sidebar, footer or header), your cursor will change to a four sided directional arrow.

You can then click and hold to drag and drop. Using this feature, you can reorder the widgets within a sidebar, header or footer Widget area.

You can also click and hold to drag a Widget from the list of Available Widgets to the Widget Area where you want the Widget to appear.

Removing a Widget

Removing a widget from a Widget Area can be done two ways.

  1. You can drag and drop the Widget into the Available Widgets area.
  2. You can open the Widget and click the red Remove link on the bottom left of the Widget.

Check Your Work

After moving widgets where you want them, be sure to take a look at your site to see how they are looking in the page or post.  If it not quite right, go back and make adjustments as necessary.

Saving Customized Widgets

But what if you have made changes to the Widget and don’t want to lose those changes by putting the Widget back into the Available Widgets or by deleting the Widget from your Widget Area?

Inactive Widgets keeps settings while not using the widget.Below the Available Widgets area on the left is an area for Inactive Widgets. This is where you can store Widgets you have customized (such as the Text Widget) for later use.  When you’re ready to start using the Inactive Widget, just drag and drop it into the Widget Area where you would like it to appear.  This change is automatically saved for you.

What is a Widget?

What Is a Widget?

WordPress Widgets allow you to add information and tools to the sidebar of your website.  A sidebar is the narrow column on the right or left of your blog posts.  Each section in the sidebar is known as a Widget that you can add or remove.  You can also rearrange the order of your widgets.   You can have a search button, list your most recent posts, list your categories, add in a calendar and other features.  Plugins can add their own widget functions.

Most widgets do not require any code experience.  They can be added, removed and rearranged either in the Theme Customizer or from the Dashboard by going to Appearance >> Widgets.

Standard WordPress Widgets

WordPress comes with 13 Widgets preinstalled.  Those Widgets are:

  • Archives
  • Calendar
  • Categories
  • Custom Menu
  • Links
  • Meta
  • Pages
  • Recent Comments
  • Recent Posts
  • RSS
  • Search
  • Tag Cloud
  • Text

Depending on your theme, Widgets can be installed in the Left or Right Sidebar, Header or Footer. To add, remove or rearrange a widget in a sidebar or other Widget Area, navigate to the Widgets page by going to Appearance >> Widgets.

Your screen will look something like this:

Widgets screen inside dashboard.

Your Widget screen may have additional sidebars, footers and/or the opportunity to have Widgets in the header.  Where you can have these Widget areas is based on your theme.

Sidebar with Widgets for Search, Recent Posts, Recent Comments, Archives and Categories.

Click on the carrot to the right of the Widget title to open the Widget.  Opening the widget will give you different options, depending on the Widget.

In the Search Widget, opening the Widget gives you the opportunity to put a title above a Search bar . . .

Editing the title of the Search Widget in the sidebar.

 

 

 

 

 

 

. . . becomes this in the sidebar of your blog:

Edited title of the Search Widget.

Cropping an image

You upload you image to the Media Library.  You realize your image needs to be cropped.  Ugh.  In the old days, you would have to crop that image in your photo editing software and upload the image again. Good news . . .you can now crop your image from the Media Library.

Cropping an Image

Start in the Media Library.  Select the image you want to crop.

The Edit Media or Attachment Details page is next screen.  Click on the Edit Image button below your image.image-editing-01

To start cropping an image, click and drag over the area you want cropped.  The cropped area will become darker.  The area to preserved will be brighter.  Move the crop square as needed to get the crop you want.  Click and hold on any of the little squares (in the corners, center top, bottom, left and right area of the image) to lengthen or shorten the crop.  To scale smaller or bigger, click and drag a corner square.

image-editing-02
Happy with the the new look?  Click the crop button above the image.  The cropped image will replace the original image.  When you are done editing your image:

  • click  the Save button below the image
  • AND THEN click the blue Update button in the right sidebar to update the image.

Media Library

The Media Library allows you to edit, view and delete media you uploaded to your website or blog.  The Media Library provides you with two ways to view your library, the Grid and List Views.  You can toggle between the Grid and List Views by clicking on the icons under the Media Library title.

Toggle the Media Library Views between List and Grid Views.

Media Library Grid View

The Grid View gives you thumbnails of your images, audio and movie icons.

Media in the Library Grid View.

Media Library in the Grid View showing drop down menu.

 

With the grid view,  your media library automatically displays all media items.  It can also be sorted by images, audio, video and media items not attached to a page or post.

 

 

 

 

Media Library List View

The Media Library List View is a table which lists all of your media in a row.  Media is listed with the newest upload first.

Media Library in the List View.

By hovering over a library item in the the List View, you get three options:  Edit, Delete Permanently and View.  You can also quickly see what page or post the library item is attached to and when it was uploaded.

media-library-05

Click Delete Permanently to delete the image from the database.  Clicking View will bring you to the attachment page for the library item.  Clicking Edit will bring you to a page where you can add a caption, alternative text for screen readers and a description of the image.

Media Library - view media to edit the Caption, Alternative Text and Description.

 

Image Details

Once you selected the image you want to add to your page or post, you’ll see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane in the right sidebar of the media uploader.

Attachment Details for your Image

Image details - adding an image to your post or page.

The Attachment Details shows a small un-cropped thumbnail of the image, and important information like the filename, date uploaded, and image dimensions in pixels.

There is a link so you can edit the image, which takes you to the Edit Image page, or you can delete the image by clicking the Delete Permanently link.

You can also edit the following information about your image:

Title: The title of this media.
Caption: The caption for this image. The text you enter here will be displayed below the image.
Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media. This alternate text is used by screen readers.
Description: A description of this image.
For more information on these media settings, see the Codex Edit Media page.

Attachment Display Settings for your Image

Image details display settings - adding an image to your page or post.The Attachment Display Settings (below the Attachment Details) controls how your image is displayed when seen on your site.

You can set the alignment (left, center, right or none) and what size image you would like to display on your page.

Left Alignment aligns the image on the left hand margin, and any text that is on the page wraps  around the image to the space on the right.
Right Alignment aligns the image on the right hand margin, and any text that is on the page wraps around the image to the available space on the left.
Center Alignment aligns the image to the center of the page, with no text displayed around the image.
None Alignment Setting inserts the image in to the page with no alignment