Home > Blog > Wordpress tutorials > Customize WordPress Admin Panel for Clients Branding

Customize WordPress Admin Panel for Clients Branding

Customize wordpress

Before we start to Customize WordPress

If you are a web designer or from a web design agency, and you are developing a WordPress site for your client, you might want to Customize WordPress Admin panel, login page or the menu in the admin panel.

In this tutorial, we will show you detailed description on how to do the following:

  1. Customize WordPress Login Page
  2. Customize WordPress Admin Panel
  3. Add a Welcoming message with a video to the dashboard
  4. add an RSS feed from your blog to the client dashboard

By doing the above, you will guarantee that the client will see you as a professional web designer

also by showing your blog feed into your customer dashboard, you will always be the first thing they see when they log in

Moreover, you will build a strong business relation with your client for their future projects, and we will show you exactly how you can Customize WordPress for your Clients.


Video Tutorial:


Preparation and Design

To Customize WordPress Admin panel and login page, we need to prepare the design or at least the media we are going to use in the customization

if the client has a “Brand Identity” then use it to design the login page,

alternatively, take a look at their design and try to come up with something the suite their identity

for example, this is the client website,

client-website

now you can prepare the following:

  • WordPress Login box header (400 x 84) px

log-in-header

  • Small Client Logo (20 x 20)px

small-logp

  • Your logo (200 x 84)px

your-compnay-logo

  • Any background for the login page

log-in-page-background

once you prepared these, we can start to Customize WordPress for your client

STEP 1: Install and activate the plugin “White Label CMS

to install this plugin; first, you need to login to your WordPress “admin panel“,

then go to “plugins” then click “add new

add-new-plugin-1

search for the plugin “White Label CMS

then once you find it click “install” then “activate

install-white-label-cms-1

STEP 2: Access white label settings

now we started the customization of the admin panel. First, we need to access “White Label CMS” settings

to do this, go to “settings” then find “White Label CMS” and click it

white-label-cms-1

you will now see four main categories for customization,

settings-1

in this tutorial, we will only focus on “Branding” and “Dashboard” tabs, as the other tabs will be the topic of another tutorial

were we will use another plugin which can do a better job than this plugin,

STEP 3: WordPress Admin Bar Customization

Now click “branding“, and you will see many sections,

we will start by the first section “Admin Bar

do the following:

  • first, click “yes” on “Hide WordPress Logos
  • upload the “small logo” which is “20 x 20” px, (if you are not sure how to upload the image click here)

admin-bar-1

if you click “save changes“, the result is that WordPress logo will be removed and the client logo will be replaced there

bar-logo-1

STEP 4: Adding the Dashboard logo and title

if we proceed to the next section under “Branding” we will find the section “Add Dashboard Logo

do the following:

  • add the dashboard logo (20 x 20) px, (if not sure how to insert the image click here)
  • add the dashboard title

dashboard-settings-1

after you are done, if you clicked save changes you will see that the dashboard now have a logo and a title

dashboard-logo-and-title-1

STEP 5: Edit WordPress Admin Panel Footer

Now it is time to add your logo as a web designer or agency on the admin panel footer with a link to your website

to do this proceed to the next section under “Branding” you will find “Footer” section

do the following:

  • upload your logo to “Custom Footer Logo” (200 x 84)px  (click here if not sure how)
  • insert your URL to “
  • click yes on “Hide WP Version

footer-settings-1

if you click save you should see your logo on the footer of the admin panel, also the logo will be linked to your website

STEP 6: Customize WordPress Login Page

nowhere where you can be as creative as you want, as this page is almost empty and you have the space to be creative,

to do this proceed to the next section under “Branding” you will find “login

do the following:

  • click “yes” to “Make background color white
  • upload the login header image (400 x 84) px – click here if not sure how
  • add the login page background CSS to “Custom Login CSS” and assign it to the ID “#wlcms-login-wrapper

Example background CSS:
#wlcms-login-wrapper{ background: url('wp-content/uploads/2016/10/log-in-BK.png') repeat-x fixed center bottom transparent; display: block; height: 100%; left: 0; overflow: auto; position: absolute; top: 0; width: 100%;}
log-in-settings-1

if you click save, your login page would be looking like this

log-in-page-after

STEP 7: Control what panels client will see on the dashboard

WordPress by default always show this panels that no one read or care about on the dashboard,

now you can make the dashboard look more professional by removing the things that you do not want and keep the dashboard clean

the following is optional as you see fit your client

dashboard-panel-1

STEP 8: Add your welcoming panel to the client dashboard

This is one of the best ways to show the client that you are a real professional, add a panel welcoming and explaining to the client things on the admin panel

You can add anything you want here from videos to images and text. you can be as creative as you want

to do this, find “Welcome Panel Settings” under “Dashboard Panels

do the following:

  • under “Visible To” select whom you want to see this panel
  • under “Title” add your panel title
  • under “Description” add any HTML that you want

welcome-panel1

STEP 9: Add RSS feed from your blog to your client dashboard

This might be the coolest feature in this plugin. You can add a panel with your latest posts appearing to your client every time they log in using RSS feed

to do this find “RSS Settings” under “Dashboard Panels

do the following:

  • under “RSS Title” enter the feed panel title
  • under “Add Your Logo” add your logo (16 x 16)px – click here if not sure how
  • under “RSS Feed” enter your feed URL (example: feed://go2-tec.com/feed/)
  • select the “Number Items” you want to show
  • choose to “Show Post Contents” or not
  • under “” add an intro to the panel

rss-feed-1

if you click save changes, your client dashboard should look something like this

final-dashboard-1

Additional Tips for this tutorial:

Extra Customization: 

after you have customized all of the above, you can still customize almost anything on the admin panel using CSS

you can change the fonts, colors, margins, paddings and more, just inspect the element you want to edit using your browser and find the class or ID to that element.


uploading an image to “White Label CMS”:

to do this

  • just click on the “upload” button next to any field which required an image URL
  • upload the image

drop-files-1

  • then click “Use this image

use-this-image-1

ALL DONE …

And this is how you Customize WordPress Admin panel and login page for your clients .. 🙂

I hope you enjoyed this tutorial if you did kindly share it with your friends and spread the knowledge

also, do not forget to subscribe to our blog to get the latest tutorials

if you have any questions, please leave it in the comment section below or contact us at: info@go2-tec.com

Stay tuned and Thanks for your time.

Comments

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Search

GO2 Technologies

GO2 Technologies