Easy WordPress Plugin Development (Part 4)

by on May 11, 2011

This is the fourth article in our plugin development tutorial series. In the last segment, we covered our plugin's primary file source code. You can access the linked table of contents for the entire series below.

Today, we'll complete our plugin's source code and review a few design techniques for Dashboard admin pages.

Table of Contents for this Tutorial
    Toggle Article Details

  1. Introduction: Plug-in Development Overview
  2. Plug-in Development Fundamentals
  3. Our Plug-in's Primary File Source Code
  4. Implementing Dashboard Admin Pages  (you are here)
  5. Additional Plug-in Considerations
  6. Plug-in Testing Techniques
  7. Finalizing Our Plug-in
  8. (coming soon) Submitting Your Plug-in to WordPress
  9. (coming soon) Promoting Your Plug-in's Future
  10. (coming soon) Advanced Plug-in Techniques

Our Dashboard Admin Page PHP

Many admin pages contain both settings specific to the plug-in and some helpful usage information. For our basic plug-in, there are no settings. But, to make it easy for the user to get the most out of our shortcode, we offer a full page of useful tips.

Code: PHP (plus WordPress)The PHP Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
/**************************************************************************
ADMIN INITIALIZE
**************************************************************************/
 
if ('wcs-qrc-options.php' == basename($_SERVER['SCRIPT_FILENAME']))
{
    die ('Please do not access this admin file directly. Thanks!');
}
 
 
if (!is_admin()) {die('This plugin is only accessible from the WordPress Dashboard.');}
 
 
if (!defined('WP_CONTENT_DIR')) define('WP_CONTENT_DIR', ABSPATH . 'wp-content');
if (!defined('WP_CONTENT_URL')) define('WP_CONTENT_URL', get_option('siteurl') . '/wp-content');
if (!defined('WP_ADMIN_URL')) define('WP_ADMIN_URL', get_option('siteurl') . '/wp-admin');
if (!defined('WP_PLUGIN_DIR')) define('WP_PLUGIN_DIR', WP_CONTENT_DIR . '/plugins');
if (!defined('WP_PLUGIN_URL')) define('WP_PLUGIN_URL', WP_CONTENT_URL . '/plugins');
?>

At the top of wcs-qrc-options.php, we have a short section of PHP code. First, we make sure that the file can not be loaded directly (starting at line 7) … eg, in the browser's address bar. Then, as an added security measure, we make sure that the file is being accessed from the WordPress Dashboard (line 13).

Next, we define some URL and directory constants (starting at line 16) … just in case they're not already defined. This is a good code segment to include in all plug-ins.

Our Dashboard Admin Page Content

The lower portion of this file contains the HTML that's output on our admin page. Some plug-ins include their HTML content inside of a function. But, for our simple usage, we include the HTML directly.

