Hello, Dolly!

,

Brian Kernighan actually wrote first “hello, world” as part of the documentation of BCPL programming language developed by Martin Richards. Since then, it becomes a tradition for every programming language’s getting started example. It can also be used as sanity test to make sure that a computer language is correctly installed.

“Hello, Dolly!” can be called “hello, world” for WordPress Plugin Developer. It came pre-installed with WordPress. Once, activated, it will display a line from the lyrics of Hello Dolly song which is most famously performed by Louis Armstrong.

So, let’s dig into “Hello, Dolly!” plugin. I am assuming that you might have basic knowledge of HTML, CSS and php.

As you can see in above GIF, once plugins is activated, it chooses a line from lyrics and then displays on Admin dashboard. This post is not going to cover each and every line of the plugin as it is beyond the scope of the post. You can see full source-code of the plugin at https://github.com/wp-plugins/hello-dolly

Let’s start with design part. As you are aware that to display something on web requires HTML and CSS. In context of our “Hello, Dolly!” plugin, we need to inject CSS into Admin page’s head section. To do so, we need to fire hook called “admin_head”. add_action function provides functionality to add our function to specific hook:

// We need some CSS to position the paragraph
function dolly_css() {
	// This makes sure that the positioning is also good for right-to-left languages
	$x = is_rtl() ? 'left' : 'right';

	echo "
	<style type='text/css'>
	#dolly {
		float: $x;
		padding-$x: 15px;
		padding-top: 5px;		
		margin: 0;
		font-size: 11px;
	}
	</style>
	";
}

// This line will call 'dolly_css' function whenever Admin Dashboard loads/refreshes. It will add contents to Admin page's <head> tag returned by the calling function.
add_action( 'admin_head', 'dolly_css' );

Here, add_action adds ‘dolly_css’ function to ‘admin_head’ action. So, whenever ‘admin_head’ hook (or say event) is fired, ‘dolly_css’ will be fired and it’s result will be added to Admin’s <head> tag.

Now, let’s explore HTML part. In context of this plugin, we want to show song lines on Admin Dashboard load/refresh:

// This just echoes the chosen line, we'll position it later
function hello_dolly() {
	$chosen = hello_dolly_get_lyric();
	echo "<p id='dolly'>$chosen</p>";
}

// Now we set that function up to execute when the admin_notices action is called
add_action( 'admin_notices', 'hello_dolly' );

Here, add_action adds ‘hello_dolly’ function to ‘admin_notices’ hook (or say event). ‘admin_notices’ is called whenever Admin Dashboard loads. So, once dashboard loads or refreshes, our ‘hello_dolly’ is called and it’s response will be passed to Admin page.

I think it is quite easy. You can learn more about actions and filters at https://developer.wordpress.org/plugins/hooks

I recommend to go through all of the parts of following tutorial as well as rtCamps WordPress Training Portal:

Next post is going to be on a surprise plugin! When I started my first portfolio website using WordPress, I did have some issues with media and thus I had a thought to build my own plugin to solve that issue.

Cheers,
Anruag

Leave a comment