WordPress Theme Development Tutorial Manual - Includes CSS and JavaScript Files
When creating a theme, we may need to create other stylesheets or JavaScript files. However, keep in mind that your theme is not the only thing active on a WordPress site, there are many other plugins as well. For them to work harmoniously together, both the theme and the plugins need to load scripts and stylesheets using standard WordPress methods, which ensures that the site stays up and running efficiently without compatibility issues.
Adding scripts and styles to WordPress is a fairly simple process. Essentially, we'll create a function that queues up all scripts and styles. When queuing up scripts or stylesheets, WordPress creates a handle and path to find the file and any dependencies it may have (such as jQuery), and then we add custom CSS and JS files using a hook that inserts the inserted scripts and stylesheets into the queue.
Inserting scripts and styles
The proper way to add scripts and styles to a theme is to add them to the functions.php Documentation.style.css is a file that is required by all themes, in addition to other files that we may need to add to extend the functionality of the theme.
Inserting scripts and styles is based on:
- utilization
wp_enqueue_script()Inserting JS files into the queue - utilization
wp_enqueue_style()Inserts CSS files into the queue.
CSS Style Sheets
Our CSS stylesheets are used to customize the appearance of the theme, and the stylesheets are also the files that store the theme's meta information. As a result, the Each theme requires style.css file The
We should. wp_enqueue_style Load stylesheets instead of adding them directly to the header.phpfile. When loading the main stylesheet, we can insert it into the queue in functions.php.
stick style.css file
wp_enqueue_style( 'style', get_stylesheet_uri() );The code above will look for a stylesheet named "style.css" and load it.
The basic function of the style queuing function is:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );We can include the following parameters:
- $handle The name of the style sheet.
- $src The location of the style file, the rest of the parameters are optional.
- $deps Indicates whether this stylesheet depends on another stylesheet. If this is set, this stylesheet will not be loaded unless the stylesheet it depends on is loaded first.
- $ver: Version number.
- $media:You can specify the type of media to load this stylesheet on, such as 'all', 'screen', 'print' or ' handheld'.
So, if we need to load the stylesheet named "slider.css" in the folder named "CSS" in the theme root directory, we can use the following code:
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', false,'1.1','all');JavaScript Script
When loading JavaScript scripts, we should use the wp_enqueue_script Functions. This ensures that the script is loaded correctly and the appropriate version is cached in the browser, in addition to this we can use conditional functions to place scripts on demand in WordPress.
wp_enqueue_scriptUse similar syntax wp_enqueue_style. The basic usage of this function is as follows:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer) ;- $handle: The name of the script.
- $src: Where the script file is located.
- $deps: An array of dependent scripts, such as jQuery.
- $ver: The version number of the script.
- $in_footer:is a boolean (true / false) that allows us to place the script in the footer of the HTML document instead of in the
<head>so that it doesn't delay loading the DOM tree.
The real working code of the script is as follows:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);Comment Reply Script
WordPress comments have a lot of features by default, including nested comments and enhanced comment forms. In order for comments to work properly, we need to load some JavaScript, but since there are some options that need to be defined in this JavaScript script, we should add this script to every theme that uses comments.
The proper way to include comment reply scripts is to use conditional tags to check for the presence of certain conditions so that the script is not loaded unnecessarily. For example, we need the is_singular Have the script only load in a single page, and only when the user "enables nested comments". So the code that actually loads the comment script looks like the following:
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' ) ;
}WordPress will load the comment reply script if the user has enabled comments and we are on the post page, otherwise it will not load.
Merge Queue Functions
For ease of maintenance, it's a good idea to combine all queuing scripts and style operations into a single function, and then use thewp_enqueue_scriptsfunction to call them , as shown below:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' ); }Default scripts included with WordPress
By default, WordPress includes many popular scripts commonly used by web developers, as well as scripts used by WordPress itself.
In order to ensure the timeliness of the content update, this part is no longer translated, the need for friends can go to theOfficial Theme Development ManualLearn about it in the relevant section of the