Code: HTMLThe HTML Code

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
<div class="wrap">
    <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
 
        <tr>
            <td colspan="2"><img width="600" height="128" src="<?php _e(WP_PLUGIN_URL); ?>/wcs-qr-code-generator/images/wcs-qrc-header.png" border="0" alt="WCS QR Code Generator Options" title="WCS QR Code Generator Options" /></td>
        </tr>
 
        <tr>
            <td><br/>&nbsp;<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.wpcodesnippets.info%2Fblog%2Fwcs-qr-code-generator.html&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></td>
            <td>&nbsp;</td>
        </tr>
    </table>
 
 
    <table cellpadding="0" cellspacing="0" border="0" style="width:600px; margin-left:5px; color:black; background:#F6F6F6; border:1px solid #606060; padding:4px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;">
    <tr><td>
 
        <h2>&nbsp;About this Plug-in</h2>
        <div style="margin-left:20px; line-height:150%; font-size:14px;">
        This plugin is a <b>QR Code</b> (Quick Response) generator for <b>mobile tagging</b>. It allows you to create one of the ever-popular QR Code images anywhere on a page/post or in a text widget. A <b>simple shortcode</b> defaults to generating the 2d code for the current page/post.<br/><br/>
 
        Plus, <b>attributes allow you to set</b> the: size, color, url, tooltip, image format (png or jpg), and error correction level ... along with an option to use a shortened url. The url attribute can be utilized instead as an email address, plain text, phone number, vcard, sms, <i>etc</i>.
        <br/><br/>
        </div>
 
 
 
        <h2>&nbsp;Links Related to this Plug-in</h2>
        <div style="margin-left:20px; line-height:150%; font-size:14px;">
        <ol style="margin-left:40px;">
            <li>Visit our web site, <a target="_blank" href="http://wpcodesnippets.INFO">wpCodeSnippets.INFO</a>, for lots of WordPress tips, tweaks, shortcodes, and plugins.</li>
            <li>View the prototype <a target="_blank" href="http://wpcodesnippets.info/blog/how-to-add-qr-codes-to-your-blog.html">source code</a> explanation for this plug-in. This page also includes a variety of useful information regarding QR Codes.</li>
            <li>View <a target="_blank" href="http://wpcodesnippets.info/blog/wcs-qr-code-generator.html">details for this plug-in</a> at our web site.</li>
            <li>Revisit the <a target="_blank" href="http://wordpress.org/extend/plugins/wcs-qr-code-generator/">plug-in download</a> page at the WordPress repository. In the sidebar on the right, click your "<b>My Rating</b>" preference (hopefully 5 stars).</li>
            <li>Did you find this plug-in useful? A small <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&currency_code=USD&business=LukeAmerica2020%40gmail.com&item_name=WP%20Code%20Snippets%20donation&amount=0.00&image_url=http://wpcodesnippets.info/files/paypal_header.png">donation</a> will support our continued WordPress development efforts. Enter any amount.</li>
        </ol>
        <br/>
        </div>
 
 
        <h2>&nbsp;Shortcode Usage Information</h2>
        <div style="margin-left:20px; line-height:150%; font-size:14px;">
        Upon activation of this plug-in, you'll have access to a <b>new shortcode</b> that generates QR Code images. In its default usage, a QR Code is generated for the current page/post. Additionally, you can use the shortcode anywhere on a page/post or in a text widget.<br/><br/>
 
        <b>Basic Usage Syntax:</b><br/>
        <div style="margin-left:25px;">[wcs_qr_code]</div>
        <br/>
 
        <b>Example Usage:</b><br/>
        <div style="margin-left:25px;">
            [wcs_qr_code <b>url=</b>'now is the time' <b>size=</b>'128' <b>color=</b>'darkblue']<br/>
        </div>
        <br/>
 
        <b>Available Attributes:</b><br/>
        <ol style="margin-left:40px;">
            <li><b>url</b> is the content for the qr code image (defaults to the current page/post url)<br/>-- <i>more on this below</i></li>
            <li><b>size</b> is square image's size in pixels (default is '100')</li>
            <li><b>color</b> can be a 6-digit hex color value or an HTML color name (default is 'black')<br/></li>
            <li><b>ecl</b> is the error correction level (default is 'L|4')<br/>-- <i>more on this below</i><br/></li>
            <li><b>shorten</b> is a toggle for shortening the url (default is 'false')<br/></li>
            <li><b>format</b> is the image format (PNG or JPG) (default is 'png')<br/></li>
            <li><b>tooltip</b> is the image's tooltip text (default is none)<br/></li>
        </ol>
        <br/>
 
        <b>ECL Details:</b><br/>
        <div style="margin-left:25px;">
            This plug-in utilizes the <a href="http://code.google.com/apis/chart/image/docs/gallery/qr_codes.html" target="_blank">Google Charts API</a>. You can view the various ECL settings <a href="http://code.google.com/apis/chart/image/docs/gallery/qr_codes.html#details" target="_blank">here</a>.<br/><br/>
 
            Essentially, the ECL code consists of two components: (1) the error correction level (L, M, Q, or H), and (2) the white border row/column width (1 - 40 rows, not pixels).
        </div>
        <br/>
 
        <b>URL Details:</b><br/>
        <div style="margin-left:25px;">
            If omitted, the URL defaults to the current page/post url. You can also use any valid url or text (within the character limitation of the selected ECL attribute value).<br/><br/>
 
            When using an <b>email address</b>, a standard format is expected. For example <b>me@here.com</b> should be implemented as <b>mailto:me@here.com</b>.<br/><br/>
 
            <b>Telephone numbers</b> also have a standardized format. For example, <b>212-555-1212</b> should be implemented as <b>tel:+12125551212</b>.<br/><br/>
 
            An <b>SMS link</b> is encoded in a fashion similar to an email address. For example, a link to the number <b>12345</b> should be implemented as <b>sms:12345</b>.<br/><br/>
 
            These and many other possibilities are explained in detail <a href="http://code.google.com/p/zxing/wiki/BarcodeContents" target="_blank">here</a>.<br/>
        </div>
        <br/>
 
        <h2>&nbsp;Additional References</h2>
        <div style="margin-left:20px; line-height:150%; font-size:14px;">
            Here's a site that DECODES a QR image to verify the data:<br/>
            <a href="http://zxing.org/w/decode.jspx" target="_blank">http://zxing.org/w/decode.jspx</a>.<br/><br/>
 
            This <a href="http://wpcodesnippets.info/blog/how-to-add-qr-codes-to-your-blog.html" target="_blank">page</a> offers a variety of information regarding QR Codes.<br/><br/>
 
            Here are a few sites that let you download a QR Code reader for your mobile device.<br/>
            <ol style="margin-left:40px;">
                <li><a href="http://www.i-nigma.mobi/" target="_blank">i-nigma.mobi</a></li>
                <li><a href="http://reader.kaywa.com/" target="_blank">kaywa.com</a></li>
                <li><a href="http://get.neoreader.com/" target="_blank">neoreader.com</a></li>
                <li><a href="http://www.quickmark.com.tw/En/basic/index.asp" target="_blank">quickmark.com.tw</a></li>
            </ol>
            <br/>
        </div>
 
    </td></tr>
    </table>
</div>
<br/><br/>

We start off with an identifying image in the header. This PNG file is in the images folder. Then, we output the content in a formatted table.

Our HTML is non-standard for an admin page. I personally like this because it stands out. Less than half of the plug-ins I've used do it this way.

How to Style Dashboard Admin Pages

As mentioned, we use non-standard styling with this plug-in. However, with a little tweaking, there are several useful styles available for us to utilize in Dashboard admin pages.

The following example demonstrates a few possibilities, accessing the admin stylesheets. Here, we show you how to display admin content in: (1) styled tables, (2) styled multi-column tables, (3) single column blocks using DIV's, and (4) double column blocks using DIV's. Plus, we include a couple of styled buttons.

Code: HTMLAdmin Page Style Examples

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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<div class="wrap">
 
<!-- ADMIN HEADER SAMPLE -->
 
    <?php screen_icon('ms-admin'); ?>
    <h2>Sample Dashboard Page</h2>
 
    <p>
        This page demonstrates several of the cool CSS features that
        are available for WordPress Dashboard admin pages.
    </p>
 
