Hide the MODX Help Button with a Plugin

In the previous article, we saw the CSS code necessary to hide the "Help" button that appears on the panel for creating and updating various MODX objects like Resources, Elements, System Settings, and Media Sources. In this article we'll look at a way to inject that CSS into a page with a plugin, so the change won't be overwritten every time MODX is upgraded.

The CSS

To refresh your memory, the CSS code we identified in the previous article looks like this:

#modx-abtn-help {
    display:none !important;
}

The code simply tells the browser not to display the page element with the ID modx-abtn-help. You can't add that CSS code to the site's CSS file or to a page Template because it won't have any effect in the Manager. We need to inject it into the Manager page itself.

Be very careful with plugin code designed to run in the Manager. If the code contains a syntax error, the entire Manager will often be completely broken. You won't be able to do anything. If this happens, don't panic. Go into the database in PhpMyAdmin and in the `modxsiteplugins` table, find the plugin and disable it by changing the value of the `disabled` field from `0` to `1` and clicking on the "Go" button. Delete all files in the `core/cache` directory in cPanel's File Manager (otherwise the plugin will still be in the cache and will execute). Once you've done that the Manager will be fine, and you can work on fixing the plugin code.

The best way to prevent this is to write the code in a good code editor, like PhpStorm, which will highlight any PHP errors for you, then paste it into the plugin in the Manager. If you don't have a code editor, you can install the Ace editor in MODX and use it to write the plugin. Ace's error checking is not nearly as sophisticated as PhpStorm's, but it will catch most typical PHP syntax errors. You'll see a red "X" at the left of the code if it sees any errors, and it will disappear when they are fixed.

The Plugin

It's a great feature of MODX that you can use a plugin to do almost anything. This plugin should be attached to the OnManagerPageBeforeRender System Event. Just put a checkmark next to that event on the "Settings" tab when editing the plugin. We'll see the steps for creating the plugin in just a bit. Here's the plugin code:

/* HideHelp Plugin */
$css = '
    <style>
        #modx-abtn-help {
            display: none !important;
        }
    </style>
';

$modx->regClientCSS($css);

return '';

The code puts the desired CSS code, along with <script></script> tags, into the $css variable. It then sends the CSS to regClientCSS(), which injects the code into the head section of the page.

If you want to make things a little more compact, the plugin could look like this:

/* HideHelp Plugin */
$css = '<style>#modx-abtn-help { display: none !important;} </style>';
$modx->regClientCSS($css);
return '';

or even like this:

/* HideHelp Plugin */
$css = '<style>#modx-abtn-help {display: none !important;}</style>'; $modx->regClientCSS($css); return '';

Steps

Here are the steps to create the Plugin:

Create a Plugin called HideHelp and paste in any one of the examples above.
On the System Events tab of the plugin, check the box next to OnManagerPageBeforeRender
Save the Plugin

Another Way

The regClientCSS() method is very smart. It can tell whether the argument in parentheses is raw CSS code or a reference to a file. It does this by looking for the <script></script> tags. If they're missing, it assumes the argument is a reference to a file. We could have placed the CSS code (without the <script></script> tags), in a file under the assets/ directory, and used this code in our plugin:

/* HideHelp Plugin */
$modx->regClientCSS('path/to/css/file');
return '';

The CSS file would look like this:

#modx-abtn-help {
    display: none !important;
}

In this case, MODX would place a reference to the CSS file in the head section of the page rather than the raw CSS code. For just hiding the Help button, it's probably faster and easier to have the CSS code in the plugin. If you wanted to do more extensive modifications to the Manager page, though, the file might be more convenient.

Inefficiency

This method is a little wasteful, since it executes on every Manager page, even pages without a Help button. The code is fairly fast, however. It would be possible to modify the code to only execute on pages with a Help button, but you'd have to identify all of them, and it's a little tricky. In a later article, we'll look at a way to do that, but for just the Help button, which is on a lot a pages, it's probably not worth the effort, especially since the plugin won't affect front-end page load times at all. That's because the plugin is connected to the OnManagerPageBeforeRender System Event, and that even will only happen when a Manager page is loaded.

Coming Up

Our plugin hides the Help button from everyone, but there might be cases where you want some users to see it. In my next article, we'll see a way to control which user groups get to see the button. We'll also look at how to make sure the plugin only executes on the pages where it's appropriate.

About Bob Ray

Bob Ray is the author of the MODX: The Official Guide and dozens of MODX Extras including QuickEmail, NewsPublisher, SiteCheck, GoRevo, Personalize, EZfaq, MyComponent and many more. His website is Bob’s Guides. It not only includes a plethora of MODX tutorials but there are some really great bread recipes there, as well.

Learn more about Bob Ray.