Floating Admin Buttons demo

Hi all,

I created some floating admin buttons to quickly access ‘new post’ or ‘edit post’ options from the front end, which you may find useful.

It is based on this Pure CSS FAB solution and requires Font Awesome support for the icons.

The logic will first check if the user is an "administrator,editor,author" and will then check if the user is the post author for enabling the edit post button.

This solution also supports an additional custom post type (type="gallery"'), but you can remove that if you don’t use a CPT.

HTML & Logic

<!--Floating Admin Buttons-->
<If user_role includes value="administrator,editor,author">
    <!--Edit post check-->
    <Set logic=edit_post_check all=true>
      <If singular="post" type="post,gallery">true<Else />false</If>
      <If user_field=name is value="{Field author_name}">true<Else />false</If>
    </Set>
    <!--Buttons-->
    <div class="fab-admin">
        <input type="checkbox" name="fab-admin-toggle" class="fab-admin-toggle" />
        <a class="fab-admin-button" href="#!"><i class="fa fa-cog"></i></a>
        <div class="fab-admin-buttons">
            <!--New Post Button-->
            <a href="/wp-admin/post-new.php" title="New Post"><i class="fa-solid fa-newspaper"></i></a>
            <!--New Gallery Button-->
            <a href="/wp-admin/post-new.php?post_type=gallery" title="New Gallery"><i class="fa-solid fa-images"></i></a>
            <!--Edit Post/Gallery Button-->
            <If logic=edit_post_check>
                <If singular="post" type="post">
                <a href="{Field edit_url}" title="Edit Post"><i class="fa-solid fa-pen-to-square"></i></a>
                <Else if singular="post" type="gallery" />
                <a href="{Field edit_url}" title="Edit Gallery"><i class="fa-solid fa-pen-to-square"></i></a>
                </If>
                <Else />
                <div class="no-post-edit"></div>
            </If>
        </div>
    </div>
    <Else />
    <div class="no-fab-admin"></div>
</If>

CSS

/* Floating Admin Buttons */
.fab-admin {
  position: fixed;
  bottom: 35px;
  right: 35px;
  z-index: 999;
}
.fab-admin-button {
  height: 60px;
  width: 60px;
  background-color: rgba(67, 83, 143, .8);
  border-radius: 50%;
  display: block;
  color: #ffffff;
  text-align: center;
  position: relative;
  z-index: 1;
}
.fab-admin-button i {
  font-size: 30px;
}
.fab-admin-buttons {
  position: absolute;
  width: 100%;
  bottom: 120%;
  text-align: center;
}
.fab-admin-buttons a {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  text-decoration: none;
  margin: 10px auto 0;
  line-height: 1.15;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  position: relative;
  box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);
}
.fab-admin-buttons a:hover {
  transform: scale(1.05);
}
.fab-admin-buttons a:nth-child(1) {
  background-color: #03a9f4;
  transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;
}
.fab-admin-buttons a:nth-child(2) {
  background-color: #c003f4;
  transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;
}
.fab-admin-buttons a:nth-child(3) {
  background-color: #00b41e;
  transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;
}
.fab-admin-buttons a:nth-child(4) {
  background-color: #4CAF50;
  transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;
}
.fab-admin a i {
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fab-admin-toggle {
  -webkit-appearance: none;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  z-index: 2;
  transition: box-shadow .2s ease-in-out;
  box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
}
.fab-admin-toggle:hover {
  box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
}
.fab-admin-toggle:checked~.fab-admin-buttons a {
  opacity: 1;
  visibility: visible;
}

The buttons will float in the bottom right of the window when working:

Enjoy. :slight_smile:

6 Likes

Wow! That’s pretty cool!

1 Like

That’s great - thanks for sharing :slightly_smiling_face:

1 Like