How to Add an Announcement Box to Your WordPress Theme
If you’ve been following this blog for over a month, chances are that you’ve seen our announcement box in action. What you may not realize, is just how we control that box.
In today’s tutorial we’ll build a similar announcement box into a custom WordPress theme. It will be controlled from the dashboard, and can be switch on/off while changing the text included without having to edit the source code.
This will be done by adding a custom menu (options) panel to contain all the controls. So we can focus on the announcement box more, we’ll be basing this tutorial off the walk-through “Create an Options Page for Your WordPress Theme” found on the ThemeForest blog.
Setup Initial Functions
Below is the modified PHP that should be placed into your functions.php file to add our options panel. While this has been adapted from the code found on ThemeForest, keep in mind that some of the function names and variable values have been changed for this tutorial.
Copy the code below into your file, and meet down below for the breakdown of what’s been changed.
<?php
//Theme Control Panel
$themename = "Classic Demo"; //For labeling panels
$shortname = "demo"; //Prefix for database rows
//Define default functions folder
$functions_path = TEMPLATEPATH . '/functions/';
//Load in options array
require_once ($functions_path . 'theme-options.php');
function demo_add_admin(){
global $themename, $shortname, $options;
if ( $_GET['page'] == basename(__FILE__) ) {
if ( 'save' == $_REQUEST['action'] ) {
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] );
}
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] );
} else {
delete_option( $value['id'] );
}
}
header("Location: admin.php?page=functions.php&saved=true");
die;
} else if( 'reset' == $_REQUEST['action'] ) {
foreach ($options as $value) {
delete_option( $value['id'] );
}
header("Location: admin.php?page=functions.php&reset=true");
die;
}
}
//Add a new top level menu
add_menu_page($themename, $themename, 'edit_themes', basename(__FILE__), 'interface_page');
} //End of demo_add_admin function
function interface_page(){
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
?>
<div class="wrap">
<h2><?php echo $themename; ?> settings</h2>
<form method="post">
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
case "open":
?>
<table width="100%" border="0" style="background-color:#eef5fb; padding:10px;">
<?php break;
case "close":
?>
</table><br />
<?php break;
case "title":
?>
<table width="100%" border="0" style="background-color:#dceefc; padding:5px 10px;"><tr>
<td colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>
<?php break;
case 'text':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php
break;
case 'textarea':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php
break;
case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php
break;
case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><? if(get_settings($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = ""; } ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php break;
}
}
?>
<!--</table>-->
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<?php }
//Activate the functions to add options panel
add_action('admin_menu', 'demo_add_admin')
?>
Note: If you’re looking for a more generalized breakdown of what’s happening in the code below, I recommend referencing the original post for help. This tutorial will not be covering the basics of adding options panels.
Another difference from the original post is the type of options page created. In the ThemeForest demo, the options panel is attached to the “Appearance” section via the add_theme_page method. In this tutorial we’re just going to make the panel its own sidebar option. This will make it easier to access as well as give some bolder personalized touch to the dashboard. This is done using the add_menu_page method instead.
Add Announcement Options
If you’re referencing the ThemeForest post, you’ll notice that I’ve separated the options array into its own PHP file and then used require_once to include it. This is a matter of personal taste, but I’ve seen this done on many more advanced themes and find that it keeps things easy to maintain. In this example, our options array is contained in functions/theme-options.php for organization sake.
You’ll need to make the folder and theme-options file in the theme’s folder. When in doubt, you can always reference this example’s source files if you’re lost. Once you’ve made the theme-options.php file, paste in the following:
<?php //Options for the theme specific panel $options = array ( array( "name" => "Interface", "type" => "title"), array( "type" => "open"), array( "name" => "Alert Box Active", "desc" => "Show your announcement?", "id" => $shortname."_announcement_active", "std" => "false", "type" => "checkbox"), array( "name" => "Alert Box Text", "desc" => "Announcement text goes here", "id" => $shortname."_announcement_text", "std" => "", "type" => "text"), array( "type" => "close") ); // End of options array ?>
This code is responsible for creating the options array, which will ultimately determine what is being displayed on our custom dashboard panel. In this case, we’re adding a title, check box to toggle the announcement’s visibility, and a text box to enter the contents of the announcement.
By this point you should see our custom options panel showing up in your dashboard. Hopefully your result looks something like this (Click for larger version):
Style the Box
Assuming you want the box to stick out, you’ll need to add some CSS to the paragraph class “announcement”. Here’s the styles used in the example:
p.announcement{clear:both; overflow:hidden; padding: 12px; background: #FFFABF; border: 1px solid #FFF15F; margin:0px 0px 15px 0px; font-size:14px;}
Add To Template File
At this point, you should have a fully functioning announcement system ready to go. But before it can actually be put to use, you’ll need to include it into your theme’s template files. I’ve chosen to make the announcement box a specially styled paragraph with a class of “announcement”, but you can use any other tag(s) you wish.
Paste the following loop into the template files where you’d like the announcment box to display:
<?php
//Show any active announcment
$announce = get_option('omr_announcement_active');
if ($announce == "true"){
echo '<p class="announcement">'.stripslashes(get_option('demo_announcement_text')).'</p>';
};
?>
The conditional statement above simply checks that the alert is active, and then displays the text accordingly.
Download the Result
I know there was a lot of ground covered across two tutorials, and some of you may be lost. To help clear things up further, I’ve included the source files below in the form of a full modified theme. If you’d like to see the end result in action, simply activate this theme on your WordPress installation.
Conclusion
Also because this kind of stuff tends to be confusing, if you have any questions or need further clarification please leave a comment below. We’ll do our best to set you straight.
We’ve found the announcement box extremely useful to have integrated into our theme, especially when we’re running a contest or need to spread a message quickly. Have any other good ideas for uses? Let us know in the comments.
