Use jQuery selectors to locate and select elements on the page. jQuery selectors operate much like CSS3 seletors. Start out simple by selecting elements by tag, DOM id, or class name. Then get more advanced and select form elements based on their current state, and complex n-th child selectors. Additional notes: As a result of Drupal 7 using jQuery in no conflict mode, the jQuery object is not automatically assigned to the global $ symbol. The easiest way to get around this in Firebug or Webkit Inspector is to just use jQuery('element'); or do $ = jQuery; and then use the $ as per usual. If you take a look at the JS files in Drupal 7 you'll see that they almost all use an anonymous closure in order to assign the $ variable. Something like the following. (function ($) { // Add your code here and use $ as per usual. })(jQuery);

First look at basic fundamentals of jQuery's syntax and usage. Learn about using the $ function, jQuery selectors for finding elements on the page, creating new DOM elements, and browser detection. In addition to selecting elements on the page we'll introduce the basics of jQuery effects and events. Note: In D7 developers are encouraged to add a jQuery wrapper around JavaScript. (function ($) { // Original JavaScript code. })(jQuery); When using Firebug console you need to use jQuery instead of $. >>> jQuery('.title') Drupal 7 uses jQuery in no-conflict mode meaning you need to wrap your code in an anonymous function and pass the jQuery object into the function. This is a pretty common practice now days and is actually a better way to write jQuery in general rather than always assuming that jQuery is the $ symbol. But, it means in the console you need to use either jQuery('selector) or $ = jQuery;

jQuery makes using Javascript easy. A description of the basic jQuery library, and a brief history of why jQuery exists and how it can be used to simplify development of Javascript for your site.

Use the jQuery plugin system to extend the set of methods available in jQuery beyond those provided by the core jQuery library. See where to find jQuery plugins, and examine a number of the available plugins and when to use them and what to use them for. See how to make use of plugins in your custom jQuery code. Finally, learn how to write your own plugins to extend the basic jQuery functionality.

A brief summary of the material covered in the Introduction to jQuery video series

Overview the Firebug extension for Firefox and how it can be used to aid in the development of Javascript. Real time development and debugging of Javascript.

Learn about using jQuery to apply animation and effects to DOM elements. Show and hide things on the page using the fade, slide, and hide/show methods. Chain multiple effects together to create animations. And use the jQuery .animate() function to preform more complex animations.

Learn how to respond to the actions that a user performs on a page using jQuery events. Attach event handlers to DOM elements and respond to mouse events like click and hover, and keyboard events such as someone pressing or releasing a key. Finally learn about responding to special events that only occur on form elements. This chapter gives a description of each of the available jQuery events and how or when they are triggered. Check out http://quirksmode.org/js/keys.html for more information on compatibility for assigning keyboard events across multiple browsers.

Add a jQuery Javascript file to Drupal following best practice methods for including javascript files on the page. Learn about how your custom jQuery scripts are loaded on to the page, and when they get executed. Introduces jQuery's no-conflict mode and provides some best practice examples for writing your own jQuery files within the context of Drupal as a whole.

Note: To avoid hiding all blocks on your page, target your blocks more specifically. For example, #sidebar .block .content Also, inspect your markup for the existence of a class of title on the h3, which may or may not be applied in your theme. The new example below does not include the title class.

(function($){
  $(document).ready(function(){
    
    $('#sidebar .block .content').hide();
    $('#sidebar .block h3').css('cursor', 'pointer').click(function(){
      $(this).parent().children('.content').slideToggle();
    });

  });
})(jQuery);

Use jQuery to manipulate DOM elements including adding and removing classes to an HTML element, changing the content of an element, wrap a set of elements with a new element, adding new elements to the page using prepend and append methods and the related prependTo and appendTo methods. Use jQuery to manipulate properties height, width, and position of any DOM element. Finally learn how to use jQuery to completely remove selected DOM elements from the page.

Traverse the DOM tree using jQuery to find the children, parents, and other nearby elements of any selected element on the page. Learn how to select an element up the page and reliably locate it's siblings by traversing up the DOM to a parent element and then back down using find. Use additional jQuery methods to filter a list of DOM elements down using find to apply an additional selector to the list, not to filter out elements that do not match a set of criteria and more.

AJAX is one of the main reasons to use a Javascript library such as jQuery. See how simple it is to perform a previously difficult task that required complex browser specific code to preform reliably and was prone to simple mistakes. Implement basic AJAX requests using jQuery's built in methods which make it extremely simple to send an asynchronous request to a server, gather the returned data, and insert it into the page.

Example code:

// AJAX Live Function
$('.content p').live('mouseenter mouseleave',
  function() {
    $(this).toggleClass('hilight');
  }
);

// AJAX Example
$('.node_read_more a').click(function() {
  var url = $(this).attr('href');
  var link = this;

  $.ajax({
    url: url,
    success: function(data) {
      var $fullContent = $('#content-output .content', data);
      var html = $fullContent.html();
      $(link).closest('div.node').find('div.content').html(html);
      $(link).hide();
    }
  });
  return false;
});

In its short history, jQuery has revolutionized front-end web development, making it faster, easier, and more rewarding to write JavaScript – allowing easier selection and manipulation of HTML elements, and ensuring that scripts work across the ever increasing landscape of browsers and operating systems.

Nate Haug and Jeff Robbins show many hands-on examples demonstrating how to use jQuery's simple syntax to choose and manipulate HTML elements, traverse the document object model (DOM), and to attach event handlers which can react to user interaction with the page.

In this video, Jeff and Nate introduce themselves and the agenda for this series, including Selectors, Effects, and AJAX.

YAML, which stands for YAML Ain't Markup Language, is a human-readable data serialization format that's been widely adopted in a variety of use cases in Drupal. Anyone wanting to write modules, or themes, for Drupal will need to understand YAML syntax. Even site builders are likely to encounter YAML at least in passing as YAML is the data-serialization format of choice for Drupal's configuration management system. Good thing it's pretty easy to learn even with the most basic of programming backgrounds.

This tutorial will look at the YAML data format and provide examples of how to write and read YAML. Starting with an introduction to the language's syntax and some of the strengths of YAML. Then looking at the difference between scalar data types like strings and integers, and collection data types like lists and associative arrays.

Since YAML in the Drupal world is read into PHP and ultimately becomes a PHP data structure that we can use in our own code we'll also look at how the YAML we write in a .yml file is represented in PHP data types. To do this we'll use the YAML Sandbox module that provides a handy textarea into which we can type YAML and have it parsed into PHP data structures.

Learning objectives

• Explain what YAML is and its strengths as a data serialization format
• Create scalar key/value pairs in YAML
• Create lists, and associative arrays using YAML collections
• Understand how the YAML you write is represented in PHP

Tips

• In Drupal, use the .yml extension and not .yaml
• Ensure your code editing application is configured to use spaces (preferably 2 spaces, as per Drupal coding standards), not the tab character when the TAB key is pressed. If you have tab characters in a YAML file within a Drupal environment, a fatal PHP error will be thrown and you'll see a White Screen of Death (WSOD).
• Copy and paste from an existing YAML file to ensure the formatting is correct, and edit from there.

Additional resources

• http://www.yaml.org
• YAML Sandbox module
• Find other tutorials and external resources related to YAML on our YAML topic page (Drupalize.Me)

Set up a local development environment to practice Drupal theme development exercises in our course, Hands-On Theming Exercises for Drupal.

By the end of this tutorial, you should be able to:

• Install Drupal on your computer, so you can edit files in your theme.
• Generate dummy content, so that you have different kinds of pages to theme.

It's time to create the bare-bones structure for a new theme on your site. You should try to complete this exercise based what you've learned from the tutorial prerequisites listed below. The video at the end of this tutorial will walk you through the implementation of this exercise if you need some help. In this exercise, we'll:

• Create an info file that describes a custom theme to Drupal with the regions listed below (we're going to name ours "reboot").
• Enable, and view, a bare-bones custom theme.

By the end of this exercise, you should feel comfortable starting a theme using several methods.

To add CSS or JavaScript files or libraries to your site, you can attach them as asset libraries in your theme. In this exercise, you'll create 2 asset libraries and attach them globally via your theme's info file. In this tutorial, we'll pull in the CSS and JavaScript from the popular Bootstrap framework so that we can make use of its layout utility classes later on. We'll also add a custom CSS file that contains global styles for our site, like setting the page background color.

If you want to try and complete this on your own first you'll need to:

• Add the Bootstrap CSS and JavaScript files to your theme.
• Define an asset library using a THEMENAME.libraries.yml file in your theme.
• Tell Drupal to attach your asset library so that the CSS and JavaScript files it represents are included in the page.

Once that's done your site won't look all that different. But if you view the page source, or look closely, you should see that the Bootstrap files are included along with any CSS rules you placed into your custom style sheet.

Note: Since this course is focused on teaching the Drupal aspects of theme development, and not on writing CSS, we're using the Bootstrap CSS. Feel free to use the framework or library of your choice if you don't want to use Bootstrap.

You should try to complete the exercise steps on your own and use the video to help guide you if you get stuck.

At the end of this exercise, you'll find a video walk-through of the solution.

Drupal has a few handy settings you can tweak to make developing themes a little more intuitive and a lot more awesome. In this tutorial, we'll practice manually setting up our environment for theme development by:

• Disabling some caches
• Turning off CSS and JS aggregation
• Turning on the Twig debug service

By the end of this tutorial, you'll have practiced setting up your environment for theme development.

In order to change Drupal's default markup you need to override template files. The page template controls the overall layout of your theme, including the placement of regions. You should practice the exercise following the written instructions below. Use the video walk-through to help if you get stuck.

In this exercise, we'll:

• Override the currently used page.html.twig template file.
• Modify the content of the file to include the regions defined in the theme's .info.yml file.
• Wrap the regions in the page template file with HTML markup using CSS classes from Bootstrap to achieve the example layout.

By the end of this tutorial, you'll gain practice creating a custom layout in a page template file.

The available dynamic tokens or variables vary from template to template. Each page is built from a set of templates.

In this exercise, we'll:

• Override and name the node template file so that it will only affect Article nodes on our Drupal site.
• Inspect the available variables.
• Customize the markup.
• Use the Twig filter without.

We recommend that you try to work through the exercise yourself, and refer to the video if you need help.