How To Add A Custom Sitecore Button To The Editor Ribbon

A powerful selling point of Sitecore is the amount of customization that it provides to developers. A common requirement I've been faced with numerous times is providing content editors with some bespoke functionality that they can trigger themselves. Some examples of these types of scenarios are importing content from Wordpress, exporting content into RSS feeds and refreshing data generated from a third party system. When you get faced with these types of scenarios, a really cool and useful feature of Sitecore is to be able to create your own tab in the Sitecore ribbon with some custom buttons that trigger your custom code. In today's tutorial, I'm going to cover the code required to achieve this and how you can configure Sitecore to use it.

Creating A Custom Sitecore Strip In The Ribbon

Everyone who has used Sitecore for more than 5 minutes will be aware of the top ribbon: sitecore_ribbon_1 At the very top you have a bunch of tabs, or, in Sitecore terms 'strips', like 'Home', 'Navigate', 'Review' etc.. The good news is creating a custom strip for yourself is very easy. First, you will need to switch to the 'Core' database and open the content editor. If you do not know how to do this, then I suggest you read, How To Switch Between The Core and Master Database in Sitecore. With the Core database open, navigate to 'Content' -> 'Applications' -> 'Content Editors' -> 'Ribbons' -> 'Strips' sitecore_ribbon_2 My usual trick, if I'm not using TDS, is to right click on existing strip, select 'Duplicate' and fill the details to suit you, as seen below. Doing this will create a new strip in the header but it will be empty: sitecore_ribbon_3 To fill your custom strip up, you will need to link to one or more 'Chunks'. Chunks are the sub tabs you can find in the editor. If you already have a chunk you want to use, create a new reference item under your custom strip and point it to the chunk you want to use. When you create a new item you will need to use the Reference template, template location is shown below:
In the 'Data' -> 'Reference' field, you need to add a reference to the chunk you want to use, see below: sitecore_ribbon_4

Creating A Custom Sitecore Chunk

Creating a custom chunk is very similar to the steps above for creating a strip. Chunks can be found in the Core databases, 'Content' -> 'Applications' -> 'Content Editor' -> 'Ribbons' -> 'Chunks' section. To create a custom chunk, I usually just duplicate an existing one. You can create a new one by using the '/sitecore/templates/System/Ribbon/Chunk' template. All you need to do is add in the 'Header' field with the name you want to display and you are set. sitecore_ribbon_5 We are now slowly getting to a stage where we can do something useful! We have a custom strip with a custom chunk. The next step is to add a button to the chunk that will call our custom code.

Adding a Button To The Chunk

Adding a button is again very similar to the process above. To add buttons to a chunk, you simply need to create the buttons as child items under the chunk. To create a button, you can use any of the templates under Buttons can be created using different templates under '/sitecore/templates/System/Ribbon/'. I seem to go for the '/sitecore/templates/System/Ribbon/Large Button' template. sitecore_ribbon_5 To create a new button, the two main fields you need to supply is the name you want to appear by the button in the 'header' field and the code it should be called in the 'Click' field. In the example above, I'm calling something called 'jondjones:customButton'. This isn't related to a class or method, instead, it relates to the Sitecore command it will read in your 'App_Config' -> ''commands.config' file. sitecore_ribbon_7 In my example, I created a new command with a key called 'jonjones:customButton' for the type I point to my custom code. This is the namespace and class name, followed by a coma. then the assembly name, like so:
JonDJones.Core.Commands.DoCustomWork, JonDJones.Core

Writing The Custom Code

We've finally made it to the part where we need to write some code, eventually!
    using System;
    using Sitecore.Shell.Applications.Dialogs.ProgressBoxes;
    using Sitecore.Shell.Framework.Commands;

    public class DoSomeWork : Command
        private static readonly object Monitor = new object();        

        public override void Execute(CommandContext context)
            if (context == null)

                    ProgressBox.Execute("JOB NAME", "Title", "Applications/32x32/refresh.png", Refresh);
            catch (Exception ex)
                Sitecore.Diagnostics.Log.Error("Error!", ex, this);

        public void Refresh(params object[] parameters)
            // Do Stuff
The code is pretty simple. TO create a Sitecore command you will need to inherit from 'Sitecore.Shell.Framework.Commands.Command' and override, Execute(CommandContext context) method. In here you can put whatever custom code you like. In my simple example, I've added a 'Sitecore.Shell.Applications.Dialogs.ProgressBoxes.ProgressBox'. This will show a basic progress bar while your custom code is executing. It is definitely not needed. If you are trying to implement some functionality like a data import that might take 10-60 seconds to run, then this is a good practice technique to use


in today's tutorial we've covered quite a lot. We've gone through the steps to create a custom Sitecore strip, chunk and button. We've create a custom class that inherits from the Sitecore command class.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35662136-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();