This is Part 5 of The Complete Guide To Writing a WordPress Widget Series.
In the last iteration, we setup a functional administration panel for our widget.
That’s not exactly the best looking administration panel, though.
In this iteration, we’ll focus on cleaning up the interface a little bit by including some custom styles and JavaScript.
1. Identifying The Pain Points
As with any project, it’s helpful to know what exactly you’re working on before you step into your IDE. Looking at this widget’s administration panel, there are a few things that I identify as problematic:
- The comment above the check box doesn’t make much sense. We should give some clearer instructions.
- The input field shows regardless of if the custom message option is checked. Really, it should only display if the user has chosen to use a custom message.
- Similarly, the input box should show after the user has saved their option to display a custom message and the page refreshes. We’ll need to handle that case.
Throughout the remainder of this article, we’ll be taking care of the above three points.
We’ll also be using the WordPress API for properly registering our stylesheets and JavaScript source files so that they are imported at the right time and don’t interfere with existing scripts.
2. Registering Styles
First, let’s clean up the messaging on the widget’s admin panel. Rather than providing a generic note about a custom message, let’s be clear in terms of what this widget will do and what option the user has:
Tweet It allows the user to publish your blog’s title and URL via their Twitter account.
Would you rather define a custom message for the widget to publish?
That’s clearer, right? But it still looks pretty rough:
Let’s give this particular message a little bit of its own custom styling.
First, give each of the paragraph elements their own unique classname in the code. Currently, it should look something like this:
[cc lang=”html”]
Tweet It allows the user to publish your blog’s title and URL via their Twitter account.
Would you rather define a custom message for the widget to publish?
[/cc]
Update it to look like this:
[cc lang=”html”]
Tweet It allows the user to publish your blog’s title and URL via their Twitter account.
Would you rather define a custom message for the widget to publish?
[/cc]
Next, open up a new file and introduce the following lines of CSS. Notice that I’m using the classnames that I defined in the previous block of code:
[cc lang=”css”]
.tweet-it-note { font-family: Tahoma, Arial, Sans-serif; font-size: 1em; }
[/cc]
Save the file in the plugin’s CSS directory that we defined in the first article of the series. I called mine tweet-it.css.
After that, we need to update the widget to properly import the stylesheet. I’ll show the code and then explain it. Note that that should be added to the first function in the widget’s source code:
[cc lang=”php”]
function Tweet_It() {
$widget_opts = array(
‘classname’ => ‘tweet-it-widget’,
‘description’ => ‘A simple widget for enabling users to broadcast a message to their Twitter followers that they are reading your blog.’,
);
$this->WP_Widget(‘tweet-it-widget’, ‘Tweet It Widget’, $widget_opts);
if(is_admin()) {
$admin_style_url = WP_PLUGIN_URL . ‘/tweet-it/css/tweet-it.css’;
$admin_style_file = WP_PLUGIN_DIR . ‘/tweet-it/css/tweet-it.css’;
if(file_exists($admin_style_file)) {
wp_register_style(‘tweet-it-styles’, $admin_style_url);
wp_enqueue_style(‘tweet-it-styles’);
}
}
}
[/cc]
The first thing that we’ve done is setup a conditional with the WordPress API to check if the administration panel is displayed by using the is_admin function.
Next, we’ve defined two variables – one for the URL of the plugin and one referencing the path to the file of the plugin.
In the second conditional, we’re checking to see if the file actually exists. If the conditional evaluate’s to true, then we first register the stylesheet using a custom name (here: tweet-it-styles).
Finally, we enqueue the stylesheet using the name we just defined. This is what actually includes the stylesheet on the page.
Adding JavaScript source files is similarly easy, too.
3. Writing Some JavaScript
Before actually writing the JavaScript code that will toggle the input box, let’s outline what exactly the code should do. This is a good practice regardless of what project, language, or platform you’re working in.
- If the checkbox is checked, then we need to display the input field.
- If the checkbox is unchecked, we should clear the input field and hide it.
- This behavior should occur whenever the page loads and whenever the user clicks on the checkbox.
Because we’re going to need to have easy access to the checkbox and input field elements using our JavaScript, it helps to give them unique attributes that make them accessible. The catch is that WordPress allows you to maintain as many instances of a given as you want so we can’t use ID attributes (they are unique, remember)?
There are a number of ways to do this, but I’ve wrapped each element in a div element with a simple classname of “tweet-it-options”:
[cc lang=”html”]
Reader Interactions
There are 3 comments already... Come join us!
Trackbacks
[…] Own WordPress Widget: Tweet It, MockupsWriting Your Own WordPress Widget: Tweet It, Iteration OneWriting Your Own WordPress Widget: Tweet It, Iteration TwoWriting Your Own WordPress Widget: Tweet It, Iteration ThreePreparing The Widget For ReleaseAs with […]
Majid says
firstly it’s pretty to say thanks to this useful tutorial series ..
i am asking about the wordpress functions ( wp_register_style ) & ( wp_enqueue_style )
is the ( wp_enqueue_style ) generate a folder with named ( tweet-it-styles ) or what actually happend ?
give us another example .. plz
Tom McFarlin says
No – it doesn’t create a folder. That’ just a unique key that is used to identify the script you’re registering and enqueuing.