Customizing the look and feel of your frontend dashboard is key to creating a professional, branded experience for your users. In this guide, we’ll walk you through the Appearance Settings in WP Frontend Admin, so you can transform the standard WordPress interface into something truly unique.
Page Layout & User Experience
Clean Admin Look: Primary color for admin content
This is one of the most powerful features for quickly modernizing the look of your dashboard. Simply pick a primary color, and the plugin will apply a clean, simplified design scheme to all admin content displayed on the frontend. Buttons, links, and highlights will use your chosen color, creating a cohesive and branded feel. If you leave this empty, the admin content will retain the default WordPress styling.
Hide admin bar on the frontend
The default WordPress admin bar can be distracting and may not fit your site’s design. Enable this option to hide it completely for a cleaner user experience. To ensure users can still log out, you can place our [vg_display_logout_link] shortcode in your site’s menu or header. For custom buttons, use the [vg_display_logout_url] shortcode to get just the URL.
Maximum content width in regular mode
To prevent admin pages from looking stretched and empty on wide monitors, we automatically limit the content width to 1500px and center it. However, you can change this! For a dashboard that spans the full width of the screen, simply enter 100%. You can also use any other value like 1800px if you need a wider, fixed-width layout.
Show the wp screen options in the frontend?
At the top-right of many wp-admin pages, there is a “Screen Options” tab that lets users show or hide certain panels (like the author or tags boxes on the post editor). We hide this by default to simplify the interface. If you want to give your users this control, simply enable this option to show the “Screen Options” tab on the frontend.
Use the wp screen options configured by one user for all users?
This is a fantastic feature for ensuring a consistent experience for everyone. Instead of each user having their own “Screen Options” settings, you can define a master layout. Here’s how:
- Log in with your admin account (or any account you want to use as the template).
- Navigate to pages like the Posts or Pages list and configure the “Screen Options” exactly as you want all users to see them.
- Enter your user ID in this field.
Now, every user will see the same clean, pre-configured interface that you designed, without any extra clutter.
Loading Animations
Loading animation style
While your admin pages load on the frontend, it’s great to show a visual indicator so users know something is happening. Choose from over a dozen professional loading animations like “Wave,” “Pulse,” or “Grid.” You can also select “Custom GIF animation” if you want to use your own branded loader.
Custom GIF image URL
If you selected “Custom GIF Animation” above, paste the direct URL to your hosted GIF file here. This is a great way to reinforce your brand while pages are loading.
Loading animation color
Select a color for the loading animation that complements your site’s design. A simple tip for good contrast: if your page has a dark background, choose a light animation color. If your page has a light background, a darker color usually works best.
Advanced Customization (CSS & JavaScript)
Admin CSS
This field lets you apply your own CSS code directly to the admin content shown on the frontend. You can make precise design tweaks without affecting the rest of your site. For example, you could hide a specific button or change the font size of headings. Just paste the plain CSS code without any <style> tags.
Admin JS
For more advanced customizations, you can add your own JavaScript code here. This code will execute on the admin content, allowing you to move elements, trigger clicks, or integrate with other scripts. Please only use trusted code. No <script> tags are needed.
Admin footer html
Need to add a third-party script to your dashboard pages? Use this field. Any HTML or script you add here will be loaded in the footer of the admin content. It’s the perfect place for adding live chat widgets (like Crisp or Tawk.to) or special tracking codes.
Show floating edit buttons in the frontend?
This feature provides a fantastic shortcut for your site managers. When enabled, a small floating “Edit” icon will appear on the frontend of your site’s pages. Clicking it will take them directly to the appropriate editor (like the Gutenberg or Elementor editor). You can even choose which corner of the screen it appears in!