Styling Custom Fields on Job/Resume Listing

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:

Field Value DIV:

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:

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:

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.


 

Total 2 Votes

Tell us how can we improve this post?

+ = Verify Human or Spambot ?