SharePoint 2013 Create custom master page using Visual Studio 2013

SharePoint 2013 Create custom master page

In this post, we will discuss how we can create a custom master page using visual studio 2013. Here I am using Visual Studio 2013 and SharePoint 2013 on-premise for this demo. Before doing anything, go to your site settings page and then click on “Master pages and page layouts” which is under “Web Designer Galleries”. From the master page gallery, download Seattle.master page as saving it in your local drive. In this example, I am using Seattle.master as the base.


Also, read:
Delegate Controls in SharePoint 2013 using Visual Studio 2013

Hide master page elements in dialogs in SharePoint 2013

Auto complete feature in SharePoint 2013 list column using SPServices in SharePoint 2013

Now Open Visual Studio 2013, then File -> New -> Project. Then in the New Project dialog box, From the templates select Visual C# -> Office/SharePoint -> SharePoint Solutions. Then from the right side select SharePoint 2013 – Empty Project. Give a name and click on OK as shown in the fig below:

SharePoint 2013 Create custom master page using Visual Studio 2013
SharePoint 2013 Create custom master page using Visual Studio 2013

Then give your local site for deployment and then choose “Deploy as a farm solution” as shown in the fig below:

SharePoint 2013 Create custom master page using Visual Studio 2013
SharePoint 2013 Create custom master page using Visual Studio 2013

Then right click on the project, then add a new item. Then in the Add New Item dialog box, select Module as shown in the fig. Give a name and click on OK as shown in the fig below:

SharePoint 2013 Create custom master page using Visual Studio 2015
SharePoint 2013 Create custom master page using Visual Studio 2015

Then delete the sample.txt from the Module folder and then past the master page which we have downloaded from the site and saved in the local drive. In my case, I have given the name as “MyCustomMaster.master”.

Now change the Elements.xml like below:

<?xml version=”1.0″ encoding=”utf-8″?>

<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”>

<Module Name=”CustomMasterPages” Path=”CustomMasterPages” RootWebOnly=”TRUE” Url=”_catalogs/masterpage”>

<File Path=”MyCustomMaster.master” Url=”MyCustomMaster.master” Type=”GhostableInLibrary” IgnoreIfAlreadyExists=”TRUE” />

</Module>

</Elements>

SharePoint 2013 Create custom master page using Visual Studio 2013
SharePoint 2013 Create custom master page using Visual Studio 2013

Then give a meaningful name to the feature, in my case I have given the name as “ActivateCustomMasterPage”. Then open the feature and give a title and select the scope as Site as shown in the fig below:

SharePoint 2013 Create custom master page using Visual Studio 2013
SharePoint 2013 Create custom master page using Visual Studio 2013

Then we will add an event receiver which will set our master page when feature got activated and will set to seattle master page when feature get deactivated.

Right click on Feature then click on “Add Event Receiver” as shown in the fig below:

SharePoint 2013 Create custom master page using Visual Studio 2015
SharePoint 2013 Create custom master page using Visual Studio 2015

Then Here we need to write the code ActivateCustomMasterPageEventReceiver.

Write below code in the FeatureActivated event.

public override void FeatureActivated(SPFeatureReceiverProperties properties)
{

SPSite site = properties.Feature.Parent as SPSite;

if (site != null)

{

SPWeb topLevelSite = site.RootWeb;

string webAppRelativePath = topLevelSite.ServerRelativeUrl;

if (!webAppRelativePath.EndsWith(“/”))

{

webAppRelativePath += “/”;

}

foreach (SPWeb web in site.AllWebs)

{

// Activate the publishing feature for all webs.

web.MasterUrl = webAppRelativePath + “_catalogs/masterpage/MyCustomMaster.master”;

web.CustomMasterUrl = webAppRelativePath + “_catalogs/masterpage/MyCustomMaster.master”;

web.Update();

}

}

}

And then write the below code in the FeatureDeactivating event.

public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
{

SPSite siteCollection = properties.Feature.Parent as SPSite;

if (siteCollection != null)

{

SPWeb topLevelSite = siteCollection.RootWeb;

// Calculate relative path to site from Web Application root.

string webAppRelativePath = topLevelSite.ServerRelativeUrl;

if (!webAppRelativePath.EndsWith(“/”))

{

webAppRelativePath += “/”;

}

// Enumerate through each site and apply branding.

foreach (SPWeb site in siteCollection.AllWebs)

{

site.MasterUrl = webAppRelativePath + “_catalogs/masterpage/seattle.master”;

site.CustomMasterUrl = webAppRelativePath + “_catalogs/masterpage/seattle.master”;

site.SiteLogoUrl = string.Empty;

site.Update();

}

}

}

Right click on the solution explorer and then Build solution. If build succeeded then Right click and then Deploy solution.

Once the solution got deployed successfully in the site collection, you can go the site collection features to see our feature must be activated. Go to site settings page, then click on “Site collection features” which is under “Site Collection Administration”.

In the Site Collection Features page, you will be able to see “Activate Custom Master Page” feature status is Active like below:

SharePoint 2013 Create custom master page using Visual Studio 2013
SharePoint 2013 Create custom master page using Visual Studio 2013

Now to verify if the custom master page is deployed to the site, go to the site settings page then click on “Master pages and page layouts” which is under “Web Designer Galleries”. Here you will be able to see master page under “Master Page Gallery” like below:

SharePoint 2013 Create custom master page using Visual Studio 2013
SharePoint 2013 Create custom master page using Visual Studio 2013

Now we can go to the settings and see if our custom master page is selected or not. Go to the site settings page, then click on a Master page under Look and Feel. To see this link make sure you have publishing feature activated in the site collection. You can also check out: Enable and Disable SharePoint 2013 publishing feature using PowerShell

Here once you click on Master Page, then in the Site Master Page Settings you will be able to see our custom master page is set in the “Site Master Page” as well as “System Master Page” as shown in the fig below:

SharePoint 2013 Create custom master page using Visual Studio 2013
SharePoint 2013 Create custom master page using Visual Studio 2013

Now to check whether our feature deactivating is working fine or now. Go to the site collection feature page and deactivate the “Activate Custom Master Page” feature. Once it is successfully deactivated, go to the Master Page link under Look and Feel and you will be able to see the Seattle master page is set in the Site master page as well as settings master page.

 SharePoint 2016 Create custom master page using Visual Studio 2015
SharePoint 2016 Create custom master page using Visual Studio 2015

Overall if you will see your solution explorer, it will look like below:

SharePoint 2013 Create custom master page
SharePoint 2013 Create custom master page


Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →