Styling Custom Fields on Job/Resume Listing

Because WP Job Manager Field Editor does not include any styles (which 99% of the time causes problems), the plugin relies on your theme or adding custom styles to get everything to appear exactly how you would want it to.  Luckily I took this into consideration when adding this new features and as such there are standard wrapper and field divs that you can use to create your own CSS styles ( will probably add this as a feature in future release ).

Top/Bottom of Job Listing

Each custom field you set to automatically output on the job/resume listing will be wrapped in a <div>  with 1 class and 1 ID.

The value from the custom field will be inside another <div>  with 1 class and 1 ID.  The syntax used for the <div>  you can see below, the actual output will vary based on the field’s meta key, so using the syntax below FIELD_META_KEY  will be whatever that field’s meta key is.

Wrapper DIV:

<div id="jmfe-wrap-FIELD_META_KEY" class="jmfe-custom-field-wrap">

Field Value DIV:

<div id="jmfe-custom-FIELD_META_KEY" class="jmfe-custom-field">

As an example, if you were to set a custom field with a meta key of job_salary  to output at the top of the job listing, this is the HTML the plugin will automatically generate:

<div id="jmfe-wrap-job_salary" class="jmfe-custom-field-wrap">
    <strong>Job Salary:</strong>
    <div id="jmfe-custom-job_salary" class="jmfe-custom-field">
        $99,000
    </div>
</div>

You can also specify your own custom classes to add to the field value’s <div>  which I will explain further below.

The <strong>Job Salary:</strong>  is added only when Show Label is checked in the field configuration.

Meta Start/End Output

If you decide to pick to automatically output at meta start or meta end the ID and classes are exactly the same above except that instead of a <div>  for the wrapper it will be an <li>  wrapper.  Below is an example of the automatically generated HTML for the same field from above, except this example would be either at meta start or meta end:

<li id="jmfe-wrap-job_salary" class="jmfe-custom-field-wrap">
    <strong>Job Salary:</strong>
    <div id="jmfe-custom-job_salary" class="jmfe-custom-field">
        $99,000
    </div>
</li>

This is because the meta locations are inside of the <ul class=”meta”>  wrapper and in order to show correctly they must be added as <li>  items.