UpFront – A powerful Theme Framework for ClassicPress

Themes
1

I thought it was time to put some code where my mouth is. :wink:

During the discussions about the ClassicPress ecosystem, theme builders and the tools creators need, I realized that I already have something that might be a useful contribution.

So, meet UpFront.

UpFront is a Theme Framework for ClassicPress and WordPress, originally created by WPMU DEV. The original project was abandoned, but I always thought the underlying idea was far too good to simply disappear.

Over the last years I have invested a lot of time into bringing it back to life.

It has been modernized, adapted to current PHP versions, cleaned up, security issues have been addressed, old dependencies are being removed, and it has been brought back into a state where it can once again be used as a serious foundation for custom websites.

So what is UpFront?

UpFront is not simply another Page Builder.

The framework provides the foundation for complete custom themes:

  • responsive grid and breakpoint handling

  • layouts and templates

  • regions and global regions

  • reusable elements

  • global colors and typography

  • presets and design settings

  • extensibility through plugins

  • support for UpFront Child Themes

The UpFront Builder is a separate plugin. It provides the visual design environment where layouts can be created and exported as Child Themes.

That distinction is important to me.

A Page Builder is primarily about creating content.

A Theme Builder gives you control over the design and structure of the entire website.

And that is where I think tools like UpFront can have a place in the ClassicPress ecosystem.

Why am I bringing this to ClassicPress?

Honestly, this wasn’t originally a ClassicPress project.

I started working on UpFront because I had real projects that depended on it, and I didn’t want to lose a tool that I considered genuinely brilliant just because its original developer had moved on.

That is actually the story behind a lot of PSOURCE.

I have spent years preserving, modernizing and extending software that I still needed.

ClassicPress gave me a place where this kind of work makes particular sense.

It provides a stable foundation and leaves room for developers to build things on top of it without constantly having to reinvent their tools.

Where it is now

The current framework already runs on both ClassicPress and WordPress.

The documentation is being rebuilt alongside the code, and the project now has an English README and documentation.

I’m currently doing the final cleanup and testing before submitting it to the ClassicPress Directory.

So this is not a promise about something I might build someday.

It’s already here.

There is still work to do, of course. But I think it has reached the point where it makes sense to show it to the community and let people see what it can actually do.

And this is where I’m really interested in your feedback

If you are a theme developer, plugin developer, designer or just someone who likes experimenting with ClassicPress:

Have a look at it.

Tell me what you think.

Find bugs.

Suggest improvements.

Build something with it.

And if you are a developer and want to extend it, I’d be very happy to see what you come up with.

That’s ultimately what I want PSOURCE to become:

Not a collection of software that I control, but a collection of open-source tools that other people can build upon.

Maybe UpFront will be useful to some of you.

Maybe someone will take an idea from it and create something completely different.

Either way, that’s Open Source.

UpFront Theme Framework:
https://github.com/Power-Source/upfront

Documentation & showcase:
https://psource.eimen.net/ps-upfront-theme-framework/

I’m looking forward to seeing what you think.

2

After taking a quick glance, looks nice, but quite complex.

Pulled out the link to the actual builder plugin, because else this post is rather nonsensical: GitHub - Power-Source/upfront-builder: Der schnellste und visuellste Weg, um UpFront-Themes zu erstellen. Jetzt kann jeder UpFront-Themes entwerfen, erstellen, exportieren, teilen und verkaufen · GitHub

Not my way of creating websites - I like things much leaner and cleaner, and so do quite a lot of designers I know - but could be interesting for frontend designers, whose primary focus is design, including prototyping, and not development.

Ie. web generalists, with a base to advanced level of knowledge of PHP, but a senior knowledge level of design and how both sides interact with each other.

cu, w0lf.

3

Thanks for taking a look, w0lf.

And yes, I think your description of the target audience is actually pretty accurate.

UpFront is definitely not intended to be the leanest possible way of building a website. The framework itself is quite a different beast from a typical theme, because it provides the whole layout and rendering system underneath the theme.

