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:

    <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"]

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


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;
<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.)

  • Tnx for answering. I've placed the second code at the top of the page, then the custom shortcode, then the select then the do_shortcode[jobs-custom]. First, wp_get_current_user_id breaks things, I changed to wp_get_current_user. When I select a value, I get a 404 with URL something like ./jobs-page/&jobs-per-page=30. I tried changing the & to ?, then I don't get a 404, but the nothing changes. Also, if I select a value, the page reloads, nothing changed, but if I select then another value, it doesn't replace the previous one, just adds to it, like ./jobs-page/?jobs-per-page=30?jobs-per-page=20 – MAR Jun 11 '19 at 10:31
  • yes you are on the right track, fix those issues (you want get_current_user_id() not wp_get_current_user() there) ... have updated the javascript function to account for the different URLs so try that. – majick Jun 11 '19 at 11:08
  • Ah that's seems to be populating the URL correctly. (just one thing, in the add_shortcode there's an extra } before the return. However it still always displays 10 jobs, but I realized this is because of the setting in the theme's option (I'm using Divi), where it sets the maximum posts per page. I will try to figure out how to override this. Would appreciate if you have a quick fix. Thanks for your help! – MAR Jun 11 '19 at 12:19
  • I'd suggest try turning the theme limit up to make sure that is the problem first... it really should not be interfering with other post types than just post. You can add your own custom filter on pre_get_posts to change the query based on the post type. – majick Jun 11 '19 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.