Marsha Docs

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

College of Science Programs

Search Degree Programs

Filter by Degree Level

Online Options

View Online Options

[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>

Copy Code to Clipboard

Program Listing with Undergraduate Default