The SharePoint Swiss Army Knife

Stories from a SharePoint Engineer that isn't afraid of Visual Studio.

How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010
June 8, 2010
Becky Bertram has a nice post on how to create custom SharePoint 2010 Page Layouts via Visual Studio but my googling didnt yield any walkthroughs on how to do this via SharePoint Designer. So lets take a crack at this

Scenario:
Youre working with the Enterprise Wiki Site Template and you dont really like where the Last modified information is located (above the content). You want to move that information to the bottom of the page. Option 1: Modify the EnterpriseWiki.aspx Page Layout directly. Option 2: Create a new Page Layout based on the original one and then modify that one.

Well go ahead and go with Option 2 since we dont want to modify the out of the box template just in case we need it later on.

How To:
Step 1
Navigate to the top level site of the Site Collection > Site Actions > Site Settings > Master pages (Under the Galleries section). Then switch over to the Documents tab in the Ribbon and then click New > Page Layout.

Step 2
Select the Enterprise Wiki Page Content Type to associate with, give it a URL and Title. Note that theres also a link on this page to create a new Content Type. You might be interested in doing this if you wanted to say, add more editing fields or metadata properties to the layout. For example if you wanted to add another Managed Metadata column to capture folksonomy aside from the already included Wiki Categories Managed Metadata column.

Step 3
SharePoint Designer time! Hover over your newly created Page Layout and Edit in Microsoft SharePoint Designer.

Step 4
Now you can choose to build your page manually by dragging your SharePoint Controls onto the page and laying them out as youd like

 Or you can copy and paste the OOB Enterprise Wiki Page Layout. I think Ill do that.

Step 5
Alright, so youve copied the contents of the EnterpriseWiki.aspx Page Layout and now its time for some customizing. I found the control I want to move, so Ill simply do a copy or cut/paste to the new spot.

Step 6
Check-in, publish, and approve the new Page Layout. Side note: I like to add the Check-In/Check-Out/Discard or Undo-Checkout buttons to all of my Office Applications Quick Access Toolbars for convenience.

Step 7
Almost there! Navigate to your publishing site, in this case the Enterprise Wiki Site, then go to Site Actions > Site Settings > Page layouts and site templates (Under Look and Feel). Here youll be able to make the new Page Layout available for use within the site.

Step 8
Go back to your site and edit the page that youd like to change the layout for. On the Page tab of the Ribbon, click on Page Layout and select your custom Page Layout.

Et voila! You just created a custom Page Layout using SharePoint Designer 2010, re-arranged a SharePoint control and managed to plan for the future by not modifying the out of the box template. That was a really simple example but I hope it helped to give you some ideas on how else you can customize Page Layouts within SharePoint 2010!

Posted by Henry Filed in SharePoint 2010 Tags: Custom Page Layouts, Enterprise Wiki, SharePoint Designer 18 Comments
Like 2 bloggers like this post.

18 Responses to How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010
1. SharePoint 2010: Recopilatorio de enlaces interesantes (IX)! Pasin por la tecnologa Says:
July 1, 2010 at 7:56 am

[...] How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010 [...] Reply 2. SharePoint 2010: Recopilatorio de enlaces interesantes (IX)! - Blog del CIIN Says:
July 1, 2010 at 8:07 am

[...] How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010 [...] Reply 3. cc861023 Says:
July 2, 2010 at 9:07 pm

fgghgh Reply 4. Micro Projector Says:

July 28, 2010 at 5:08 am

zomg!!! Reply 5. yasser Says:

August 11, 2010 at 2:48 pm

Hi! My New button is disabled in Step 1 and I can follow New > Page Layout ! Would you please tell me what could be the problem? Thanks. Reply 6. yasser Says:
August 11, 2010 at 2:50 pm

Sorry for misspell >> I Cant Reply 7. Sa i giao din SharePoint 2010 Tech Master Vietnam Says:
August 28, 2010 at 8:13 am

[...] How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010 [...] Reply 8. neel Says:
September 7, 2010 at 11:15 am