The Builder is where the complexity becomes useful: it is meant more as a visual theme development environment than as a page builder for everyday content editing.

So I completely understand that it isn’t your preferred way of building websites. That’s fine — I don’t think there should be one “right” way of doing it.

What I find interesting is that there are still people who want to visually develop an entire theme, especially for prototyping or for creating a reusable theme that can then be exported and used elsewhere.

And that’s really what I wanted to bring back with UpFront: an old idea that I still think has value, but updated enough to work on current ClassicPress and WordPress.

Thanks for the honest feedback. That’s exactly the kind of discussion I’m hoping to get going here.

One thing you might find interesting given your preference for lean software: despite everything the framework and builder provide, the complete UpFront + UpFront Builder installation is only around 5–7 MB unpacked.

So while the architecture is certainly more complex than a minimal theme, I have tried very hard not to turn that complexity into bloat.

That’s actually one of the things I like about the old UpFront codebase: there was a lot going on, but it wasn’t built around shipping a giant pile of dependencies.

UpFront is a theme builder for creatives

UpFront doesn’t try to make everything “clicky-clicky” and predefined.

You get a powerful theme framework and a visual development environment — but the creative freedom is still yours.

Bring your own CSS.
Bring your own HTML.
Bring your own JavaScript.
Build your own elements.
Extend the framework.

UpFront gives you the structure, the layout system, the responsive framework and the visual tools. What you do with them is up to you.

That’s the part I like most about it.

It’s not a theme builder that tries to anticipate every possible design and give you a checkbox for everything.

It’s a theme builder for people who have their own ideas.

If you know CSS, HTML and JavaScript, UpFront doesn’t get in your way. It gives you a visual foundation to work from while still letting you take full control when you need it.

The framework handles the heavy lifting.

The creativity is yours.

4

Just installed the plugin and created a new theme. Seems to work without problems.
But I too find it quite complex. Hopefully a tutorial is available soon (current doc page does not contain much info).
Note: my site language is default ENG (US) but the plugin loads the German translation, because your upfront_thx-en_US po/mo file contains German translation.

5

Thanks for testing it so quickly, Guido. Glad to hear that you could install it and create a new theme without running into problems.

And yes, both points you mentioned are absolutely fair.

The documentation is still being expanded. There are already some tutorials and documentation in German, since German is the primary language of the project, but I’m currently working on the English translation as well. More English tutorials will follow.

The en_US translation issue is actually a mistake in the current development version. The file contains German translations where it shouldn’t, so I’ll fix that before the Directory release.

As for the complexity: that’s intentional. UpFront is not meant to be a minimal page builder or a “click here, choose this, done” kind of tool. It’s a complete theme framework with a visual development environment on top of it. You can build the layout visually, but you can also add your own CSS, HTML and JavaScript and extend the system with your own elements.

That’s also why I still consider it a work in progress. Before submitting it to the ClassicPress Directory, I’m going through the remaining smaller issues, improving the documentation and finishing the internationalization.

Thanks again for testing it and pointing these things out. This is exactly the kind of feedback that helps before the Directory release.

6

You are welcome!
I do not have plugins listed in the CP Directory myself, but do know that the code must meet the CPCS. It’s described in this document. For large plugins (with a lot of code) this may be a challenge.

7

Yes, and in the case of UpFront the situation is actually a little different.

UpFront is already ClassicPress 3.0 compatible. One of the major parts of the modernization was systematically eliminating the old jQuery UI dependencies. That not only brought the code in line with the current ClassicPress direction, but also noticeably improved performance.

This is actually a good example of what I meant by “less is more”. Over the years I have removed a lot of old dependencies and unnecessary layers while adding more functionality at the same time.

So although UpFront is a large project and certainly looks complex from the outside, the current version is considerably leaner than the original UpFront.

I’ll still do the usual final review before submitting it to the Directory, but the fundamental ClassicPress compatibility is already there.

8

