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:

        SharePoint Online

        The cloud parts are functional components that extend your SharePoint Online environment in Microsoft 365.

        Supports Classic and Modern sites for SharePoint Online/Microsoft 365


        Top SharePoint Online Products

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

        Calendar Plus

        Chart Plus

        Knowledge Base

        Project Management Central

        Simple List Search


        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 – Classic Pages Only


        Top On-Premises Only Products

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

        Calendar Plus

        Data Viewer

        Password Change

        Password Expiration

        Password Reset


        Our team of Microsoft 365 experts help you get the most out of your Microsoft technology, we have the best Microsoft 365 talent to streamline your organization.

        Streamline Your Department

        We Have What You Need

        Bamboo Solutions



        Webinar & Events


        Culture & Diversity



        Bamboo Solutions



        Bamboo Installer


        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!