Close

November 27, 2015

Easy WordPress White-labeling For Your Clients

We discuss all the ways you can white-label your client site through things as simple as turning off the Layers link in the footer, to which plugins allow for the easiest logo replacement and admin customization.

If you design or setup websites for clients, you know how important it is to offer a smooth and branded, yet client-proof administration experience. White-labeling is a term that describes re-branding or removing 3rd party branding from your website’s front and back-end. Doing so increases brand recognition for your design company or service.

While it is not possible to completely re-brand a WordPress site without extensive customization, you can white-label or brand the most essential and visible aspects of the WordPress Admin interface without having to resort to custom Admin themes or other coding hacks.

You can take white-labeling one step further and also customize certain aspects of the WordPress Admin through menu tools and role editors to simplify its use and keep your clients from dangerous options such as updates or code editors.

If you are building a child theme or custom plugin for your site and prefer to implement as much admin customization as you can via functions, see our Dev Tutorial for How to White Label the WordPress Admin

Disabling Layers Footer Icon

Layers will add a small Layers badge to the footer of your site by default which you can disable from the Customizer under the Footer Styling panel. Of course, you get extra-awesome points for leaving it on and helping spread the word about the Layers framework.

support-layers

Adding Your Own Credit & Copyright Text

The text footer of Layers contains a default copyright that you may customize from the Customizer under the Footer Styling panel. This field also accepts basic HTML, so adding an icon or logo of your own is as simple as grabbing the file url to your image in the Media Library, and linking it from a standard <img> tag.

See How to Add Images to the Footer Copyright area for a detailed tutorial on adding images in the Layers footer.

copyrighttext

Replacing WordPress Login and Admin Logos

If your clients or staff are logging in through the traditional WordPress admin page, they will be greeted by a WordPress logo that links to the site main page. This can be confusing for less-savvy users, especially if they click that logo and are whisked away from the login without knowing quite what happened.

wp-login

You can change this logo with custom functions in a child theme, or using a plugin such as AG Custom Admin. This free plugin is an essential part of any site you build and plan to maintain for your clients.

It allows you to customize all the branded aspects of the WordPress admin, including logos and admin footer text.

By giving your clients the role of Editor (rather than Administrator), you can also  lock down important menu links and add new ones, which we will expand on in a bit.

With AG Custom Admin enabled, click on Tools AG Custom Admin to access the Admin Bar and Login Page tabs for logo and color customization. Be careful with the first three options to disable the admin bar or admin bar customizations.

If you want your clients to be able to create and edit Layers pages, you should allow them to retain access to the admin bar while viewing the front-end so they can easily click into the Customizer from any page.

Change WordPress Admin Bar

Once logged in, your client is going to see the WordPress Dashboard with the default Howdy! greeting and a WordPress branded admin bar. If you’ve decided to go the easy route with AG Custom Admin, you can change the Admin branding options on the Admin tab:

  1. Upload your logo to the WordPress Media Library
  2. Grab the File Url from the right side of the Image details screen once it is uploaded
  3. In the AG Custom Admin options, paste the URL into the Change Admin Bar Logo field. You may also simply hide the icon by checking the Hide WordPress Logo option below this.
  4. Scroll to the bottom to find the Change Howdy text and Change Logout Text to customize these messages.

Change Admin Colors

The AG Custom Admin plugin  offers a Colorizer tab for changing the admin menu and admin bar colors.

custom-admin

To do this on your own with a child theme, you would need to write a custom admin.css file, then enqueue it normally from your Child Theme functions:

function layers_child_admin_css() {
    wp_enqueue_style( 
      'admin_css', 
      get_stylesheet_directory_uri() . '/assets/css/admin.css' );
}

add_action('admin_enqueue_scripts', 'layers_child_admin_css' );

You can also write the CSS directly to the function and have it output in the admin head:

function my_custom_admin_style() { 
   echo '<style> body, td, textarea, input, select { 
      font-family: "Lucida Grande"; 
      font-size: 12px; 
   } </style>'; 
}

add_action('admin_head', 'my_custom_admin_style');

For a detailed walkthrough on building admin CSS, see Customizing the WordPress Admin by our friends at Tuts+

Change the WordPress Admin Footer

At the bottom of every page in the WordPress admin you will find a Thank You for Creating with WordPress! message and a version number. If your clients don’t know or care that you are using WordPress for the site, or if you just want more control over outgoing links and branding, you can change or remove this easily.

From AG Custom Admin options, head into the Admin Footer tab where you can find the Change Footer Text and Change Footer Version fields, or options to hide them.

