New video series: Building with XenForo 2

A long time ago, in a forum not particularly far, far away (may the fourth be with you), we produced a series of videos showing off how easy it was to build rich pages with XenForo's templates and javascript framework.

While many of the principles demonstrated in these videos remain a key part of XenForo 2, most of the syntax employed by XenForo 1 back then has changed, and there are many more tools at your disposal, like entities and command-line functions.

Building with XenForo 2​

Alongside the release of XenForo 2.2.5, it seemed a good time to put together a new series, rounding up all of the key parts of XenForo add-on development, starting with the basic steps of creating a new add-on and moving on to the template system, working with the database using finders and entities, creating and editing content, putting together paginated lists of content items and extending existing classes to add new functionality.

We hope that the videos have something for everyone, from those who are only just starting to think about building with XenForo to those who have been doing so for ages, and may even trigger the realisation that XenForo is not solely a platform upon which add-ons for XenForo can be built, but rather a community framework, capable of acting as the foundational layer for rich community applications in their own right.

Parts one and two of the series are released today, with parts three and four to follow tomorrow.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

On Thursday, as part of XenForo Insights Episode 6 (9am US Central, 3pm UK time via Zoom) we'll have a live recap of the steps so far, and a look ahead to what's in parts five and six, which will be posted immediately following the webinar.

Further parts of the series will be released in the coming days.

Each new part posted will be added to the Building with XenForo 2 playlist.

If you have any comments or suggestions, please post them here in this thread rather than over at YouTube so we can handle them like other content posted here and ensure that they receive the attention they require. As always, requests for technical support should be directed to the appropriate forum.

Here is a list of the videos in the series, which we'll keep updated as new parts are published:

1. Getting started
2. Creating and linking test pages
3. Passing variables to templates
4. Working with the database - entities and finders
5. Creating a custom entity
6. Creating, editing and saving content
7. Building a form
8. Listing your content
9. Paginating your content lists
10. Class extensions and self-to-many relations
11. Implementing inline editing with the XF javascript framework
12. Utilising the Delete controller plugin
13. Working with permissions
14. Implementing Reactions
15. 2022 series...

 

[JoyFreak]

Fantastic, I'll be taking the time to watch these videos, thanks!

 

[TickTackk]

Obligatory question: What editor style is that?

 

[Kier]

Obligatory question: What editor style is that?

 

[BassMan]

Excellent tutorials and excellently presented.

 

[XenForo]

Parts three and four of the Building with XenForo 2 video series are now available.

In part three, we look at how to pass variables from PHP to templates and how to work with them using variable filters and other XenForo template syntax, like <xf:foreach>.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Moving on to part four, we introduce the concepts of Entities and Finders - XenForo's semi-magical structures to make working with the database easy, quick and powerful.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[briansol]

This is great. I hope it doesn't stop and gets FAR more complicated and covers some advanced topics.

 

[Lee]

Superb information, very useful - is there likely to be more to come?

Scrap that I hadn't watched the last 10 minutes Haha.

 

[Kier]

Superb information, very useful - is there likely to be more to come?

Yes, lots.

The next info will be in XenForo Insights Episode 6, tomorrow. (15:00 UK time, 09:00 Central)

 

[DeltaHF]

Incredible stuff, thank you, @Kier!

I'm about to start building out a significant custom feature for my website on XenForo. These videos have come at the perfect time and will be invaluable for me.

 

[Kier]

Great to hear it @DeltaHF! I think part 5 and 6 might be particularly useful for you - look out for them after the preview in XF Insights tomorrow

 

[Lee]

Unfortunately I'll miss the beginning of insights because I'll be picking my children up from school, but will hopefully jump in when I can as it sounds super interesting.

 

[Renegade]

This is awesome, I had gone through the whole developer documentation a few weeks back. Getting the same in video form is really useful. Hope to start building the first custom add-on real soon, just going through PHP right now.

 

[XenForo]

Updates! Part five - creating a custom entity, and Part six - add, edit and save, are now available on YouTube.

Part five deals with creating a custom entity to manage your own custom content. We look at the structure, getters, field verification and manipulation, and automated changes applied at save time. To finish off, we use the entity to insert our first content into the database.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

With the entity ready for action, we need to build actions to help us add, edit and save our content with error management and redirection on success. Starting with some edits to the 'notes' route to allow us to target specific note content, part six holds your hand through the process.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[XenForo]

Parts seven and eight have now been published.

The seventh part of the series guides you through the process of building a simple form to act as a front-end for your add and edit actions, delving into the XenForo template syntax for form elements. We start with using the link builder to link directly to content items, then build single and auto-sizing multi-line text input fields and a submit button with an icon before using the form to add new content, tracing the process as it operates using Xdebug.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

With some notes added and saved to the database, we need to put together some code to fetch and list them. We'll call a finder for our custom content, fetch the data and pass it to the template, where we build a basic block to display each note complete with some basic text formatting, before looping through the items with <xf:foreach>.

Next, we put in place an edit link into our template, which will open the edit form in a dynamically-loaded overlay, then we use an <xf:if> conditional to show the edit date if applicable.

To finish off the page, we add a call-to-action button using <xf:pageaction> to encourage users to add new content.

Finally, we set our notes controller to be visible solely to registered users, and update the navigation entry to display only to registered, logged in visitors.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

More next week. Enjoy, and please do let us know if you have any questions or suggestions for future parts.

 

[briansol]

edit, this is covered but the quality/text size is unreadable and i haven't successfully been able to reuse the same save function for add/edit.

Can you share the code base?

 

[Kier]

edit, this is covered but the quality/text size is unreadable and i haven't successfully been able to reuse the same save function for add/edit.

Can you share the code base?

That’s surprising - the videos are all uploaded at 4K, so you should be able to hit the gear icon and select the 2160p version, if you’ve switched to full screen view from the embedded version. Alternatively, just click the links I’ve put at the beginning of each update post to view them directly on YouTube.

 

[mcatze]

@Kier i have one question about video 5 custom entity. At 1:02 you can create easily the Note entity. I've tried it by myself but it didn't work. Is there a trick for that?

 

[Kier]

@Kier i have one question about video 5 custom entity. At 1:02 you can create easily the Note entity. I've tried it by myself but it didn't work. Is there a trick for that?

That’s a custom live template I’ve built for PhpStorm - I’m going to look into packaging them up and putting them on the resource manager next week

 

[smozgur]

That’s a custom live template I’ve built for PhpStorm - I’m going to look into packaging them up and putting them on the resource manager next week

Beautiful tutorials, thank you @Kier. I've been developing custom add-ons for a while, but I just made a fresh start with the latest videos to make sure I am not missing anything. Honestly, I was using the XenForo editor for template editing, and I just completely understood how can I do that in the IDE directly by using the _output folder Thank you.

Is it possible to get all live templates that you've been using in development? See, you type <xf.block in phpStorm and it gets converted to the div block easily. That would be awesome!

Thank you! It is great content for XenForo 2!