how to build your own wordpress classifieds site without pain

64
How to Build Your Own WordPress Classifieds Site without pain (workshops by onTheGoSystems.com)

Upload: onthegosystems

Post on 14-Jul-2015

1.101 views

Category:

Internet


4 download

TRANSCRIPT

Page 1: How to Build Your Own WordPress Classifieds Site without pain

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

What’s a Classified Site

● Sellers post items● Buyers look for

items

Page 3: How to Build Your Own WordPress Classifieds Site without pain

Not Only E-Commerce

Page 4: How to Build Your Own WordPress Classifieds Site without pain

And Not Only Products

Page 5: How to Build Your Own WordPress Classifieds Site without pain

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

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

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

Part 1Adding custom content for Listings

Page 9: How to Build Your Own WordPress Classifieds Site without pain

Customizing WordPress Dashboard to add content for Listings

Page 10: How to Build Your Own WordPress Classifieds Site without pain

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

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

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

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

Task 1b● Create

Custom Fields for Listings.

Page 15: How to Build Your Own WordPress Classifieds Site without pain

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

Custom Fields

4. Add the fields

Page 17: How to Build Your Own WordPress Classifieds Site without pain

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

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

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

Part 2Displaying a single listing

Page 21: How to Build Your Own WordPress Classifieds Site without pain

How WordPress Displays Content

Database >> PHP Templates >> HTML

Page 22: How to Build Your Own WordPress Classifieds Site without pain

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

Layouts Editing and Display

Page 24: How to Build Your Own WordPress Classifieds Site without pain

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

Layout cell types

Page 26: How to Build Your Own WordPress Classifieds Site without pain

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

Visual Editor Cells for Static Texts

Page 28: How to Build Your Own WordPress Classifieds Site without pain

Content Template Cells for Fields

Page 29: How to Build Your Own WordPress Classifieds Site without pain

Task 2● Display a

single Listing.

Page 30: How to Build Your Own WordPress Classifieds Site without pain

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

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

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

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

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

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

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

Part 3Organizing listings using categories

Page 38: How to Build Your Own WordPress Classifieds Site without pain

Organizing listings using categories

Page 39: How to Build Your Own WordPress Classifieds Site without pain

Task 3a● Add a ‘Listing

Category’ Taxonomy.

● Create some listing categories.

Page 40: How to Build Your Own WordPress Classifieds Site without pain

‘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

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

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

Displaying Categories as a tree

Page 44: How to Build Your Own WordPress Classifieds Site without pain

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

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

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

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

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

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

Task 3c:● Display a

single category page.

Page 51: How to Build Your Own WordPress Classifieds Site without pain

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

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

Part 4Creating a custom search

Page 54: How to Build Your Own WordPress Classifieds Site without pain

Creating a Custom Search

Page 55: How to Build Your Own WordPress Classifieds Site without pain

Task 4Build a custom search for listings.

Page 56: How to Build Your Own WordPress Classifieds Site without pain

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

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

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

Part 5Creating a front-end form for adding a new

listing

Page 60: How to Build Your Own WordPress Classifieds Site without pain

Task 5● Build front-end

forms to allow visitors to submit content.

Page 61: How to Build Your Own WordPress Classifieds Site without pain

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

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

Free Toolset Classifieds demo site

discover-wp.com/site-templates/

Page 64: How to Build Your Own WordPress Classifieds Site without pain

Plugins available at wp-types.com