I'm using WP Job Manager, and the page which lists all available jobs is delivered using a shortcode which can be customized.

so [jobs per_page="10"] is outputed in the frontend as:

<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" 
data-show_pagination="true" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">

I want to somehow add to that page a dropdown which allow visitors to select how many listings to show per page.

What I was thinking to do is to create a dropdown where when a user selects an option, the page is reloaded with a different shortcode. So for instance:

<select>
    <option value="10">10</option> // page reloaded with [jobs per_page="10"]
    <option value="20">20</option> // page reloaded with [jobs per_page="20"]
    <option value="30">30</option> // page reloaded with [jobs per_page="30"]
</select>

My question is, is it feasible to achieve this using some <select onchange="someAction">, or is there a better solution for this?

I'm using WP Job Manager, and the page which lists all available jobs is delivered using a shortcode which can be customized.

so [jobs per_page="10"] is outputed in the frontend as:

<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" 
data-show_pagination="true" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">

I want to somehow add to that page a dropdown which allow visitors to select how many listings to show per page.

What I was thinking to do is to create a dropdown where when a user selects an option, the page is reloaded with a different shortcode. So for instance:

<select>
    <option value="10">10</option> // page reloaded with [jobs per_page="10"]
    <option value="20">20</option> // page reloaded with [jobs per_page="20"]
    <option value="30">30</option> // page reloaded with [jobs per_page="30"]
</select>

My question is, is it feasible to achieve this using some <select onchange="someAction">, or is there a better solution for this?

• php
• functions
• filters
• shortcode
• select

1 Answer 1

You can create a custom shortcode wrapper that will execute the shortcode with the desired attributes, so you would use [jobs-custom] in the page:

add_shortcode('jobs-custom', 'custom_jobs_shortcode');
function custom_jobs_shortcode($atts) {
    if (is_user_logged_in()) {
         $per_page = get_user_meta(get_current_user_id(), 'jobs-per-page', true);
    }
    if (!isset($per_page) || !$per_page) {
       if (isset($_COOKIE['jobs-per-page'])) {$per_page = $_COOKIE['jobs-per-page'];}
       else {$per_page = 10;}
    }
    return do_shortcode('[jobs per_page="'.$per_page.'"]');
}

Then add an earlier action to check for a querystring value and set the user meta/cookie...

add_action('init', 'custom_set_jobs_per_page');
function custom_set_jobs_per_page() {
    if (isset($_REQUEST['jobs-per-page'])) {
        $per_page = absint($_REQUEST['jobs-per-page']);
        if ($per_page > 10) {
            if (is_user_logged_in()) {update_user_meta(get_current_user_id(), 'jobs-per-page', $per_page);}
            else {setcookie('jobs-per-page', $per_page, (time()+(7*24*60*60);}
        }
    }
}

With this in place you can add the javascript onchange function to your <select> input:

<script>function change_jobs_per_page() {
    el = document.getElementById('jobs-per-page-select');
    perpage = el.options[el.selectedIndex].value;
    href = window.location.href;
    if (href.indexOf('jobs-per-page=') > -1) {
        href = href.split('jobs-per-page=');
        window.location.href = href[0]+'jobs-per-page='+perpage;
    } else if (href.indexOf('?') > -1) {
        window.location.href = href+'&jobs-per-page='+perpage;
    } else {
        window.location.href = href+'?jobs-per-page='+perpage;
    }
}</script>
<select id='jobs-per-page-select' onchange='change_jobs_per_page();'>

The advantage of this approach is that the new per page value is persistent until changed by the user (or the user cookie expires.)