WordPress Welcome Panel in your theme or plugin

Make a modern panel to show your WordPress product features and updates
Share this post and Be Happy!

Since WordPress 3.3 there is a new admin feature in WP admin dashboard named “Welcome Panel”, looks great and modern! As WP Pointers, the Welcome panel is for welcoming brand-new users and shows them main info and new features of the product. I think the own Welcome Panel will be a good presentation for your product. WordPress developers tells about WordPress, but we want to make it for our WordPress product (plugin/theme). But WP Team didnt create an API for this feature, as for the Pointers, so we need to look at their code and write our code.

Ok, Lets start to code our Welcome Panel right. As always, I will write it based on LenSlider plugin code.

1. Files of our plugin/theme to code/edit

So, your product has files such as php-file with functions/methods, lets name it for us as functions.php, also your product needs a js file (basicly on jQuery code, hope so), lets name it as custom.js, php-file with HTML code to output Welcome Panel content (some of developers puts output and functions in one php-file, I think its a bad style), named my-plugin-index.php, and also CSS-file to keep or create own style for panel — style.css. 4 files we need to update.

2. Coding

Because Welcome Panel is for users, we need to add user meta for panel for current user in fuctions.php. But we need to do it only for register_activation_hook function that runs only when plugin is ativated or updated.

09.03.2013 UPD:
Thanks to Franz Josef Kaiser for note about users with min role, but not current user.

So lets make a function in functions.php that will be add/update/delete user meta for all users with some role. We will use role administrator.

Also we need to make a code for deactivation hook and uninstall hook, deativation will return user meta to display panel, uninstall will delete user meta. So lets improve our functions.php

Now lets edit out output php-file: my-plugin-index.php. We will check for user meta and if it exists — panel will be visible.

OK, stop, what we have now:

  1. We’ve created a WP nonce field for secure with name welcomepanelnonce_the_plugin and action the-plugin-welcome-panel-nonce. MY ADVICE: use secure parts for action at all of nonces, use there Authentication Unique Keys and Salts from wp-config.php. For example ‘nonce’.site_url().NONCE_KEY. Nonce is a hidden input with the same CSS id as the name.
  2. We set the own welcome panel id named the-plugin-welcome-panel and WP based CSS class welcome-panel for the right panel visual output.
  3. We set close/dismiss button with class the-plugin-welcome-panel-close

Summary: now we need to set AJAX action on close panel link (edit custom.js and functions.php), also we need to set styles for our CSS classes in style.css. Lets do it.

2.1 AJAX Action for closing panel

close link for wp welcome panelWhen user read panel content (or not — his choice), he can close panel and forget about it. So we need to delete user meta, in our case meta named as the_plugin_welcome_panel

First, lets code back-end AJAX function/method that will dismiss panel for current user. So edit functions.php

Now we ready to write JS/jQuery code for dismiss link click. Our action for AJAX is the_plugin_welcome_panel_close_action (wp_ajax_the_plugin_welcome_panel_close_action without wp_ajax_), request URL is WP-based ajaxurl variable. Lets code custom.js

Detailed view:

  • ajaxurl — WP-based URL with our action after we add_action for function the_plugin_welcome_panel_close
  • action — WP-based key
  • the_plugin_welcome_panel_close_action — our action without wp_ajax_ prefix in add_action
  • welcomepanelnonce_the_plugin — nonce name, used with wp_nonce_field for function check_ajax_referer in the_plugin_welcome_panel_close function
  • jQuery(‘#welcomepanelnonce_the_plugin’).val() — hidden input value for check_ajax_referer param. Nonce has the same CSS id as the nonce name
  • data — success object that creating by wp_die(1) in the_plugin_welcome_panel_close function (wp_die returns if delete_user_meta works right). So if success data must be 1.

2.2 CSS

In our style.css we need to style our dismiss link. I use WP-styled icon xit.gif in wp-admin/images. The relative path to xit.gif maybe another for your plugin directory path!

Share this post and let Your Dreams come true!
About The Author

Hi, I'm Igor, one of many PHP/WordPress developers. I'll try to share here WordPress news and development ideas/hacks here. I'll be glad if you share my texts via socials. Have a good day!

One comment for «WordPress Welcome Panel in your theme or plugin»

Leave a Reply

Your email address will not be published. Required fields are marked *


eight + 9 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

© 2013 LenSlider. All rights reserved.