Customizing the Admin Dashboard

Now that you have customized the visual aspects of the WordPress Admin, you can start thinking about the content you want your clients and site users to see. The WordPress Dashboard is the first content a logged in user sees, and while anyone can customize their own view via the Screen Options menu, you may need to remove existing metaboxes, or add some new ones to deliver the best user experience for your client.

The next tab in your AG Custom Admin options is the Admin Dashboard tab. Here you can easily add content and HTML to the Dashboard header, and disable any default widgets. What this does not do is allow you to turn off widgets added through other plugins or by Layers. To do that, you will need to reference the plugin options or add a custom function to a child theme.

Customizing the Admin Menu & Client Access

In most cases where you are maintaining your client websites, it is a good idea to restrict access to certain admin areas, both for the safety of the site overall, and simply to reduce confusion for clients unfamiliar with the WordPress Admin. Examples might be hiding links to plugin settings (such as AG Custom Admin), the Appearance > Editor screen or Layers Marketplace.

Customizing the Admin menu is a task truly best left to a plugin. Both AG Custom Admin and specialized plugins like Admin Menu Editor are actively developed and updated, and can get the job done for free.

If using AG Custom Admin, you may edit all admin menu labels and access rights from the Admin Menu tab of the settings. Checking a menu item will remove it from access for Editors, so this plugin depends on you ensuring your clients User Role is set to Editor and not Administrator.

If your client is the type that likes to see the Admin role on their account, but is too dangerous to be left with full rights, you can use another very handy free plugin called Members, written by WordPress Core developer Justin Tadlock. This is the best approach if you choose to move forward with using the Admin Menu Editor plugin instead, and here’s why.

Creating a Super User and Editing Client Privileges

  1. With the Members plugin active, go to Users > Roles.
  2. Click Add New to add a new role called “Super-Admin.”
  3. Check the boxes on all the capabilities and Save
  4. Now back out to the main Users list and edit yourself. Select the new Super Admin role from the Role drop-down and Save.
  5. Return to the Users > Roles page and edit Administrator. Here is where you can remove some capabilities from this role. Common capabilities you want to Deny would be:
    • General: edit_roles: deny ability to change your custom roles
    • Appearance: switch_themes: deny ability to switch themes from your set active theme.
    • Plugins: activate_plugins: deny ability to install new plugins that may potentially break the site.

The important step here is that your clients are assigned the Admin role while you have Super Admin with all capabilities. When using Admin Menu Editor for example, you can now turn off specific Admin Menu items or sub-links by setting them to the Super Admin role.

This is useful for hiding menu links such as Marketplace, Tools, Editor and other plugin items you might have such as Performance or SEO. You can also hide the entire Layers menu from your clients if you wish.

With both AG Custom Admin and Admin Menu Editor, you may also customize menu icons and labels and rearrange them with drag and drop if needed.

Adding Links To the Admin Menu

Easily add new links or entire Admin Menus from the Admin Menu tab of AG Custom Admin (bottom of page) or using the Add Menu button in the Admin Menu Editor options. This allows you to build helpful menus that link to most-used admin pages or offsite resources.

Creating Custom Onboarding Pages

If you have developed a Layers Child Theme for your client project or are thinking about using one instead of plugins, you can add a custom onboarding function that displays the first time your client logs in with your child theme active, or which they can revisit from a custom menu option.

We wrote a full developer article on how to do this in a Layers Child Theme as part of the Child Theme Author Guide: How to Add Help Pages & Onboarding to Layers Themes or Extensions

Changing Text in Layers

In extreme cases where you need to remove Layers branding, you must use a translation tool to remove each instance of “Layers.” See our guide on translating Layers for plugin suggestions and tips.

Know of some other great plugins or ways to customize the WordPress Admin that we didn’t cover here? Tell us in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *

Top

Sign Up

Simply enter your details below to get started with Layers.

"We discovered Layers and it changed everything. Our clients could not believe it."
~ Matthew Hansen from Principal

  • Get your business online ASAP
  • Gain access to easy-to-use website tools
  • Get the best deals and advice for building your online business
  • Join thousands of like-minded entrepreneurs
Save & Share Cart
Your Shopping Cart will be saved and you'll be given a link. You, or anyone with the link, can use it to retrieve your Cart at any time.
Back Save & Share Cart
Your Shopping Cart will be saved with Product pictures and information, and Cart Totals. Then send it to yourself, or a friend, with a link to retrieve it at any time.
Your cart email sent successfully :)