PHPackages teppokoivula/admin-bar - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Admin Panels](/categories/admin) 4. / 5. teppokoivula/admin-bar ActivePw-module[Admin Panels](/categories/admin) teppokoivula/admin-bar ====================== AdminBar is a ProcessWire CMS/CMF module that provides easy front-end admin bar for editing page content. 2.14.0(3w ago)91.6k1GPL-2.0-or-laterCSSPHP >=7.1 Since Aug 2Pushed 3w ago3 watchersCompare [ Source](https://github.com/teppokoivula/AdminBar)[ Packagist](https://packagist.org/packages/teppokoivula/admin-bar)[ Docs](https://github.com/teppokoivula/AdminBar)[ RSS](/packages/teppokoivula-admin-bar/feed)WikiDiscussions master Synced 2w ago READMEChangelog (10)Dependencies (4)Versions (42)Used By (1) AdminBar module for ProcessWire CMS/CMF --------------------------------------- [](#adminbar-module-for-processwire-cmscmf) This module provides easy front-end admin bar for editing page content in ProcessWire. Credits ------- [](#credits) This module was originally developed by @apeisa, with additional development by Teppo Koivula. Credits for the bundled themes: - "Original" theme by @apeisa () - "Tires" theme by @tires (), with Feather icons by Cole Bemis () - "Uikit" theme by Teppo Koivula (), based on ProcessWire Uikit Admin Theme by Ryan Cramer () SVG loading icon (loading.svg) is from , copyright Utkarsh Verma and licensed under The MIT License (MIT). Installing the module --------------------- [](#installing-the-module) This module can be installed just like any other ProcessWire module: copy or clone the directory containing this module to your /site/modules/ directory, log in, go to Admin > Modules, click "Check for new modules", and install "AdminBar". Alternatively you can use the module installer in ProcessWire's Admin or Composer to install this module. The module is available via Packagist for Composer installation as `teppokoivula/admin-bar`. ### Requirements [](#requirements) - ProcessWire >= 3.0.112 - PHP >= 7.1.0 If you're running an earlier version of ProcessWire or PHP, you can use the 1.1.5 release of this module instead. Note, though, that 1.x branch of the module is no longer supported, and as such it *may not* work as expected, and *will* lack some of the features available via the 2.x branch. Permissions ----------- [](#permissions) By default AdminBar is visible only for superusers only. If you want to grant non-superusers access to AdminBar, please add permission "adminbar" to their role(s). If you are upgrading from an older version of AdminBar, you may need to uninstall and then reinstall the module in order to see that permission. Alternatively you can add this permission manually: just provide "adminbar" as the name of the permission (the label doesn't really matter). Themes ------ [](#themes) AdminBar comes with a selection of built-in themes. You can change the theme via module config, and if you want you can also create a custom theme of your own: 1. Create directory for your custom theme anywhere under your site directory. This directory should contain at least theme.css file, but you can also include theme.js, theme.php, and config.php. *For examples on how theme files work, check out the uikit theme, found from the /themes/uikit/ directory within the AdminBar directory.* 2. Select "Custom ..." option for theme in module config. 3. Type into the "Custom theme" text input the path to the directory your custom theme's files are located in. This path should be relative to (start from) your site directory. Hooks ----- [](#hooks) As with any ProcessWire module, you can identify hookable methods by the three underscores before the method name: `___hookableMethod()`. Here are the details for most common hookable methods in the AdminBar module/class: - `___isEnabled()`: this method returns a boolean that defines if AdminBar should be enabled (i.e. displayed) for current request. - `___isEnabledFor(Page $page)`: this method returns a boolean that defines if AdminBar should be enabled for provided page. - `___render()`: this method renders the Admin Bar. You can hook *before* it if you want to provide custom arguments for the method (overriding strings etc.) or you can hook *after* it if you want to manually modify the returned output string. - `___getTemplates()`: this method returns the "template strings" used by the render method. These are essentially the parts that make up the final markup, and if you want to modify the markup of the Admin Bar, you can hook *after* this method and modify the returned template strings array. - `___getData()`: this method returns the value of the data-adminbar attribute added to the Admin Bar. If you need custom properties mainly for JavaScript use, you should hook *after* this method and modify the returned array of options. - `___getItems()`: this method returns a list of items displayed in the Admin Bar. You can modify certain aspects of these items (strings/labels, use of modal links, etc.) by hooking *before* this method and modifying the args array – or if you want to modify the displayed items, you can hook *after* this method and modify the returned array of items. Custom icons ------------ [](#custom-icons) You can add icons to Admin Bar items by including an `icon` property. This can be either an icon name or raw SVG/HTML markup: ``` $wire->addHookAfter('AdminBar::getItems', function(HookEvent $event) { $items = $event->return; // Using an icon name (resolved via getIcon method) $items['right']['events'] = [ 'class' => 'events', 'link' => '/admin/page/?id=1234', 'text' => 'Events', 'icon' => 'calendar', ]; // Using raw SVG markup $items['right']['custom'] = [ 'class' => 'custom', 'link' => '/custom/', 'text' => 'Custom', 'icon' => '...', ]; $event->return = $items; }); ``` Icon names are resolved via the hookable `___getIcon()` method. Hook after this method to register your own icon names. Injecting AdminBar into external content ---------------------------------------- [](#injecting-adminbar-into-external-content) If you need to inject AdminBar into HTML that wasn't rendered through ProcessWire (e.g., proxied or cached content), use the `renderWithAssets()` method: ``` $adminBar = $modules->get('AdminBar'); if ($adminBar->isEnabled()) { $html = str_ireplace( '', $adminBar->renderWithAssets(['page' => $page]) . '', $html ); } ``` This method returns complete AdminBar markup including CSS and JavaScript. You can pass `null` as the page to render AdminBar without page-specific items (edit, new, browse): ``` $adminBar->renderWithAssets(['page' => null]) ``` Frontend utilities ------------------ [](#frontend-utilities) ### CSS custom property [](#css-custom-property) AdminBar sets the `--adminbar-height` CSS custom property on the document root (`:root`). This allows you to adjust your layout based on the Admin Bar height using pure CSS: ``` .sticky-header { top: var(--adminbar-height, 0); } .full-height-container { height: calc(100vh - var(--adminbar-height, 0)); } ``` The value is updated automatically when the Admin Bar height changes (e.g., due to window resize). ### data-adminbar-adjust attribute [](#data-adminbar-adjust-attribute) You can use the `data-adminbar-adjust` attribute to control behaviour of frontend elements while Admin Bar is enabled/displayed. This attribute should contain a space-separated list of CSS properties that should be modified when Admin Bar height is recalculated. Example and supported values: ``` ``` Adjustments are applied as inline CSS styles. Assuming that the height of the Admin Bar was 100px at the time of calculation, the example above would result in... ``` ``` By default your main content container is assumed to be document root and Admin Bar will automatically add top padding to this element to make space for itself. In some cases content may live within another full height container, in which case you may prefer to adjust the padding of that element instead. This can be achieved by adding the `data-adminbar-content` attribute to said element: ``` ... ``` License ------- [](#license) This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. (See included LICENSE file for full license text.) ### Health Score 53 — FairBetter than 96% of packages Maintenance94 Actively maintained with recent releases Popularity24 Limited adoption so far Community14 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor1 Top contributor holds 58.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~63 days Recently: every ~29 days Total 40 Last Release 27d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/1252021?v=4)[Teppo Koivula](/maintainers/teppokoivula)[@teppokoivula](https://github.com/teppokoivula) --- Top Contributors [![teppokoivula](https://avatars.githubusercontent.com/u/1252021?v=4)](https://github.com/teppokoivula "teppokoivula (88 commits)")[![apeisa](https://avatars.githubusercontent.com/u/131855?v=4)](https://github.com/apeisa "apeisa (62 commits)")[![Fokke-](https://avatars.githubusercontent.com/u/3109666?v=4)](https://github.com/Fokke- "Fokke- (1 commits)") --- Tags processwiremodule ### Embed Badge ![Health badge](/badges/teppokoivula-admin-bar/health.svg) ``` [![Health](https://phpackages.com/badges/teppokoivula-admin-bar/health.svg)](https://phpackages.com/packages/teppokoivula-admin-bar) ``` ### Alternatives [adrianbj/tracy-debugger The ultimate debugging and development tool for ProcessWire. 935.5k](/packages/adrianbj-tracy-debugger)[teppokoivula/search-engine SearchEngine is a ProcessWire CMS/CMF module for indexing and searching site contents. 181.4k2](/packages/teppokoivula-search-engine) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)