Uncategorized

Creating Named Widgets in WordPress Made Simple

Creating your own widgets in WordPress might seem like a complicated or confusing task but the truth is, it’s easier than you think!

In your the root of your theme directory (ex: wp-content/themes/default), you’ll find a file called “functions.php”, if you do not, create it.

Inside add:

if ( function_exists('register_sidebar') ) {
   register_sidebar(array("id" => "facts_and_stats",
			"name" =>"Facts and Stats"
   ));
}

(all attributes can be found here: http://codex.wordpress.org/Function_Reference/register_sidebar)

In the backend, under “appearance > widgets”, you’ll find all available widgets and all available sidebars. You can drag a widget into the sidebar and customize it.

Then in a template file in your theme, say your “index.php” file, you can call the content of this widget with the following block of code:

< ?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar("facts_and_stats") ) { } ?>

Widgets are wrapped in <li></li> by default, you can custom a group of them with a trick such as the following, where I remove all wrappers for multiple widgets by creating an array setting the before_ and afters_’s to nothing and merge it with the id and name info in another array I create inline.

$widget_args=array(
	'before_widget' => '',
	'after_widget' => '',
	'before_title' => '',
	'after_title' => '',
);
 
if ( function_exists('register_sidebar') ) {
   register_sidebar(array_merge($widget_args,array("id" => "facts_and_stats", "name" =>"Facts and Stats")));
   register_sidebar(array_merge($widget_args,array("id" => "report_card", "name" =>"Report Card")));
}

Another trick I I like to do is add a quick link on the frontend for to the edit page if the user is logged in an has rights to edit widgets:

< ?php if (current_user_can('manage_options')) { echo '<a href="'.get_bloginfo('url').'/wp-admin/widgets.php" title="edit this widget">edit this widget'; } ?>

Resources for Learning About jQuery Functions and a Note About Callbacks

Though it’s still using 1.2.6 (with current jQuery at 1.3.2), visualjquery.com has always been a favorite of mine for it’s simple and elegant layout. Some of the functions leave some documentation to be desired but after working with jQuery for a while, you begin to develop a taste for what is needed. Unfortunately, next to this issue and despite it’s strong layout, there is one other thing this application that takes this application down from strongest candidate. It cannot look into the future and as such, some functions are outright missing.

The jquery API is a somewhat familiar interface, featuring the latest version, the freshest functions and some decent documentation. Another in-depth (but outdated) resource is the old api-browser. Of course, there exists the Main Wiki Documentation, which also provides Alternative Resources. I think I’ll find myself using http://api.jquery.com/ most often despite it lacking the multi-panel style selection. It integrates it’s documentation with jsbin.com for testing / playing with code which is a nice touch.

Now a note about callbacks while we’re on the subject of jQuery. I find myself using them quite often, with ajax specifically. Understanding how to nest functions in jQuery allows you to do more things in terms of user or application response. When using ajax, you’ll often want to fade out content, do some processing, report the data back and have it fade back in nicely rather than a quick blink that can cause discomfort for a user. If you aren’t familiar with a callback, it’s a function that’s executed when the current function finishes.

Below I will break down this common scenario.

You have your HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="my_ajax.js" type="text/javascript"></script>
<style>
#ajax_loader {
  display:block;
  height:90px;
  width:90px;
  background:url('http://imgur.com/KW8ZD.gif') no-repeat 0 0;
}
</style>
</head>
<body>
  <div id="ajax_loader"></div>
  <div id="ajax_content"></div>
  <a href="#" id="my_link">click me</a>
</body>
</html>

your php (or whatever language returning the data file) (my_page.php)

<? echo "hi, I was loaded with ajax!"; ?>

and your javascript (my_ajax.js) that glues them together

// $(function() is shorthand for $(document).ready(function () {
$(function() {
    $("#ajax_loader").hide();
    $("#my_link").click(function() {
        $("#ajax_loader").fadeIn();
        $("#ajax_content").fadeOut();
        $("#content").load("my_page.php",function() {
          $("#ajax_loader").fadeOut();
          $("#ajax_content").fadeIn();
        });
    });
});

Here we can clearly see how all functions are nested into one root, the document ready function. We go two more deep here, using the click event and then the load callback. Many functions allow for callbacks, search the documentation for the best way you think you should be nesting them. I hope this helps to clarify some of the basics in AJAX using jQuery, good luck.

I’ve Got Good Life Hacks On The Way

I’ve been swapped with work and projects recently but I wanted to let you all know I’ll be back with some good life hacks… and maybe a few computer tricks. Stay tuned.