I am not able see the Pagelayout Icon in my ribbon(it is not there), I see only preview button. I have tried googling folowed steps, still no icon next to preview button Help me out Thank you Neel Reply Nikhil Says:
December 21, 2010 at 2:43 am

use this i hope it will helpful for you Go SiteAction ->Site Settings -> Page Layout and Site Template Settings goto > New Page Default Settings choose Your published PageLayout then Your New Page is default for all pages Reply 9. Bill Says:
September 10, 2010 at 11:31 am

Had the same problem (icon disabled). You need to enable Publishing infrastructure feature (site collection) and publishing feature(web). Reply 10. keren Says:
September 12, 2010 at 12:05 am

Hi, Can you help how to make it more user friendly by setting that the new page will be open directly and user wont need to pass through choosing page layout page? Reply 11. XristosK Says:
October 1, 2010 at 2:01 am

Thank you. Reply 12. Timmy Says:

October 26, 2010 at 9:17 am

I [heart] you! Reply 13. Dean Says:

November 23, 2010 at 6:40 am

I followed your instructions, but when i open the new Page Layout, I get the following message This page does not contain any regions that you have permission to edit any ideas why this would occur? i am the Site collection admin and the server admin has enabled Edit Master Page and Page Layout option. TIA Dean Reply 14. Nikhil Says:
December 21, 2010 at 2:46 am

it is a very helpful to beginner Reply 15. Markus Says:

January 5, 2011 at 9:35 am

Thanks for this how-to! You mention what I exactly want to do: I want to display resp. edit metadata in a wiki. But I dont have SP Server, but SP Foundation and I work on that simple non-Entreprise Wiki. Should this be running in my environment as well? Thank you. Markus Reply

16.

JF Says:
January 6, 2011 at 11:56 am

Hi, I have a permission issue, only site collection administrator can create or edit my page layout, a user with full control get access denied. Any idea ? Thanks Reply 17. Izzi Says:
January 12, 2011 at 2:21 am

I need to customize the ribbon of a sharepoint 2010 site, having a bit of trouble, any help? Reply

Leave a Reply
Your email address will not be published. Required fields are marked * Name * Email * Website

Comment You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Post Comment

Notify me of follow-up comments via email. Notify me of site updates SharePoint Dev Error: Exception from HRESULT: 0x80040E14 A Strategy for Migrating Documents Out of Files Shares and Into SharePoint

Search

Twitchy
@EricaToelle My pleasure Erica! :) 2 days ago "SharePoint is about to get more social. Sign up here http://www.attinisoftware.com to be the first to know." http://t.co/kO20vN1 via @AttiniSoft 1 week ago Sitting in on an awesome #SharePoint 2010 + PerformancePoint BI demo by Robert Christensen, CIO from Horizon Technologies @ OCSPUG 1 week ago OC #SharePoint User Group Tonight @ Roland DGA | 1/19/2011 | 6:30pm - http://bit.ly/dSKBFp 1 week ago

Top Posts
How to move/migrate SharePoint list items/documents and preserve metadata properties at the same time How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010 Importing User pictures from Active Directory to MOSS 2007 How to edit the form fields of a SharePoint List Alternate Access Mapping in Sharepoint How to Create Document Templates for Document Libraries How To Create SharePoint Document Library Subfolders Programmatically SharePoint 2010 Troubleshooting: 503 Service Unavailable, App Pool Shutdown How to Customize People Search Results How to customize the Content Query Web Part XSL to aggregate blog posts

Links
About Me My Del.icio.us Links My Facebook My LinkedIn My Personal Blog

Recent Comments
Terrell Boehning on SharePoint Active Directory FB jasear on SharePoint Dev Error: Exceptio Attiq on How to make MOSS 2007 search r Attiq on How to make MOSS 2007 search r Everton Stewart on SharePoint 2010 Troubleshootin

Blog Stats
519,936 hits Theme: Simpla by Phu. Blog at WordPress.com.