Resource icon

Unmaintained [screencast] Creating XenForo Add-on 1.0.0

No permission to download
  • Author Author Floris
  • Creation date Creation date
Extra screencasts! :) And a new version: 1.0.1, build 16.

Screencast 10 - Organizing your group options

We previous made a group for options, with an option for the position. But what if you want more things? For example, a few test entries, or an "is this plugin active?" checkbox. How can we organize this like the other XenForo groups show so awesomely?

This screencast is a walkthrough on how to create new options, order them, and how we figured out the steps are per 100 and these 'hundreds' are grouped together.

This simply makes your add-on group options look more organized, easier to glance over, and help options for features to be grouped together.

The options section is very extensive. There are php callback options, long arrays, and complete templates you can call. We're keeping it simple in an attempt to not overwhelm you.

Okay, let's get started. We're going to add a few more options to our group, a few unique ids with test titles and I made on a checkbox, and the other ones input fields. While the input fields in 1.0.1 are not functional, the checkbox will be in the next screencast. But I left them in for you to explore and compare, and learn from.

Once created, the order is simple: lowest shows first, highest shows last.
You do not have to make the order number unique, nor do they have to be incremental like 1,2,3 or 20,21,22. They can be 1, 500, 9033.

Every pack of hundreds are grouped together. So for example in the screencast I made the top enabled checkbox just an order id of 1.
While the other options were 100 or even higher.

Each pack or group of options are together, so 100 and 150 will be together between the blue lines. But the checkbox for enabled which is just 1, is alone at the top, above the blue line of 100 and up. Just watch the screencast to see what I mean.

In the next few screencasts I will create version 1.0.1 in various builds and talk about best practice approach to using your options, using $xenOptions and xen:things

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

Screencast 11 - Best practice, kinda

Now that we have a checkbox for enabled / disabled to help us out, we can think about what is perhaps best practice, or more effective. We want to be make sure what we run on our hopefully busy forums is going to run well and without adding additional stress to the server.

So yes, we can go to the template, use our xenfans_demo_enabled from $xenOptions in a xen:if conditional. But it's at the end of the road so to speak. It means at only after we've processed and parsed everything, got our data from a database, and let the php code do it's thing that we decide; ha, no thanks, don't show it anyway.

Of course, the most effective way is to either completely uninstall the plugin, or disable it from the list of add-ons. But I can imagine that a admin you'd want to enable the add-on and then spend time working on phrasing, templates, options, settings, etc. In other words, still have access to it.

So we want to prevent customizing XenForo if it's not needed, so lets leave $contents alone, don't figure out which hook to use, etc. And that's all done in the .php file.

We have to make sure we have called the xenforo application's options (which we have, and can now use $options) and we can check against our unique enabled id.

We wrap it around our existing code at the logical spot.

See the screencast for the details.

What I want to achieve with this screencast is that there's a difference between writing some code in a .php file, the .xml add-on, templates, etc. verus also spending some time thinking things through as it all develops in front of your eyes. Take a moment to sit back and think; hm, I could probably approach this different.

In an upcoming screencast I will also demonstrate how I go through and clean up a bunch of templates (that I will create in screencast 12) to optimize what we have so far, and avoid duplicate code and in effect fix a little design/display bug that will sneak in.

Anyway, screencast video 11 is first.
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Screencast 12 - A bunch of templates and xen:things

Giving your add-on options is great, it allows you to offer a solution that works on your board, with choice for other board owners who you share it with. Someone wants what you have, but in the sidebar, etc. That's why we've created them. But, we can go further and use these options to display different things in different situations. Let's make some templates.

In the screencast you can see an overview of templates, the main one, the css one, then a few for text, image(s) and link(s). Yes, you can do it all in php directly, or in a single template. This is meant to be educational and it's just an example. And should give an insight as to what's possible with XenForo and how extensive you can make things.

Anyway, create a new unique templates, and using xen:things such as include, require, if, link, etc you can do a lot. You can check against the visitor browsing the page, get data from a message, or compare against options, such as our custom options, or include templates.

This screencast walks through the position options, and helps you create a text template that will mostly show in all situations (but more about that in the next screencast), an image which we won't show in the sidebar. And then we will even create links for the footer as an exception.

The .zip file 1.0.1 build 16 has all the options and all the templates and the xen:things for you to explore and customize.

Check the screencast video for the walkthrough please.

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

Screencast 13 - Cleaning up our group of templates

As you saw in the previous video we've extended our add-on mid development, resulting in a new version number and build number. That's ok, it's all working. But it's simply not good enough.

One element that could use improvement is the design bug that sneaked in, by re-using existing paragraph code in each template. Rather than wrapping our content within a single paragraph. To just name one thing.

In this video I want to point out that it's always worth it to take an extra moment and walk through what you have created. An add-on in a system that's so flexible and dynamic as XenForo simply might surprise you. Just adding a single template to an existing system suddenly has grown to an add-on with many phrases, a bigger .php file and a handful of templates.

It's then time to take a look and think about how to improve on what we've been able to throw together and tested to see if it worked.

Just by having an overlook at the now main template which figures out what content to load for each situation we see that we have the text template. We can move this to the bottom to avoid repeating our code.

Just doing that should give you the thought of, "wait a minute, don't I have my other templates wrapped in paragraphs?". Yep, and that's not needed either. We just want a row, with content in it.

And then we will take a look at using $visitor from XenForo, which you can use to check against guest, member, moderator or admin, etc. And I will use this screencast to demonstrate how we're going to only call the links template if the user browsing has true for is_admin.

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

Thanks again for reading all this, watching the videos, and hopefully you learn from it and get inspired to tweak your site and share your resources with the XenForo community.

I invite you to consider to optionally reward me for my time with a kind comment, a positive rating, or a like. And feel free to click Recommend to Facebook, Tweet to Twitter, or +1 it on Google.

And yes, you can use this add-on's code as an example to create your own, and distribute it. However, if you want to publish this whole screencast or any video I can only grant you permission as far as fair use with a credit back to the source here.
Top Bottom