Community Documentation

v3 Knowledgebase

How to Make a Drag and Drop Block with a Header

First, create two files. For this tutorial let's assume the name of your block is Hello.

Create the following:



Open hello.class.php and add the following code. Replace ModuleName with the name of the module this Block is for (Example: Core). Replace Hello with the name of your Block. Don't forget to replace 'Put Title for Your Block Here' with the title of your Block. You can either replace "//Put your code here" or simply add your code after it but before the curly if you have special code to add.
Tip: If this is a block that doesn't go to a specific module (blog, photo, profile, etc) you can make your own module to keep your custom blocks in.

defined('PHPFOX') or exit('NO DICE!'); 
class ModuleName_Component_Block_Hello extends Phpfox_Component
public function process()
'sHeader' => 'Put Title for your Block Here',
return 'block';


// Put your code here

Open hello.html.php and add the following code. Note that you wold erase the "Html content goes here" and put your own.:
defined('PHPFOX') or exit('NO DICE!');
Html content goes here.

Upload hello.class.php into the folder module/{name of the module this block is for, EX. core}/include/component/block/

Upload hello.html.php into the folder module/{name of the module this block is for, EX. core}/template/default/block/

Now we must connect our block to a controller by adding a component in the AdminCP.

AdminCP-->Extensions-->Module-->Add Component

Product: phpFox
Module: {name of module you used above, our example was Core} Core
Component: hello (this is the name of our block we created above, in lower case letters with no spaces)
Type: Block
Active: Yes

Submit when done.

Add the Block to the page you want it on. Ours will be on the Visitor page, core.index-visitor

AdminCP-->CMS-->Blocks-->Add Block

Product: phpFox
Module: {the one you selected above, ours was Core} Core
Title: leave blank
Type: PhpBlock
Controller: core.index-visitor (or whatever page you want it on)
Component: hello (the component we created)
Placement: Block 1 (or wherever you want it
Can Drag and Drop: Yes or No.
Active: Yes
Select the user group access

Submit when done.

This tutorial uses the code in the tutorial by Purefan in the KB for the majority of this, and revised with code from the tutorial in the KB for creating your first add-on.