Chapter 10 205 Theming your slider with Themeroller You can quickly generate great-looking designs for your content slider and other jQuery-based objects, by using Themeroller. Go to http://jqueryui.com/themeroller/ and begin clicking on the color pickers and other tools on the left-hand side of the page to customize the widgets (including a tabbed box) that appear on the right. You can also click on the Gallery link to choose from an already-designed theme. After playing with several of the options, your screen should look similar to the one shown next: Now click on the Download theme button. It will take you to the Build Your Download screen on which you can nalize your choices. Just stick to the default settings, and click on Download on the right-hand side of the screen. A window will appear to verify where you want to save the zipped theme le. Save it locally on your computer. Open the zipped folder and you will nd a complete bundle of sample scripts, CSS theme les, and jQuery JavaScript les. Adding JavaScript Effects 206 Try out the different examples in your favourite HTML editor and browser. All of the examples have an index page that will instantly load them so that you can test their behaviour locally. Be sure to examine the CSS les contained within the /themes/base/ folder, particularly jquery.ui.theme.css. This is where you can experiment by changing colors and other style declarations. Enjoy the many options that jQuery gives you to control the look and behaviour of your interactive page elements. See also Adding JavaScript les to your theme programmatically Making sidebar widgets toggle-able The extensible nature of widgets and sidebars in WordPress opens those items up to a whole range of possibilities when it comes to making them dynamic. One of the easiest and most noticeable things that you can do is to modify your widgets so that users are able to interact with them. Even the rudimentary interaction provided in this recipe can go a long way to increasing user participation with the site that your theme is deployed on. Getting started You need to have a theme created with at least one sidebar registered. How to do it First, you need to change the parameters that you are passing to your sidebar registration function. Find the declaration for your sidebar (usually contained within the functions.php le) and change the code to the following: register_sidebar(array( 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</div></li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2><div>', )); You'll see that this differs from the default WordPress sidebar arguments in that a <div> start tag has been appended to the after_title argument, and a </div> end tag has been prepended to the after_widget argument. Doing this causes all widget contents to be enclosed by a div tag that we can use for manipulation. Chapter 10 207 Now, you need to create the JavaScript code that controls slide toggling. First, create a new folder in the directory containing your theme, called js. In the js directory, create and open a new le called widget-slide-toggle.js. Inside the widget-slide-toggle.js le, put the following code: jQuery(document).ready(function() { jQuery('.widget h2.widgettitle').click(function(event) { event.preventDefault(); jQuery(this).siblings('div:first').toggle(); }); }); Now, to make sure this JavaScript gets run, we need to reference it. Ensure that your <head> tag has a call to wp_head within it, and then open or create your theme's functions.php le. Inside the functions.php le, place the following code: <?php wp_enqueue_script( 'widget-slide-toggle', get_ bloginfo('stylesheet_directory') . '/js/widget-slide-toggle.js', array( 'jquery' ) ); ?> Now, load your WordPress admin panel and put some widgets in the sidebar for your theme. Load any page that displays your sidebar, and click on the widget title for any widget. You'll see the content of the widget slide up or slide down, based on how many times you've clicked on the title. You can see the before and after results in the following screenshot: How it works This is a perfect example of how a little bit of markup and a little bit of JavaScript can make a big difference. First, you added a little bit of extra markup to your theme's sidebar. This markup encloses each widget's content inside an extra <div> position, as a sibling to the widget's title. Adding JavaScript Effects 208 After this, you added a reference to a script that contained a small bit of jQuery. The jQuery contains a statement binding an event handler to the click event on each widget's title. When a user clicks on the title of a widget, the specied event handler res, causing the browser to toggle the state of the rst div adjacent to the title. Because of the extra markup that we registered with the sidebar in the functions.php le, this div is always guaranteed to surround the content of the widget. There's more The sidebar widgets expand again each time the page is reloaded. This is not ideal if you want users to have the satisfaction of seeing their changes persist on the page. Remembering the widget's state As it is currently implemented, the slide toggle only persists during a single page load. If you want to remember the widget's state between page loads, you can take advantage of a great jQuery plugin called jQuery Cookie. Download the jQuery plugin from http://plugins. jquery.com/project/cookie , and put the JavaScript le into your theme's js directory. Then place the jQuery Cookie enqueue script below the widget slide toggle enqueue script: wp_enqueue_script( 'jquery-cookie', get_bloginfo('stylesheet_ directory') . '/js/jquery.cookie.js', array( 'jquery' ) ); After enqueuing the Cookie plugin, change the contents of your widget-slide-toggle.js le to the following code: jQuery(document).ready(function() { jQuery('.widget').each(function() { var widgetId = jQuery(this).attr('id'); var slideStatus = jQuery.cookie('slide-status-'+widgetId); if( slideStatus == 'hidden' ) { jQuery(this).find('h2.widgettitle').siblings('div:first').hide(); } }); jQuery('.widget h2.widgettitle').click(function(event) { event.preventDefault(); jQuery(this).siblings('div:first').slideToggle('normal', function() { var widgetId = jQuery(this).parents('.widget').attr('id'); if(jQuery(this).is(':visible')) { jQuery.cookie('slide-status-'+widgetId,'visible',{ path: '/', expires: 10 }); } else { jQuery.cookie('slide-status-'+widgetId,'hidden',{ path: '/', expires: 10 }); } }); }); }); Chapter 10 209 Now, when a user toggles a widget's state and returns to the page later, the state will be restored. That is, if the user hid the widget, it will be hidden on page load. Otherwise, the widget will be shown. Adding a font size toggle Using JavaScript to create fancy animations and add unnecessary but interesting interaction is great. However, the real boon comes when you use it to provide users with something that helps them to use your site, and that emphasizes your content. How to do it First, you need to decide what text you want to be able to resize. For every element that you want resizable text in, add the text-resizable class. In this example, let's set the post content to be resizable, within the WordPress loop in the index.php le, placing the font-resizable opening div tag just above the entry-content opening div tag, then closing both tags, as shown in the following code: <! make the content entry text resizable > <div class="font- resizable"> <div class="entry-content"> <?php the_content( __( 'Read More <span class="meta-nav">»</ span>', 'sandbox' ) ) ?> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div><! end post content entry > </div><! #text resize > In addition, you need to create two links with the IDs increase-font-size and decrease-font-size. You can put these links anywhere on your page. We will place ours just below the opening content div tag, within the index.php le. Do not place this within the WordPress loop. <p>Font Size: <a id="increase-font-size" href="#">[+]</a>/<a id="decrease-font- size" href="#">[-]</a> </p> Let's have a quick preview of what the font resize links will look like once they are live on the site: Adding JavaScript Effects 210 Now you need to create the JavaScript code that controls text resizing. First, create a new folder in the directory containing your theme, and call it js. Inside the js directory, create and open a new le called text-resize.js. In the text-resize.js le, put the following code: jQuery(document).ready(function() { jQuery('#increase-font-size').click(function(event) { event.preventDefault(); jQuery('.font-resizable').each(function() { changeFontSize(this, change); }); }); jQuery('#decrease-font-size').click(function(event) { event.preventDefault(); jQuery('.font-resizable').each(function() { changeFontSize(this, -change); }); }); }); var min = 8, max = 32, change = 2; function changeFontSize(element, value) { var currentSize = parseFloat(jQuery(element).css('font-size')); var newSize = currentSize + value; if (newSize <= max && newSize >= min) { jQuery(element).css('font-size', newSize + 'px'); } } Now, to make sure that this JavaScript gets run, we need to reference it. Ensure that your <head> tag has a call to wp_head within it, and then open or create your theme's functions.php le. Inside the functions.php le, place the following code: wp_enqueue_script( 'text-resize', get_bloginfo('stylesheet_directory') . '/js/text-resize.js', array( 'jquery' ) ); Chapter 10 211 Then load your WordPress site and click on the [+] or [-] links. You'll see the text resize appropriately for every element with the appropriate class, as seen in the following screenshot: How it works… In this example, we used jQuery to resize the text within posts on the home page. Whenever the [-] or [+] font size links were clicked, the text resized from 8 to 32 pixels in increments of 2 pixels. First, we identied an area that we wanted to be resizable—in this case, any post content text on the home page—and created a div tag called text-resizable to wrap around the entry-content tags. This created a container that jQuery could then affect. Next, we added our font resize links to index.php, just below the main opening content div, outside of the WordPress post loop. This placed the links near the top of the page, a location where people are used to seeing resizable text links. Then we created a JavaScript le named text-resize.js to contain the functions for the resize actions. The (document).ready(function() veried that the page was loaded, and then allowed the text size to be decreased or increased. Next, the variable var min was created and dened, to control the range of font size values. The function changeFontSize(element, value) accepted two parameters: element and value. This allowed the function to determine what to resize and what size the element should become. Finally, we referenced the text-resize.js script within functions.php, by using wp_enqueue_script. This contained the parameter array('jquery') that also indicated to WordPress that the text-resize script had a dependency on the jQuery library in order for it to function properly, and allowed us to make sure that the jQuery library was loaded to handle any hard labor. Once the les were all uploaded, clicking on the text resize links clearly caused all of the text within post entries on the home page to resize. 11 Advanced WordPress Themes In this chapter, we will cover: Adding a theme options page Allowing for multiple theme color schemes Changing the default Gravatar icon for your theme Registering shortcodes for your theme Localizing your theme Displaying information based on the logged-in user's role Packaging your theme for distribution Uploading your theme to the WordPress.org theme repository Introduction Creating a basic WordPress theme is great. You learn about The Loop, nd the appropriate template tags to display the information that you want, and then you write some HTML and CSS to tie it all together. However, there comes a time when you're ready to take your themes to the next level. That is what this chapter is all about. In this chapter, you'll learn how to provide your theme's users with options about what is displayed and how is displayed. You'll also learn about localizing your theme for an international audience and showing users information based on their current role. Advanced WordPress Themes 214 Finally, this chapter covers the essentials for packaging and distributing your theme via the WordPress.org theme repository. You'll need to follow a few simple steps to make sure that your theme is accepted and that it provides users with the best possible experience. Adding a theme options page As a theme developer, you have to make a lot of choices when you create a theme. What text should be displayed in certain locations? Will that text always be appropriate? How many posts should you display in a featured item carousel? How many levels should the nested navigation menu have? Part of being a good developer is knowing when to make these decisions for your theme's users, and when to give the users a choice. Many WordPress users are not comfortable with editing PHP les, so you need to provide some other way for users to make these choices. The best way, in the context of a WordPress theme, is to provide the users with a theme options panel. Getting started You need to have created a WordPress theme containing at least a style.css le and an index.php le. How to do it First, you need to decide what choice you want to give your users. In this recipe, we're going to assume that you want users to be able to change the color of the name of their site, which is located in the site header. Next, you have to create the options page that lets users make their choice and save it. Open your theme's directory and create a new directory inside it called admin. Inside the admin directory, create a le called options.php. Open the options.php le, and insert the following code: <?php $settings = $this->get_settings(); ?> <div class="wrap"> <h2><?php _e('My Theme Options' ); ?></h2> <?php if('1'==$_GET['updated']) { ?> <div id="my-theme-options-updated" class="updated fade"><p><?php _e( 'Settings saved!' ); ?></p></div> <?php } ?> <form method="post"> . current role. Advanced WordPress Themes 214 Finally, this chapter covers the essentials for packaging and distributing your theme via the WordPress. org theme repository. You'll. nested navigation menu have? Part of being a good developer is knowing when to make these decisions for your theme's users, and when to give the users a choice. Many WordPress users are not. users to make these choices. The best way, in the context of a WordPress theme, is to provide the users with a theme options panel. Getting started You need to have created a WordPress theme containing