Good news, Guido — your feedback actually helped me track down a real bug.

The problem with the German strings in the en_US translation wasn’t simply a missing translation. There was a bug in the POT generation process which caused the generated English translation file to contain the German strings.

I’ve fixed the generation process now.

The latest version, 1.2.5, is available here:

https://github.com/Power-Source/upfront/releases/tag/1.2.5

I’ve gone through the translation files again, and this version should now have the correct English translation handling.

Interestingly, 1.2.5 will most likely also be the version I submit to the ClassicPress Directory.

So your quick test turned out to be particularly useful. You found something that I would probably have discovered much later — possibly only after the Directory submission.

Thanks again for taking the time to install it and test it.

9

Could you give me (us) the proper download link?
I’ve downloaded multiple different zips (upfront.zip, upfront-main.zip, upfront-builder-main.zip) but none of them install the plugin properly.

10

https://github.com/Power-Source/upfront/releases/download/1.2.9/upfront.zip is the Theme-Framework, thats you need for using a UpFront Theme, i also have built in a Showcase of Demo-Themes you can Download and Use.

https://github.com/Power-Source/upfront-builder/releases/download/1.0.6/upfront-builder.zip its the UpFront Builder Plugin, this Plugin you use to create own Themes and build a UpFront Theme that you can use or you can share.

11

I installed the first one (upfront.zip) first, but it is not listed as plugin at the Plugins page.
So I installed the second one (upfront-builder.zip) and now “UpFront Builder” is listed as plugin. So first one needs second one?

But the plugin language is still German.
Then I clicked the blue button “Framework installieren und Builder starten” and after that’s loaded the plugin language switched to Eng again. Strange.

What IMO is not relevant for this builder plugin is the included User Restrictions.
And the Experimental Features seem quite aggressive, so why include them if there’s a major change of breaking things?

12

Yes, the two packages are actually two different parts.

upfront.zip is the UpFront framework/theme itself, while upfront-builder.zip contains the Builder plugin. The Builder needs the UpFront framework to work, which is why the framework is installed first and the Builder appears separately as a plugin.

The User Restrictions actually have a specific purpose in the Builder. With the appropriate permissions, authors or other users can create complete posts and pages directly in the UpFront editor and fully style the content themselves. In that respect, it can work somewhat like a page builder, including creating completely unique layouts and content. So the user permissions are important because they determine who is allowed to do that.

Regarding the Experimental Features: these are mainly related to caching. There is currently only one rather aggressive caching option, and I don’t make any guarantees about it yet. So far I’ve only been able to test it on my own servers.

That’s also why I consider it experimental: it’s there if someone wants to use it, but it’s completely optional. If someone enables the aggressive cache and runs into problems, I’m happy to investigate and fix them. :slightly_smiling_face:

13

= 1.3.0 =
*Fix Bug in the Caching Loop - THANKS Guido07111975!

With this Update the Cacheloop should stopping at the first start

14

= 1.3.1 =

  • Fix: Featured images now fall back to the currently set WordPress featured image when image metadata is outdated

  • Fix: The “Exit” and “Dashboard” actions in the builder menu now navigate reliably again

  • Fix: The Search element registers its frontend CSS in time and displays the search bar again

  • Fix: Videos from the media gallery now adapt to the available width on mobile views

  • Fix: Upfront dependency output no longer deregisters jQuery; Wiki and ClassicPress editor scripts receive jQuery before execution

  • Fix: Dynamic retrieval of ClassicPress core scripts uses the global script registry and no longer causes server errors when optional dependencies are empty

  • Improvement: The Code element editor highlights unclosed and incorrectly nested HTML tags directly within Ace and prevents saving invalid markup

  • New: The Code element can export HTML, CSS, and JavaScript as a new CodePen and import previously exported public Pens back into the three editor tabs

  • New: Code elements can be saved as named templates in the active theme, managed in the CodePen style guide, and explicitly exported as a new custom CodePen when needed

    * DOWNLOAD UpFront Framework 1.3.1