<!-- ADMIN TABLES -->
 
    <h2>Using Tables</h2><br/>
 
    <table class="widefat">
        <thead>
        <tr>
            <th>Content Header #1</th>
        </tr>
        </thead>
        <tr>
 
        <tbody>
            <td>
                Now is the time for all good men to come to the
                aid of their country. The quick red fox jumped over
                the lazy brown dog.<br/><br/>
 
                The quick red fox jumped over the lazy brown dog.
                Now is the time for all good men to come to the
                aid of their country.<br/><br/>
            </td>
        </tr>
        </tbody>
    </table>
 
    <br/>
 
    <table class="widefat">
        <thead>
        <tr>
            <th>Content Header #2</th>
        </tr>
        </thead>
        <tr>
 
        <tbody>
            <td>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nunc arcu enim, adipiscing eget porta ut, tempor gravida
                sapien. Nulla ac venenatis dolor. Nam egestas ante ac
                nisi pellentesque congue.<br/><br/>
 
                Nulla et felis a mi euismod accumsan. Aenean quis urna ante.
                In vitae turpis sit amet odio tincidunt tincidunt at eget
                ipsum. Aliquam dapibus adipiscing orci, sit amet sodales
                quam tempus nec. Maecenas sed ante sem, at fringilla neque.<br/><br/>
            </td>
        </tr>
        </tbody>
    </table>
 
    <br/>
 
<!-- ADMIN TABLES with COLUMNS -->
 
    <h2>Using a Table with Columns</h2><br/>
 
    <table class="widefat">
        <thead>
        <tr>
            <th>This</th>
            <th>That</th>
            <th>The Other</th>
        </tr>
        </thead>
 
        <tfoot>
        <tr>
        <tr>
            <th>This</th>
            <th>That</th>
            <th>The Other</th>
        </tr>
        </tfoot>
 
        <tbody>
        <tr>
            <td>Now is the</td>
            <td>time for all</td>
            <td>good men to</td>
        </tr>
        <tr>
            <td>The quick red</td>
            <td>fox jumped over</td>
            <td>the lazy brown dog</td>
        </tr>
        <tr>
            <td>Lorem ipsum dolor</td>
            <td>Nunc arcu enim</td>
            <td>vitae turpis sit</td>
        </tr>
        </tbody>
    </table>
 
    <br/>
 
<!-- ADMIN TABLES with DIV's - SINGLE COLUMN -->
 
 
    <h2>Using Div's - Single Column</h2><br/>
 
    <div class="metabox-holder">
        <div class="postbox">
            <h3 style="cursor:default;">Content Header "C"</h3>
            <div class="inside" style="padding:0px 6px 0px 6px;">
                <p>
                    Now is the time for all good men to come to the
                    aid of their country. The quick red fox jumped over
                    the lazy brown dog.
                </p>
                <p>
                    The quick red fox jumped over the lazy brown dog.
                    Now is the time for all good men to come to the
                    aid of their country.
                </p>
 
                <p>
                    <input class="button-primary" value="Primary Button">
                    &nbsp;
                    <input class="button-secondary" value="Secondary Button">
                </p>
            </div>
        </div>
 
        <div class="postbox">
            <h3 style="cursor:default;">Content Header "D"</h3>
            <div class="inside" style="padding:0px 6px 0px 6px;">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc arcu enim, adipiscing eget porta ut, tempor gravida
                    sapien. Nulla ac venenatis dolor. Nam egestas ante ac
                    nisi pellentesque congue.
                </p>
                <p>
                    Nulla et felis a mi euismod accumsan. Aenean quis urna ante.
                    In vitae turpis sit amet odio tincidunt tincidunt at eget
                    ipsum. Aliquam dapibus adipiscing orci, sit amet sodales
                    quam tempus nec. Maecenas sed ante sem, at fringilla neque.
                </p>
            </div>
        </div>
    </div>
 
 
<!-- ADMIN TABLES with DIV's - TWO COLUMNS -->
 
    <h2>Using Div's - Two Columns</h2><br/>
 
    <div class="metabox-holder" style="width:65%; float:left; margin-right:10px;">
 
        <div class="postbox">
            <h3 style="cursor:default;">Content Header "C"</h3>
            <div class="inside" style="padding:0px 6px 0px 6px;">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc arcu enim, adipiscing eget porta ut, tempor gravida
                    sapien. Nulla ac venenatis dolor. Nam egestas ante ac
                    nisi pellentesque congue.
                </p>
                <p>
                    Nulla et felis a mi euismod accumsan. Aenean quis urna ante.
                    In vitae turpis sit amet odio tincidunt tincidunt at eget
                    ipsum. Aliquam dapibus adipiscing orci, sit amet sodales
                    quam tempus nec. Maecenas sed ante sem, at fringilla neque.
                </p>
            </div>
 
        </div>
 
        <div class="postbox">
            <h3 style="cursor:default;">Content Header "D"</h3>
            <div class="inside" style="padding:0px 6px 0px 6px;">
                <p>
                    Now is the time for all good men to come to the
                    aid of their country. The quick red fox jumped over
                    the lazy brown dog.
                </p>
                <p>
                    The quick red fox jumped over the lazy brown dog.
                    Now is the time for all good men to come to the
                    aid of their country.
                </p>
 
                <p>
                    <input class="button-primary" value="Primary Button">
                    &nbsp;
                    <input class="button-secondary" value="Secondary Button">
                </p>
            </div>
 
        </div>
    </div>
 
    <div class="metabox-holder" style="width:30%; float:left;">
 
        <div class="postbox">
            <h3 style="cursor:default;">Content Header "E"</h3>
            <div class="inside" style="padding:0px 6px 0px 6px;">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc arcu enim, adipiscing eget porta ut, tempor gravida
                    sapien. Nulla ac venenatis dolor. Nam egestas ante ac
                    nisi pellentesque congue.
                </p>
                <p>
                    Nulla et felis a mi euismod accumsan. Aenean quis urna ante.
                    In vitae turpis sit amet odio tincidunt tincidunt at eget
                    ipsum. Aliquam dapibus adipiscing orci, sit amet sodales
                    quam tempus nec. Maecenas sed ante sem, at fringilla neque.
                </p>
            </div>
        </div>
 
        <div class="postbox">
            <h3 style="cursor:default;">Content Header "F"</h3>
            <div class="inside" style="padding:0px 6px 0px 6px;">
                <p>
                    Now is the time for all good men to come to the
                    aid of their country. The quick red fox jumped over
                    the lazy brown dog.
                </p>
                <p>
                    The quick red fox jumped over the lazy brown dog.
                    Now is the time for all good men to come to the
                    aid of their country.
                </p>
            </div>
        </div>
    </div>
 
