Search

How to Setup Listify Theme for WordPress Like a Pro!

Listen to this article

We’ve all been there.

Staring hopelessly at our computer screens with a ‘what now’ expression on our faces.

Sure googling for the next steps can help. But then you’re left trying to piece together bits of information to build a decent solution.

Things don’t always have to be this way. Especially when dealing with Listify setup!

We’ve done the piecing together of information for you, with simple to follow instructions, sans the developer jargon! 😀

I will guide you through:

[su_note note_color=”#F7EAF8″]

[/su_note]

And more… without importing the demo content.

Let’s dive right in!

[space]

Installing the Theme and Dependent Plugins

responsive-listify-theme

Now, I’m going to assume you have purchased the Listify theme and are ready with a fresh new WordPress installation.

Step 0, is installing and activating the Listify theme!

Once you activate the theme, you need to install the needed plugins.

What I would have appreciated after theme activation, would be an automatic redirect to a “Setup Guide” or “Welcome Page”. But that doesn’t happen, so don’t hold your breath for it. 😉

Just navigate to Appearance -> Setup Guide. Find the button ‘Install Plugins’ and click it. Don’t worry, the plugins do not get installed automatically; you are instead redirected to the Install ‘Plugins screen’. (Alternatively, you could directly head over to Appearance -> Install Plugins)

Liftify recommends 10 odd plugins to be installed. However, out of the plugins listed, WP Job Manager and WooCommerce are the only plugins that are required. The others are recommended but not required.

Instead of installing all the recommended plugins, I’d recommend you install only the required plugins to begin with.

With Listify, the listings are completely managed by the WP Job Manager plugin. So, let’s start by installing and activating the WP Job Manager plugin.

Setting Up WP Job Manager

WP Job Manager does provide a setup wizard, but Listify recommends you skip it, and manually create the pages.

[su_note note_color=”#fffeab”]

Why is the setup wizard not recommended?

The reason could be because WP Job Manager creates pages for Job creation, editing and listing; with manual page creation you have the flexibility to create pages for listings of your choice- for e.g. listings, restaurants, services and so on.

[/su_note]

Not a problem! Owing to the use of shortcodes, setting up the pages manually is pretty easy.

Creating Listing Pages

You need to create three pages:

  1. Submit Listing: Create a page named ‘Submit Listing’ and add the [submit_job_form] shortcode and publish the page. Do note: Submit Listing and Edit Listing pages are required only if you want to allow other users to add and manage their own listings.
  2. Edit Listing: Create a page named ‘Edit Listing’ and add the [job_dashboard] shortcode on it and publish the page.
  3. Listings: The Listings page displays submitted listings. To create this page, add the [jobs] shortcode on it, and name it Listings. Set the ‘Listings’ template for the page, and publish it.

listify-listings-page

Once the pages have been created you’ll need to update WP Job Manager settings.

WP Job Manager Settings

Just head over to Listing -> Settings. Here you’ll be able to adjust WP Job Manager settings according to your preference.

Now, you could leave the settings under ‘Listings’ and ‘Listing Submissions’ as default; however I would like to bring your attention to a couple of settings you might want to adjust:

Under Listing Submissions:

  1. Account Role: If you’d prefer the account role to be different, for example say ‘Owner’, then you’d have to change the value of this option.
  2. Listing Duration: If you do not want listings to have an expiration date, clear this field.

[su_note note_color=”#fffeab”]

PRO TIP: How to Create an ‘Owner’ user role

  • Install and activate the User Role Editor plugin
  • Under Users->User Role Editor click on ‘Add Role’
  • Set the Role name (ID) as ‘owner’, ‘Display Role Name’ as ‘Owner’ and ‘Make copy of’ as ‘Employer’
  • Click ‘Add Role’

[/su_note]

Set Pages

Under ‘Pages’ you will have to set the listing pages you have just created.

  1. Set ‘Submit Listing’ as the Submit Listing Form Page
  2. Set ‘Edit Listing’ as the Listing Dashboard Page
  3. And ‘Listings’ as the Listings Page

wp-job-manager-pages

Remember to always save any changes made.

Setting Up WooCommerce

WooCommerce is used as the e-commerce cart on your listings website with Listify. Once again, Listify recommends that you do not use the setup wizard, and the reason’s the same. Since there isn’t a conventional store on your listings website, you probably do not need all the pages WooCommerce will create.

But instead of skipping the use of the on-boarding wizard altogether, here’s what I’d recommend. Just skip the first step, so that you do not create any pages. You can set the rest of the options as per your need.

woocommerce-page-setup

Create My Account Page

Create a new page, add the WooCommerce My Account shortcode [woocommerce_my_account] on it, and publish the page. This page will allows users to login/logout from the frontend, and will also help them track their purchases/bookings.

listify-woocommerce-account

We’ll not worry about creating a product at this moment. We’ll get to it in some time 🙂

[space]

Creating the Homepage

So, up until now, we were focused on the backend. Let’s move our attention to the frontend for a while.

Your listing website needs a super amazing homepage. But when building one, just make sure you do not ignore essential elements. By far the most important element is the search option. If you’ve noticed popular listing websites, this option is placed prominently right when the homepage is loaded. And you must’ve noticed the same on Listify’s homepage demo.

To create the homepage, create a new page and set ‘Home’ as the page template. You should be able to see the search option displayed on the page.

listify-homepage

[su_note note_color=”#fffeab”]

PRO TIP: To set an image as the background image of the search option, set it as the feature image of the page.

[/su_note]

A great feature about selecting the ‘Home’ template, is that you can add additional sections as widgets under ‘Homepage’ widgets. For example, as shown in the Listify demo, you can add a category image grid, and recent listings.

listify-homepage-widgets

[su_note note_color=”#fffeab”]

Why am I not able to see the listing categories section, even though I’ve added the widget?

This is because you do not have any listing categories added. Try creating a couple of listing categories and add listings to the category.

[/su_note]

Alternatively, if you wanted complete control on the homepage design, you could use a page builder plugin like Visual Composer and leave the template as default or set it as ‘Home (Visual Composer)’.

Now, once the page is ready set this page as the ‘Front Page’ under Settings -> Reading. Create another blog page and set it as the ‘Posts Page’.

listify-set-homepage

[space]

Listify offers support for four menu locations:

  1. Primary
  2. Secondary
  3. Tertiary
  4. Social (Footer)

The primary menu is the top navigation bar, and is the ideal location to add the login option (or the ‘My Account’ page).

The secondary menu is where your main menu items can be added. By default Listify adds the ‘Browse Category’ menu option to the secondary menu.

listify-menu-primary-secondary

The tertiary menu is an optional menu, which can be displayed on certain pages using the ‘Show tertiary navigation bar’ option in Page settings.

listify-show-tertiary-menu-option

This menu is displayed below the page title.

listify-menu-tertiary-frontend

The social menu is added right at the bottom of your page, and is the ideal place to add links to your social profiles. The reason being that Listify automatically displays icons for social networks when the relevant links are added in the menu. You can optionally choose to add links to the “Terms & Conditions’ page, or the ‘Privacy Policy’ page in this menu.

listify-menu-footer-social

[su_note note_color=”#fffeab”]

Wondering how to add an icon to each menu item? It’s simple. Under Appearance -> Menu -> ‘Screen Options’ check the ‘CSS Classes’ option. Listify loads Ionicons, so you can use the icon name as a class to show the icon next to the menu name. For example, to display a clipboard icon next to the ‘Listings’ menu, set ion-clipboard as the CSS Class for the menu.

[/su_note]

Adding Widgets to the Footer

The Listify theme provides a three column footer. You can head over to Appearance -> Widgets and add widgets under Footer Column 1/2/3 to display information in the footer.

listify-footer-widgets

The call to action right above the footer is also part of the footer and can be edited using an option under Appearance -> Customize -> Footer.

There are other options here too, that help you edit the copyright text and allow you to add an ‘As Seen On’ section.

listify-footer-customization

[space]

Creating Listings

Moving on to the most important section – Creating a Listing! 🙂

Listings are the focus of your website. But, before we jump to creating a listing, let’s create a listing category. This will save us the trouble of having to edit the listing after creating the category.

Creating Listing Categories

Creating listing categories is pretty simple. It’s just like creating categories for posts in WordPress. Go to Listings -> Listing Categories and add new categories.

listify-add-listing-categories

Creating a Listing

To create a listing, go to Listings -> Add New.

  1. Add the name of the listing as the title
  2. Description about the listing in the post description
  3. Add the ‘Listing Data’,’Hours of Operation’, ‘Featured Image’
  4. Add images for the listing under ‘Listing Gallery’
  5. Categorize the listing under ‘Listing Categories’… and publish the post!

Your new listing should be created. Users of your site can create a listing from the frontend itself, using the ‘Submit Listing’ page.

[su_note note_color=”#fffeab”]

PRO TIP: If you’re wondering how you can add the ‘Basic Amenities‘ section, you can do so using the WP Job Manager – Tags plugin (to add amenities as tags).

[/su_note]

Add Location Map

To add the listing location on the map, you need to add the geolocation coordinates to the listing. These coordinates have to be added as custom fields. For each field below, you have to add a new custom field:

  • geolocated – set this to 1 (this indicates that an address is available)
  • geolocation_city
  • geolocation_country_long
  • geolocation_country_short
  • geolocation_formatted_address
  • geolocation_lat
  • geolocation_long
  • geolocation_postcode

You should get all of this above information by googling for the listing location. If you do not add this information, the location will not be marked on the map shown on the ‘Listings’ page.

Modifying the Listings Page

Now, we’ve already created the Listings page, and if you are happy with its appearance, good for you! But if not, here’s what you need to do! 😀

First things first, to display the map on your listings website, you’ll have to create and set a Google Maps Geocoding API key.

Enter the generated API key on your WordPress website under Appearance -> Customize -> Listings -> Map Settings

listify-listings-page-map

You could optionally add additional elements in a sidebar on the Listings page, by adding widgets under Appearance -> Listings -> Listings Archive.

Creating Listing Packages

Now, if you head over to ‘Submit Listing’ page, you should be shown the submission form directly. But if you notice on the Listify demo page, there are ‘Purchase Packages’. These purchase packages are created as products in WooCommerce using the WC Paid Listings plugin.

  1. Go to Products -> Add Product
  2. Under Product Data, add ‘Listing Package’ as the product type
  3. Set the price, ‘Listing Duration’ (if applicable), and publish the product.

[space]

Customizing the Theme

Apart from customizing the theme’s background, there are tons of other options available to customize the look of the theme under Appearance -> Customize.

  • You can change the color scheme under Style Kit, or set custom colors yourself
  • You can change the typography, map color scheme, listing layout…. and so on

If you’re good with the default look, you can leave the theme customization settings as is. To customize the theme beyond the options available, such as creating custom templates for Listify, you’ll need to contact a theme developer.

[space]

TL;DR

Here’s a summary of the tasks you need to undertake as part of Listify theme setup:

  1. Install the theme and WP Job Manager and WooCommerce plugins
  2. Create Listing pages (Submit Listing, Listings, Edit Listing) with WP Job Manager shortcodes and update WP Job Manager settings
  3. Setup WooCommerce, and create the account page
  4. Create the Homepage using the template provided by Listify and add widgets as needed
  5. Set the primary, secondary menu
  6. Add footer widgets, and customize the footer as needed
  7. Create listing categories and listing packages

Surely, there are quite a few plugins (recommended by Listify) which you could use to add more functionality on your website. But let’s save all that discussion for another day. 🙂

For those of you who have used Listify to create their website, feel free to post any information that could be of help to our readers.

And for those of you, who need help setting up Listify, we would be more than happy to help you. Here’s how we can set up the Listify theme on your website. 🙂

Namrata

Namrata

29 Responses

  1. I have been playing with listify theme for a while now. I have to say it is really pain in the ass. It is good theme but you have to buy aaaa loot of plugins to get all the features and even than you have to do some things manually.
    I just hope I will finish it soon so I can start making some revenue. 🙂

      1. I think I did 🙂 and now the hard part lol create all the content “How to” etc. I hate writing, but what has to be done has to be done.

  2. Hey there, for some reason on my plans and pricing page nothing is showing up! its driving me crazy – everything is set up correctly too

    1. Maybe you set up a product to be hidden. On the left side where the publish button is there is Catalog visibility: set it to Catalog/search

  3. I have the woocommerce bookings, product vendors as well as wp Job manager – products plugins, with which I would like to allow clients to add a listing (space) and then link a product (time) to that listing so that the time can be booked and paid for by visitors. When creating a new listing, the option to add a product is there. But the product is not visible in the lsiting?

    1. How did you get your listings to show. For some reason I am running into an issue where the listing are not showing when I make hypothetical listings. I hope that you can be of help.

  4. How can we create a page which display listings from just one category and a page which display listings from just one vendor ??

  5. Hi, this is great, I am trying to make it work. But I am get confused with some topic: I have two items in my dashboard to create listings. One of them is “Products” who provides limited support to Listify, and “Listings” which provide useful Listify widgets but are less cool than Products. I am not really sure which to use.
    Regards and thank you for this tut.

    Martin

  6. Thanks for guiding many of us namrata.
    here is a question,as seen on listify demo,can we show profile pic of user after he or she log in into account,and if yes,how can we do that?
    will wait for your reply.Thanks in advance.

    1. Hey Yagnesh,

      By default, the Gravatar associated with a user’s email address is displayed as the profile picture. To allow users to upload their own avatar, Listify recommends using the WP User Avatar plugin.

      Just add the [avatar_upload] shortcode on WooCommerce’s “My Account” page.

      Hope this helps!

  7. Hey there! I want to create a page wich displays a date (like from 1st of August till 9th of September) in the search fields on the top. How can I do this with listify?

    Thx for your time!

  8. Hello Namrata,
    I bought and installed Listify successfully, but after activation everything disappears: the website and even the WordPress Dashboard. The only way to recover the website is to go to phpMyAdmin and change the name of the theme manually to another installed theme.
    All other templates work correctly, but Listify does not. It turn the whole website into a white blank page when activated. I installed WordPress 4.5.1, but the problem persists.

    Please help

    1. the template has this error: Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home8/wikinter/public_html/wp-content/themes/listify/inc/setup/class-setup.php on line 148

  9. I found your article is much better then this theme’s author support. Step by step guide is really very informative and easy to understand. Many many thanks dear, i have been successfully installed and published my directory listing sites , and all credits goes to you.

    Thank you so much!

  10. Looking for help to set up bookings with Woocommerce Booking on Listify site. Couldn’t find that here. Any pointers will be appreciated.

  11. Would wish if I could post price for each listing as I want to create a classified website. But the issue is it does not have such an option, and also I want to add image only for the gallery images for the product. I’m not that technical so please could you help out.

  12. Hi. Do you know of I can restrict other elements to “pay only” listings. Currently I can only change whether it is featured. But I want for examples that on a premium listing it shows Google maps and social media but on standard it doesn’t. Can this be done?

  13. I found this plugin “Restaurants Listings” by opentuteplus on GitHub

    It is in its initial phase, but works well. A lot of features of Listify is not there. I guess they will developed soon. It is free off course now and easy to set up.

  14. Appearance -> Customize -> Listings this section not appearing in my wordpress console.
    Because i just need to set my map API key under the above location -> Map Settings..

    Can you please help on this. why i couldn’t able to see the option!

  15. Hi everybody…

    Is there how to link a specific product with a group of listings and depending the of the product customize fields to appear or not in this listing?

    Regards…

  16. hello,
    thanks for the tuto.
    I need to differentiate client and pro pro can be reserved by client but i don’t understand how. i have booking products and vendors for woocommerce.

    sos please

  17. Have you all ran into an issue where the listings do not show up on the map? If so, might you have some solutions to this in this theme? I have done everything, though the listings are not showing up. My api is set up correctly and everything.

    Thanks.

  18. Hi there! I’m in the final stages of settings and had a question — I’m using woocommerce bookings with woocommerce vendor products in addition to the WP manager products tools. Do you know if there’s a way to auto-create/auto-link a vendor to a listing owner account? Right now it looks like I have to create a vendor separate from the listing owner, and then go to my users and manually link those two together. I’m not sure if that’s right, especially because I still can’t figure out how to get the new products to show on the listing pages. Any advice would be great!

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

How to Make Responsive Tables using CSS without Tag
WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads