WordPress System Status – My First Public Plugin

I've been working with Wordpress for a while, but this is my first time releasing a plugin to the public.

System Status

I’ve been working with WordPress since 2008 at this point, and have gotten used to making modifications I need to suit specific projects of mine. Recently I needed to find a way to display system messages easily to visitors without going in and out of the theme each time I needed to do it. After I finished the initial modification I thought that other people might find it helpful as well, especially since I didn’t see any plugins for it. A few more modification to make it a plugin and enter WordPress System Status. The plugin shouldn’t be difficult to implement, as it only requires a few modifications to your theme files.

Install and Activate Plugin

First, you’ll want to grab the plugin from Github. If you have trouble with the plugin you can also use Github to submit an issue. Next, upload the plugin to your WordPress plugins directory and activate from the WordPress plugin page inside of your WordPress installation.

Enable System Message

At this point you should see System Status under the Settings menu. Go in, put in a test message, click the button that says “Disabled” to toggle it to “Enabled”. You’re also going to want to select “Home” and “Post” under “Apply To” to help with the next parts. When you’re done press Save.

Place Code Snippet

You’re going to need to place the following code some where in your theme. I suggest someone in the header.php so that it shows up on all of your pages.

<?php global $systemStatus; $systemStatus->systemMessage(); ?>

That snippet will generate the code for the status message. Here is an example of how I place it in one of my sites:


<div class="nav">
<div class="links">
<ul>
<li class="divider"></li>
<li><a class="nav_link nav-hover" href="<? bloginfo('url'); ?>/articles">Articles</a></li>
<li class="divider"></li>
<li><a class="nav_link nav-hover" href="<? bloginfo('url'); ?>/reviews">Reviews</a></li>
<li class="divider"></li>
<li><a class="nav_link nav-hover" href="<? bloginfo('url'); ?>/podcasts">Podcasts</a></li>
<li class="divider"></li>
<li><span class="nav_link nav-hover platform-menu">Platforms</span></li>
<li class="divider"></li>
<li><span class="nav_link nav-hover more-menu">More</span></li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
<div id="container">
<?php global $systemStatus; $systemStatus->systemMessage(); ?>

You’ll see I placed it on line 21; that’s the very end of my header.php file. When the message is enabled it will generate the following HTML:


<div id="ss-system-message" class="ss-message-notice">
<p>Whatever you status message is.</p>
</div>

Take note of the id and class of the div. You’ll need that for styling.

Style The Message

I purposely didn’t style the message because I felt you should make it match with your theme. The id of the div (#ss-system-message) will always be the same, but the class will change depending on what Message Type you select. .ss-message-notice for Notice, .ss-message-warning for Warning, and .ss-message-critical for Critical. In my case I used the div to assign the size, padding, font, and font-style of the message. The class was used to change the border of the message depending on the type selected.  Here is what my message looked like after the fact.

Wordpress System Status Enabled

The plugin makes use of the WordPress WYSIWYG editor, so you can format messages the same way you do with regular posts.

After all of that is squared away the plugin should be very simple to use. I do have plans for the next version to make styling easier as well as putting together a method so that users don’t need to touch their template files. This plugin is not in the WordPress repository at this time, so for updates you will need to keep an eye on Github (or more realistically, go there if something breaks after a WordPress update). Like I said before, any questions or problems can be submitted on Github. Hopefully this helps you as much as it’s helped me.

Github: WordPress System Status – v1.0