Web Services Blog

Web Services

Widgets

About Widgets

Widgets are small bits of code meant to reused on multiple pages. They are very important as they are a way to display small bits of critical information to your audience. They are commonly used for contact information, office hours, commonly requested forms, applications, announcements, events or news feeds. For instance, you may wish to have your contact information or office hours shown on multiple pages. By putting this information in a widget, you can simply reuse the widget instead of typing it up each time.

Widgets can also automate displaying dynamic content, such as upcoming events, calendars, recent posts, updates, related news etc. Rather than having to type up all these information, you can use a widget to automatically pull this information from other sources and display it for you.

Examples include the news feed in the “Student Life” section of the dixie.edu homepage, the “Featured Posts” section of the Trailblazer Bulletin, or the Professional Arts events calendar.

Creating & Editing Widgets

Creating

Copy the shortcode at the bottom to "arbitrarily" place the widget anywhere on the page

Editing a Widget

You can create and edit widgets from the “Widgets” screen accessible from the “Appearance” menu in the WordPress Dashboard. To create a widget, select the type of widget you wish to make. Click the type and drag it to a sidebar; remember which sidebar you drag it to, because you will need this number later. Once the widget is on a sidebar, you should see various options and settings for the widget. Most of the widgets are self-explanatory, contact your web intern if you have questions on what each widget does. Please note that Widgets don’t auto-generate HTML tags for you, so you must hand-code any HTML tags you want to use for spacing and headings. If you are uncomfortable using HTML, ask your web intern to code your widgets for you.

Remember to save you changes before exiting the Widgets screen!

Editing

To edit an existing widget, search through the sidebars until you locate the widget you wish to edit. Click the “down” arrow on each widget to view its contents. When you find the one you want to edit, make your edits and click save. Remember that widgets don’t auto-generate HTML tags for you, so you must hand-code any HTML tags you want to use for spacing and headings.

Displaying Widgets

Select the Sidebar which contains the widgets you wish to display

Select the Sidebar which contains the widgets you wish to display

The most common way of displaying a widget is to add it to a sidebar and select the sidebar from the Page/Post Editor. For instance, if you create a contact widget on “aux sidebar 1”, open the page you want the widget to appear on, and check the box next to “aux sidebar 1”. After saving, the contact widget will now appear on the page.

Another way to display widgets is to use the “Arbitrary” widget container. Widgets placed in the “Arbitrary” container are saved, but do not render in a sidebar. Instead you use the shortcode created by the widget to place it anywhere you want on a page.

Copy the shortcode at the bottom to "arbitrarily" place the widget anywhere on the page

Copy the shortcode at the bottom to “arbitrarily” place the widget anywhere on the page