Listable User Guide

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 9

DownloadListable-User-Guide
Open PDF In BrowserView PDF
LISTABLE
User Guide

For full documentation visit ​https://pixelgrade.com/docs/listable/

GETTING STARTED
Installing The Theme
We want to help you start with the right foot in order to fully enjoy our WordPress theme. This
why, you need to make sure you have a solid foundation for what’s next by installing
WordPress, the theme you’ve chosen from our portfolio, and the right plugins. In this article, we
will walk you through a friendly process of setting up the theme in a way that’s correct and
trustworthy.

Step 1 — Installing the theme
1. Get the theme files by going to your Envato account → ​Downloads​ → Theme Name →
Download → Installable WordPress file only
2. Back to the WordPress Dashboard and navigate to Appearance → Themes. Click Add
New button at the top of the page and go for the Upload option.
3. For the file upload, pick the ZIP archive downloaded earlier from ThemeForest and click
Install Now.
4. Once the file has been uploaded, click the Activate link.

Step 2 — Installing required and recommended plugins
Follow the top banner instructions and install/activate the required and recommended plugins.
After installation, follow the ​Automatic Pages Setup​ process from WP Job Manager plugin, and
add these three pages:
● Add a Listing
● Listing Dashboard
● Listings
Below you can find the essential list of the free plugins:
● WP Job Manager​ by Automattic and Mike Jolley (​Official Documentation​)
● Customify​ by PixelGrade
● Comments Ratings​ by PixelGrade
● Category Icon​ by PixelGrade
● PixTypes​ by Pixelgrade

FAQ
Missing the Stylesheet Error during the process?
Most of the time this happens because you are trying to install the wrong .ZIP archive you’ve
downloaded from ThemeForest.
When you try to download the theme you have just purchased you are presented with 2 different
options (besides the license file):
●
● The first one is Main Files and this contains all the files provided including
documentation, theme files, etc;
● The second one is Installable WordPress file and this is just an archive of the theme
files; this is the .ZIP archive you want to use to install the theme.

Adding Demo Content
The demo content covers two main aspects that you should consider: it presents the strengths
of our theme, and it showcases the smart features we provide. We highly recommend referring
to it as a great inspiring starting point in order to see how much you can achieve with your
upcoming website.

Before you start
To get the right results, please validate once again these details:
● make sure you installed and activated the required plugins
● if your site is already filled with content, please don’t import demo data because your
current content will be mixed with the new one and things will get messy
● double check that you have no errors in Theme Dashboard → Status so that the process
will run as smooth as possible

Loading Demo Content
It’s time to start importing the demo data by following these steps: Appearance → Customize →
Theme Options → Demo Data. Click on the Import Demo Data button and wait until the process
is finished. Normally, you shouldn’t wait more than one to three minutes, but it depends on your
Internet connection and speed.

FAQs
What happens if the import process stops at some point?
If the import process seems to stop, then you should know that it might be just a common
WordPress issue related to the ​maximum execution time​ exceeded. There is a ​plugin​ that you
can use to fix this easily. If you still struggle with it, read our friendly ​article​ about what you need
to do to finish the demo data import.

Is the demo content free to use?
Because all the demo media content is under copyright, you’re not allowed to use it in any
personal or commercial way. Instead, what you can do is to analyze it and get inspired to make
your website at least as striking as our demo shows.

Why do you insert demo content?
We never liked the websites with Lorem ipsum and dumb images. We prefer real and authentic
content (photos, text, multimedia) that matches the style and attitude of the theme we provide.
Also, the demo content is available to expose our aesthetic approach and general look-and-feel
that you can achieve it too.

Still struggling?
Don’t hesitate to reach us out. We have dedicated ​services​ to help you out in no time.

Creating the Home Page
Like any website, your website needs a front page and Listable has a dedicated set of options in
order to achieve this. Further below there is a step-by-step guide.

Step 1 — Create a “Home” page
From your site, WP dashboard, add a new page and name it “Home” or similar. Then find the
Page Attributes section in the right sidebar area and set the Template to Front Page. This
template allows you to display a Search field inside the Hero Area.
Configure the Hero Area
After selecting the Front Page template, ​new options​ appear, so you can manage the
background or the highlighted categories.
● Hero Area (Background): use this block to display a random background between a
gallery of images and a list of videos (self-hosted). To ensure the high contrast for text
over image, we reduced the opacity to 50%.

●

●

Highlighted Categories: this section will display a list of selected categories to the bottom
of the Hero Area. Using their ​slugs​, you can specify which one to highlight. Also if their
names are too long to fit into one row you can use a placeholder to show an alternative,
smaller version: eg. category (Cat)
Search Fields: to extend the search form, you can add the ​Categories and Location
fields directly to the Hero Area (see ​screenshot​). We were going with the single-field
option for the demo as it has a better conversion rate, but depending on your situation,
the other two fields might be more relevant to the user search.

Step 2 — Set a Static Front Page
Before going further, let’s put the above-created page on front page. By default, WordPress
displays the latest posts there — to change that and show your new static “Home” page, follow
these easy steps:
1. Launch the site Customizer and click on the Static Front Page tab on the left.
2. Select the Static Page option, then choose your new page from the Front Page
drop-down.
3. Click on the Save & Publish button to save your static page settings.

