SharePoint 2010 Cookbook: How to Add a Button to the Server Ribbon

Start personalizing your SharePoint site now with a custom SharePoint Ribbon.  Creating your custom Ribbon is simple and can be completed easily.  In this post, we’ll demonstrate the steps needed to first create a custom SharePoint page, and then how to customize your Ribbon adding a feature and custom Ribbon button to open the new page.

Create an Empty SharePoint Project:

  • Using Microsoft Visual Studio, go to File > New > Project
  • Under Installed Templates in your Project Types menu, go to Visual C# >SharePoint > 2010 and select Empty SharePoint Project.
  • Input the Name of the project as well as its Location, Solution (in this example, we’ll Create new solution), and Solution name.
  • Click OK.

    Modify your project and add custom elements to define the Ribbon structure:

    • Open your SharePoint Project and click Add New Item. In this example, we will be selecting the template Module and have named it CustomAction:

    • Next, add an xml file to define the Ribbon structure:

    • In my example, I have created a custom command item which will be located on the Ribbon which I have customized.
    • Open the project’s Feature Design. Add the module you created aboveCustomActionto the items in the features pane:

      Execute the client script when the Ribbon is clicked and open your custom page:

      • In Solution Explorer, add two new SharePoint folders titled Images and Layouts. These folders will be used to store the images used in your project as well as your custom page:

      • In the Images folder, add an icon image that can be accessed on your Ribbon.
      • In the Layouts folder, add your custom page and client scripts:

      • To add your Custom Page to your SharePoint site, open the Layouts folder. Right-click the folder and select Add New Item. For this example, we will be adding an Application Page from a SharePoint 2010 template:

      • In the file CustomRibbon.js, we will add instructions that will prompt the custom Ribbon to implement an action when it is clicked.
      • In the client code, you can load client context in order to get site and/or list information. In this example, I used listId and the source URL and inputted them as a query string in the native URL:

        Deploy your Custom Page:

        • When you have successfully completed the steps above, you will see that there is now a new Open Custom Page button located on the Ribbon on the List Tools menu:

        • When you click on the Open Custom Page icon, you will now be redirected to the custom page you added above:


        See also:

        All SharePoint Versions

        The web parts are functional components that extend your SharePoint environment whether it’s hosted, on-premises, or part of Microsoft® Office 365.

        SharePoint 2013, 2016, 2019, Online (Office 365)

        On-Premises Only

        These web parts extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of SharePoint Web Parts.

        SharePoint 2013, 2016, 2019


        Product Suites

        Experience greater power and savings by bundling our SharePoint apps and web parts.

        Essentials Suite

        Essentials Plus Suite

        Bamboo Premier Suite

        Project Management Suite

        Knowledge Management Suite

        External User Manager


        For more information on our product suites, contact us.

        Featured Services

        SharePoint Health Check

        A SharePoint Health Check will identify the causes of issues and risks associated with your specific environment, and is custom tailored to provide you with the best recommendations to optimize your SharePoint environment.

        SQL Health Check

        Document recommendations relating to performance, stability, availability, or a specific focus you request of your SQL Server database instances.

        My SharePointXperts

        The truth is that each SharePoint skill may not be a full time job for many organizations, and it is nearly impossible for one person to do everything you need – so augment your team with SharePointXperts; providing the skill sets you need when you need them!