Trigger Search

If you want to trigger a search (without using normal .change() calls on the actual inputs, you can easily do so with an event.  This event is tied to the div element that has wpjmsf-section-1234-inner ID on it (where 1234 is the section ID) and will trigger a search update (or form submission if set to “Is Form”).  If multiple sections are output on the same page for the same type (job or resume), you can trigger on either of them.

Event: wpjmsf:search

Example:

jQuery('#wpjmsf-section-345-inner').trigger('wpjmsf:search');

Field Initialization

There’s two events you can use to know when a field has been initialized, one specific to the field type, and one for any field type.  The event will be triggered on document and you can easily hook into it using the examples below:

Below where you see TYPE_SLUG this is just a placeholder, and should be replaced with job or resume (see examples)

Any Field

This event will be triggered for every field when it is initially mounted/initialized.

Event: wpjmsf:TYPE_SLUG:field:loaded


Code that triggers the event:

jQuery( document ).trigger( `wpjmsf:${this.typeSlug}:field:loaded`, {
    fieldType  : this.field.type,
    fieldSource: this.field.fieldSource,
    field      : this.field,
    sectionId  : this.sectionId,
    searchValue: this.searchValue,
    searchValue2: this.searchValue2
} );

jQuery( document ).on( 'wpjmsf:job:field:loaded', function ( event, data ) {
    console.log( 'Field loaded:', data.fieldType );
} );

Specific Field Type

This event will be triggered only for a specific field type

Event: wpjmsf:TYPE_SLUG:field:FIELD_TYPE:loaded


Code that triggers the event:

jQuery( document ).trigger( `wpjmsf:${this.typeSlug}:field:${this.field.type}:loaded`, {
    fieldSource: this.field.fieldSource,
    field      : this.field,
    sectionId   : this.sectionId,
    searchValue : this.searchValue,
    searchValue2: this.searchValue2
} );

jQuery( document ).on( 'wpjmsf:resume:field:text:loaded', function ( event, data ) {
    console.log( 'Text field loaded:', data );
} );

General Events

There are also two other generic events, one when the initialization starts (before loading any cache, before performing first initial query), and one after the main init is completed.

Below where you see TYPE_SLUG this is just a placeholder, and should be replaced with job or resume (see examples)

Targets

For these events, they are not tied to the the document like fields are above, they are specifically tied to the listings element.  The examples below show for job and resume, they work for either.

Job Element: div.job_listings

Resume Element: div.resumes

Event: init_TYPE_SLUG_listings

Code that triggers the event:

$target.triggerHandler( 'init_TYPE_SLUG_listings', [values, config, page, append] );

jQuery( 'div.job_listings' ).on( 'init_job_listings', function ( event, data ) {
    console.log( 'Init Job Listings', data );
} );

$target.triggerHandler( 'init_TYPE_SLUG_listings_completed', [values, config, page, append] );

jQuery( 'div.resumes' ).on( 'init_resume_listings_completed', function ( event, data ) {
    console.log( 'Init Resume Listings Completed', data );
} );

This will require the String Translation plugin from WPML, and if you do not see any strings showing up for translation, you will need to go into String Translation area in the admin area, and enable this setting, then load the page where it has the search and filtering sections you want to be able to translate

WPML String Translation Auto Register

One thing to note, you may want to click on Edit button and set it to only auto register strings for the Search and Filtering plugin:

WPML String Translation Auto Register Only S&F

After you enable the auto registration of strings, load the page where the Search and Filtering section is at that you want to translate.  After loading this page, go back to String Translation, and you should see all the new entries under wp-job-manager-search-filtering text domain.

This requires WP Job Manager Search and Filtering 1.5.0 or newer

HTML data for the card

The first thing to understand, is how the HTML is generated for the card popups.  This data comes directly from the listings list itself.  Each listing shown in the results, will have a <li> item wrapped around it.  When the plugin generates the HTML to use, it will pull it from the data inside this <li> tag.  More details are below with the full customization options.

New configuration options

When editing a map field type, if you click on the Type Config tab, you will now see these new options below for customizing the popup card:

WP Job Manager Search and Filtering Map Field Type Custom Popup Settings

By default, prior to version 1.4.7, only the title from the listing ouput (in the list) would be used.  Version 1.4.7+ will now show the title, and company name (if one exists).  If you want to customize this, click the checkbox to enable the popup card customization.

Use Full HTML

This setting will pull the entire content from the listings table, so what you see in the listings list, is exactly what will be used in the popup.  For example, here’s the output in the listings list table:

Listings List

When you enable the setting to use the full HTML, you will now see that exact HTML inserted into the popup:

Use Full HTML Enabled

As you can tell though, the format looks a little bit off.  The reason for this, is because the styles used for the display in the list table, are only applied when that HTML is inside a specific wrapper element (specifically a <li> inside of <ul>). Because of this, we can’t replicate these wrapper elements without issues, so if you plan to use this feature, you will need to use your own CSS to adjust the styles, and make this look the way you want.

Custom Selector

The other option, is to use a custom selector.  This will pull the HTML from any content inside that <li> item, and use that as the HTML for the popup.  This is what you will want to use if you want full customization ability.  This value should always be a class, and as such, should have a leading . (period).

For example, in the standard layout structure, if you wanted to use the content inside the position class element, you would use a value of .position in the custom selector field:

This is just basic ways of handling this, if you want to take this a step even further, that’s what this feature is really meant for.

Customization in Template

To have full customization functionality, you can edit the template file used to output the listing in the list table, adding your own HTML, and then using the custom selector feature above to select that element.  This will require familiarity with PHP.

First you need to understand how template overrides work:

https://wpjobmanager.com/document/developer-reference/themes/template-overrides/

For this example below, we will be using the Job Listings template override, you can find the default file located at wp-content/plugins/wp-job-manager/templates/content-job_listing.php

After you copy this file to your child theme’s directory (using instructions from link above), you can now start editing it and adding your own HTML to output.

Without a Link to Listing

In this example below, we will be creating HTML we do not want to show in the listings table (and only for the popup), without any kind of wrapping link (HTML a tag).  When you do not wrap the output in a link element, S&F plugin will automatically do this for you.

Custom Popup HTML in content-job_listing.php

<div class="test-custom-selector" style="display: none;">
    <h3 style="margin-top: 5px; margin-bottom: 5px;"><?php wpjm_the_job_title(); ?></h3>
    <div class="company">
       Company Name: <?php the_company_name( '<strong>', '</strong> ' ); ?>
    </div>
</div>

As you can see in the screenshot above, i’ve added the following HTML, but the biggest thing to note is the display: none; to prevent it from showing in the listings results table.  When the S&F plugin pulls the HTML to use, it will only use the HTML inside the element you define.  This allows you to build out a completely custom display for map cards, without it being shown in the results table.

The code above will result in a map popup similar to this:

Custom Map Popup Custom Template

With a Link to Listing

Alternatively, you can include a link anywhere inside the HTML to the listing, and the Search and Filtering plugin will not automatically wrap one around the listing.  Let’s use the same example as above, but this time let’s put the link around the Job Title only.

Custom Popup HTML in content-job_listing.php (with link)

<div class="test-custom-selector" style="display: none;">
    <a href="<?php the_job_permalink(); ?>">
       <h3 style="margin-top: 5px; margin-bottom: 5px;"><?php wpjm_the_job_title(); ?></h3>
    </a>
    <div class="company">
       Company Name: <?php the_company_name( '<strong>', '</strong> ' ); ?>
    </div>
</div>

The output would look similar to this, where as you can see, the link is only around the title now:

Custom Map Popup Custom Template with Link

These are all just very basic examples to get you started.  If you have an elite license and need help with this, feel free to open a support ticket and i’ll be happy to help you figure it out!

Don’t forget to check out the documentation on how to output custom fields using PHP:

Output custom field values using PHP

View the full Scribe here

All you need to do is add some elements with these classes, and after results are returned, the Search and Filtering plugin will automatically insert the values.

Jobs Classes

Examples:
50 Jobs
1 Job

job_result_count – The count value (numeric) will be inserted into this element

job_result_count_test – The text for the type will be inserted into this element (Job or Jobs or whatever post type label you’re using, ie Listing/Listings, etc)

Full Example:
<div class="job_result_wrap"><span class="job_result_count"></span> <span class="job_result_count_text"></span></div>

Resumes Classes

Examples:
5 Resumes
1 Resume

resume_result_count – The count value (numeric) will be inserted into this element

resume_result_count_test – The text for the type will be inserted into this element (Resume or Resumes)

Full Example:
<div class="resume_result_wrap"><span class="resume_result_count"></span> <span class="resume_result_count_text"></span></div>

• Auto output selection must be “Meta Start”, “Meta End”, or “Meta After” (meta after only for Jobs)
• If you are using “additional outputs” the output for Overview (auto output) must be the main output (not the one selected in additional outputs)
• Enable Full Wrapper
• Enable Value Wrapper
• In “Output Classes” field, enter in the Font Awesome icon classes to use (ie fas fa-phone)

https://fontawesome.com/v5/search?m=free

You may need to talk to the theme developer to find out WHAT version of Font Awesome is used in your theme, the link above is for version 5 icons.

Previous version of WP Job Manager Packages had this feature available in it, but nowhere near the extend of the functionality introduced and added in 1.4.0.  Prior to version 1.4.0, if the product purchased that would “give” the free visibility package was a subscription or single product, it made no difference, and there was no synchronization between the purchased product.

As of version 1.4.0, this has all changed, there is now full synchronization between the visibility packages if the purchased product is a subscription.  Below I will go over the details of this, what has changed, and give a few examples of how you can set this up to make your site that much more awesome!

One thing to note, this new functionality is only around the PURCHASED product being some kind of subscription.  A single product purchase will still work as it did prior to the 1.4.0 update.  You will only see the new settings listed below if you’re also using the WooCommerce Subscriptions addon (sold separately).

New Settings

The 1.4.0 release adds two new settings available when setting up a product (see below for examples):

WP Job Manager Packages Subscription Give Settings

• Give on Sub Renew
  When enabled (default is enabled), if the purchased product is a subscription, when that associated subscription is renewed, the “given” visibility product will also be renewed (if subscription) or given again (if standard visibility product).Example: A Job Submission Subscription is purchased that gives a free Resume Visibility Subscription.  When the Job Subscription is renewed, the Resume Subscription will be automatically renewed (at no cost).
• Match Sub Status
  When enabled (default is disabled), any given package (subscription or standard) will have its status matched against the purchased subscription product.Example: A Job Submission Subscription is purchased that gives a free Resume Visibility package.  The Job Subscription expires, or is cancelled (not renewed).  All associated “given” Resume Visibility products will be set to this same status.

Handling Specifics

Given Product is Subscription

In the situation where the given product is a free subscription, when the “purchased” product that gives this subscription for free is made, the WP Job Manager Packages plugin automatically creates a $0 order in WooCommerce for the given subscription (to not mess with reporting).   This is regardless of the price set on the given product, that value is however carried over to the subscription (just not the order).

The status of this order is set to completed, and the Subscriptions addon handles all processing like normal (as if the user had actually purchased the subscription).  Notes are added on both the subscription and the order, with details of what product/subscription was purchased to give the visibility subscription for free.

• If rollover is enabled, this will be applied on renewal

Emails

By default, all normal subscription and order emails will still be sent like normal.  The order emails will all show the $0 cost to the user, and gives them a good understanding of the benefit of what they are getting for their purchase.

If for some reason you want to prevent some of these emails from sending, you can do so using a filter to prevent them from sending.  Just add the code snippets below (for emails you want to prevent from sending) to your child theme’s functions.php file (omit the <?php, there only needs to be one at the top of the functions.php file),  or using the Code Snippets plugin.

Prevent Give New Subscription “Completed” Order Email

This filter applies to the order email for both give on product purchase and give on user registration.  If you use this filter to disable order emails but want email enabled for user registration, use the filter listed below “Enable Give New Subscription Order (On Registration) Email”

Developers: to see all available parameters, check the file located at /wp-content/plugins/wp-job-manager-packages/includes/give.php in the give_user_subscription method.

<?php

add_filter( 'job_manager_packages_give_user_subscription_prevent_completed_order_email', 'jmp_give_prevent_completed_new_sub_order_email' );

function jmp_give_prevent_completed_new_sub_order_email( $send ){
    return true;
}

Enable Give New Subscription (on Registration) “Completed” Order Email

This is only needed if you’re using the filter above to disable new order emails for give on product purchase, and want to keep emails for on registration.

Developers: to see all available parameters, check the file located at /wp-content/plugins/wp-job-manager-packages/includes/give.php in the give_register_package method.

<?php

add_filter( 'job_manager_packages_give_reg_user_subscription_enable_order_email', 'jmp_give_enable_reg_new_sub_order_email' );

function jmp_give_enable_reg_new_sub_order_email( $send ){
    return true;
}

Prevent Give Subscription Renewal “Completed” Order Email

Developers: to see all available parameters, check the file located at /wp-content/plugins/wp-job-manager-packages/includes/give/wc.php in the check_give_related_sub_renewal method.

<?php

add_filter( 'job_manager_pacakges_give_renew_user_subscription_prevent_completed_order_email', 'jmp_give_prevent_completed_renew_sub_order_email' );

function jmp_give_prevent_completed_renew_sub_order_email( $send ){
    return true;
}

Below you can find details of this new shortcode, including the available arguments/attributes, and examples of how to use.

[each_custom_field]

This shortcode is meant for outputting any field that has “multiple” values for a single meta key (including resume repeatable fields).  The purpose of this shortcode is to allow you to customize how a multiple field value is output, using shortcodes inside a text widget or some other area of your site that supports shortcodes.

Attributes

key – required the meta key for the field you want to output

listing_id – optional if you want to output for a specific listing, use this to specify the listing ID, otherwise it will be automatically detected

Interior Shortcodes

Interior shortcodes are shortcodes that can only be used inside of the [each_custom_field] shortcode.  These allow you to output the value of the field (or value of a repeatable sub-field).  These shortcodes will not work outside of the [each_custom_field] shortcode.

[value] – will output the value of the field in the current loop (of each field value)

[each_custom_field_value] – used to loop through any resume repeatable field sub-values.  This will ONLY work for resume repeatable fields, do not try to use this for any other field type.  More details and examples can be found below.

Examples

This is a basic example using job_category:

[each_custom_field key="job_category"]
Category: [value]
[/each_custom_field]

You can also combine this with the [if_custom_field] (documentation) shortcode, to only show content when there is a value for that field (if using HTML does not work, make sure to switch to “text” to prevent editor from converting html thinking you want to “show” the HTML on the output):

[if_custom_field key="job_category"]
<ul>
[each_custom_field key="job_category"]
<li>[value]</li>
[/each_custom_field]
</ul>
[/if_custom_field]

Using with Resume Repeatable Fields

In order to use this shortcode with resume repeatable fields, you must use the [each_custom_field_value] shortcode mentioned above.  This will be used instead of the [value] shortcode, as resume repeatable fields are stored with a “key” instead of just the value like all other multiple field values are.  You will still use the [value] shotcode to output the actual value, but inside of the [each_custom_field_value]

[each_custom_field key="candidate_education"]
[each_custom_field_value key="location"]Location:[value][/each_custom_field_value]
[each_custom_field_value key="qualification"]Qualification(s):[value][/each_custom_field_value]
[each_custom_field_value key="date"]Start/end Date:[value][/each_custom_field_value]
[each_custom_field_value key="notes"]Notes:[value][/each_custom_field_value]
[/each_custom_field]

[each_custom_field key="candidate_education"]
[each_custom_field_value key="location"]Location:[value][/each_custom_field_value]
[each_custom_field_value key="qualification"]Qualification(s):[value][/each_custom_field_value]
[each_custom_field_value key="date"]Start/end Date:[value][/each_custom_field_value]
[each_custom_field_value key="notes"]Notes:[value][/each_custom_field_value]
[/each_custom_field]

When using the [each_custom_field] to output resume repeatable fields, only the values you specify with the [each_custom_field_value] will be output.  If there is no value for that specific field, nothing will be output (meaning the text inside will only be output when there is a value).

Tips and Tricks

Removing Line Breaks or Excess Spacing

By default when you use shortcodes, or a WordPress editor, it “automatically” adds paragraph tags sometimes to the output, which can result in extra line breaks.  If you want to remove this, it’s as easy as just updating your shortcode code to remove the line breaks you have in it.  My suggestion is to first make sure it outputs the values you want, then you can remove the line breaks and white space.  As example, for the basic example above, to remove the line breaks just change it to this:

[each_custom_field key="job_category"]Category: [value][/each_custom_field]

https://wpjobmanager.com/document/template-overrides/

If you want to customize any of the form field templates (template for field types), please see this link for documentation on that:
https://plugins.smyl.es/docs-kb/using-custom-template-overrides-for-input-fields/
–

For the Packages addon the override directory should be jm_packages instead of job_manager

For Resumes addon the override directory should be wp-job-manager-resumes instead of job_manager

This is ONLY required if you’re using version 1.7.2 or older! Version 1.7.3+ of Capstone theme has been updated to change these already, so you don’t need to do anything if you’re using 1.7.3 or newer.

The first file you must edit is located at wp-content/themes/capstone/includes/sidebar-modules.inc.php on line #10-11 you should see this code:

<?php get_template_part( 'includes/job-search.inc' ); ?>
<?php get_template_part( 'includes/job-filters.inc' ); ?>

CHANGE the file to instead look like this:

<?php get_job_manager_template_part( 'includes/job-search.inc' ); ?>
<?php get_job_manager_template_part( 'includes/job-filters.inc' ); ?>

The second file you need to edit is located at wp-content/themes/capstone/includes/page-hero.inc.php on line #24 you should see this code:

<?php get_template_part( 'includes/'. $hero_search_module .'-search.inc' ); ?>

CHANGE the file to instead look like this:

<?php get_job_manager_template_part( 'includes/'. $hero_search_module .'-search.inc' ); ?>

That’s IT!  Hopefully the developer will update the theme to use this function instead so you don’t have to manually edit the files yourself.  Keep in mind IF YOU UPDATE THE THEME these changes WILL BE LOST and you MUST manually edit and update the files again!