Website add-ons for promoting UW job postings

1. Download the WordPress Plugin
2. Login into your WordPress environment and navigate to the admin dashboard.
3. From your admin dashboard, locate your plugin administration panel.
4. At the top of the plugin administration panel, select Add New Plugin, and then upload the full zip file of the plugin.
5. Navigate back to the plugin administration panel and activate the plugin.

This plugin can be updated using WordPress’ standard one-click update process.

To check for updates, navigate to the WordPress Updates page in your admin dashboard. If an update is available, it will be indicated on this page. Occasionally, plugin updates may not be immediately shown on this panel. If you believe there may be an update that is not being shown, click the Check Again link to refresh the link.

1. Create the page where you’ll display the job listings.
2. Within the WordPress page editor, locate the button with the briefcase icon labeled “Insert job openings from Jobs at UW” on the WYSIWYG editor toolbar. Click the button to toggle the controls.
   
3. Choose the options that apply to you. To learn more about the filter options, please visit how to filter job openings.
4. Click on the “Insert” button to insert a system generated shortcode into the editor.
   

A variety of filtering options are available when you create a new job opening list.

You can apply filters to control which jobs appear in your list. For example, you can select a department in the Department dropdown. Then, you can further segment these with the Sub Department filter.

Other filter options include Job Group, Job Number(s), and Department Number(s). More than one filter may be used at a time.

Filters

• Department – Filter the results by a department.
• Sub Department – Filter the results by a sub department. Department is required.
• Job Group – Filter the search to a job group.
• Job Number – Filter the results to one or more job numbers.
• Department Number – Filter the results to one or more department numbers.

To change the filters on an existing list, generate a new shortcode to replace the existing one.

A variety of style options are available when you create a new job opening list.

Style Options

• Sort Order – Sort the job list in ascending or descending order
• Sort By – Sort the job list by alphabet, closing date, or opening date
• HTML ID – Overrides the job lists’s HTML element ID
• Maximum Height – Sets a maximum height for the job list. If the list exceeds this height, the overflow will scroll.
• No Results Message – Overrides the default no results message

In addition to these options, you can control which fields are shown from the page editor.

Select which field(s) you would like to be visible for the jobs in the listing by checking off the item(s) under Fields to Show. The title is automatically selected as a requirement.

Field labels can be hidden by unchecking the Show Field Labels option in Style Options. This option is checked by default. Unchecking it will remove the labels from all fields.

The departments below are available for use in the department name and department number filters.

Please note: The spelling and formatting of these options must be entered exactly as they are written.

The job groups below are available for use in the job group filter.

Please note: The spelling and formatting of these options must be entered exactly as they are written.

To use this option, you will need access to your website’s source code. If you don’t have access to the source code, try our Google Tag Manager option instead.

Install the JavaScript-only solution

• Add the following script tag to your website:
  <script src="https://cdn.hr.wisc.edu/jobs-at-uw-plugin/jobs-at-uw-plugin.js"></script>
• On the page you intend to show job listings on, instantiate the JavaScript plugin using the demo code below:

  <script>
      document.addEventListener("DOMContentLoaded", (event) => {
          new jobsAtUW({
              "job_group": '',
              "department": '',
              "job_number": '',
              "department_number": '',
              "noresults": 'Sorry, there are currently no positions available.',
              "sort_by": 'title',
              "sort_order": 'asc',
              "display_labels": 'true',
              "display_descr": 'true',
              "display_job_number": 'true',
              "display_department_number": 'false',
              "display_department": 'false',
              "display_job_group": 'true',
              "display_location": 'false',
              "display_opening_on": 'true',
              "display_closing_on": 'true',
              "display_more": 'false',
              "maxheight": '',
              "target": 'EXAMPLE',
          });
      });
  </script>
  

• Then, add a div element to your page, insert the phrase “Loading…” (this phrase will be used as a placeholder while the job list results are loading), and give the element it an ID attribute.
  • Example: <div id="EXAMPLE">Loading...</div>
• Copy the new element’s ID into the “target” variable in the JavaScript configuration. This will inject the job list inside the element.
  • Example: "target": 'EXAMPLE',
