First Test Project as a Front-End Dev using Processwire

[Neo]

Hi,

I am a front-end developer with only limited knowledge of PHP, currently looking for an alternative to WordPress in order to build custom websites with dynamic functionality. I have never built a site with Processwire, so my idea is to develop a test-project that reflects the typical requirements of my clients (usually small businesses) in order get an idea how the system works.

These requirements typically are:

- Brochure style / informational sites

- Multiple, editable content areas per page

- Portfolio functionality: clients want to post their products / projects with text description and images in different categories

- Latest portfolio items are displayed on the front page (e.g. latest 6)

- Editable slideshow on the front page (text and image)

- News / Blog functionality

- Latest news / blog excerpts are displayed on the front page

- Custom contact forms

My idea, as an example, is to build something like the following website, which combines all these typical requirements pretty well:

http://www.turnerconstruction.com/

I have a couple of questions considering the described use case scenario:

- How realistic is it for a front-end developer with only limited PHP knowledge to develop the required functionality with Processwire?

- What time frame would you suggest for a project like this for someone who just starts with Processwire?

- What is the typical workflow? Can I build the complete, static site with HTML, CSS, JS and then turn this into Processwire afterwards?

I would appreciate your advice. 

Thanks a lot.

[Philipp]

Hi Neo, welcome.

Your requirements should be no problem with ProcessWire. Even with a limited PHP knowledge, you will get used to the API quite fast.

To your questions:

- Of course it is possible. You need a basic understanding of PHP (loops,ifelse,variables) but nothing more than a usual template language or the WordPress markup would require. Y

- A higher time because you will have to learn some stuff before. Maybe start with a smaller page as you suggested and then move forward.

- You could do it this way. Build the HTML/CSS/JS and then replace everything with dynamic content from ProcessWire.

Did you look at the Cheatsheet already? And maybe this tutorial is interessting to you.

Hopefully someone will give you a more detailed answer, I have to leave now.

[OrganizedFellow]

The best way to learn (in my opinion) is to carefully break down the default site profile.Everything you mentioned above can easily be done with ProcessWire - even without any special Modules!

QUESTIONS:

1. - How realistic is it for a front-end developer with only limited PHP knowledge to develop the required functionality with Processwire?

2. - What time frame would you suggest for a project like this for someone who just starts with Processwire?

3. - What is the typical workflow? Can I build the complete, static site with HTML, CSS, JS and then turn this into Processwire afterwards?

ANSWERS:

1. - There's a fella around here by the name of Joss. He doesn't know PHP. He isn't a coder, but he's the one responsible for many of the brilliant tutorials here. I too (me neither) I'm not a coder. I always forget how an ifelse statement works, so I spend much of my time Googling things, or reading the documentation on PHP.NET.

So to answer your question: very realistic.

2. - Depends how quickly you can grasp the concepts: the API is incredibly powerful Read over it all. Try every code snippet you come across. Same for the Cheatsheet. Then you have establish a workflow. Figure out how the Templates and Pages and Fields all interact and connect with each other.

Time frame? Couple days to a few months. ME? Personally? I've been on these forums for over a year and I've barely started working on my first CLIENT website.

Your time frame may vary.

3. - That's usually how it's probably best done. Especially if you're still quite new. Use your favorite CSS framework and your favorite jQuery plugins, then copy over yours files, one, by, one ... into the "/site/templates/" folder.

[jordanlev]

If you're comfortable building markup, then you should absolutely build your markup first and then convert it into CMS templates. (This is the nice thing about markup-agnostic CMS's like ProcessWire... they do not dictate any sort of structure on you).

The general idea is that you will be creating "templates" for your site... so go through your design and figure out which pages are basically the same as each other and which are different. Generally, there will be 1 template for the home page, a few templates for generic interior pages (e.g. "full width", "left sidebar", "3 column"... totally depends on your specific design), then a template for special pages that are related to specific "things"... like individual news articles or individual blog posts or individual portfolio pieces or individual employees, etc.

Each "template" consists of your overall site markup, interspersed with editable fields (content areas) -- in general, wherever you see "Lorem Ipsum" text in your design, you'd replace that with a field. Then you will also have some places where you have a little php code to output lists of pages (e.g. "list the 3 most recent news articles on the home page) -- but don't worry, it's not much php code and ProcessWire is very logical and consistent with how you interact with it so it is easier to understand than other systems (in my experience).

To speak to your specific requirements:

• Brochure style / informational sites: Absolutely! This is where CMS's other than Wordpress really shine, because you don't need to shoehorn a brochure site structure into a blogging system.
• Multiple, editable content areas per page: Absolutely! This is the foundation of ProcessWire... it is entirely up to you to define which fields should be in which page templates (if you've used the "Advanced Custom Fields" plugin in Wordpress, you can think of ProcessWire being an entire CMS based around that concept).
• Portfolio functionality: Absolutely! Create a template for "portfolio" and set up the fields you want for it (a text field for title, a textarea/CKEditor field for the description, an images field for the photos, see below for "categories").
• Latest portfolio items are displayed on the front page (e.g. latest 6): Absolutely! In your "home.php" template file, put some code like this: 
  

  <?php foreach ($pages->find("template=portfolio,sort=-date,limit=6") as $page) { ?>
    <a href="<?=$page->url?>"><?=$page->title?></a>
  <?php } ?>
  

  See here for more about querying pages: https://processwire.com/api/variables/page/

• Editable slideshow on the front page (text and image): Yep! Create an "image" field, name it "home_slideshow" (for example), and assign it to your "home" template. Then in the home.php template file, put some code like this:
  

  <div class="your-slideshow-container-class">
    <?php foreach($page->home_slideshow as $image) { ?>
      <div class="your-slide-class">
        <img src="<?=$image->url?>" alt="<?=$image->description?>">
        <p><?=$image->description?></p>
      </div>
    <?php } ?>
  </div>
  
  <script>
    //Your slideshow script here... (or include it in your html <head> or down above the closing </body> tag... whatever)
  </script>
  

  See here for more about how to interact with image fields: https://processwire.com/api/fieldtypes/images/
  (Also, if you want more complex content in each slideshow slide [more than just an image and a description], you could make it a "Repeater" field and include image, title, description, caption, link to page, etc etc.... as many sub-fields as you need for each slide)

• News / Blog functionality: Sure... this is where (for better or worse) you will be doing more manual work than in Wordpress. News is rather easy... just create a template for "news", and create a top-level "news" page on your site and have your site editors add new news pages under there. Use the processwire query interface to list out news pages on the top-level index page (like how we did with portfolios on the home page). For "Blog Functionality", what exactly do you mean? Check out Ryan's "blog profile" for a lot of examples on how to structure this kind of thing: http://modules.processwire.com/modules/blog-profile/
• Latest news / blog excerpts are displayed on the front page: Oh yeah! Same idea as the portfolios (just change the "template" you're retrieving to "blog" or "news", if that's what you named those templates).
• Custom contact forms: This one is tricky. There is a paid plugin for forms: http://modules.processwire.com/modules/form-builder/ ... I've not used it myself, I'm sure it's nice (although it seems like it might be difficult to skin it with your own markup... not sure about that though because I haven't used it yet). Doing forms yourself could be possible with more work, for example:  https://processwire.com/talk/topic/2089-create-simple-forms-using-api/ . In general, this seems like a problem that has not been solved perfectly yet (outside of the paid plugin of course, which is surely worth the money if building a site for a paying client, but maybe not so much when just experimenting with a system as you and I are right now).
• One last note about categories and tags: This is a bit different than other systems. It seems that in ProcessWire, when you need custom stuff, you implement it as templates and pages. So you create hidden pages with sub-pages under them, and these act as sort of database records (kind of, I think?). Here is a great explanation of how to create a tags system using this method: https://processwire.com/talk/topic/3942-help-for-creating-tags-please/?p=38605  ...and also check out the aforementioned "blog profile" to see a working example of how this is implemented:  http://modules.processwire.com/modules/blog-profile/ .

Hope that helps!

(Also note that I'm relatively new to ProcessWire myself... although I have a ton of experience with other CMS's... so hopefully others will pipe in with more detailed or accurate info if I've missed anything or gotten anything wrong).

[Neo]

Thanks for your detailed answers.

This leaves me with a really positive impression about the dedication of the Processwire community.

Something that is unfortunately missing in the WordPress ecosystem. 

I will start building my templates and and then step by step incorporate Processwire-functionality.

I keep you posted during this process and ask you for advice when I should get stuck.

Thanks again. Great support. 

[OrganizedFellow]

This leaves me with a really positive impression about the dedication of the Processwire community.

Something that is unfortunately missing in the WordPress ecosystem.

We are dedicated.

We are a FANTASTIC community.

We look forward to your progress

[PhotoWebMax]

One of the things that bugs me about Wordpress is the template system: its complicated. Sure there are a zillion themes and plugins that make the system work, but deviating to any kind of custom layout opens up a can of worms as you will need to fight the underlying WP scaffolding. After trying several of the popular platforms I settled on MODx due to the open design process and template freedom. Processwire takes this freedom even further as there is less propriety system syntax. Its cleaner and more elegant. 

There are a lot of ProcessWire folks here who came from the front end world, knowing markup, css, adding scripts etc; but not really knowing how to code PHP. Even though I am an on again - off again beginner I now realize you do NOT need to know everything about PHP. There are the basic functions that get mixed with minimal Processwire syntax. That becomes the core dynamic elements to your custom template. These then mix with all the different Fields that makes your dynamic content come alive. Its very powerful. Not knowing PHP does increase your time investment though. Debugging issues becomes longer as the obvious errors in your work are just not so obvious. 

That is where this great community comes in...

Good luck!

[Marek]

I am in the same situation as you learning PW. i have been playing with forms lately, now i want to look into Blog Profile to see how that works...

so don't forget to keep us posted, i am definitely interested in your progress.