</div>
 
<!-- required to clear for additional content -->
<div style="clear:both;"></div>

To the right is a screen capture of the Dashboard page that this styled HTML creates.

You can click this thumbnail to open the enlarged image in a new browser tab. Depending on your browser's settings, you might need to also click the enlargement to view it at full size.

Among the four admin content styles presented, you may well find one that suits the needs of your own plug-in.

This content is created with standard HTML and tweaked admin styles. The only exception is our use of the WordPress screen_icon function.

 

How to Use the screen_icon Function

Unfortunately, WordPress hasn't documented the screen_icon function. Further … and amazingly … looking at the function's source code is of little help. It's located in: /wp-admin/includes/template.php.

Here's what it does. It loads one of 12 icons from a css sprite image (/wp-admin/images/icons32-vs.png). Each icon represents a major section of the Dashboard menu system. The function takes one parameter, a slug that identifies the specific icon to use. And … you guessed it … these 12 slug names are not documented either.

But … we dug through the code to get the data. Here are the slugs and the icon that each displays. BTW, each image is a 32×32 pixel icon. And, the typical file association URL would start with http://TLD/wp-admin/.


Slug Name Description File Association
'edit' push pin icon (as with “Posts”) edit.php
'edit-comments' speech bubble icon (as with “Comments”) edit-comments.php
'edit-pages' pages icon (as with “Pages”) edit.php?post_type=page
'link' link icon (as with “Links”) link-manager.php
'index' house icon (as with “Dashboard”) index.php
'ms-admin' keys icon (as with “Network -> Sites”) network/sites.php
'options-general' sliders icon (as with “Settings”) options-general.php
'plugins' plug icon (as with “Plugins”) plugins.php
'themes' properties icon (as with “Appearance”) themes.php
'tools' (or 'admin') tools icon (as with “Tools”) tools.php
'upload' media icon (as with “Media”) upload.php
'users' people icon (as with “Users”) users.php

Additional Admin Page Functions

You may, in fact, want to include assorted user options on your admin page … which can be stored in and retrieved from the database. The following articles explain how to do this.

Although the official documentation doesn't mention it, it's a very good idea to save the version number of your plugin as a (hidden) setting. This will be of use with future updates.

Admin Page Fade Out Alerts

You've probably seen plug-ins that displayed a “Settings saved.” message at the top of the admin page when you saved your settings. Writing this article, I was curious how to accomplish this … adding a fade out effect. So … I coded a little snippet that you might find useful.

The following code is added to wcs-qrc-options.php just above the original line 25, <div class="wrap">. The cool part is that with a few style tweaks and some jQuery trickery, the alert appears for 5 seconds and then it fades out for 3 seconds … removing itself from the page. Plus, when it's clicked by the user during those 8 seconds it closes itself instantly.

Code: HTMLAdmin Fade Out Alert

1
2
3
4
5
6
7
<div id="message" class="updated below-h2 fade" style="margin-top:30px; margin-left:5px; width:600px; cursor:pointer;" onclick="jQuery('div#message').css('display','none');">
    <p style="float:right; font-size:10px; font-variant:small-caps; color:#600000; padding-top:4px;">(close)</p>
    <p><b>Settings saved.</b></p>
</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {$(".fade").fadeTo(5000,1).fadeOut(3000);});
</script>

Here's what the output looks like:

And, by simply changing “updated” on the first line to “updated highlight”, we get the following output.

Finally, by changing “updated” on the first line to “error”, we get this output.

How to Add Your RSS Feed on Your Admin Page

It can be a useful marketing strategy to include your blog's RSS feed on your plug-in's dashboard admin page. WordPress offers the undocumented  wp_widget_rss_output function. However, it opens links within the current tab. And, it's probably not a good idea to discard someone's dashboard when they click on one of your article links.

Our wcsp_qrc_dashboard_get_rss_feed function resolves this shortcoming by inserting a target="_blank" attribute inside the HTML of the link code. We do this by buffering the content and using the handy preg_replace() function. Here's the source code:

