Chapter 9 185 Getting started You need to have a basic theme containing a functions.php le, and a sidebar le such as sidebar.php created for this recipe. You also need to know where you would like to place the listing of the most discussed authors. In this example, we will be displaying the data in a sidebar. How to do it First, we need to create a custom template tag. We'll call the template tag get_most_ discussed_authors , and have it accept a single parameter that determines the number of results to return. Open or create your theme's functions.php le, and dene the function as follows: function get_most_discussed_authors($limit = 3) { global $wpdb; return $wpdb->get_results( $wpdb->prepare( "SELECT COUNT({$wpdb->comments}.comment_ID) as number_comments, {$wpdb->users}.ID as user_ID FROM {$wpdb->comments}, {$wpdb->users}, {$wpdb->posts} WHERE {$wpdb->users}.ID = {$wpdb->posts}.post_author AND {$wpdb->posts}.ID = {$wpdb->comments}.comment_post_ID GROUP BY {$wpdb->users}.ID ORDER BY number_comments DESC LIMIT %d", $limit)); } Now we need to use this function to display information to visitors. Borrowing from the recipe Listing all published authors on a site, we put the following code in one of our sidebars: <ul> <li>Most Discussed Authors <ul> <?php $discussed = get_most_discussed_authors(); foreach($discussed as $item) { $user_ID = $item->user_ID; $num_comments = $item->number_comments; $url = get_author_posts_url($user_ID); ?> <li> <a href="<?php echo $url; ?>"> <?php echo get_the_author_meta ('display_name',$user_ID); ?> Showing Author Information 186 <?php printf( _n ( '%d comment', '%d comments', $num_comments ), $num_comments ); ?> </a> </li> <?php } ?> </ul> </li> </ul> Save the le, and then upload it to the current theme folder on your server. If you've done everything correctly, you should have an output that looks something like the following screenshot of the sidebar: How it works As with the previous two recipes, we've created a template tag that basically acts as a delegate for a raw SQL call, by using the $wpdb object that WordPress provides. In this recipe, the get_most_discussed_authors function calls the wpdb class's get_results method. This method returns an array of objects, including the authors, their related posts, and the comments attached to those posts, formed from the rows returned from a database call. In our custom function, each item returned in the array has two properties: user_ID and number_comments. When iterating over the results from our call to get_most_discussed_ authors , we use these two properties when displaying the nice list of author names and the amount of comments that their posts have received. See also Listing all published authors on a site. Chapter 9 187 Adding a custom user eld to display an author's Twitter link We can use the data that describes the author, their "metadata", to display a variety of information, in most cases, the same as that retrieved by using $authordata or user_ data , as seen in previous examples in this chapter. However, sometimes a plugin gathers additional custom metadata such as an IM username or a Twitter name. In that situation, applying a special template tag called the_author_metadata to an author page is very useful. In this example, we will create a custom user eld for the user prole page in the WordPress control panel, and then use the Twitter metadata that it provides to display the author's Twitter username on the author page. Getting started You will need an author.php le in a modern 2.9 compatible WordPress theme, and a Twitter account (www.twitter.com). How to do it Open up your functions.php le and insert the following code, in order to create the custom eld: add_action( 'show_user_profile', 'my_show_extra_profile_fields' ); add_action( 'edit_user_profile', 'my_show_extra_profile_fields' ); function my_show_extra_profile_fields( $user ) { ?> <h3>Extra profile information</h3> <table class="form-table"> <tr><th><label for="twitter">Twitter</label></th> <td> <input type="text" name="twitter" id="twitter" value= "<?php echo esc_attr( get_the_author_meta ( 'twitter', $user->ID ) ); ?>" class="regular-text" /> <br /> <span class="description">Twitter username</span> </td> </tr> </table> <?php } Showing Author Information 188 Now we need to insert code into functions.php so that the data entered into the custom eld will be saved. Enter the following code directly below the code in step 1: //save the custom field add_action( 'personal_options_update', 'my_save_extra_profile_fields' ); add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' ); function my_save_extra_profile_fields( $user_id ) { if ( !current_user_can( 'edit_user', $user_id ) ) return false; update_usermeta( $user_id, 'twitter', $_POST['twitter'] );} Save the functions.php le, and then upload it to your server. You can now see the custom eld area within your author prole, and can use it. It should look like the example shown in the screenshot below: Next, a function to get the Twitter ID from the user prole needs to be created. Insert the following code into functions.php: //author box function function my_author_box() { ?> <div class="author-profile vcard"> <?php if ( get_the_author_meta( 'twitter' ) ) { ?> <p class="twitter clear"> <a href="http://twitter.com/<?php the_author_meta ( 'twitter' ); ?>" title="Follow <?php the_author_meta ( 'display_name' ); ?> on Twitter"> Follow <?php the_author_meta ( 'display_name' ); ?> on Twitter </a> </p> <?php } // End check for twitter ?></div><?php } Chapter 9 189 Finally, we need to place a tag in author.php to call the my_author_box() function and display the Follow on Twitter link: <div id="authorinfo"> <strong>Author Email:</strong> <a href="mailto:<?php echo antispambot($curauth->user_email); ?>">Contact Author</a> <?php my_author_box(); ?> </div> Save the functions.php le and the author.php le, and then upload them to your server. View the author page in your browser, and you should see a Follow link similar to the one shown in the screenshot below: How it works First, the add_action( 'show_user_profile', 'my_show_extra_profile_ fields' ); and add_action( 'edit_user_profile', 'my_show_extra_ profile_fields' ); code was added to functions.php to allow a new custom user eld to be created and edited as a part of the user prole form. Next, the form eld and labels were created within the function my_show_extra_profile_fields( $user ). This added an input box label and description to the WordPress control panel's user prole screen. We then added code to functions.php le, in order to save any data entered into the custom eld. We then created a function called my_author_box() that used the metadata function get_author_meta() to retrieve data stored in the WordPress database. The metadata function the_author_meta() displayed the display name and Twitter username meta information retrieved from the user prole. Finally, we added a tag to author.php, in order to call the my_author_box function and print the Follow on Twitter link on the screen. Showing Author Information 190 There's more… You can use the previous example to create custom elds to display other information, including linking to podcasts, bookseller sites, and more. Displaying an image next to the 'Follow' link If you want to create a custom image, or use the default Twitter follow icon, you can add it to the above code by adding a link to the image in the author box function: function my_author_box() { ?> <div class="author-profile vcard"> <?php if ( get_the_author_meta( 'twitter' ) ) { ?> <p class="twitter clear"> <img src="/images/twitter-link-logo.png"alt="twitter logo"/> <a href="http://twitter.com/<?php the_author_meta ( 'twitter' ); ?>" title="Follow <?php the_author_meta( 'display_name' ); ?> on Twitter">Follow <?php the_author_meta ( 'display_name' ); ?> on Twitter</a> </p><?php } // End check for twitter ?> </div><?php } 10 Adding JavaScript Effects In this chapter, we will cover: Linking to your theme's JavaScript les directly Adding JavaScript les to your theme programmatically Adding a bundled library to your theme programmatically Creating a featured post slider Making sidebar widgets toggle-able Adding a font-size toggle Introduction In the last couple of years, web users have become quite a bit more sophisticated. As this happened, many came to expect a certain level of dynamic interaction with a web page. The dynamic element can be many things, the most popular being animating elements and dynamic content loads. Luckily for developers, this rise in interest in dynamic elements coincided with the maturation of JavaScript libraries and techniques. This makes creating fun and useful interactions on your site simpler. To make things even easier for a WordPress developer, the WordPress package comes bundled with many popular JavaScript libraries built-in and ready-to-use. In this chapter, we'll look at how to use those libraries, where they live, and some interesting things that you can do with them in the context of your theme. Adding JavaScript Effects 192 Linking to your theme's JavaScript les directly The easiest way to include JavaScript functionality in your theme is to link directly to the le from the <head> element of your theme. In this recipe, we'll examine how you determine the URL to link to and where to, put the linking element. Getting started You need to have created a WordPress theme that contains at least a style.css le and an index.php le. How to do it First, you're going to create a JavaScript le to link to. Open the folder that your theme lives in, and create a new folder called js. This folder exists for the purposes of organization of your JavaScript les. Inside of the js folder, create a new le called my-theme.js. Open this le for editing, and insert the following test script: /* * Created for test purposes. */ alert('This is a test.'); Now you need to link to the JavaScript le from your theme, to ensure that the script is loaded and run. To do so, open up the theme le where your <head> element is located. This will most likely be header.php. Between the <head> and </head> tags, insert a new line with the following content: <script type="text/javascript" src="<?php bloginfo('stylesheet_ directory'); ?>/js/my-theme.js"></script> After doing this, load your WordPress site with your theme active, and you'll be greeted by a dialog box similar to the one pictured in the screenshot below: Chapter 10 193 How it works There are two possible uses of an HTML script tag. The rst is to add JavaScript directly to a page. This would look something like the following: <script type="text/javascript"> alert('This is a test.'); </script> In this example, the visitor's browser of choice interprets the script as it parses the page, taking whatever action is called for. If you followed along in the example, you noticed that the alert appeared before the rest of the page loaded in the browser, and once the visitor clicked on OK, the alert box disappeared and the page resumed loading. However, in most instances, it is desirable to put JavaScript that is used throughout a site in a separate le that can be used again and again. There are many reasons for this, including smaller overall page size, and the fact that most browsers can—and wil —cache the external le so that it doesn't have to be fetched multiple times for a single site. To specify an external le, we use a <script> tag without any content, and add the src attribute to tell the browser where to nd the le. The browser reads the src attribute and attempts to fetch and parse the le located at the specied URL. In this particular case, the src attribute is dynamically-generated by using the bloginfo function. As reviewed in the recipe Displaying the blog name from Chapter 1, the bloginfo function has a variety of different parameter values that you can use to get different information. Passing stylesheet_directory returns a URL that points to the directory containing your theme's style.css le. The URL will often be something in the form mysite.com/wp-content/themes/my-theme. Please note that no trailing slash is included, so you need to include it yourself if necessary. See also Displaying the blog name Adding JavaScript les to your theme programmatically Although you can certainly link to your JavaScript les directly (and in some cases, you may need to, for one reason or another), the preferred method of generating script tags for your theme is to add references programmatically. This allows for the reuse of popular scripts, and ensures that a script is not linked to twice within the same page. Adding JavaScript Effects 194 Getting started You need to have created a WordPress theme that contains at least a style.css le and an index.php le. Inside the template le containing your theme's <head> tag, you need to call the wp_head function. If you have also completed the previous example, open up the header.php le (or whichever le you placed the <script> tag code in) and remove the code added in the last recipe. How to do it First, you must create a JavaScript le to link to. This le will reside within your theme. Open your theme's folder and create a js folder. Inside the js folder, create a le called my-theme.js. Open the my-theme.js le, and insert the following JavaScript, which will produce an alert dialog box on page load: /* * Created for test purposes. */ alert('This is an enqueue script test.'); Now, open or create your theme's functions.php le. In functions.php, add the following code inside a PHP block: if( !is_admin() ) { wp_enqueue_script( 'my-theme', get_bloginfo('stylesheet_directory') . '/js/my-theme.js' ); } Upload the updated my-theme.js le and functions.php le. Go to your WordPress site with your theme enabled, and you'll be greeted with something like the following screenshot, in your browser: . get_author_posts_url($user_ID); ?> <li> <a href="<?php echo $url; ?>"> <?php echo get_the_author_meta ('display_name',$user_ID); ?> Showing. a part of the user prole form. Next, the form eld and labels were created within the function my_show_extra_profile_fields( $user ). This added an input box label and description to the WordPress. fun and useful interactions on your site simpler. To make things even easier for a WordPress developer, the WordPress package comes bundled with many popular JavaScript libraries built-in and