• Reload the page to load your job list. (This list will be unfiltered. It will contain all jobs openings.)
• To refine your list, you will need to apply filters using the JavaScript configuration. Review the filter options section above for a list of the job groups and department names and numbers available to use as filters.
  • In the example below, we’ve filtered the list to faculty jobs within the School of Medicine:
    "job_group": 'Faculty',
"department": 'SCHOOL OF MEDICINE AND PUBLIC HEALTH'
  • To refine this to only faculty within their Department of Medicine, we can add the sub department’s name after a forward slash:
    "job_group": 'Faculty',
"department": 'SCHOOL OF MEDICINE AND PUBLIC HEALTH/DEPARTMENT OF MEDICINE'
  • The spelling and formatting of these filter options must be entered exactly as they are written in the filter options documentation above.

To use this option, you will need access to your website’s Google Tag Manager account.

Create a target element

Add a div element to your page, give it an ID attribute, and insert the phrase “Loading…” (this phrase will be used as a placeholder while the job list results are loading).

Example: <div id="EXAMPLE">Loading...</div>

Create a new Google Tag Manager tag

Create a new tag of type: Custom HTML. Insert the code below:

<script>
  var head = document.getElementsByTagName('head')[0]
  var js = document.createElement('script');
  js.src = 'https://cdn.hr.wisc.edu/jobs-at-uw-plugin/jobs-at-uw-plugin.js';
  js.setAttribute('onload', 'initjobsAtUW()');
  head.appendChild(js);
  function initjobsAtUW() { 
    new jobsAtUW({
      "job_group": '',
      "department": '',
      "job_number": '',
      "department_number": '',
      "id": '',
      "noresults": 'Sorry, there are currently no positions available.',
      "sort_by": 'title',
      "sort_order": 'asc',
      "display_labels": 'true',
      "display_descr": 'true', 
      "display_job_number": 'true', 
      "display_department_number": 'true', 
      "display_department": 'true', 
      "display_job_group": 'true',   
      "display_location": 'true', 
      "display_opening_on": 'true', 
      "display_closing_on": 'true', 
      "display_more": 'true', 
      "maxheight": '',
      "target": 'EXAMPLE',
    });
  }
</script>

Configure the tag

• In the initjobsAtUW() function, set the target variable to match the div’s ID attribute.Example: "target": 'EXAMPLE',
• This configuration will create an unfiltered list. It will contain all jobs openings. To refine your list, you will need to apply filters. Review the filter options section above for a list of the job groups and department names and numbers available to use as filters.In the example below, we’ve filtered the list to faculty jobs within the School of Medicine:
  "job_group": 'Faculty',
"department": 'SCHOOL OF MEDICINE AND PUBLIC HEALTH'To refine this to only faculty within their Department of Medicine, we can add the sub department’s name after a forward slash:
  "job_group": 'Faculty',
"department": 'SCHOOL OF MEDICINE AND PUBLIC HEALTH/DEPARTMENT OF MEDICINE'The spelling and formatting of these filter options must be entered exactly as they are written in the filter options documentation above.

Create a GTM trigger

Add a Page View trigger to the tag using the configuration:

• Variable: Page URL
• Operator: Contains
• Value: Your page URL

Note: The Google Tag Manager method could be impacted by ad blocker software. Generally, the default settings for ad blocker software will not impact Google Tag Manager, but if a user has customized their ad blocker to block Google Tag Manager, it will block this script as well.

Yes. These add-ons have been reviewed for accessibility by the Center for User Experience.

No. The Jobs at UW WordPress plugin is not available on WiscWeb at this time. The Google Tag Manager method is the best option for adding a list to a WiscWeb website.

No. This WordPress plugin does not include an add-on for Gutenberg or other page builders at this time. The Google Tag Manager or JavaScript-only methods are the best options for adding a list to a WordPress website that uses Gutenberg or other page builder plugins.

Possibly. This plugin was designed for use with the UW Theme and may not be compatible with all page builders. If your theme’s page builder is not compatible, consider using the Google Tag Manager or JavaScript-only methods.