Customizing a PW website: an overview of the steps to go through & what to check/address?

[motionmindz]

I would very much like to have a clear understanding of what it means to fully customize a CMS (Processwire) website to the lowest levels.

What I know in general is that customizing means changing/adding custom Javascript & PHP (in other CMS's its Java/Python... or whatever).

But I have not a good idea of all the things to address and in which order to do so.

Start from the idea that a customer wants a fully custom website (custom logo etc etc), with a fully working webshop with payment by paypal and creditcards, full SEO optimalisation, a fast, responsive (also for mobile access) website. He provides hosting services.

Products need a intro page with short description with a link to more specifications and info on the product.

Access to the products via search field direct, or via the main top menu that opens on hovering over but you need to click on a subcategory

to select further. Depending on the main category, the subcategories work with different filters to go to the specific product results.

For each product a review can be added with a rating (standard these days).

So please, if you start customizing a base PW website and template, what exactly and in what order do you do? (this as a sort of method applicable to use of other CMS's too)

Thanks very much in advance!

[Martijn Geerts]

I always start with the data part. 

1. Paper & pen. (maybe most important step)
   1. Draw site tree.
   2. Assign templates to site tree
   3. Per template write down where the data comes from.
      1. from fields
      2. from relations
      3. services
      4. etc.
2. Build all needed fields
3. Create all templates and assign the fields (Don't specify the family settings, don't set no fields required)
4. Create basic page structure
5. Go back to each template, and specify family settings and set some fields required.
6. ppfff, your data structure is ready. 

Template level:

• Build a view file ( I always use some kind of delegate solution )
• Add menu structure, and edit links. ( Not able to navigate on front-end is hugely annoying  )
• Start other stuff, no predefined order, really depends on project and where the data comes from.

[Joss]

Martijn is absolutely right here.

There are two sides of any website - how it looks and how it is managed.

Processwire, unusually, actually has a really logical separation - the /site/templates/ directory is how it looks and the admin is how you manage it. And, as you know, joining the two together is very, very simple. 

So, probably your starting point, with that pencil and paper, is to forget it is a CMS at all and work it out as if it were a static site. Once that is done, you can then allocate the various parts of your theoretical site to the two sides - the html to the templates directory and the content to the admin.

From that, your structure will probably become clear very quickly.

[pwired]

Martijn and Joss have it right. First of all processwire is kind of an engine that can drive any

html, php, css, js, that you are going to use. So first step would be prototyping your website

into different parts. Then assign what code is needed for what parts. Final step is to port it

all into processwire => template files, your code and api and "pages" and fields in the admin.

You can use wireframers to quickly prototype a website:

http://pencil.evolus.vn/