Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Build Your Own WordPress Classifieds Site without pain

4,334 views

Published on

Materials used in 'Classifieds Sites' workshops.

Published in: Internet
  • Wickr ID:bowe420 Snapchat:bonalegit order-payment-wedeliver -diazepam -Marijuana - LSD -xanax -mdma -Oxys - Cocaine -ketamine -meths -Tramadol more stuffs available Hit me up for more details..
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thankyou so much! Certainly the best customer service I've had in a while. Happy with the way you guys worked with me. ➽➽ https://w.url.cn/s/AVD5j1m
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I like this service ⇒ www.HelpWriting.net ⇐ from Academic Writers. I don't have enough time write it by myself.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

How to Build Your Own WordPress Classifieds Site without pain

  1. 1. How to Build Your Own WordPress Classifieds Site without pain (workshops by onTheGoSystems.com)
  2. 2. What’s a Classified Site ● Sellers post items ● Buyers look for items
  3. 3. Not Only E-Commerce
  4. 4. And Not Only Products
  5. 5. Basic Elements for Classifieds ● Custom content types ○ Ads, Ad categories ● Templates to display the content ● Custom search ● Content submission
  6. 6. 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.
  7. 7. Get Started on Discover-WP.com Visit: 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.
  8. 8. Part 1 Adding custom content for Listings
  9. 9. Customizing WordPress Dashboard to add content for Listings
  10. 10. Task 1a ● Create a Custom Post Type for Listings. ● Add a few listings.
  11. 11. 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.
  12. 12. Adding example cars Name 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.
  13. 13. Editing Listings After we created a custom type, we have title and body. Custom fields will add more details about listings.
  14. 14. Task 1b ● Create Custom Fields for Listings.
  15. 15. Custom Fields 1. Types > Custom fields 2. Add a custom fields group ‘Listing details’ 3. Choose where it displays (on Listings)
  16. 16. Custom Fields 4. Add the fields
  17. 17. Listings Editor With Fields The Listing editor now shows the newly added custom fields.
  18. 18. Adding sample content Name Expiry Date Price Email Phone Image Off-Road 2012 October 1, 2015 12000 person@test. com +0123456789 Luxury Blue December 25, 2015 45000 neo@test.com +9876543210 Class C Motorhome May 10, 2016 32000 carlover@test. com +111333777
  19. 19. Summary of Part 1 ● We used the Types plugin ○ to create a Custom Post Type for Listings ○ to add Custom Fields to Listings
  20. 20. Part 2 Displaying a single listing
  21. 21. How WordPress Displays Content Database >> PHP Templates >> HTML
  22. 22. 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
  23. 23. Layouts Editing and Display
  24. 24. Rows and Cells (Columns) A layout includes rows Rows include cells, which fit in columns
  25. 25. Layout cell types
  26. 26. Sub-Grids A “grid cell” lets you divide a cell into more columns and rows.
  27. 27. Visual Editor Cells for Static Texts
  28. 28. Content Template Cells for Fields
  29. 29. Task 2 ● Display a single Listing.
  30. 30. Before we create the first Layout... ● Create a menu in Appearance->Menus ● Start with homepage
  31. 31. Creating your First Layout ● Create a Layout ○ Select Empty layout, ○ Assign to ‘Listings’, ○ Give it a name
  32. 32. Your First Layout ● Add a new Row ● Insert Logo and Menu cells in it
  33. 33. Your First Layout ● Create a new row. Insert a Content Template cell in it.
  34. 34. Your First Layout ● In your Content Template cell insert a title field, wrap it with <h1> tags
  35. 35. Your First Layout ● Add the next row with Content Template cells for a feature image, body and fields (date, price, ...)
  36. 36. Summary of Part 2 We used the Views and Layouts plugins and a Content Template cell to display a single listing
  37. 37. Part 3 Organizing listings using categories
  38. 38. Organizing listings using categories
  39. 39. Task 3a ● Add a ‘Listing Category’ Taxonomy. ● Create some listing categories.
  40. 40. ‘Listing Category’ Taxonomy 1. Types > Types and Taxonomy 2. Add custom taxonomy > Listing category 3. Connect it to the Listing type 4. Select taxonomy kind as ‘hierarchical’
  41. 41. Create a Few Sample Categories ● Listing > Listing Categories ● Start adding ○ 4 top-level categories ■ 5 child categories
  42. 42. Add categories to listings Name 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
  43. 43. Displaying Categories as a tree
  44. 44. Task 3b Display categories as a tree, include: ● Top level categories. ● Child categories. ● Number of items in categories.
  45. 45. 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
  46. 46. 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?
  47. 47. Homepage step 3) Connecting Views Add a query filter: ● Parent = ‘set by parent View’ This filters only child terms of the category displayed by the parent View.
  48. 48. Add the Child View to the Parent Finally, we add the child View into the Loop Output of the parent View.
  49. 49. Categories Tree - Summary 1. Create a View for the top-level categories 2. Create a View for the child categories 3. Filter the query of the child-View, so that it displays only child categories 4. Insert the child View into the Loop Output of the parent View 5. Create a Layout for the category page
  50. 50. Task 3c: ● Display a single category page.
  51. 51. Displaying Category Pages ● Create a new Layout ● Insert a ‘WordPress Archive’ cell ● Customize the appearance in the Template ● Assign to Taxonomy Archive > Listing Categories.
  52. 52. 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)
  53. 53. Part 4 Creating a custom search
  54. 54. Creating a Custom Search
  55. 55. Task 4 Build a custom search for listings.
  56. 56. Add the Search to a Page ● Create a page for the search ● Create a layout for that page ● Insert a View cell
  57. 57. 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
  58. 58. Summary of Part 4 We created a Parametric Search View to build a custom search.
  59. 59. Part 5 Creating a front-end form for adding a new listing
  60. 60. Task 5 ● Build front-end forms to allow visitors to submit content.
  61. 61. 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
  62. 62. Summary of Part 5 We used the CRED plugin to auto generate a front-end form for submitting new ads
  63. 63. Free Toolset Classifieds demo site discover-wp.com/site-templates/
  64. 64. Plugins available at wp-types.com

×