Step 3 — Customize the “Home” Page Layout through Widgets
Beneath the Hero area, you can add new sections through a Widgetized area. Go to your site
Home page and on the top Admin bar, you will see a blue button called ​Customize Front Page
Sections​. This is a useful shortcut to the Appearance → Customizer → Widgets → Front Page
area, where you can manage the content and order of the following widgets:
1. Listing Categories — Display a list of listing categories based on different criteria (eg.
most popular, random) or specify which ones you want to show.
2. Listing Cards — Display a list of listings based on various criteria (eg. latest or featured
listings from a specific category).
3. Spotlights — Emphasize some features of your website or use it as a step-by-step
explaining process (eg. How it Works section).
4. Recent Posts — A list of the latest posts from your Blog section.

FAQs
●
●
●
●

Can I have a Video or a Slideshow Hero on Front Page?
How can I make the Logo White on my “Home” page?
Can I place advertisements on my site using Listable?
How to remove the grey overlay from the Front Page?

Creating the Listing Archive Page
The ​“Listings Archive​ page shows a record of your listings along with a location map, as well as
filters for searching.
After you’ve followed the ​Getting Started​ guide, at Step 2 you were advised to automatically
create a “Listings” page. This is just a regular page with a simple shortcode that renders the
listings:
[jobs]
This shortcode can take many arguments and you can use it for other pages too. Read more
about it on the ​Official Documentation​ page.

Display Listings From a Specific Category
If you want to create a separate page that shows only listings from a specific category, you can
use the shortcode above with the categories parameter:
[jobs categories="shops"]

Remove the Map From Listings Archive Page
Show the listings archive results without the map by using the show_map parameter:
[jobs show_map="false"]
That’s it. Creating your listing page is very straight forward.

FAQs:
●
●
●

How to fix Listing Archives functionality?
How can I move the Location field on the Left Side of the listings page?
How do I change the Description Content on the Listings Categories pages?

Managing the Single Listing Page
With Listable we’ve adapted the famous WP Job Manager interface, added the necessary
features and create an easy to use the system so you can create, manage and monetize a local
or global directory site.
After you’ve followed the ​Getting Started​ guide, you can start adding listings. Find out how
below.

Adding and Managing Listings
There are two ways to add a listing: through the WordPress Dashboard or directly from the
Frontend, through the “Add a Listing” page. If you’re handling the listings by yourself, add them
through Dashboard → Listings → Add New page.
There is a lovely step-by-step guide, right inside the Add New page interface — this will surely
get your way to adding your first listing.
*Note: You can still refer to the ​Adding Jobs via Admin​ article from the official WP Job Manager
documentation, even if some fields were changed to make things easier, the structure is the
same.

Adjusting The Listing Layout
The elements on the listing page are carefully placed to ensure a good hierarchy throughout the
page. Depending on your needs, you can change their order and placement using the available
Widgetized Areas. Manage them from Appearance → Customize → Widgets and navigate to
the Single Listing page.
1. Single Listing » Content — The wider area where the main listing content should go.
2. Single Listing » Sidebar Top — Placed at the top of the right sidebar, this area puts each
widget in a visually different boxed container.
3. Single Listing » Sidebar Bottom — Placed below the Sidebar Top, this area brings
together all the widgets under the same container.
Currently, the following widgets are available:
1. Listing » Actions — Buttons like “Write a Review”, “Share” or “Add to Favorites”.
2. Listing » Content - Displays the main listing content.
3. Listing » Reviews — Displays a list of recent reviews and the submission form.
4. Listing » Location Map - A Map View of the listing location along with a Directions link to
Google Maps.
5. Listing » Categories - The listing categories along with related icons.
6. Listing » Hours — The Hours field content.
7. Listing » Gallery Images - The attached images in a gallery grid format
8. Listing » Tags - Used to display tags or amenities (optional using the ​Tags​ plugin)
*Note: Those widgets work only in the above-mentioned widget areas.

FAQs
●
●
●
●

How to modify the listing address format?
How do I change the default Zoom Level of the Map Widget?
Remove the extra details from listing URLs upon submission
How can I have the listing address format different in each language?

Managing “Add Listing” Page
The ​Add a Listing​ page is used by your visitors for front end listings submission. As an
Administrator, you can ​Add Jobs via Admin​ by following ​this​ tutorial.
After you’ve followed the ​Installing the Theme​ guide, at Step 2 you were advised to
automatically create an Add a Listing page. This is just a regular page with a simple shortcode
that renders the listings:
[submit_job_form]
This shortcode outputs the frontend submit job form. You can ​read more about the job
submission form here​.

Editing Listing Submission Fields
You can edit the listing fields manually by tackling the PHP code or you can use a 3rd party
plugin.
There are three main ways to customize the fields in WP Job Manager:
1. For simple text changes, using a localization file or a plugin such as the ​Say What
Plugin​. See ​Translating WP Job Manager ​for more information.
2. Use a 3rd party plugin such as ​WP Job Manager Field Editor​ which has an UI for field
editing.
3. Use the WordPress hooks (filters) which are explained ​here​. *Note that a similar function
is already applied on theme folder/inc/extras.php using custom_submit_job_form_fields()
function. Here you can find out how to change other details like fields placeholders or
descriptions tooltips.
Above is an excerpt from the WP Job Manager — ​Editing Job Submission Fields​ official
documentation article.
Further Readings:
● [Docs] ​Creating the Plans & Pricing Page
● [Docs] ​How do I add Extra Social Media Profiles?

FAQ
●
●
●
●

Can I restrict some fields for a specific package?
Can I edit or add new listing fields?
Can I restrict some listing fields for a specific category?
Can I limit the number of images/files uploaded?

For full documentation visit ​https://pixelgrade.com/docs/listable



Source Exif Data:
File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.5
Linearized                      : Yes
Producer                        : Skia/PDF m64
Page Count                      : 9
EXIF Metadata provided by EXIF.tools

Navigation menu