Introducing a new ProcessWire site profile

Regular blog site profile

Consistent with the plans of introducing new site profiles this year, we've started work on the new site profile, and have the first version ready this week. This profile has a little bit in common with the default site profiles (included with the ProcessWire core) but aims to go quite a bit further in demonstrating various features of ProcessWire, several of which are version 3.x specific. It also aims to be a more useful starting point to build a site from.

The front-end of this profile uses the Uikit 3 library and includes a library of time-saving functions for working with Uikit 3. It stays with the default Uikit styles and we've tried to keep it as generic “Uikit” look as possible. That way, when someone wants to use it to build a site, there is very little they have to reverse engineer or remove. It also means that you should be able to plug in any Uikit 3 theme and have everything adjust perfectly to that theme. We currently have no theme being applied, so you just see the generic Uikit output.

Site profile highlights

  • This profile includes a blog component and demonstrates how to build a simple blog in ProcessWire.

  • The profile uses the new markup regions and the new ProcessWire functions API.

  • It uses the new Uikit 3 on the front-end in template files and includes a handy PHP library of Uikit-specific functions.

  • One of the template files (basic-page-edit.php) demonstrates how to implement front-end editing features. When logged in (and page is editable) you can edit any pages using that template on the front-end.

  • Uses pagination (after 10+ blog posts) and demonstrates use of comments as well. Includes a ukPagination() function which tailors ProcessWire's MarkupPagerNav module to deliver Uikit pagination.

  • Demonstrates use of a Page reference field, as used by categories in the blog. This is something that none of our core profiles do at present, and we think they should.

  • The template files are easy-to-read and modify, and serve as a good platform to build from. Use of markup regions makes them simple to follow in the same way that template files using direct output tend to be simple to follow.

  • Demonstrates implementation of a custom hook function (see in the /site/ready.php file).

This new site profile can be seen at demo.processwire.com/regular/. However, it's going to be more interesting if you grab a copy yourself and play with it. Right now it has its own GitHub repo where can download it. You'll also need a copy of ProcessWire 3.0.51 (the latest dev branch version). When this profile is fully complete, it will likely replace the “Classic” profile currently included in the PW core.

Uikit 3 PHP function library

This new site profile also includes a Uikit 3 PHP function library that simplifies some of the more verbose bits of markup you might need when using Uikit 3 with ProcessWire. For instance, creating a recursive navigation tree using uk-nav, generating a uk-navbar with dropdowns, rendering uk-pagination, or any number of other things. We find it helpful to have a few helper functions to avoid markup redundancy in multiple template files.

You'll see this library included with the new site profile, even though it doesn't itself need to use all of the functions that are included. But we're planning to continue to build upon and maintain this library of Uikit 3 helper functions, since we've already used many on a lot of other client projects. We've done the same with other CSS frameworks as well, though haven't released them as part of a site profile before. But since this site profile uses Uikit, I thought it made sense.

If you get a chance to check out this new site profile, please let us know what you think and if there's anything we can do to improve it or make it more useful. An important thing is to keep it basic enough that new users can understand it easily, and build from it easily. But the more we can find the balance between “simple”, “educational” and “useful”, the better.

I hope that you all have a great weekend and enjoy reading the ProcessWire Weekly. Thanks for reading!

Comments

  • Szabesz

    Szabesz

    • 8 years ago
    • 30

    Thank you Ryan! I'm already loving it :) and will install it during the weekend.

  • HMCB

    HMCB

    • 8 years ago
    • 01

    This may not be the case here, but I don't trust those testing tools. I've used at least 4 (from email to site testing) and the results have been less than accurate. I'd be curious if those tests are run within the actual OS and browsers and to see if UIKit is in fact compatible.

  • HMCB

    HMCB

    • 8 years ago
    • 62

    Spectacular! I've used UIKit 3 on one site already and it's incredible. I know PW is un-opinionated but I think it would bring more designers into the fold if you concentrated solely on UIKit. It's so polished and gives us a great starting point on which to build on. Yes, there are other CSS frameworks and nothing is preventing the use of them, but the un-oponionated nature of PW also makes it more intimidating for many designers, I suspect. Sometimes we just need sensible defaults that give us a launchpad for building sites. UIKit is so polished, too.

    And major props for the editing-page code/example. Another one of those things that gives non-developers courage to build better things.

    Thanks Ryan and team.

  • Szabesz

    Szabesz

    • 8 years ago
    • 11

    3.0.0 beta 9 (February 3, 2017) has been released, so for the time being, just overwrite the css and the js files (uikit.min.css and uikit.min.js) and the site profile will be ok in IE and Edge too.

  • Tfom

    Tfom

    • 8 years ago
    • 11

    While trying to navigate trough the demo profile site I'm getting errors - "The connection was reset" For example by clicking on the "Think affordable artificial blast" link on the homepage. The same thing happens on other pages, it may worth to check this out ;) Other than that great site profile! I have to try to build something with PW :)

  • ukyo

    ukyo

    • 8 years ago
    • 00

    Thanks @ryan
    Nice to see uikit front-end framework used by you for profiles and some other works ! is this mean, will we see more uikit things ?

  • Can

    Can

    • 8 years ago
    • 10

    i just recently wished to have "save + publish + add another"..and there it is *thumb up*

  • Holly

    Holly

    • 8 years ago
    • 00

    I really am looking forward to using UIKit 3, but after spending a good chunk of time running it through browserstack, you do need to keep in mind that it doesn't work in the latest version of IE, nor Edge. If it borked in one, but not the other, I'd tell people to upgrade, but both? That needs to be fixed by UIKit before I can really play with it.

    • Dene

      Dene

      • 8 years ago
      • 20

      It is possible to rename the Blog page as News but is it possible to reconfigure this module to be News?
      i.e. So that it appears as /news/ and the templates used as news and news-post (to avoid any confusion later on).

     

    PrevProcessWire 3.0.50 core updates

    8

    This week's version of ProcessWire expands upon our markup regions support introduced last week, and also contains various minor fixes and tweaks. In addition, it adds a $urls API variable… More 

    NextOptimizing 404s in ProcessWire

    7

    This week we give extensive coverage on how to optimize 404 requests in ProcessWire. In this post you'll learn about why 404s are significant issue, and then we'll look at what you can do to optimize and ensure your site doesn't waste valuable time and resources serving irrelevant crawlers and bots. This post also briefly covers this week's core version 3.0.52. More 

    Latest news

    • ProcessWire Weekly #549
      In the 549th issue of ProcessWire Weekly we’re going to check out the latest core updates, highlight one older yet still very relevant third party module, and more. Read on!
      Weekly.pw / 17 November 2024
    • Custom Fields Module
      This week we look at a new ProFields module named Custom Fields. This module provides a way to rapidly build out ProcessWire fields that contain any number of subfields/properties within them.
      Blog / 30 August 2024
    • Subscribe to weekly ProcessWire news

    “Yesterday I sent the client a short documentation for their ProcessWire-powered website. Today all features already used with no questions. #cmsdoneright—Marc Hinse, Web designer/developer