How to add the content query web part to a page layout in SharePoint 2013 and SharePoint Online

Content queries in page layouts can be quite useful when wanting to generate your own navigation based on page content type. There isn’t a straight forward way to adding these into your current page layouts so I thought it would be useful to share this method.

Open Design Manager from the menu.

SharePoint menu

Select “Edit Page Layouts” and create a new temporary page layout (as shown below).

SharePoint Design Manager

Select “Conversion successful” to go to the preview page. In the top right select “Snippets” to open up the snippet code generator.

Code Snippet

Select “Other Web Parts” drop down menu and click “Content Query”.

Content Query

Configure the web part including the appearance, title and queries. Select the update button to generate the custom code.

Web Part Properties

Copy the custom code generated, this code needs to be pasted into the HTML version of the temporary page layout via SharePoint Designer 2013. Once this code has been copied into the page layout HTML, in this case testttt.html, save the file.

SharePoint will then automatically convert this code to aspx in the file testttt.aspx. Open this file to grab the content query code which can be used in any page layout.

Page layout with content query

Of course you can use the design manager to create your actual page layout (rather than just using it to convert code) but many people find this restrictive and already have good page layouts ready to deploy.

If you require any help or training, check out my consultancy company Cloud Design Box which provides this and other services for SharePoint on-premises and Office 365.

Leave a Reply

Your email address will not be published. Required fields are marked *