how to build your own wordpress classifieds site without pain
TRANSCRIPT
![Page 1: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/1.jpg)
How to Build Your Own WordPress Classifieds Site without pain (workshops by onTheGoSystems.com)
![Page 2: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/2.jpg)
What’s a Classified Site
● Sellers post items● Buyers look for
items
![Page 3: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/3.jpg)
Not Only E-Commerce
![Page 4: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/4.jpg)
And Not Only Products
![Page 5: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/5.jpg)
Basic Elements for Classifieds
● Custom content types○ Ads, Ad categories
● Templates to display the content
● Custom search● Content submission
![Page 6: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/6.jpg)
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.
![Page 7: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/7.jpg)
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.
![Page 8: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/8.jpg)
Part 1Adding custom content for Listings
![Page 9: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/9.jpg)
Customizing WordPress Dashboard to add content for Listings
![Page 10: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/10.jpg)
Task 1a● Create a Custom
Post Type for Listings.
● Add a few listings.
![Page 11: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/11.jpg)
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.
![Page 12: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/12.jpg)
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.
![Page 13: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/13.jpg)
Editing Listings
After we created a custom type, we have title and body.
Custom fields will add more details about listings.
![Page 14: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/14.jpg)
Task 1b● Create
Custom Fields for Listings.
![Page 15: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/15.jpg)
Custom Fields
1. Types > Custom fields2. Add a custom fields
group ‘Listing details’3. Choose where it
displays (on Listings)
![Page 16: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/16.jpg)
Custom Fields
4. Add the fields
![Page 17: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/17.jpg)
Listings Editor With FieldsThe Listing editor now shows the newly added custom fields.
![Page 18: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/18.jpg)
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
![Page 19: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/19.jpg)
Summary of Part 1
● We used the Types plugin○ to create a Custom
Post Type for Listings○ to add Custom Fields
to Listings
![Page 20: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/20.jpg)
Part 2Displaying a single listing
![Page 21: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/21.jpg)
How WordPress Displays Content
Database >> PHP Templates >> HTML
![Page 22: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/22.jpg)
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
![Page 23: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/23.jpg)
Layouts Editing and Display
![Page 24: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/24.jpg)
Rows and Cells (Columns)
A layout includes rowsRows include cells, which fit in columns
![Page 25: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/25.jpg)
Layout cell types
![Page 26: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/26.jpg)
Sub-Grids
A “grid cell” lets you divide a cell into more columns and rows.
![Page 27: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/27.jpg)
Visual Editor Cells for Static Texts
![Page 28: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/28.jpg)
Content Template Cells for Fields
![Page 29: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/29.jpg)
Task 2● Display a
single Listing.
![Page 30: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/30.jpg)
Before we create the first Layout...● Create a menu in Appearance->Menus● Start with homepage
![Page 31: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/31.jpg)
Creating your First Layout● Create a Layout
○ Select Empty layout,○ Assign to ‘Listings’,○ Give it a name
![Page 32: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/32.jpg)
Your First Layout
● Add a new Row● Insert Logo and Menu cells in it
![Page 33: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/33.jpg)
Your First Layout
● Create a new row. Insert a Content Template cell in it.
![Page 34: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/34.jpg)
Your First Layout
● In your Content Template cell insert a title field, wrap it with <h1> tags
![Page 35: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/35.jpg)
Your First Layout
● Add the next row with Content Template cells for a feature image, body and fields (date, price, ...)
![Page 36: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/36.jpg)
Summary of Part 2
We used the Views and Layouts plugins and a Content Template cell to display a single listing
![Page 37: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/37.jpg)
Part 3Organizing listings using categories
![Page 38: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/38.jpg)
Organizing listings using categories
![Page 39: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/39.jpg)
Task 3a● Add a ‘Listing
Category’ Taxonomy.
● Create some listing categories.
![Page 40: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/40.jpg)
‘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’
![Page 41: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/41.jpg)
Create a Few Sample Categories● Listing > Listing
Categories● Start adding
○ 4 top-level categories■ 5 child
categories
![Page 42: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/42.jpg)
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
![Page 43: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/43.jpg)
Displaying Categories as a tree
![Page 44: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/44.jpg)
Task 3bDisplay categories as a tree, include:● Top level categories.● Child categories.● Number of items in
categories.
![Page 45: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/45.jpg)
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
![Page 46: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/46.jpg)
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?
![Page 47: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/47.jpg)
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.
![Page 48: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/48.jpg)
Add the Child View to the Parent
Finally, we add the child View into the Loop Output of the parent View.
![Page 49: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/49.jpg)
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
![Page 50: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/50.jpg)
Task 3c:● Display a
single category page.
![Page 51: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/51.jpg)
Displaying Category Pages
● Create a new Layout● Insert a ‘WordPress Archive’ cell● Customize the appearance in the Template● Assign to Taxonomy Archive > Listing
Categories.
![Page 52: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/52.jpg)
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)
![Page 53: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/53.jpg)
Part 4Creating a custom search
![Page 54: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/54.jpg)
Creating a Custom Search
![Page 55: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/55.jpg)
Task 4Build a custom search for listings.
![Page 56: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/56.jpg)
Add the Search to a Page
● Create a page for the search
● Create a layout for that page
● Insert a View cell
![Page 57: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/57.jpg)
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
![Page 58: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/58.jpg)
Summary of Part 4
We created a Parametric Search View to build a custom search.
![Page 59: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/59.jpg)
Part 5Creating a front-end form for adding a new
listing
![Page 60: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/60.jpg)
Task 5● Build front-end
forms to allow visitors to submit content.
![Page 61: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/61.jpg)
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
![Page 62: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/62.jpg)
Summary of Part 5
We used the CRED plugin to auto generate a front-end form for submitting new ads
![Page 63: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/63.jpg)
Free Toolset Classifieds demo site
discover-wp.com/site-templates/
![Page 64: How to Build Your Own WordPress Classifieds Site without pain](https://reader034.vdocument.in/reader034/viewer/2022042614/55a5188a1a28abd07f8b4816/html5/thumbnails/64.jpg)
Plugins available at wp-types.com