how to build your own wordpress classifieds site without pain
TRANSCRIPT
How to Build Your Own WordPress Classifieds Site without pain (workshops by onTheGoSystems.com)
What’s a Classified Site
● Sellers post items● Buyers look for
items
Not Only E-Commerce
And Not Only Products
Basic Elements for Classifieds
● Custom content types○ Ads, Ad categories
● Templates to display the content
● Custom search● Content submission
We Use Plugins to Speed Things Up
● Types - set up custom post types and fields.
● Layouts, Views - design page layouts and their content.
● CRED - build front-end content submission and editing forms.
Get Started on Discover-WP.comVisit:http://discover-wp.com/site-types/toolset-bootstrap-starter/
You will get a blank WordPress site with all the necessary plugins and a starter theme.
Part 1Adding custom content for Listings
Customizing WordPress Dashboard to add content for Listings
Task 1a● Create a Custom
Post Type for Listings.
● Add a few listings.
Creating a Listing Custom Post Type
1. Activate Types plugin (already activated on discover-wp.com)
2. Types > Types and Taxonomy
3. Add custom post type > Listings / Listing
4. Enable Thumbnails under Display Sections.
Adding example carsName Body Featured image
Off-Road 2012 Off-Road 2012 is a perfect car to take you anywhere.
Luxury Blue Just as its name suggests, Luxury Blue is pure luxury.
Class C Motorhome
With Classs C Motorhome, home really is where the heart is.
Editing Listings
After we created a custom type, we have title and body.
Custom fields will add more details about listings.
Task 1b● Create
Custom Fields for Listings.
Custom Fields
1. Types > Custom fields2. Add a custom fields
group ‘Listing details’3. Choose where it
displays (on Listings)
Custom Fields
4. Add the fields
Listings Editor With FieldsThe Listing editor now shows the newly added custom fields.
Adding sample contentName Expiry Date Price Email Phone Image
Off-Road 2012 October 1, 2015 12000 [email protected]
+0123456789
Luxury Blue December 25, 2015
45000 [email protected] +9876543210
Class C Motorhome
May 10, 2016 32000 [email protected]
+111333777
Summary of Part 1
● We used the Types plugin○ to create a Custom
Post Type for Listings○ to add Custom Fields
to Listings
Part 2Displaying a single listing
How WordPress Displays Content
Database >> PHP Templates >> HTML
Our Stack for Rapid Development
● Reference Sites theme○ Grid system for easy content positioning
● Layouts plugin○ Drag-and-drop editor for page layouts
● Views plugin○ Content display engine
Layouts Editing and Display
Rows and Cells (Columns)
A layout includes rowsRows include cells, which fit in columns
Layout cell types
Sub-Grids
A “grid cell” lets you divide a cell into more columns and rows.
Visual Editor Cells for Static Texts
Content Template Cells for Fields
Task 2● Display a
single Listing.
Before we create the first Layout...● Create a menu in Appearance->Menus● Start with homepage
Creating your First Layout● Create a Layout
○ Select Empty layout,○ Assign to ‘Listings’,○ Give it a name
Your First Layout
● Add a new Row● Insert Logo and Menu cells in it
Your First Layout
● Create a new row. Insert a Content Template cell in it.
Your First Layout
● In your Content Template cell insert a title field, wrap it with <h1> tags
Your First Layout
● Add the next row with Content Template cells for a feature image, body and fields (date, price, ...)
Summary of Part 2
We used the Views and Layouts plugins and a Content Template cell to display a single listing
Part 3Organizing listings using categories
Organizing listings using categories
Task 3a● Add a ‘Listing
Category’ Taxonomy.
● Create some listing categories.
‘Listing Category’ Taxonomy
1. Types > Types and Taxonomy
2. Add custom taxonomy > Listing category
3. Connect it to the Listing type4. Select taxonomy kind as
‘hierarchical’
Create a Few Sample Categories● Listing > Listing
Categories● Start adding
○ 4 top-level categories■ 5 child
categories
Add categories to listingsName Body Category Featured image
Off-Road 2012 Off-Road 2012 is a perfect car to take you anywhere.
Safari
Luxury Blue Just as its name suggests, Luxury Blue is pure luxury
Sport cars
Class C Motorhome
With Classs C Motorhome, home really is where the heart is.
Motorhome
Displaying Categories as a tree
Task 3bDisplay categories as a tree, include:● Top level categories.● Child categories.● Number of items in
categories.
Homepage Step 1) New Layout
● Create a WordPress page and assign to ‘home’○ Leave empty, close to comments
● Create a new Layout and assign to homepage
● Add a View cell○ Taxonomy->Listing Categories○ Display as unordered list○ Add the category name to the Loop Output
Homepage step 2) Child View
● Under each category, we need a list of child categories and the posts count.
● Views->New View● Select the same taxonomy to load as the
parent● How do we make it a load only child terms?
Homepage step 3) Connecting ViewsAdd a query filter:● Parent = ‘set by parent View’
This filters only child terms of the category displayed by the parent View.
Add the Child View to the Parent
Finally, we add the child View into the Loop Output of the parent View.
Categories Tree - Summary
1. Create a View for the top-level categories2. Create a View for the child categories3. Filter the query of the child-View, so that it
displays only child categories4. Insert the child View into the Loop Output of
the parent View5. Create a Layout for the category page
Task 3c:● Display a
single category page.
Displaying Category Pages
● Create a new Layout● Insert a ‘WordPress Archive’ cell● Customize the appearance in the Template● Assign to Taxonomy Archive > Listing
Categories.
Summary of Part 3● We used the Types plugin
to create a taxonomy for Listings categories
● We used the Layouts and Views plugins to:○ display categories tree (we
used 2 Views)○ category archive (we used
WordPress Archive cell)
Part 4Creating a custom search
Creating a Custom Search
Task 4Build a custom search for listings.
Add the Search to a Page
● Create a page for the search
● Create a layout for that page
● Insert a View cell
A Custom Search is a View● Create a new View
○ Choose ‘parametric search’● Select the content type to search (display)● Decide on the Parametric Search Settings● Add fields to the ‘Filter’ section
○ For each field, choose input type○ and apply styling with HTML
● Design the Loop Output○ Add fields and style
Summary of Part 4
We created a Parametric Search View to build a custom search.
Part 5Creating a front-end form for adding a new
listing
Task 5● Build front-end
forms to allow visitors to submit content.
Allowing Visitors to Submit Content
● Create a new page for Submit Listings● Create a Layout and Insert the CRED form
to it● Create a CRED form cell
○ Submit Listing, Create content, Display the content, Publish
○ Use the Scaffold○ Add a notification email to yourself
Summary of Part 5
We used the CRED plugin to auto generate a front-end form for submitting new ads
Free Toolset Classifieds demo site
discover-wp.com/site-templates/
Plugins available at wp-types.com