Posted on:
Categories: SharePoint
Description:

We have a client who requires a custom Layout Page with several WebPart Zones and two Publishing Zones. Unlike Web Part Zones, you can't simply keep adding them to the page. I did a quick Google search to see if I could find some more information on how to do this. Most of the results were about adding more than one WebPart Zone to a custom Layout Page, which I already know how to do. I did find a good blog on how to create a Page Layout based on a custom Content Type so I used this as a starting point: Create Page Layout based on custom Content Type in Visual Studio 2010

This solution wasn't exactly what I needed and it included the use of a handy Visual Studio tool which worked great for Visual Studio 2010 but we're using 2012. So with some modifications, here's how to create a custom Page Layout with more than one Publishing Zone. The solution is a 3-step process:

  1. Create a custom Content Type
  2. Create a Layout Page based on the Content Type

Open VS 2012 and create a new SharePoint Project

Add a new Site Column using the HTML Type. I called mine FooterContent. The element file should look something like this:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
  <Field
       ID="{63d7cf7e-9bb6-4ffe-8ccf-8c2c9a85cbc5}"
       Name="FooterContent"
       DisplayName="Footer Content"
       Type="HTML"
       Required="FALSE"
       Group="Custom Site Columns">
  </Field>
</Elements>

Now create a new Content Type. I called mine CustomLayoutPageContentType and inherited from Page (mostly because those were the instructions from the blog I was following. In order to use the custom tool, the content type had to be based on Page.

In the Content Type tab I elected to no inherit from the parent Content Type as I don't need any of those columns. Your elements file should look something like this:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <!-- Parent ContentType: Page (0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39) -->
  <ContentType ID="0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39008EC5D36E00CA445CA91BC2347378F5C5" 
  Name="CustomLayoutPageContentType" 
  Group="Custom Content Types" 
  Description="Use this content type for the Custom Layout Page" 
  Inherits="FALSE" 
  Version="0">
    <FieldRefs>
      <FieldRef ID="{63d7cf7e-9bb6-4ffe-8ccf-8c2c9a85cbc5}" 
  DisplayName="Footer Content" 
  Required="FALSE" 
  Name="FooterContent" />
    </FieldRefs>
  </ContentType>
</Elements>

Now create your custom layout page. I did this by adding a Module and adding my layout page to the module. Here's a basic layout page where I've added a WebPart Zone followed by my custom content

<%@ Page Language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"
    meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register TagPrefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls"
     Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
     Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 <%@ Register TagPrefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls"
     Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
 <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server" />
 </asp:Content>
 <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
 <div class="webpart-zone">
    <WebPartPages:WebPartZone runat="server" Title="Web Part Zone" ID="Zone1"  /> 
 </div> 
 <div class="publishing-zone">
     <PublishingWebControls:RichHtmlField ID="RichHtmlField1" 
  FieldName="FooterContent" 
  runat="server" 
  HasInitialFocus="True" 
  MinimumEditHeight="200px" />
 </div>

 </asp:Content>

Now go back to your Elements.xml file for your Page Module. You need to associate your custom page layout with your custom content type. You do this by adding a PublishingAssociatedContentType:

<Property Name="PublishingAssociatedContentType" 
 Value=";#CustomLayoutPageContentType
 ;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39008EC5D36E00CA445CA91BC2347378F5C5" />

Where the Value includes the name of your content type followed by the GUID (which you can grab from the Elements file of your Content Type. Your elements file should look something like this:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="PageModule" Url="_catalogs/masterpage">
    <File Path="PageModule\CustomLayoutPage.aspx" Url="CustomLayoutPage.aspx" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE">
      <Property Name="Title" Value="Custom Page Layout" />
      <Property Name="MasterPageDescription" Value="Custom Page Layout"/>
      <Property Name="ContentType" 
  Value="CustomLayoutPageContentType" />
      <Property Name="PublishingPreviewImage" 
  Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/WelcomeSplash.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/WelcomeSplash.png" />
      <Property Name="PublishingAssociatedContentType" 
  Value=";#CustomLayoutPageContentType
   ;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39008EC5D36E00CA445CA91BC2347378F5C5";# />
    </File>
</Module>
</Elements>

Deploy your Solution.

You can verify that your custom site column and content type were deployed by navigating to the Site Columns page and the Content Types pages through the Site Actions menu.  You can verify that your layout page was deployed to the Master Page Gallery and note that the proper Associated Content Type was applied.

Now you can go ahead and use your custom Page Layout:

And that's it. Of course you will note that in this example I still have only 1 Publishing Zone on my page. To add another one you can either repeat the process, adding a new custom column to your content type or you can add the standard Publishing Web Control...

 <PublishingWebControls:RichHtmlField 
  ID="RichHtmlField2" 
  FieldName="PublishingPageContent" 
  HasInitialFocus="True" 
  MinimumEditHeight="100px" 
  runat="server"/>