Today I’ll be demonstrating (and providing code) on how to add a SharePoint home button which will allow your users to easily navigate to the SharePoint homepage from anywhere and also to add the current site’s title with a link to the current sites homepage.

This will require some basic knowledge of HTML, PowerShell, JavaScript and access to the SharePoint server, I’ll hopefully make this clear enough for anyone to follow though.

Implementing the SharePoint Home & Site Name Functionality

1. Access the SharePoint server and open a Windows PowerShell ISE window. If you’re not sure where to find this it can normally be found by performing a search in the start menu.
2. Once loaded paste the ‘SharePoint PowerShell Code’ which I’ve uploaded to PasteBin due to highlighting issues in WordPress – https://pastebin.com/YpVctbcd into the PowerShell script window.
3. Download the image found in the ‘Home Image’ section near the bottom of this article. This will be used in the heading to display the small home icon left of ‘SharePoint Home’.
4. Upload the image to a location in SharePoint, making sure to copy the URL for it.
5. Update the *fullLinkToImage* value found in the HTML at the end of the code to the value of the image you uploaded.
6. Update the 2 *SharePointUrl* value found near the bottom of the code with a link to your SharePoint root URL.
7. Run the code which will update SharePoint which will get you something which should look like my image above.

Optional

I won’t cover this in detail, however by default the site name may clip under the ‘SharePoint Home’ link if your user is displaying SharePoint in a small browser window, this can easily be fixed with a minor change to the Master Template file that you use or by defining custom CSS in some other manner.

For simplicity I added some the CSS in our custom Master Page file found in *SharePointUrl*/_catalogs/masterpage.

/* Handles tidying up the 'SP Home' link etc at the top-left of SharePoint */
@media (max-width: 900px) {.ms-core-brandingText { width:380px; overflow:hidden; white-space:nowrap; text-overflow:ellipses;} }
@media (max-width: 800px) {.ms-core-brandingText { width:300px; overflow:hidden; white-space:nowrap; text-overflow:ellipses;} }
@media (max-width: 700px) { #titleContainer, #titleDivider {display:none;} }

Home Image