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