Note on Program Listings
Currently this shortcode should only be used on college level pages.
Program Listings Parameters
The parameters for the program listings shortcode:
- Title (title): The title of the section, "College of Science Programs" for example.
- RequiredCollege (college): The 3-5 letter abbreviation for your college:
- cam
- cohp
- cos
- cob
- coepd
- cecs
- cola
- Per Row (per_row): For pages with sidebars on the left or right, the default value of 3 should be used. If you have a full-width page for your program listings you can set this to 4.
- Show Online (show_online): The default is true, if set to false this will hide the "Online Options" filter at the top.
- Degree Level (degree_level): You can add this if you want to set the default degree level to undergraduate or graduate listings.
Program Listings Example
Program Listing
Shortcode
HTML
[mu_program_listing title="College of Science Programs" college="cos"]
<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div id="programs" class="" x-data="programList('cos', '')" x-init="loadPrograms()">
<div class="block w-full text-2xl lg:text-4xl tracking-wide font-serif text-green font-semibold">
College of Science Programs
</div>
<div class="flex flex-wrap mx-0 lg:-mx-4 items-center my-6">
<div class="w-full lg:w-1/3 px-0 lg:px-4">
<label for="searchTerm" class="font-semibold uppercase">Search Degree Programs</label>
<input class="text-input w-full mt-2" name="searchTerm" x-model="searchTerm" type="text" />
</div>
<div class="w-full lg:w-1/3 px-0 lg:px-4 mt-8 lg:mt-0">
<label for="searchTerm" class="font-semibold uppercase">Filter by Degree Level</label>
<select class="form-select w-full mt-2" name="degree_type" x-model="degree_level">
<option value="">----</option>
<option value="undergraduate">Undergraduate</option>
<option value="graduate">Graduate</option>
</select>
</div>
<div class="w-full lg:w-1/3 px-0 lg:px-4 mt-8 lg:mt-0">
<div class="font-semibold uppercase">Online Options</div>
<div class="flex mt-2 items-center">
<label for="online" class="cursor-pointer" x-on:click="online = !online">
<input type="checkbox" x-model="online" class="form-checkbox" name="online">
View Online Options
</label>
</div>
</div>
</div>
<div class="flex flex-wrap mx-0 lg:-mx-4 mt-8">
<template x-for="program in programs">
<div class="flex w-full lg:w-1/3 px-0 lg:px-4 mb-8" :class="{ 'hidden' : !program.filter_keys.toLowerCase().includes(searchTerm.toLowerCase()) || (college !== '' && program.college_link != college) || (online == true && program.online_degree != true) || (degree_level !== '' && program.degree_level != degree_level) }">
<a x-bind:href="program.degree_link" class="flex flex-col bg-gray-100 rounded px-4 py-4 group hover:bg-green transition-colors duration-200 ease-in w-full" style="text-decoration: none!important">
<span>
<span class="no-underline block text-green font-serif text-xl font-semibold group-hover:text-white" x-text="`${program.degree_name}, ${program.degree_type}`"></span>
<span class="mt-3 text-black group-hover:text-white text-sm">
<span x-text="collegeDisplay(program.college_link)"></span>
</span>
</span>
<div class="mt-3 text-gray-600 group-hover:text-white" x-show="program.academic_maps.length > 2">
</div>
<span class="flex items-center text-gray-600 mt-6 group-hover:text-white" x-show="program.online_degree" x-cloak>
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18 16h2v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-1h2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v12zM4 4v9h12V4H4zm4 11v1h4v-1H8z"/></svg>
<span class="ml-2 text-sm">Online Options Available</span>
</span>
</a>
</div>
</template>
</div>
</div>
Program Listing with Undergraduate Default
Shortcode
HTML
[mu_program_listing title="College of Science Programs" college="cos" degree_level="undergraduate"]
<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div id="programs" class="" x-data="programList('cos', 'undergraduate')" x-init="loadPrograms()">
<div class="block w-full text-2xl lg:text-4xl tracking-wide font-serif text-green font-semibold">College of Science Programs</div>
<div class="flex flex-wrap mx-0 lg:-mx-4 items-center my-6"><div class="w-full lg:w-1/3 px-0 lg:px-4">
<label for="searchTerm" class="font-semibold uppercase">Search Degree Programs</label>
<input class="text-input w-full mt-2" name="searchTerm" x-model="searchTerm" type="text">
</div>
<div class="w-full lg:w-1/3 px-0 lg:px-4 mt-8 lg:mt-0">
<label for="searchTerm" class="font-semibold uppercase">Filter by Degree Level</label>
<select class="form-select w-full mt-2" name="degree_type" x-model="degree_level">
<option value="">----</option>
<option value="undergraduate" >Undergraduate</option>
<option value="graduate">Graduate</option>
<option value="professional">Professional</option>
</select>
</div>
<div class="w-full lg:w-1/3 px-0 lg:px-4 mt-8 lg:mt-0">
<div class="font-semibold uppercase">Online Options</div>
<div class="flex mt-2 items-center">
<label for="online" class="cursor-pointer" x-on:click="online = !online">
<input type="checkbox" x-model="online" class="form-checkbox" name="online">View Online Options
</label>
</div>
</div>
</div>
<div class="flex flex-wrap mx-0 lg:-mx-4 mt-8">
<template x-for="program in programs">
<div class="flex w-full lg:w-1/3 px-0 lg:px-4 mb-8" :class="{ 'hidden' : !program.filter_keys.toLowerCase().includes(searchTerm.toLowerCase()) || (college !== '' && program.college_link != college) || (online == true && program.online_degree != true) || (degree_level !== '' && program.degree_level != degree_level) }">
<a x-bind:href="program.degree_link" class="flex flex-col bg-gray-100 rounded px-4 py-4 group hover:bg-green transition-colors duration-200 ease-in w-full" style="text-decoration: none!important">
<span>
<span class="no-underline block text-green font-serif text-xl font-semibold group-hover:text-white" x-text="`${program.degree_name}, ${program.degree_type}`"></span>
<span class="mt-3 text-black group-hover:text-white text-sm">
<span x-text="collegeDisplay(program.college_link)"></span>
</span>
</span>
<div class="mt-3 text-gray-600 group-hover:text-white" x-show="program.academic_maps.length > 2">
</div>
<span class="flex items-center text-gray-600 mt-6 group-hover:text-white" x-show="program.online_degree" x-cloak>
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18 16h2v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-1h2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v12zM4 4v9h12V4H4zm4 11v1h4v-1H8z"/></svg>
<span class="ml-2 text-sm">Online Options Available</span>
</span>
</a>
</div>
</template>
</div>
</div>