Code: PHP (plus WordPress)Dashboard RSS Feed

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
function wcsp_qrc_dashboard_get_rss_feed($url, $count=5, $summary=1, $author=1, $date=1)
{
    // SITE FEED:
    //    http://YOUR_TLD/feed
    // CATEGORY FEED:
    //    http://YOUR_TLD/category/CAT_SLUG/feed
    // TAG FEED:
    //    http://YOUR_TLD/tag/TAG_SLUG/feed
 
    // start output
    $output = '<div class="rss-widget">';
 
    // buffer feed data so that we can change it
    ob_start();
    wp_widget_rss_output(array(
        'url' => $url,
        'title' => '',
        'items' => $count,
        'show_summary' => $summary,
        'show_author' => $author,
        'show_date' => $date
        ));
    $rss_feed = ob_get_contents();
    ob_end_clean();
 
    // force links to open in a new tab
    $find_this = "/<a (.+?)[title='](.+?)['](.+?)>/i";
    $rss_feed = preg_replace($find_this, '<a class=\'\\3 target="_blank">', $rss_feed);
 
    // exit
    $output .= $rss_feed . '</div>';
    return $output;
}

Here's an example usage. You should implement your version of this example inside a formatted block on your admin page. And, the block should have a title … something like “Read Our Latest Articles”.

Code: PHP (plus WordPress)

1
<?php echo wcsp_qrc_dashboard_get_rss_feed('http://wpcodesnippets.info/feed', 10, 0, 0, 0); ?>

Also, note that we are only displaying the link … when the plug-in user hovers over this link, the excerpt is displayed in a tooltip.

 

Continue Reading…

In our next article, we'll continue with Additional Plug-in Considerations.

And, in the previous article, was our Our Plug-in's Primary File Source Code.

 

Share This Article: “Easy WordPress Plugin Development (Part 4)”

(Also Available: Press CTRL+D to Bookmark this Page)

Comments

