To change the HTML output of a CQWP web part, we have to edit out of the box XSLT template provided by SharePoint. We already wrote an article on how to do this here: Playing Around with Content by Query Web Part (CQWP). But, OOTB XSLT formatter is shared to all CQWP web parts in the same site. If you are sure that you will only have one CQWP in your SharePoint site, it’s OK to go with this direct edit approach. Otherwise, let’s try a better solution: use custom XSLT formatter for each CQWP web part.
This solution doesn’t require custom coding with Visual Studio. We need only SharePoint Designer, or it’s also doable with any text editor. We’ll break down this solution on a step-by-step below:
Step 1 – Duplicate OOTB XSLT Files
If we open OOTB XSLT formatter files in a text editor, we should come to conclusion immediately that they are all complex ones. So, don’t try to understand them entirely. Just, use them as the starting point. For our purpose in this article, we copied two of them: ContentQueryMain.xsl and ItemStyle.xsl. We paste them in the same directory and, then rename them to SliderContentQueryMain.xsl and SliderItemStyle.xsl respectively.
Step 2 – Export CQWP Web Part to a File
We can find Export menu item from the same menu where Edit Web Part menu item is located. Use this menu item to export our CQWP web part to a file. We named the file SliderCQWP.webpart.
Step 3 – Edit SliderCQWP.webpart
Use any text editor to edit SliderCQWP.webpart, and change the following two lines:
The first one is to change ItemXslLink property, point it to the SliderItemStyle.xsl location:
&lt;property name=&quot;ItemXslLink&quot; type=&quot;string&quot;&gt;/Style Library/XSL Style Sheets/SliderItemStyle.xsl&lt;/property&gt;
And the second one is to change the MainXslLink property, point it to the SliderContentQueryMain.xsl location:
&lt;property name=&quot;MainXslLink&quot; type=&quot;string&quot;&gt;/Style Library/XSL Style Sheets/SliderContentQueryMain.xsl&lt;/property&gt;
Step 4 – Upload SliderCQWP.webpart to Web Part Gallery
Open Web Part Gallery from http://<server-name>/_catalogs/wp/Forms/AllItems.aspx. Upload SliderCQWP.webpart, and rename its title to Slider Content Query.
Step 5 – Add “Slider Content Query” to Home Page
Now we should be able to use Slider Content Query web part to the home page. When adding a web part, choose Miscellaneous category, our Slider Content Query web part should be listed there.
To test it, just edit the SliderItemStyle.xsl by adding some visual text that will be rendered in the web part. We can put any words here since its purpose is only for testing. For example, we added SLIDER IMG words after <img> tag:
Refresh the page, we should see the words SLIDER IMG rendered after each image in “Slider Content Query” web part. This is a sign that the web part is indeed using SliderItemStyle.xsl.