WordPress defaults to thetop of the screenShowing the admin bar, this bar helps you quickly access WordPress backend functions. However, some users may find the location of the admin bar a bit obtrusive and want to move it, especially to change its appearance and location.

In this tutorial, theWP self-taught website builderWe'll cover how to move the WordPress admin bar to the footer by adding custom CSS, or byfunctions.php file code to achieve the same effect, while ensuring that the page display for unlogged-in users is unaffected.

Why move the WordPress admin bar?

The WordPress admin bar provides a range of navigation features such as quick access to the dashboard, editing pages, viewing comments, updating plugins, and more. While it is powerful, it is placed at the top of the page by default, which may obscure content or conflict with custom designs.

Moving the admin bar to the bottom of the page improves the visual experience, especially for users who need more screen space to display their front-end design. Additionally, it enhances the overall aesthetic of the page, especially if the design at the top of the page is complex, and moving the admin bar to the bottom of the page avoids distractions.

preliminary

Before we dive into the tutorial, here's what you need to prepare:

1. A theme that supports custom CSS and recommends the use of a block editor (e.g.Twenty Twenty-Three(Subject).
2. subtheme(It is recommended to create the child theme first so that your changes are not lost when updating the theme).
3. Your WordPress version should have been updated to the latest version to ensure compatibility.

Step 1: Go to Theme Customization

First, one needs to make sure that the theme used supports customization. In WordPress, there are multiple ways to customize, the easiest way is through the "Appearance > Customization" screen to configure.

1. Log in to your WordPress site and go to the dashboard.
2. Navigate toAppearance > Customization, or just click on the main page "customizable"Button.

3. Once you are on the theme customization page, look for "Additional CSS"Options.

Why create a child theme?

To ensure that future updates to the theme do not overwrite the customizations you have made, it is recommended that you create andUsing child themes. Child themes can make changes to the theme without affecting the core files of the original theme.

Step 2: Add custom CSS

Next, we'll go through "Additional CSS" option adds a custom style to the WordPress admin bar to move it to the bottom of the page.

Custom CSS code

go intoAdditional CSSAfter the page, copy and paste the following code:

body {
    margin-top: -28px;
    padding-bottom: 28px;
}
body.admin-bar #wphead {
    padding-top: 0;
}
body.admin-bar #footer {
    padding-bottom: 28px;
}
#wpadminbar {
    top: auto !important;
    bottom: 0;
}
#wpadminbar .menupop .ab-sub-wrapper {
    bottom: 32px;
}

This CSS snippet moves the admin bar from the top to the bottom of the page and adjusts the spacing between the top and bottom of the page to accommodate the new position of the admin bar.

Interpretation code function

• margin-top: -28px; padding-bottom: 28px;: Reduce the spacing at the top of the page while leaving room at the bottom so that the admin bar doesn't overlap with the page content.
• #wpadminbar { top: auto !important; bottom: 0; }: Force the admin bar to be fixed at the bottom of the page instead of the default top position.
• .ab-sub-wrapper { bottom: 32px; }: Ensure that the admin bar drop-down menu is displayed correctly at the bottom.

Step 3: Preview and Save Changes

After completing the CSS addition, click "Save Changes" button and return to the front-end page of the site to see the effect.

If all is well, save the settings and publish the changes. Your WordPress admin bar should have moved from the top to the bottom of the page.

Other issues and considerations

1. Problems with the display of unregistered users

After following the changes in the steps above, there may be an issue with the page display being raised by 28px when an unlogged in user visits the site. To resolve this issue, you can optionally add additional conditional code to the functions.php file so that only logged in users see the admin bar adjustments, and non-logged in users are not affected.

Step 4: Add code via functions.php

If you want the admin bar adjustment to take effect only for logged in users, then you can do this by adding custom code to the theme's functions.php file. Below is the added code:

function wpg_ubah_posisi_admin_bar() {
    if (is_user_logged_in()) {
        ?>
        <style>
            body {margin-top: -28px; padding-bottom: 28px;}
            body.admin-bar #wphead {padding-top: 0;}
            body.admin-bar #footer {padding-bottom: 28px;}
            #wpadminbar { top: auto !important; bottom: 0;}
            #wpadminbar .menupop .ab-sub-wrapper { bottom: 32px; }
        </style>
        <?php
    }
}

add_action('wp_head', 'wpg_ubah_posisi_admin_bar');

How to add functions.php code?

1. Log in to the WordPress backend and navigate toAppearance > Theme File EditorThe

2. In the list of files on the right, find and click on thefunctions.phpDocumentation.
3. Add the above code to the end of that file and click "Updated documents".

This code ensures that the repositioning of the admin bar only takes effect for logged in users and that non-logged in users do not see any effect, thus avoiding the issue of the page being raised.

reach a verdict

By following the steps above, it's easy to move the WordPress admin bar from the top to the bottom of the page, and there's no need to install additional plugins. Whether you customize it through CSS or add conditional code to the functions.php file, these methods provide a more personalized way of presenting the admin bar on your site.