University Marketing & Communications

December 19, 2012

Pagelets in WordPress

By University of Washington

On this page:


Overview

“Pagelet” is a custom WordPress widget created by the Marketing Web Team for content that needs to be displayed in multiple pages or in the right-hand menu of some (but not all) of your pages.

They are also useful for when you have reoccurring but time-sensitive information. You can “turn off” the pagelet (and the text or HTML it contains) by editing the pagelet and changing it from Published to Draft status.

Possible uses for Pagelets are:

  • You find you are re-entering and then removing the same or very similar text/code on a regular basis
  • You find you are commenting out code that you want to retain for later use
  • You need to place the same text or code on a number of different pages throughout your site (you can edit just one pagelet instead of needing to edit multiple pages)

Pagelets are a two-part process. You must first create a pagelet, then enable it in one of two ways:


How to create a Pagelet

You may fully customize your pagelet using text or HTML code.

  1. From the left-hand navigation, open Pages > Pagelets.
    • Open Pages > Pagelets

      (Click image to enlarge.)

  2. Click the Add New button on the right-hand side of the Pagelet header.
    • Click the Add New button

      (Click image to enlarge.)

  3. Enter a title for your Pagelet and enter your text or HTML, then click the Publish button.
    • Enter a title for your Pagelet and enter your text or HTML

      (Click image to enlarge.)

  4. Before your pagelet will appear, you must either embed it on your page or enable it on the right-hand sidebar.

Embed a Pagelet on your page

This process will show you how to embed your pagelet in the center content of your page(s). Example:

Preview your page to see the pagelet

(Click image to enlarge.)

  1. First, follow the steps above to create a pagelet.
  2. Next open the Pagelets dashboard via Pages > Pagelets if you are not already there.
    • Open the Pagelets dashboard
  3. Click on the Pagelet name or Edit to open your Pagelet in the Edit screen.
    • Open pagelet in the edit screen

      (Click on image to enlarge.)

  4. Find and copy the Pagelet ID number. To do this: Examine the address bar of your browser and select and copy the three numbers that appear immediately after “post=”.
    • Select and copy the pagelet code

      (Click image to enlarge.)

  5. Next, edit the page where you want to embed your Pagelet.
  6. Insert the following short code, replacing the Pagelet ID number from step #4 in place of 000: [pagelet id=000]
    • Insert pagelet shortcode

      (Click image to enlarge.)

  7. Publish or Update your page to save your changes. You should now see your pagelet when you preview your page:
    • Preview your page to see the pagelet

Note: Your pagelet will only show on page if there is an ID supplied in the shortcode and if the pagelet itself is published. If there is no ID or the pagelet isn’t published (such as in draft or pending status) then the shortcode will not render your pagelet.


Add a Pagelet to your sidebar

This process will show you how to embed your pagelet in the right-hand sidebar of your page(s). Example:

Example of pagelet on External Affairs site

(Click image to enlarge.)

Note: You may have multiple pagelets designed for the right-hand area of your pages, but each page can only display one pagelet. You may also have different pagelets displayed on different pages.

  1. First, follow the steps above to create a pagelet.
  2. Open Appearance > Widgets from the left-hand navigation.
    • Open Appearance > Widgets
  3. Find the Pagelet Widget in the center pane titled Available Widgets, drag the widget to the Sidebar on the right-hand side.
    • Note: Sidebar items will be ordered on your site according to their placement here
    • Find the Pagelet Widget in the center pane titled Available Widgets

      (Click image to enlarge.)

  4. Next, edit or create a WordPress page where you want to display your new pagelet.
  5. To the right of the editor pane, select the new Pagelet Sidebar menu item.
    • select the new Pagelet Sidebar menu item

      (Click image to enlarge.)

  6. In the drop-down menu that displays “None,” select the pagelet you want to display and then click Update (or Publish) to save your changes.
    • Note: For any page that you do not want to display your pagelet, leave the drop-down menu set to “None.”
    • select the pagelet you want to display

      (Click image to enlarge.)

  7. Follow steps 4-6 for all pages that should display your pagelet.

From now on, you may modify and update your pagelet from the Pages > Pagelets section to make changes globally on your pages.

Here is how the above Pagelet example looks on the live External Affairs site:

Example of pagelet on External Affairs site

(Click image to enlarge.)