How I built KKP.LAW with Processwire

[jensweigel]

The KKP.LAW site has been a Site of the Week in Processwire Weekly in the past. For this reason I would like to share some insights. So I hope someone will get an inspiration and maybe others may provide idees how to improve my process.

Development Setup

Currently I build my projects with DDEV and upload them to the server using Github Actions. This way I can view and develop them locally and push them to live when I am done. I also have SCSS which I write to a src folder and is watched by DDEV and also by the GitHub action. So it is possible to change SCSS via a browser in GitHub and everything will be deployed automatically.

The basics

The KKP.LAW was the last project before I develop this orocess with modules. But the basics are almost the same. Years ago I used Typo3 for building websites. But the really complex update routine, the complicated configuration and the ongoing change how you should build templates made it necessary for me to look for a new CMS. So Wordpress was never an option and many others were also very complicated, so I looked at ProcessWire. After a second look I really understood the approach and built my first websites with Processwire. Very quickly I switched from Typo3 to Processwire. Implementing new features into existing websites was so easy with it.

But one thing I really liked in Typo3 was the concept of pages and page content. On each page you can have multiple page contents. I.e. text or images or a mix of both. So I started to rebuild this logic in Processwire. I have templates for pages and templates for page contents. I use a page and pagecontent tag for the different types. On the PHP templates I just need to include them. So each page collects its page content children. All page contents can have a wrapper with some css classes. So it is easy to create layouts with this system.

CSS Framework

For this I use a kind of own CSS framework which is much more individual than big ones like Bootstrap. Personally I like the concept of 10 columns. So I have a 10 + 4 + 3 column system. Paddings are always added inside a column. So I dont need rows. All page content is inside a div tag with display: flex; flex-wrap: wrap;.

The result is very clean and I get a slim file sizes.

Components

Later I changed the page content more into components. They are not as powerful as in modern JavaScript framework. It was more a logical step for me. In my eyes, the massive classes I would need to build responsive websites always displeased me. So more and more I changed my approach to design and configure everything in a component with maybe one or two classes and do the rest in CSS. But in some cases the old approach is still good.

Current approach

So I made some modules for my basic needs. The current module is very personal build arrount my needs and my DDEV configuration. Each component (or page content) has its own module. So it has some methods, PHP template and basic scss which I bind into my deployment process. I wrote a bash script that sets up ddev, installs Processwire and these modules. Also creates a GitHub brunch with the required action that can be synced into a live server.

-

So this is a basic overview of my approach. Hope it is an inspiration for you. Questions and suggestions are very welcome.

See Website:

KKP.LAW

My own website: (also Processwire)

Jens Weigel – Büro für Design

[ngrmm]

1 hour ago, jensweigel said:

But one thing I really liked in Typo3 was the concept of pages and page content. On each page you can have multiple page contents. I.e. text or images or a mix of both. So I started to rebuild this logic in Processwire. I have templates for pages and templates for page contents. I use a page and pagecontent tag for the different types. On the PHP templates I just need to include them. So each page collects its page content children. All page contents can have a wrapper with some css classes. So it is easy to create layouts with this system.

Could you describe this method in more detail? Maybe screenshots from the backend?

[jensweigel]

2 minutes ago, ngrmm said:

Could you describe this method in more detail? Maybe screenshots from the backend?

Yes of couse

All pages with white background are pages. The grey background are page contents. So I have an easy way to rearrange, move or extend. The warm grey sections is for header and Footer wich works in the same way as the pages. So it can have page content like logo or navigation.

So you see the main Page "Kanzlei" have 6 page contents. The hero, a text component, the Expertise with some sub pages, Team, News and Events. In this case all of these have subpages.

Other example: (Schreinerei Merte)

You see a Wrapper wich just create a wrapping div around some kind of content.

Output:

[jensweigel]

On the template: (you see the module approch)

getComponent gets all allowed page components, loads it template files, wraps it if needed.

Every component has a wrapper builder where I can choose what css class it will use.

this will wrap this component into

<div class="hero">
  <div class="heroinner">
    {COMPONENT-CODE}
  </div>
</div>

 

[maetmar]

thanks for sharing. 

just fyi. I think you can do something very similar using the Pro Module and Repeater Matrix

[jensweigel]

1 minute ago, maetmar said:

thanks for sharing. 

just fyi. I think you can do something very similar using the Pro Module and Repeater Matrix

Oh yes you are right! I considered that as an alternative. The advantage for me using Pages is a better overview and handling in the backend. Disadvantage: understanding differences between Page and Page content is for customer very hard.

[maetmar]

regarding overview and handling in the backend, also the Repeater Matrix version looks quite nice for the enduser:

[jensweigel]

but if you want to move a page content to a other page you need some extra modules. I guess it is a personal flavor how to do 😀

[ngrmm]

1 hour ago, jensweigel said:

but if you want to move a page content to a other page you need some extra modules. I guess it is a personal flavor how to do 😀

@jensweigel thanks for the detailed explanation.
In the latest version of RepeaterMatrix you have the option to copy&paste matrixItems across the entire page. Even if the pages has two different templates. You just need the same RepeaterMatrix field.

But I can also understand how you create the structure. And with restricting template usage for children there should be no irritation for customers, right?

[jensweigel]

1 hour ago, ngrmm said:

But I can also understand how you create the structure. And with restricting template usage for children there should be no irritation for customers, right?

Oh that’s interesting! So I guess I should review it again. The irritation for the customer is maybe less with the matrix solution.

[Stefanowitsch]

Always interesting how people approach ways to create and manage content in ProcessWire in so many creative and different ways. For handling and sorting different content sections on a page the Repeater Matrix was my go-to module in the past.

Nowadays I use the RockPageBuilder from @bernhard which is far better in my opinion 🙂

[markus-th]

Very many interesting approaches. Therefore, I would like to show my solution as well.

I also use the repeater matrix but with nested elements. This gives me maximum flexibility and requires fewer "static" elements.

[maetmar]

23 hours ago, Stefanowitsch said:

Always interesting how people approach ways to create and manage content in ProcessWire in so many creative and different ways. For handling and sorting different content sections on a page the Repeater Matrix was my go-to module in the past.

Nowadays I use the RockPageBuilder from @bernhard which is far better in my opinion 🙂

RockPageBuilder -> where can I find that? In the module directory there is no such module

[zoeck]

1 minute ago, maetmar said:

RockPageBuilder -> where can I find that? In the module directory there is no such module

I think this is (still) an internal module from @bernhard. And It's not a free module 😉 

[bernhard]

The module is ready to be used (and is already used in several sites from several devs), just the site to sell it and also docs are not yet done. I'm working hard on that front. It will be 49€ for a single site for early birds. If anyone needs a copy already just write me a PM.

Or signup for Rock-Monthly to get notified when I officially release it 🙂 https://www.baumrock.com/rock-monthly/

[Fuzen]

@jensweigel How do you set certain “pages” to white background whereas others are gray?

[jensweigel]

With the Less Module you can place a admin.less inside your templates folder.

.PageList .PageListItem {
    &[class*="PageListTemplate_component"],
    &[class*="PageListTemplate_section"] {
        background: #f3f3f3;
        border-bottom: 1px solid #e0e0e0;
        &.PageListItemOpen {
            background: #e0e0e0;
            border-bottom: 1px solid #c9c9c9;
        }
        > a {
            padding-left: 10px;
            &:before {
                content: "\f061" !important;
                margin-right: 10px;
            }
        }
    }

}

so all Component Template begins with „component…“ (section is only a older version)