Styling the Client Portal

Customize the styles of the Client Portal to align it with your layout and your site goals.

You can customize the look and feel of your Client Portal to better match your site’s design and branding. This helps create a smooth, professional experience for your clients when they log in and interact with you.

Find the Client Portal page ID

To style the Client Portal with custom CSS, you’ll first need to locate the WordPress page ID for your Client Portal page.

Here’s how to find it:

1. From your WP Admin dashboard, go to Pages and find your Client Portal page.
2. Click to edit the page; look at the URL in your browser’s address bar.
3. The page ID is the number after ?post= in the URL.

For example:

https://yoursite.com/wp-admin/post.php?post=86579&action=edit

In this case, the page ID is 86579.

How WordPress uses page IDs

WordPress automatically adds a body class to each page that includes its ID. You can use this body class to target your custom CSS.

For example:

• A normal page might use page-id-86579.
• If you’re using custom child pages as tabs inside your Client Portal, you may also see parent-pageid-86579

Using these unique classes makes it easy to style the Client Portal page without affecting other pages on your site.

Add your custom CSS

Once you have your page ID and class selectors, you can add your custom CSS in a few ways:

• Using the WordPress Theme Customizer: most themes allow you to add CSS under Appearance → Customize → Additional CSS. This is the simplest option for many site owners.
• Using the Site Editor: if you’re using a block-based theme, the Site Editor is the best place to manage styles. This lets you adjust your site’s design, including custom CSS, directly from the editor.
• Using a CSS plugin: if your theme doesn’t have a built-in CSS option, or you want extra control, you can use a third-party plugin or a similar tool to add your custom code.

Examples of what you can style

You can use custom CSS to:

• Change fonts, colors, or background styles.
• Adjust the layout of sections or tabs inside the Client Portal.
• Hide or restyle specific elements to match your branding.
• Make the portal look more cohesive with the rest of your website.

Whenever you add custom CSS, it’s a good idea to preview your changes and test them on different devices to make sure the Client Portal looks great for all your clients.

If you’re testing it on your production site, do a full backup of the site in case you need to restore it to a previous version. Jetpack offers backup options, and a one-click restore feature.