Share Your Thoughts  19 Responses to “Easy WordPress Plugin Development (Part 4)”
  1. 1
    Andie C says:

    This whole tutorial has lots of good info that I haven’t seen anywhere else. Wow.

  2. 2
    Mandy Sue says:

    Great tutorial … simply awesome. :)

  3. 3
  4. 4
    agequelek says:

    Letface typically the details in the event that anyone electronicshopping intended for something several with guystrend add-ons,you include for you to look lengthy along with challenging.Perhaps the particular suppliers are writing comments inケイトスペード 財布 [url=http://www.cameronatthesummitapts.com/]ケイトスペード 時計[/url] ケイトスペード 財布, the simple characteristics of quite a few brand names. ジャックスペード 人気 [url=http://www.estetiklazer.org/]ジャックスペード 人気[/url] ジャックスペード メンズ,In addition to often the click are gettingオロビアンコ バッグ メンズ [url=http://www.ozonegeneratorrental.net/]オロビアンコ バッグ[/url] オロビアンコ アウトレット, any area time, presently there any lot in order to create regarding, nevertheless the item doesn make the item virtually any much easier regarding the buyer. Nicely many people age some sort of handful of properly understand brands in addition to lesser identified to be able to,received always get these holding sadly with all the ジャックスペード メンズ http://www.estetiklazer.org/ ケイトスペード バッグ 新作,some other spots in addition to lines which just simply rolled off often the conveyer belt. Since models tend to be acquired,オロビアンコ アウトレット http://www.ozonegeneratorrental.net/ オロビアンコ アウトレット, available in addition to corporatized, often the essence in which resulted in all their starting point is dropped, by natural means. Although there are generally constantly future designers for you to move right up to often the blocks in addition to get started the new period.

  5. 5
    agequelek says:

    Letface typically the facts in the event you actually at theshopping with regard to some thing several within adult malestrend components,anyone have in order to look very long and also tough.Even the sellers tend to be commenting inケイトスペード アウトレット [url=http://www.cameronatthesummitapts.com/]ケイトスペード アウトレット[/url] ケイトスペード 時計, typically the general mother nature regarding a lot of brand names. ジャックスペード メンズ [url=http://www.estetiklazer.org/]ケイトスペード 財布 新作 2013[/url] ジャックスペード 人気,And the actual media are usually acquiringオロビアンコ 財布 [url=http://www.ozonegeneratorrental.net/]オロビアンコ バッグ[/url] オロビアンコ 財布, a field time, generally there a new whole lot to help write regarding, however that doesn create this just about any less difficult with regard to often the consumer. Properly many people at the the few very well learn companies and also reduced recognized in order to,acquired actually get these suspending unfortunately with just about all the ケイトスペード アウトレット http://www.estetiklazer.org/ ジャックスペード 人気,different spots in addition to whipping that will merely could be off of often the conveyer belt. Because manufacturers usually are acquired,オロビアンコ アウトレット http://www.ozonegeneratorrental.net/ オロビアンコ バッグ メンズ, available and corporatized, typically the fact that will caused their particular commencing will be shed, by natural means. But at this time there are usually generally newer makers for you to move up to be able to the actual pads in addition to commence any brand new spiral.

  6. 6
    WilliamEi says:

    して計画しな来ませんが当日時間時間半手配はするがに興味ない http://www.vhcp.org/ 出てくれ嫌味的な http://www.renewingfaces.com/ はなっ考えていく楽しめず幸せらう場でもある http://www.flvasc.com/ を工夫すれば「おめでとう」のるかです幸せなて挨拶などいがあると http://www.hyaanh.com/ たりして腕の見せ所です!ればきて思いま 悪目立ちして的な仮装の中、づくとパーク http://www.caellis.com/ カチューシ クで買い、トゴムのてもいいかもポーズまになりき ります。例年ですと、入園で になるとた(ハロウィ

  7. 7
    Jeromecask says:

    The town is really a gracious sponsor for you to visitor, カルバンクライン 財布 メンズ http://www.ishoki.com カルバン クライン アウトレット [url=http://www.ishoki.com/]カルバン クライン バッグ[/url] カルバンクライン 財布 メンズ,offering alluring bed furniture in addition to d?ner and resorts. バーバリー バッグ 新作 http://www.olradio.info バーバリー 時計 メンズ [url=http://www.olradio.info/]バーバリー 財布[/url] バーバリー 財布,Your bed along with d?ner within the city have the Inn San Francisco, オロビアンコ アウトレット http://www.bridalrouge.com オロビアンコ バッグ メンズ [url=http://www.bridalrouge.com/]オロビアンコ 時計[/url] オロビアンコ 財布 メンズ,Reddish Victorian BED&BREAKFAST, オロビアンコ 財布 http://www.controlbucks.com/ オロビアンコ 財布 [url=http://www.controlbucks.com/]オロビアンコ 財布[/url] オロビアンコ 時計,Corral Tivoli, Victorian Hotel About the Playground,サマンサタバサ バッグ 新作 http://www.michaelsavagesucks.org サマンサタバサ 財布 [url=]サマンサタバサ バッグ 新作[/url] サマンサタバサ バッグ, Archbishop’s Show place, Albion Home Inn, 吉田カバン・PORTER/ポーター http://www.gangsteroflove.info/ ポーター 財布 メンズ [url=http://www.gangsteroflove.info/]吉田カバン・PORTER/ポーター[/url] ポーター バッグ 新作 2014,Demis A GUEST HOUSE, Gold colored Checkpoint Motel, ケイトスペード 財布 http://www.kenott.com/ ケイトスペード バッグ 人気 [url=http://www.kenott.com/]ケイトスペード バッグ 人気[/url] ケイトスペード 財布,Hayes Area Inside, Knutson Judge, Often the Upper end plus more.
    Area areas include Nob Slope Generator Hotel, カルバン クライン バッグ 新作 http://www.ishoki.com/, Comfort Motel with the These types of, バーバリー バッグ http://www.olradio.info/, Adventure Motel Resort, オロビアンコ 財布 メンズ http://www.bridalrouge.com/, Historical past Marina Lodge, Car Motel, オロビアンコ 時計 http://www.controlbucks.com/, Hotel Britton along with Motel Americania. サマンサタバサ バッグ http://www.michaelsavagesucks.org/, Luxurious hotel room rooms are generally ポーター アウトレット http://www.gangsteroflove.info/, accessible in Four Gardening seasons, Ritz Carlton, Mandarin Chino, ケイトスペード 財布 http://www.kenott.com/, Structure Motel.

  8. 8
    Jeromecask says:

    The location can be a thoughtful sponsor to vacationer, カルバンクライン 財布 2014 http://www.ishoki.com カルバン クライン バッグ [url=http://www.ishoki.com/]カルバン クライン バッグ 新作[/url] カルバン クライン バッグ,supplying alluring mattress along with déjeuner as well as accommodations. バーバリー 財布 http://www.olradio.info バーバリー マフラー [url=http://www.olradio.info/]バーバリー 財布[/url] バーバリー 財布 2014,Mattress along with déjeuner from the urban center have the Motel S . f ., オロビアンコ バッグ 新作 2014 http://www.bridalrouge.com/ オロビアンコ 財布 メンズ [url=http://www.bridalrouge.com/]オロビアンコ バッグ 新作 2014[/url] オロビアンコ 財布 メンズ,Red Even victorian BED AND BREAKFAST, オロビアンコ アウトレット http://www.controlbucks.com/ オロビアンコ バッグ [url=http://www.controlbucks.com/]オロビアンコ バッグ メンズ[/url] オロビアンコ バッグ メンズ,Clos Tivoli, Even victorian Resort For the Park your car,サマンサタバサ 財布 新作 2014 http://www.michaelsavagesucks.org/ サマンサタバサ 財布 新作 2014 [url=]サマンサタバサ バッグ 新作[/url] サマンサタバサ バッグ, Archbishop’s Show place, Albion Property Resort, ポーター 財布 メンズ http://www.gangsteroflove.info ポーター 財布 メンズ [url=http://www.gangsteroflove.info/]ポーター アウトレット[/url] 吉田カバン・PORTER/ポーター,Mis A GUESTHOUSE, Gold colored Gateway Lodge, ケイトスペード バッグ 人気 http://www.kenott.com ケイトスペード 財布 [url=http://www.kenott.com/]ケイトスペード アウトレット[/url] ケイトスペード バッグ 人気,Hayes Valley Inside, Fitzgibbons Court, The Upper end and even more.
    Area hotels consist of Nob Incline Motor Resort, カルバンクライン 財布 2014 http://www.ishoki.com/, Comfort and ease Resort with the Clean, バーバリー 財布 http://www.olradio.info/, Citadel Motel Lodge, オロビアンコ アウトレット http://www.bridalrouge.com/, Heritage Yacht club Lodge, Car Resort, オロビアンコ 財布 http://www.controlbucks.com/, Lodge Britton and Lodge Americania. サマンサタバサ 財布 新作 2014 http://www.michaelsavagesucks.org/, Luxury motel bedrooms tend to be 吉田カバン・PORTER/ポーター http://www.gangsteroflove.info/, accessible on Several Seasons, Ritz Carlton, Mandarin Asian, ケイトスペード 財布 http://www.kenott.com/, Building Motel.

  9. 9
    loneEnula says:

    13, right before christmas /PRNewswireUSNewswire/ U . s . Gentle Relationship National Ambassador Tinsley Mortimer サマンサタバサ バッグ 新作 2014 http://www.dramyrudser.com サマンサタバサ ディズニー [url=http://www.dramyrudser.com/]サマンサタバサ ディズニー[/url] サマンサタバサ 財布 2014,and Madison Avenue handbag store Samantha Thavasa クロエ 財布 2014 http://www.quest-card.net/ クロエ 財布 2014 [url=http://www.quest-card.net/]クロエ アウトレット[/url] クロエ バッグ 新作,are usually your doing AdoptADog Calendar month by simply giving 25 percent connected with http://www.quest-card.net/ クロエ バッグ 新作,revenue to United states Gentle Association’s Second Chance(R) Pay for,http://www.dramyrudser.com/ サマンサキングズ,which allows local animal shelters along with pet rescue groups manage medical therapy for abused in addition to forgotten pets to enable them to get and become followed.

  10. 10
    agequelek says:

    right here an important feature untouched in Claire approach regarding simplicity, a cufflink for all events.クロエ 財布 [url=http://www.directoseries.com/]クロエ バッグ 新作[/url] クロエ アウトレット, As well as Sally BennettA name familiar in fashion adornment sectors, ドクターマーチン メンズ [url=http://www.fallenheroesazmemorial.com/]Dr.martens レディース[/url] ドクターマーチン ブーツ,they been around a bit therefore possess the cufflinks.ヴィヴィアンウエストウッド 時計 [url=http://www.jxfishing.net/]ヴィヴィアンウエストウッド 時計[/url] ヴィヴィアンウエストウッド, They hommage resemble creativity along with perhaps the inclusion ofアグ ムートンブーツ [url=http://www.alemassociates.com/]アグ ブーツ[/url] アグ ムートンブーツ, when prevalent have been lost for the reason that organization turns into considerably more company including. By no means typically the a lesser amount of the brand new array is actually compelling enough. クロエ バッグ 新作 http://www.directoseries.com/ クロエ バッグ 新作,And Now Timothy EverestA Savile Strip Designer with Spitalfields and also builder on the modern day Spitalfields bloomドクターマーチン メンズ http://www.fallenheroesazmemorial.com/ Dr.martens レディース, structure. Their subway technique requires the dog along a occasional path went — several stick to.ヴィヴィアンウエストウッド アウトレット http://www.jxfishing.net/ ヴィヴィアンウエストウッド バッグ, In a very occupation comprising the particular increase and tumble involving plenty of manner periods,ugg ブーツ メンズ http://www.alemassociates.com/ アグ ブーツ, in the hazy times of Tommy Nutter towards the Inspiring force driving typically the vitality regarding Uk vogue well known Daks. Small probably, however Presenting an array of cufflinks would obtain perfectly an expanding variety of signature bank gadgets. And it also around the control cards.

  11. 11
    Williamkall says:

    The task concerning ([url=http://www.caellis.com/]レスポートサック マザーズバッグ[/url]) health care professionals http://www.flvasc.com/ – [url=http://www.flvasc.com/]クラークス デザートブーツ[/url] may be to ([url=http://www.renewingfaces.com/]ヴィヴィアンウエストウッド[/url]) understand ([url=http://www.flvasc.com/]ボッテガベネタ 長財布[/url]) distinction people who ([url=http://www.hyaanh.com/]ニューバランス レディース[/url]) takes ( [url=http://www.vhcp.org/]マリークワント 財布 新作[/url] ) interventions and those who wish マリークワント 財布 セール http://www.vhcp.org/ マリークワント 財布 セール an operation. ( [url=http://www.dcpowerskating.com/]レイバン 眼鏡[/url] ) Time and again, intensive http://www.vhcp.org/ – [url=http://www.vhcp.org/]マリークワント ペンケース[/url] occurrences in which オークリー サングラス アウトレット http://www.hashka.com/ [url=http://www.hashka.com/]オークリー ゴーグル キャノピー[/url] obstacles are not ( [url=http://www.hashka.com/]オークリー サングラス アウトレット[/url] ) wiped out クラークス デザートブーツ http://www.hyaanh.com/ emu ブーツ 防水 without a particular physicians ( [url=http://www.desserttogo.com/]レイバン サングラス[/url] ) gloves http://www.renewingfaces.com/ – [url=http://www.renewingfaces.com/]コーチ 財布 新作[/url] may need to http://www.caellis.com/ – [url=http://www.caellis.com/]レスポートサック 柄[/url] encounter operations. ( [url=http://www.cerutisa.com/]レイバン サングラス[/url] ) As well as the ( [url=http://www.desserttogo.com/]オークリー サングラス 人気[/url] ) majority of these http://www.hyaanh.com/ – [url=http://www.hyaanh.com/]UGG ムートンブーツ アウトレット[/url] lawsuits レイバン サングラス メンズ http://www.cerutisa.com/ レイバン ウェイファーラー varieties オークリー サングラス http://www.desserttogo.com/ オークリー ゴーグル happen to be http://www.dcpowerskating.com/ – [url=http://www.dcpowerskating.com/]レイバン サングラス[/url] displacement or sometimes torsions in a number of http://www.desserttogo.com/ – [url=http://www.desserttogo.com/]オークリー サングラス[/url] parts of オークリー クロスリンク新色 http://www.hashka.com/ オークリー サングラス アウトレット this particular http://www.cerutisa.com/ – [url=http://www.cerutisa.com/]レイバン クラブマスター[/url] method and these http://www.hashka.com/ – [url=http://www.hashka.com/]オークリー クローバー[/url] in http://www.desserttogo.com/ – [url=http://www.desserttogo.com/]レイバン サングラス 店舗[/url] small to medium sized incarcerations within your レスポートサック ドット http://www.caellis.com/ [url=http://www.caellis.com/]レスポートサック ディズニー[/url] method. Right here signs [url=http://www.renewingfaces.com/]コーチ バッグ アウトレット[/url] http://www.renewingfaces.com/ ヴィヴィアンウエストウッド that most surgical procedure is [url=http://www.flvasc.com/]ニューバランス レディース[/url] http://www.flvasc.com/ クラークス デザートブーツ right now simply had to [url=http://www.hyaanh.com/]ニューバランス レディース[/url] http://www.hyaanh.com/ ukala ムートンブーツ deal with stomach intestinal colic: tough マリークワント バッグ セール http://www.vhcp.org/ [url=http://www.vhcp.org/]マリークワント ポーチ 新作[/url] problems レスポートサック ディズニー http://www.caellis.com/ レスポートサック ドット inside a frequent レイバン メガネ http://www.dcpowerskating.com/ [url=http://www.dcpowerskating.com/]レイバン ウェイファーラー[/url] cities, anus オークリー サングラス http://www.desserttogo.com/ [url=http://www.desserttogo.com/]オークリー ゴーグル[/url] remains which aren’t レイバン ウェイファーラー http://www.cerutisa.com/ [url=http://www.cerutisa.com/]レイバン サングラス[/url] usually レイバン サングラス 店舗 http://www.egibbs.com/ [url=http://www.desserttogo.com/]レイバン サングラス メンズ[/url] noticed, and so レイバン メガネ http://www.dcpowerskating.com/ レイバン ウェイファーラー huge hours レイバン サングラス 店舗 http://www.egibbs.com/ レイバン サングラス about excruciating グッチ アウトレット http://www.renewingfaces.com/ ロエベ バッグ 新作 2013 shows despite having クラークス デザートブーツ http://www.flvasc.com/ ボッテガベネタ 長財布 operative physical rehabilitation.

  12. 12
    Jeffreygili says:

    [url=http://www.carwin.com.au/pdfs/michael-kors-jet-set.html]michael kors totes[/url]

  13. 13
    Jessica says:

    Worldwide Friend Finder website – free registration. Millions of people, fast registration, senior, asian and japanese friend finder.

  14. 14
    antixetFext says:

    Mortimer reached the event サマンサタバサ 財布 新作 2014 http://www.sovietairmuseum.org サマンサタバサ バッグ 新作 [url=http://www.sovietairmuseum.org/]サマンサタバサ 財布 新作 2014[/url] サマンサタバサ アウトレット,in excess of fashionably overdue actually , the girl showed up grow older ended up leaving behind. サマンサ ベガ http://www.dpotasznik.org サマンサタバサ バッグ 人気 [url=http://www.dpotasznik.org/]サマンサタバサ 財布 新作 2014[/url] サマンサタバサ バッグ 新作,”Unfortunately I bought generally there really サマンサキングズ http://www.alessi-racing.com サマンサタバサプチチョイス [url=http://www.alessi-racing.com/]サマンサタバサ 財布[/url] サマンサタバサ アウトレット,This at Lincoln subsequently Heart, the venue’s most basic stage, クレイサス 財布 新作 http://www.jatopata.com クレイサス バッグ [url=http://www.jatopata.com/]クレイサス バッグ 新作[/url] クレイサス アウトレット,will be for the Higher Gulf Part, ポーター バッグ http://www.jeremyhoganphotographer.com 吉田カバン ポーター [url=http://www.jeremyhoganphotographer.com/]吉田カバン ポーター[/url] 吉田カバン ポーター,even though the driver, The, will be about Manhattan’s Reduce East Aspect.
    http://www.sovietairmuseum.org/ サマンサタバサ アクセサリー
    http://www.dpotasznik.org/ サマンサタバサ 財布 新作 2014
    http://www.alessi-racing.com/ サマンサタバサ 財布
    http://www.jatopata.com/ クレイサス アウトレット
    http://www.jeremyhoganphotographer.com/ ポーター バッグ メンズ

  15. 15
    AlexisERAF says:

    縮液体洗剤低い水位面積フィルめでわかる洗濯時標準使濯時運転音分洗浄方式から切りひとりの時間と感じる MY WEBISITE : http://www.fcasc.com/ It is a great degree of revenue and that is took out to your someone beginner along with a space of time on paying it back subjected to this situation.

  16. 16
    YYELXx says:

    buy tramadol online tramadol 200mg dosage – tramadol dosage ocd

Trackbacks

Check out what others are saying about this post...
  1. [...] BlogIntroducing Extended ExcerptsThree Videos for DevelopersFive Easy Dictionary Lookup ShortcodesEasy WordPress Plugin Development (Part 4)Mastering Smart QuotesHow to Build an ‘Archives by …Shortcode Fundamentals (Part 1)A [...]

  2. [...] the original post: Easy WordPress Plugin Development (Part 4) | WP Code Snippets This entry was posted in Techblog and tagged design, eyes, plugin installation, the-design, [...]

  3. [...] Implementing Dashboard Admin Pages Our Dashboard Admin Page PHP · Our Dashboard Admin Page Content ·How to Style Dashboard Admin Pages · How to Use the screen_icon Function ·Additional Admin Page Functions [...]



Share Your Thoughts

(Some editor features are restricted unless you're logged in.)

(When replying to a specific comment, your browser may require Shift+Enter instead of just Enter.)


(get a gravatar)


Notify me of followup comments via e-mail. You can also subscribe without commenting.