Theme Development from Scratch: Adding CSS and JavaScript Files

When it comes to creating a WordPress theme from scratch, understanding how to correctly add CSS and JavaScript files is critical to ensuring your website looks attractive and functions efficiently. In this chapter, we'll explore best practices for including styles and scripts in your custom WordPress theme.

Understanding the Structure of a WordPress Theme

Before we start adding CSS and JavaScript files, it's important to understand the basic structure of a WordPress theme. A typical theme contains the following files:

style.css - The main style file, which defines the visual appearance of the theme.
functions.php - A PHP file that allows you to add functionality and features to the theme.
index.php - The default template file that displays the site's content.
header.php and footer.php - Files that generally contain the website's header and footer, respectively.
Other specific template files for pages, posts, categories, etc.

Adding CSS Files

To add CSS files to your theme, you must use the wp_enqueue_style() function. This function manages style dependencies and ensures that files are loaded in the correct order. Here is an example of how you can add your main CSS file:

<?php
function my_theme_styles() {
  wp_enqueue_style('my-main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_styles');
?>

In the example above, the my_theme_styles() function is created and attached to the wp_enqueue_scripts hook. The get_stylesheet_uri() function returns the URL of the style.css file that is located in the theme's root directory.

You can also add other CSS files, such as a reset file or framework files like Bootstrap, as follows:

<?php
function my_theme_styles() {
  // Reset CSS
  wp_enqueue_style('my-reset', get_template_directory_uri() . '/css/reset.css');
  
  // Bootstrap CSS
  wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
  
  // Main style
  wp_enqueue_style('my-main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_styles');
?>

Adding JavaScript Files

Similar to CSS files, the wp_enqueue_script() function is used to add JavaScript files to your theme. This function manages script dependencies and helps avoid conflicts between different JavaScript libraries. See an example of how to add a JavaScript file:

<?php
function my_theme_scripts() {
  wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>

In the code above, the my_theme_scripts() function includes a JavaScript file called my-script.js located in the /js/ folder of the your theme. Additional parameters specify dependencies (in this case none), the version of the script (faked so as not to use a specific version), and whether the script should be loaded in the footer (true for the footer, false for the header).

To add popular libraries such as jQuery or Bootstrap JavaScript, you can do the following:

<?php
function my_theme_scripts() {
  // jQuery (already included in WordPress)
  wp_enqueue_script('jquery');
  
  // Bootstrap JavaScript
  wp_enqueue_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), null, true);
  
  // Your custom script
  wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>

Managing Dependencies

An important aspect when adding CSS and JavaScript is managing dependencies. For example, if your custom script depends on jQuery, you must indicate this in the wp_enqueue_script() function to ensure that jQuery is loaded before your script. This is done by passing an array of dependencies as the function's third parameter, as shown in the previous example.

Final Considerations

Adding CSS and JavaScript files is an essential part of WordPress theme development. By using the wp_enqueue_style() and wp_enqueue_script() functions, you ensure that files are loaded correctly and that dependencies aremanaged effectively. Remember to always minify your CSS and JavaScript files to improve your site's performance and follow WordPress development best practices to ensure a robust and reliable theme.

Now answer the exercise about the content: