I need to display sub-sites in a Web part. For this I am going to Add Content Search web part.
Steps to Add Content Search web part.
1. Edit the publishing page -> Click on Add a Web Part.
2. Go to Content Roll-up & Add Content Search

You find that by default it is showing some items with grey squares. You need to change the query to get the desired output.

Please Edit the Content query web part to build the query to display the subsites.
Once the Query Builder is open, I find some basic options to run the Query.
Some of these options include limiting our search based on a Result Source,
I use Advanced Mode to do what I need to do.

In the Advanced Mode, I navigate to the Query Text box and remove anything I don’t want. As you can see, by default it wants to search:
path:"http://xrmlabs.com/projects" (IsDocument:"True" OR contentclass:"STS_ListItem")
SharePoint searches everything under that URL but limit results to Documents and List Items. But we need Sites! So I removed everything after the path to have only this in my Query Text:
path:"http://xrmlabs.com/projects"
I can always Test my Query and see some sample results in the right pane. its very User simple & User Friendly
I am going to do next is to tell the Query I only want Sites returned. So click on the Keyword Filter dropdown menu and select Only Return Sites.


When I click on Add Keyword Filter, my Query Text box now shows:
path:"http://xrmlabs.com/projects" contentclass:STS_Web

To show the result click on Test Query
Now I want to display only websites so please change the Query as mentioned in the below screen shot.

Now I saved all my changes & looking on the Results.

You can customise the design as per your requirements. To do this please see the below screen for site logo & many other things. You can set Number of items to show .

