Now let's walk through an complete example so you can see how easy it is to create a custom block and assemble it into an existing page.

Create a "MyStuff" folder under the Plugins folder, then right click it an select "Add New Item". Next choose "Web User Control", uncheck the "Place code in separate file" checkbox and give it the name HelloWorld.ascx.

Figure: Choose Web User Control and name it HelloWorld.ascx

Add the Inherits="Rock.Web.UI.Block" string in the first Control line and type your Hello World as HTML as shown below. (Note: If you did not uncheck the "Place code in separate file" in the previous step then you're using a code-behind file, HelloWorld.ascx.cs, and you'll need to change the inheritance in the *.cs file instead.)

The complete HelloWorld.ascx block:

<%@ Control Language="C#" ClassName="HelloWorld"  Inherits="Rock.Web.UI.Block"%>

<h2>Hello World</h2>

Now open Rock ChMS (in Visual Studio press F5) and login as an Administrator. Next, navigate to a test page and then choose the "Page Zones" icon () from the toolbar in the bottom right corner. This is how you add Blocks to the Zones on a page. Select the Content zone's Zone Blocks as shown here:

Figure: Editing the zones on a page

Select the Add New button from the dialog box that appears. Doing this will search for all registered blocks and also will register any new blocks, including the new HelloWorld block you just created. Figure: Adding a block to a page zone

Select your HelloWorld block Type from the dropdown list, give it a name on this page, then press Save. Once saved, press Done.

Figure: Adding a block to a page zone

Once the page is refreshed, you will see an instance of your block on the page. Figure: A page showing an instance of your HelloWorld block