Floating Admin Button

This pure CSS utility cleverly uses a checkmark to control the toggle state of its menu items. Though not quite A11y-friendly enough to show to site visitors, this floating toolkit with add and edit post actions is handy for blog management!

Based on Mark Eriksson’s Pure CSS FAB

Submitted by Phil Rips
Many businesses want a professional website but don't have the time to build one. Simplicity Theme combines high-quality design with easy content management so you can grow your business.

Preview

<!--Floating Admin Buttons-->
<!-- 1: User role check -->
<If user_role includes value="administrator,editor,author">
  <!-- 2: 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>
      <!-- 3. New Gallery Button-->
      <a href="/wp-admin/post-new.php?post_type=gallery" title="New Gallery">
        <i class="fa-solid fa-images"></i>
      </a>
      <!-- 4. 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>
      </If>
    </div>
  </div>
</If>

This snippet requires Font Awesome Classic support, or you can replace the icons with your own.

  1. This If tag wraps the entire template, only displaying the buttons if the current user has a role of administrator, editor, or author
  2. This logic variable checks if the current user is the post author, and whether the current post type is one of those supported. It’s used to conditionally display the edit actions when appropriate.
  3. This “New Gallery” button adds a new post to the gallery custom post type. Remove it or replace the post type slug with your own!
  4. The edit buttons use a conditional check to determine the current post type, in order to customize the button icons and classnames. You’ll likely want to adjust this logic your own post type, or remove it entirely

 

Documentation Links

The If Tag Logic Variables