Bring the Toolbar Back Home: Reclaiming the Bottom of Your WordPress Screen
For many WordPress users, the admin toolbar, also known as the admin bar, is a constant companion. This handy strip across the top of your screen provides quick access to essential WordPress functions like creating new posts, visiting your dashboard, and updating your profile. However, sometimes, due to theme conflicts, plugin issues, or even accidental configuration changes, the toolbar can stubbornly relocate to the top of the page, obscuring your content and disrupting your workflow. While the top position is the default, many users prefer the toolbar at the bottom of the screen, finding it less intrusive and more intuitive. This article delves into the various methods you can use to bring the WordPress admin toolbar back to its rightful place – at the bottom of your screen – and provides detailed, step-by-step instructions to guide you through the process.
Why Move the Toolbar to the Bottom?
Before we dive into the ‘how,’ let’s quickly explore the ‘why.’ While personal preference is the primary reason, several practical advantages come with positioning the admin toolbar at the bottom:
* **Reduced Visual Clutter:** A bottom-positioned toolbar is less likely to interfere with the content you’re working on, especially on smaller screens. It keeps the focus on your design and writing without obstructing your view.
* **Improved Accessibility:** For some users, a bottom toolbar is easier to access, especially if they primarily work on laptops or have specific ergonomic setups.
* **Aesthetic Preference:** Many users simply find the bottom placement more aesthetically pleasing and less distracting.
* **Consistency:** If you’re accustomed to other applications with similar toolbars at the bottom, moving the WordPress admin bar can create a more consistent and comfortable user experience.
Methods to Reposition the WordPress Admin Toolbar
Several methods can be employed to move the WordPress admin toolbar back to the bottom. We’ll explore each in detail, starting with the simplest and progressing to more advanced techniques. Remember to back up your website before making any changes to your theme’s files or database.
Method 1: Using a Plugin (The Easiest Route)
The easiest and generally recommended method is to use a plugin specifically designed for this purpose. Several plugins offer this functionality, and they are typically lightweight and easy to configure. Here’s how to use one such plugin:
**Step 1: Install and Activate the Plugin**
1. **Navigate to the WordPress Plugin Directory:** From your WordPress dashboard, go to **Plugins > Add New**.
2. **Search for a Suitable Plugin:** In the search bar, type “admin bar bottom” or “move admin toolbar”. Several plugins will appear, such as “Move Admin Bar” or “Admin Bar Bottom”. Read the reviews, check the last updated date, and consider the number of active installations to gauge the plugin’s reliability and compatibility.
3. **Install the Plugin:** Once you’ve chosen a plugin, click the **Install Now** button next to it.
4. **Activate the Plugin:** After the installation is complete, click the **Activate** button.
**Step 2: Configure the Plugin (If Necessary)**
Most of these plugins work right out of the box, automatically moving the admin toolbar to the bottom. However, some plugins might offer customization options.
1. **Locate the Plugin Settings:** Look for a new menu item in your WordPress dashboard, typically under **Settings**, or within the **Plugins** menu itself.
2. **Adjust Settings (If Applicable):** If the plugin provides settings, explore them. You might find options to customize the toolbar’s appearance, visibility, or behavior. Some plugins might let you choose whether the toolbar is fixed at the bottom or scrolls with the page.
3. **Save Changes:** If you make any changes to the plugin’s settings, be sure to click the **Save Changes** button.
**Example: Using the “Move Admin Bar” Plugin**
The “Move Admin Bar” plugin is a simple and effective option. After installation and activation, it usually places the toolbar at the bottom without any further configuration. If you want to disable the plugin and revert to the default behavior, simply deactivate it.
**Pros of Using a Plugin:**
* **Easy and Quick:** Plugin installation and activation are straightforward.
* **No Coding Required:** You don’t need to write any code or modify your theme files.
* **Reversible:** You can easily deactivate or uninstall the plugin to revert to the default toolbar position.
* **Updates and Support:** Plugin developers often provide updates and support, ensuring compatibility with new WordPress versions.
**Cons of Using a Plugin:**
* **Plugin Bloat:** Too many plugins can slow down your website. However, a simple plugin like this is unlikely to cause significant performance issues.
* **Compatibility Issues:** Although rare, some plugins might conflict with your theme or other plugins.
Method 2: Adding Custom CSS (For More Control)
If you prefer a more hands-on approach and want more control over the toolbar’s appearance, you can use custom CSS. This method involves adding CSS rules to your theme’s stylesheet or using the WordPress Customizer. This method is best suited for users with basic CSS knowledge.
**Step 1: Accessing the Custom CSS Editor**
There are two main ways to add custom CSS to your WordPress site:
* **WordPress Customizer:** This is the recommended method, as it allows you to preview your changes in real-time before saving them.
1. From your WordPress dashboard, go to **Appearance > Customize**.
2. In the Customizer, find the **Additional CSS** or **Custom CSS** section. The exact name may vary depending on your theme.
* **Theme’s Stylesheet (style.css):** This method involves directly editing your theme’s stylesheet. It’s generally not recommended, as your changes will be overwritten when you update your theme. However, if you’re using a child theme, it’s a safe way to add custom CSS.
1. From your WordPress dashboard, go to **Appearance > Theme Editor**.
2. In the Theme Editor, select your theme’s stylesheet (style.css) from the list of files.
**Important:** If you choose to edit the theme’s stylesheet directly, make sure you have a backup of your original file in case something goes wrong.
**Step 2: Adding the Custom CSS Code**
Once you’ve accessed the custom CSS editor, add the following CSS code to reposition the admin toolbar to the bottom:
css
html {
margin-top: 0px !important;
}
body {
margin-top: 0px !important;
}
#wpadminbar {
position: fixed !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
}
#wpadminbar .quicklinks .ab-top-secondary,
#wpadminbar .quicklinks .ab-top-menu {
float: none !important;
}
#wpadminbar .menupop .ab-sub-wrapper {
bottom: 32px !important; /* Adjust this value based on your admin bar height */
top: auto !important;
}
@media screen and (max-width: 782px) {
#wpadminbar {
position: fixed !important;
bottom: 0 !important;
top: auto !important;
}
html {
margin-top: 0px !important;
}
body {
margin-top: 0px !important;
}
#wpadminbar .menupop .ab-sub-wrapper {
bottom: 46px !important; /*Adjust based on smaller admin bar height */
}
}
@media screen and (max-width: 600px) {
#wpadminbar .menupop .ab-sub-wrapper {
bottom: 46px !important; /*Adjust based on smaller admin bar height */
}
}
**Explanation of the CSS Code:**
* `html { margin-top: 0px !important; }` and `body { margin-top: 0px !important; }`: These rules ensure that the page content isn’t pushed down by the toolbar.
* `#wpadminbar { … }`: This block targets the admin toolbar element (identified by its ID, `wpadminbar`).
* `position: fixed !important;`: This fixes the toolbar’s position, so it stays in place even when you scroll.
* `bottom: 0 !important;`: This positions the toolbar at the bottom of the screen.
* `top: auto !important;`: This overrides any default top positioning.
* `width: 100% !important;`: This ensures the toolbar spans the entire width of the screen.
* `#wpadminbar .quicklinks .ab-top-secondary, #wpadminbar .quicklinks .ab-top-menu { float: none !important; }`: This ensures proper alignment of the toolbar items.
* `#wpadminbar .menupop .ab-sub-wrapper { … }`: This block targets the dropdown menus in the toolbar and adjusts their position to appear above the toolbar at the bottom.
* `bottom: 32px !important;`: This sets the distance between the bottom of the screen and the bottom of the dropdown menus. Adjust the `32px` value to match the height of your admin bar if necessary.
* `top: auto !important;` : This is used to ensure that the dropdowns correctly appear above the bottom admin bar.
* `@media screen and (max-width: 782px) { … }` and `@media screen and (max-width: 600px) { … }`: These media queries adjust the toolbar’s positioning and dropdown menu placement for smaller screens (tablets and mobile devices), ensuring it remains functional and visually appealing on all devices. The bottom value for menupop needs to be adjusted to the size of the admin bar on mobile devices.
**Step 3: Save Your Changes**
* **Customizer:** Click the **Publish** button at the top of the Customizer to save your changes.
* **Theme’s Stylesheet:** Click the **Update File** button at the bottom of the Theme Editor to save your changes.
**Step 4: Test and Adjust (If Necessary)**
After saving your changes, refresh your website to see the admin toolbar at the bottom of the screen. If the toolbar isn’t positioned correctly or the dropdown menus are misaligned, adjust the CSS code accordingly. You may need to tweak the `bottom` values in the `#wpadminbar .menupop .ab-sub-wrapper` rules to get the perfect placement.
**Pros of Using Custom CSS:**
* **Fine-Grained Control:** You have complete control over the toolbar’s appearance and positioning.
* **No Plugin Required:** You don’t need to install any additional plugins.
* **Performance:** Adding CSS directly to your theme’s stylesheet is generally more efficient than using a plugin.
**Cons of Using Custom CSS:**
* **Requires CSS Knowledge:** You need to have a basic understanding of CSS to use this method.
* **Theme Updates:** If you edit your theme’s stylesheet directly, your changes will be overwritten when you update your theme. Use a child theme to avoid this issue.
* **Potential for Errors:** Incorrect CSS code can break your website’s layout. Be careful and test your changes thoroughly.
Method 3: Modifying the Theme’s functions.php File (Advanced)
This method involves adding PHP code to your theme’s `functions.php` file. It’s the most advanced of the three methods and requires a good understanding of PHP. It’s generally not recommended unless you’re comfortable working with code and understand the risks involved.
**Important:** Before proceeding, back up your `functions.php` file. Making mistakes in this file can break your website.
**Step 1: Accessing the functions.php File**
There are two ways to access your theme’s `functions.php` file:
* **WordPress Theme Editor:** This is the easiest method, but it’s also the riskiest.
1. From your WordPress dashboard, go to **Appearance > Theme Editor**.
2. In the Theme Editor, select your theme’s `functions.php` file from the list of files.
* **FTP Client:** This is the safest method, as it allows you to download a copy of the file before making any changes.
1. Use an FTP client (such as FileZilla) to connect to your web server.
2. Navigate to the `/wp-content/themes/your-theme-name/` directory, where `your-theme-name` is the name of your active theme.
3. Download the `functions.php` file to your computer.
**Step 2: Adding the PHP Code**
Once you’ve accessed the `functions.php` file, add the following PHP code to the end of the file:
php
html{margin-top:0 !important}
body{margin-top:0 !important}
#wpadminbar{position:fixed !important;bottom:0 !important;top:auto !important;width:100% !important}
#wpadminbar .quicklinks .ab-top-secondary,#wpadminbar .quicklinks .ab-top-menu{float:none !important}
#wpadminbar .menupop .ab-sub-wrapper{bottom:32px !important;top:auto !important}
@media screen and (max-width:782px){#wpadminbar{position:fixed !important;bottom:0 !important;top:auto !important}
html{margin-top:0 !important}
body{margin-top:0 !important}
#wpadminbar .menupop .ab-sub-wrapper{bottom:46px !important}}
@media screen and (max-width:600px){#wpadminbar .menupop .ab-sub-wrapper{bottom:46px !important}}
‘;
}
add_action( ‘wp_head’, ‘move_admin_bar’ );
**Explanation of the PHP Code:**
* `function move_admin_bar() { … }`: This defines a function called `move_admin_bar` that contains the CSS code to reposition the toolbar.
* `echo ‘
‘;`: This outputs the CSS code directly into the `
` section of your website.* `add_action( ‘wp_head’, ‘move_admin_bar’ );`: This tells WordPress to run the `move_admin_bar` function when the `` section is being generated.
**Step 3: Save Your Changes**
* **WordPress Theme Editor:** Click the **Update File** button at the bottom of the Theme Editor to save your changes.
* **FTP Client:** Upload the modified `functions.php` file back to your web server, overwriting the original file.
**Step 4: Test and Adjust (If Necessary)**
After saving your changes, refresh your website to see the admin toolbar at the bottom of the screen. If the toolbar isn’t positioned correctly or the dropdown menus are misaligned, adjust the CSS code within the `move_admin_bar` function accordingly. You may need to tweak the `bottom` values in the `#wpadminbar .menupop .ab-sub-wrapper` rules to get the perfect placement.
**Pros of Modifying the functions.php File:**
* **No Plugin Required:** You don’t need to install any additional plugins.
* **Direct Control:** You have direct control over the toolbar’s positioning.
**Cons of Modifying the functions.php File:**
* **Requires PHP Knowledge:** You need to have a good understanding of PHP to use this method.
* **Theme Updates:** If you edit your theme’s `functions.php` file directly, your changes will be overwritten when you update your theme. Use a child theme to avoid this issue.
* **Potential for Errors:** Incorrect PHP code can break your website. Be careful and test your changes thoroughly.
* **Not as Clean:** Embedding CSS directly within PHP is generally considered less clean and maintainable than using a separate CSS file.
Method 4: Using Javascript and Jquery (Advanced)
This involves using Javascript and Jquery to manipulate the DOM and reposition the admin bar to the bottom of the screen. This method is also considered advanced and requires a good understanding of Javascript and Jquery.
**Step 1: Enqueue Jquery**
First, make sure Jquery is enabled on your site. Most WordPress themes come with Jquery. If not, add the following line to your `functions.php` file (ideally within a child theme’s `functions.php` file):
php
function enqueue_jquery() {
wp_enqueue_script( ‘jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_jquery’ );
**Step 2: Add Javascript Code**
Now, add the following Javascript code to your theme. You can either add it directly into the `
` of your theme (not recommended) or enqueue it via your `functions.php` file. The best approach is to create a separate Javascript file and enqueue it.1. **Create a Javascript File:** Create a new file named something like `admin-bar-bottom.js` and save it in your theme’s directory (or, better, your child theme’s directory).
2. **Add the Javascript Code:** Add the following Javascript/Jquery code to the `admin-bar-bottom.js` file:
javascript
jQuery(document).ready(function($) {
$(‘#wpadminbar’).css({
‘position’: ‘fixed’,
‘bottom’: ‘0’,
‘top’: ‘auto’,
‘width’: ‘100%’
});
$(‘html’).css(‘margin-top’, ‘0’);
$(‘body’).css(‘margin-top’, ‘0’);
$(‘#wpadminbar .menupop .ab-sub-wrapper’).css({
‘bottom’: ’32px’, // Adjust this value
‘top’: ‘auto’
});
$(window).resize(function() {
if ($(window).width() <= 782) {
$('#wpadminbar .menupop .ab-sub-wrapper').css('bottom', '46px'); //Adjust based on smaller admin bar height
} else {
$('#wpadminbar .menupop .ab-sub-wrapper').css('bottom', '32px');
}
}); if ($(window).width() <= 782) {
$('#wpadminbar .menupop .ab-sub-wrapper').css('bottom', '46px'); //Adjust based on smaller admin bar height
}
}); 3. **Enqueue the Javascript File:** Add the following code to your `functions.php` file (within your child theme's `functions.php` is best): php
function enqueue_admin_bar_script() {
wp_enqueue_script( 'admin-bar-bottom', get_stylesheet_directory_uri() . '/admin-bar-bottom.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_admin_bar_script' ); **Explanation of the Javascript Code:** * `jQuery(document).ready(function($) { ... });`: This ensures that the code runs after the DOM is fully loaded.
* `$('#wpadminbar').css({ ... });`: This uses Jquery to directly manipulate the CSS properties of the `#wpadminbar` element, similar to the CSS method.
* `$('html').css('margin-top', '0');` and `$('body').css('margin-top', '0');`: Remove any top margin that might be present.
* `$('#wpadminbar .menupop .ab-sub-wrapper').css({ ... });`: Adjusts the position of the dropdown menus.
* `$(window).resize(function() { ... });`: This block of code adjusts the `bottom` value for the dropdown menu on smaller screens (mobile devices) when the window is resized.
* The `if ($(window).width() <= 782) { ... }` block is used to handle initial load of the page to adjust the bottom value when the screen is smaller than 782px. **Explanation of the PHP Code:** * `function enqueue_admin_bar_script() { ... }`: Defines a function to enqueue the Javascript file.
* `wp_enqueue_script( 'admin-bar-bottom', ... );`: Enqueues the Javascript file, making it available on your website.
* `array( 'jquery' )`: This specifies that the script depends on Jquery, ensuring that Jquery is loaded before your script.
* `'', true`: The empty string represents the version number (you can leave it blank), and `true` places the script in the footer. **Step 3: Save Your Changes and Test** Save all the changes you made to both `admin-bar-bottom.js` and `functions.php`. Then, clear your browser cache and refresh your website to see the changes. **Pros of Using Javascript/Jquery:** * **No Plugin Required:** You don't need an extra plugin for this.
* **Fine-Grained Control:** Similar to the CSS method, you have detailed control of the positioning and behavior.
* **Dynamic Adjustments:** Javascript allows for dynamic adjustments based on screen size and other factors. **Cons of Using Javascript/Jquery:** * **Requires Javascript/Jquery Knowledge:** You need to know Javascript and Jquery well.
* **Theme Updates:** Changes to your theme's `functions.php` or custom Javascript files may be overwritten during theme updates. Using a child theme is critical here.
* **Potential Conflicts:** Incorrect code can lead to Javascript errors that affect other parts of your site. Thorough testing is required.
* **Performance:** While generally efficient, complex Javascript can impact page load times if not optimized properly.
Troubleshooting Common Issues
Even with careful implementation, you might encounter issues when repositioning the admin toolbar. Here are some common problems and their solutions:
* **Toolbar Not Visible:**
* **Check User Profile:** Ensure that the “Show Toolbar when viewing site” option is enabled in your user profile (**Users > Your Profile**).
* **Plugin Conflicts:** Deactivate other plugins one by one to identify if any of them are conflicting with the toolbar.
* **CSS Specificity:** Make sure your CSS rules are specific enough to override any existing styles. Use `!important` sparingly but appropriately.
* **Toolbar Overlapping Content:**
* **Adjust CSS Margins:** Increase the bottom margin of your `body` element in your CSS to create space for the toolbar. Alternatively the `margin-top` value in html and body should be set to zero.
* **Check Theme Styles:** Review your theme’s CSS for any styles that might be interfering with the toolbar’s positioning.
* **Dropdown Menus Misaligned:**
* **Adjust CSS `bottom` Value:** Tweak the `bottom` value in the `#wpadminbar .menupop .ab-sub-wrapper` CSS rule to properly position the dropdown menus above the toolbar.
* **Inspect Element:** Use your browser’s developer tools (right-click on the element and select “Inspect”) to identify the CSS rules that are affecting the dropdown menus and adjust them accordingly.
* **Toolbar Not Responsive:**
* **Use Media Queries:** Ensure that your CSS code includes media queries to adjust the toolbar’s positioning and appearance on different screen sizes.
* **Test on Different Devices:** Test your website on various devices (desktops, tablets, and mobile phones) to ensure that the toolbar is displaying correctly on all of them.
* **Website Broken After Editing functions.php:**
* **Restore Backup:** If you have a backup of your `functions.php` file, restore it. This is the quickest way to fix the issue.
* **Use FTP to Edit:** If you don’t have a backup, use FTP to access the `functions.php` file and remove the incorrect code.
Choosing the Right Method for You
The best method for repositioning the WordPress admin toolbar depends on your technical skills and preferences. Here’s a quick summary to help you choose:
* **Beginner:** Use a plugin. It’s the easiest and most straightforward option.
* **Intermediate:** Use custom CSS. It provides more control over the toolbar’s appearance without requiring advanced coding skills.
* **Advanced:** Modify the theme’s `functions.php` file or use Javascript/Jquery. This offers the most flexibility but requires a good understanding of PHP or Javascript/Jquery.
Conclusion
Moving the WordPress admin toolbar to the bottom of the screen can significantly improve your workflow and enhance your user experience. Whether you choose a simple plugin, custom CSS, or more advanced coding techniques, the steps outlined in this article will guide you through the process. Remember to back up your website before making any changes, and test your results thoroughly. With a little effort, you can reclaim the bottom of your screen and enjoy a more comfortable and efficient WordPress experience.