Despite being years since Microsoft rolled out modern pages in SharePoint, there are still many business and personal sites that are rocking the classic layout. These user interfaces aren’t bad, but they definitely look quite outdated, which can be a deal breaker for some people.
Fortunately, the old classic format of a SharePoint site can be easily modernized. But you’ll still need a bit of know-how to do it.
So let’s see how you can transform the classic pages into modern ones in SharePoint.
As you can tell by the name, classic pages are the older page layout, while modern pages are the newer, cleaner, and more aesthetic layout of a SharePoint site. The most obvious difference between the two types of SharePoint pages is the looks.
Using Microsoft 365’s looks, SharePoint’s modern pages and sites boast a design overhaul over the older classic pages. You can see the resemblance with the modern user interface of the new Microsoft 365 apps. Here’s how a modern SharePoint page looks like:
Now here’s an example of a classic SharePoint page:
And the differences don’t just end there. The modern user interface also plays a big part in functionality and optimization for different devices. As we saw in the above picture, the classic SharePoint page doesn’t look that bad, right?
Well, let’s see how it looks when you view it from your phone:
The classic page doesn’t dynamically shrink/adjust according to the narrow aspect ratio of the mobile screen. As a result, it looks really weird and difficult to navigate through.
Meanwhile, the modern SharePoint pages work flawlessly on any mobile device and can dynamically adjust to uncommon aspect ratios like 21:9.
Additionally, performing different actions(such as editing) on a modern page is easier compared to the classic experience. The options on modern SharePoint pages have a much more intuitive location and convenient path. Not to mention the faster load times on modern SharePoint sites.
In a nutshell, the UI and UX of the modern SharePoint pages are suitable for modern devices and aesthetics, all the while boasting better functionality than classic pages.
If you have a SharePoint online classic site, you can convert it to a modern site in an instance by simply connecting it to Office 365 group.
Follow these steps to modernize classic and wiki pages in SharePoint online:
- Go to the classic site in your SharePoint online account.
- Click on the gears icon to open Settings and choose Connect to a new Office 365 Group.
- Select Let’s get started from the pop-up wizard.
- Fill in the necessary boxes and choose the group’s privacy settings.
- Click on Connect group.
- Add additional owners and members in the designated boxes and hit Finish after you’re done.
It will automatically convert the whole classic site into a modern one. You might need to rename the homepage file’s name as it gets migrated from Home.aspx to Home(1).aspx.
Convert Classic Pages to Modern Pages using PowerShell
You can also convert the classic pages into modern ones by using PnP SharePoint PowerShell. It’s a bit more technical, but you should be good as long as you follow the steps properly.
Another thing to note, this method only works for vanilla sites. Any custom web parts would need to be reworked with the SharePoint Framework.
Anyway, here’s how to use PowerShell to convert classic SharePoint pages:
- Press Windows Key+S and type powershell.
- Right-click on Windows PowerShell and select Run as administrator.
- Type the following command and hit Enter: Install-Module
SharePointPnPPowerShellOnline - Input Y and hit Enter to agree to install and wait until the process completes. Also, import the NuGet provider and modules from the PSGallery.
- After the installation is complete, input these two commands and press Enter:
Get-ExecutionPolicySet-ExecutionPolicy RemoteSigned- Close the PowerShell.
- Click on the Windows search bar and type powershell ise.
- Right-click on Windows PowerShell ISE and select Run as administrator.
- Copy and paste the following script and run it. Make sure to write your site’s URL in the designated section of the script.
<#
.Synopsis
Converts all classic wiki and web part pages in a site.
You need to install PnP PowerShell version 3.16.1912.* (December 2019) or higher to use this script.
Sample includes:
- Conversion of wiki and web part pages
- Connecting to MFA or supplying credentials
- Includes Logging to File, log flushing into single log file
.Example
Convert-WikiAndWebPartPages.ps1 -SourceUrl "Write the classic site’s URL" -TakeSourcePageName:$true
.Notes
Useful references:
- https://aka.ms/sppnp-pagetransformation
- https://aka.ms/sppnp-powershell
#>
[CmdletBinding()]
param (
[Parameter(Mandatory = $true, HelpMessage = "Url of the site containing the pages to modernize")]
[string]$SourceUrl,
[Parameter(Mandatory = $false, HelpMessage = "Modern page takes source page name")]
[bool]$TakeSourcePageName = $false,
[Parameter(Mandatory = $false, HelpMessage = "Supply credentials for multiple runs/sites")]
[PSCredential]$Credentials,
[Parameter(Mandatory = $false, HelpMessage = "Specify log file location, defaults to the same folder as the script is in")]
[string]$LogOutputFolder = $(Get-Location)
)
begin
{
Write-Host "Connecting to " $SourceUrl
if($Credentials)
{
Connect-PnPOnline -Url $SourceUrl -UseWebLogin
Start-Sleep -s 3
}
else
{
Connect-PnPOnline -Url $sourceUrl -SPOManagementShell -ClearTokenCache
Start-Sleep -s 3
}
}
process
{
Write-Host "Ensure the modern page feature is enabled..." -ForegroundColor Green
Enable-PnPFeature -Identity "B6917CB1-93A0-4B97-A84D-7CF49975D4EC" -Scope Web -Force
Write-Host "Modernizing wike and web part pages..." -ForegroundColor Gree
# Get all the pages in the site pages library.
# Use paging (-PageSize parameter) to ensure the query works when there are more than 5000 items in the list
$pages = Get-PnPListItem -List sitepages -PageSize 500
Write-Host "Pages are fetched, let's start the modernization..." -ForegroundColor Green
Foreach($page in $pages)
{
$pageName = $page.FieldValues["FileLeafRef"]
if ($page.FieldValues["ClientSideApplicationId"] -eq "b6917cb1-93a0-4b97-a84d-7cf49975d4ec" )
{
Write-Host "Page " $page.FieldValues["FileLeafRef"] " is modern, no need to modernize it again" -ForegroundColor Yellow
}
else
{
Write-Host "Processing page $($pageName)" -ForegroundColor Cyan
# -TakeSourcePageName:
# The old pages will be renamed to Previous_.aspx. If you want to
# keep the old page names as is then set the TakeSourcePageName to $false.
# You then will see the new modern page be named Migrated_.aspx
# -Overwrite:
# Overwrites the target page (needed if you run the modernization multiple times)
# -LogVerbose:
# Add this switch to enable verbose logging if you want more details logged
# KeepPageCreationModificationInformation:
# Give the newly created page the same page author/editor/created/modified information
# as the original page. Remove this switch if you don't like that
# -CopyPageMetadata:
# Copies metadata of the original page to the created modern page. Remove this
# switch if you don't want to copy the page metadata
ConvertTo-PnPClientSidePage -Identity $page.FieldValues["ID"] `
-Overwrite `
-TakeSourcePageName `
-LogType File `
-LogFolder $LogOutputFolder `
-LogSkipFlush `
-KeepPageCreationModificationInformation `
-CopyPageMetadata
}
}
# Write the logs to the folder
Write-Host "Writing the conversion log file..." -ForegroundColor Green
Save-PnPClientSidePageConversionLog
Write-Host "Wiki and web part page modernization complete! :)" -ForegroundColor Green
}
end
{
Disconnect-PnPOnline
}- Enter the site’s URL, Username, and Password.
Done! Now wait for a bit until you receive a completion notice for the modernization process. Depending on the size of your site, this process can be easily done within five minutes.
Alternate Method to Convert a Classic Page(Wiki or Web Part) using PowerShell
Before we begin to convert a classic page using the ConvertTo-PnPPage(download it from GitHub) cmdlet, make sure the Site Pages feature is activated in the classic site’s settings.
Simply paste this script into the PnP PowerShell and press the Enter button on your keyboard:
#Set Parameters
$SiteURL="type the classic site’s URL"
$ClassicPageName = "home.aspx"
#Connect to Site
Connect-PnPOnline $SiteURL -Interactive
#Convert Classic page to Modern page
ConvertTo-PnPPage -Identity $ClassicPageName -AddPageAcceptBannerThat’s it. The converted page’s name will be Migrated_<pagename>.aspx. Please note that it will also change the layout and functionality of the site’s page. Hence you might need to review and make some adjustments manually after the conversion process.
FAQs
How do I change the page style in SharePoint?
If you want to change the page style in SharePoint, click on the Page tab from the top ribbon while you’re editing the page. Now select the Page Layout drop-down menu and choose the layout style that you want.
How do I turn off the classic experience in SharePoint online?
To turn off the classic experience in SharePoint online, click on the Exit classic experience from the bottom left corner of the screen while you’re viewing the contents.
In a Nutshell:
- Converting the classic pages of a SharePoint site can give it a new breath of air and a responsive design.
- You can transform a classic SharePoint site into a modern one via two methods: by connecting it to an Office 365 group or by using a PnP PowerShell script.
- I’d recommend using the first method if you don’t have much experience with advanced PowerShell usage.
