- Jul 07, 2009
- 44 Comments
- Tutorials
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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:
|
1 |
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:
|
1 2 3 4 5 6 7 |
<?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.
