How to Hide the Page Title on the User Profile Page

By default, most themes will show the page title on each page on your site. For the user profile page, the page title will be the display name of the user e.g John Doe.

However, the Ultimate Member profile also shows the user's display name which means on most themes the display name will be shown twice:

To ensure that only the display name shows on that actual profile we can hide the page title using CSS that only affects the user page and leaves the page titles as they are on all other pages.

Finding the page ID

The first thing you need to do is find the ID of the user page so that you can target this page only. To do this you need to do the following:

  1. In admin go to Pages > All Pages
  2. Navigate to the User page and hover your mouse over the edit link (do not click the edit link)

  3. When you hover over the edit link you will notice in the bottom left of the screen that the full URL will show. It is in this URL that we can see the page ID
  4. The page ID for the user page is 902 in this example

  5. We are going to use this number when creating the CSS that targets the user page only.

Finding the CSS class for the theme title area

The next step is a little bit more difficult because themes will give the page title area a different CSS class. So you need to use the browser inspector tool to identify the CSS class. What you need to do is:

  1. Go to the user profile page on the front end of your site.
  2. Move your mouse to the title area of the page and right-click on this area and select "Inspect Element" from the menu that appears 
  3. This will open up the inspector tool

  4. What you need to do now is move your mouse up and down on the left-hand section until you find the part of the HTML doc that is related to the whole title area. You will know this as the title area of the actual page will change color slightly.
  5. On the screenshot above you can see the blue highlighted line which is related to the page title area. The blue highlighted line contains a CSS class "page-header centered-minimal-page-header". This is the CSS class that we need to combine with the page ID to create the custom CSS we need.

Creating the page specific custom CSS

We now have the page ID: "902" and the page title area CSS class: "page-header centered-minimal-page-header". Now what you need to do is combine them and add the CSS: Display: none. The CSS you add to your custom CSS will look like this:

	.page-id-902 .page-header centered-minimal-page-header {
	display: none;
	}

Once you have added in your page ID and the title area CSS you can then add this CSS to your custom CSS. Once you refresh the user profile page the page title area should no longer show on the page.

IMPORTANT: You cannot just copy the CSS above and add it to your site as it will not work. You must find both the page ID of the user page on your site and find the CSS your theme has assigned to the title area.